가로가 세로로 바뀌어도 순서는 그대로

KRDS CP-042 — [모바일] 화면 너비가 충분하지 않아 병렬적으로 배치되었던 푸터 내부 요소가 수직 배열로 변경되더라도 서비스 로고, 연락처, 유틸리티 링크, 정책 링크, 저작권 정보의 순서로 배치하고 있다.

0. 들어가며 — 모바일에서도 순서는 지킨다

이번 162편은 모바일에서 푸터 요소가 수직 배열로 바뀌어도 표준 순서를 유지하는 규칙입니다.

데스크톱에서 푸터 요소들은 가로로(병렬) 배치되지만, 모바일에서는 화면이 좁아 세로로(수직) 쌓입니다. CP-042는 이 전환에서도 154편의 표준 순서(로고→연락처→유틸리티→정책→저작권)를 그대로 유지하라고 규정하죠. 반응형 전환 시 순서가 흐트러지지 않게 하는 것입니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 수직 배열에서도 같은 순서

CP-042 (컴포넌트 > 푸터) “[모바일] 화면 너비가 충분하지 않아 병렬적으로 배치되었던 푸터 내부 요소가 수직 배열로 변경되더라도 서비스 로고 → 연락처 → 유틸리티 링크 → 정책 링크 → 저작권 정보의 순서로 배치하고 있다.”

모바일에서 푸터 요소가 세로로 쌓일 때도, 154편의 표준 순서를 동일하게 유지하라는 뜻입니다.

정리: 모바일 수직 배열에서도 푸터 표준 순서를 유지하라. 이게 CP-042입니다.

2. 왜 반응형 전환에서 순서가 흐트러지나

CP-034에서 푸터 정보의 표준 순서(로고→연락처→유틸리티→정책→저작권)를 정했습니다. 이 순서는 데스크톱에서는 가로 배치로 보이죠.

문제는 반응형 전환에서 생깁니다. 화면이 좁아지면 가로로 나열됐던 요소들이 세로로 쌓이는데(병렬→수직), 이때 CSS 구현 방식에 따라 순서가 뒤섞일 수 있습니다. 예를 들어 — Flexbox나 Grid에서 데스크톱은 보기 좋게 배치하려고 시각 순서를 바꿨는데(DOM 순서와 다르게), 모바일에서 세로로 쌓으니 DOM 순서대로 나와 표준 순서가 깨지는 경우죠. 또는 컬럼 레이아웃이 모바일에서 접히면서 의도치 않은 순서로 재배열되기도 합니다.

CP-042는 이런 일이 없도록, 모바일 수직 배열에서도 로고→연락처→유틸리티→정책→저작권 순서를 보장하라고 못 박습니다. 즉, 화면 크기와 무관하게 사용자가 만나는 순서는 항상 같아야 한다는 것이죠.

이것이 중요한 이유는 — 표준 순서의 일관성(154편)이 데스크톱·모바일 모두에서 지켜져야 사용성·예측 가능성이 완성되기 때문입니다. 데스크톱에서는 표준 순서인데 모바일에서 뒤죽박죽이면, 같은 사이트를 기기에 따라 다르게 경험하게 되죠. 특히 저작권은 항상 맨 마지막이어야 하는데(154편), 반응형 전환에서 중간에 끼면 어색합니다.

구현 측면에서 — 가장 안전한 방법은 DOM 순서 자체를 표준 순서로 두는 것입니다. DOM이 표준 순서면, 모바일 에서 세로로 쌓아도(별도 순서 조작 없이) 자연히 표준 순서가 됩니다. CSS order 속성으로 시각 순서를 억지로 바꾸는 것을 피하고, DOM=표준 순서를 유지하면 반응형에서도 순서가 보장되죠. 이는 헤더 순서(CP-018)의 ‘DOM 순서 = 시각 순서’ 원리와 같습니다.

3. 점검 / 개선

무엇을 점검하나

모바일 순서 — 모바일 세로 배열에서 표준 순서가 유지되는가.

저작권 마지막 — 모바일에서도 저작권이 맨 끝인가.

DOM 순서 — DOM이 표준 순서로 돼 있는가(order 남용 없음).

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
퍼블리셔/개발	반응형 전환 시 표준 순서 유지 구현(DOM=표준 순서)
QA	모바일 푸터 순서 검수

기관 유형	CP-042 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (반응형 지원)

행정·공공기관 디지털 정부서비스 = 전부 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모바일 세로 배열에서 표준 순서(로고→연락처→유틸→정책→저작권)가 유지되나요?

□ 모바일에서도 저작권이 맨 끝인가요?

□ DOM이 표준 순서로 돼 있나요?

❓ FAQ

Q1. 왜 모바일에서 순서가 깨지나요? CSS order로 시각 순서를 바꾸거나 컬럼이 접히면서 의도치 않게 재배열 될 수 있습니다. DOM=표준 순서면 안전합니다. Q2. 데스크톱과 모바일 순서가 달라도 되나요? 안 됩니다. 화면 크기와 무관하게 같은 순서여야 일관성이 유지됩니다. Q3. KRDS를 채택하면 자동인가요? 표준 반응형 푸터는 순서를 유지합니다.

6. 마무리

CP-042의 메시지:

가로가 세로로 바뀌어도 순서는 그대로 — 반응형 전환에서도 표준 순서를 보장한다.

모바일에서 푸터 요소가 세로로 쌓일 때도 표준 순서(로고→연락처→유틸→정책→저작권)를 유지해야, 데스크톱·모바일 모두에서 일관된 경험이 됩니다. DOM 순서를 표준대로 두면(order 남용 없이) 반응형에서도 순서가 자연히 보장 되죠.

다음 편은 푸터의 시맨틱 랜드마크를 다룹니다. CP-043 — “푸터의 모든 요소는 <footer> 내부에 배치해 랜드마크 정보가 스크린리더로 전달되게 한다.”

**다음 편 예고 ▶ 「163. (CP-043) 푸터의 모든 요소는

내부에 배치하여 주요 랜드마크 정보가 스크린 리더로 전달될 수 있도록 구현하고 있다.」**

ViewCheck는 모바일 푸터에서 표준 순서가 유지되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 푸터(Footer) 가이드 — https://www.krds.go.kr/html/site/component/component_04.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준