정해진 순서대로

KRDS CP-018 — 건너뛰기 링크가 항상 헤더에서 가장 먼저 제공되고 있으며, 서비스 아이덴티티·유틸리티 그룹/드롭다운 메뉴·검색 버튼·메인 메뉴 순으로 컴포넌트 요소들 간 상대적인 순서가 일관성을 가지도록 배치하고 있다.

0. 들어가며 — 순서가 곧 사용성

이번 138편은 헤더 안 요소들의 순서를 규정하는 규칙입니다.

헤더에는 여러 요소가 모여 있습니다 — 건너뛰기 링크, 로고(서비스 아이덴티티), 유틸리티(로그인·언어 등), 검색, 메인 메뉴. 이들을 아무 순서로나 늘어놓으면 사용자도, 키보드·스크린리더도 혼란스럽죠. CP-018은 이 요소들의 상대적 순서를 표준대로, 일관되게 배치하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 정해진 순서

CP-018 (컴포넌트 > 헤더) “건너뛰기 링크가 항상 헤더에서 가장 먼저 제공되고 있으며, 서비스 아이덴티티 → 유틸리티 그룹/드롭다운 메뉴 → 검색 버튼 → 메인 메뉴 순으로 컴포넌트 요소들 간 상대적인 순서가 일관성을 가지도록 배치하고 있다.”

헤더 요소들을 건너뛰기 링크 → 서비스 아이덴티티(로고) → 유틸리티 → 검색 → 메인 메뉴 순서로 일관되게 배치하라는 뜻입니다.

정리: 헤더 요소를 정해진 상대적 순서대로 일관되게 배치하라. 이게 CP-018입니다.

2. 왜 순서가 중요한가

여기서 말하는 ’순서’는 두 가지 의미를 갖습니다 — DOM(코드) 순서와 시각적 순서.

① 건너뛰기 링크가 항상 가장 먼저

건너뛰기 링크는 머리말을 건너뛰는 장치라, 페이지·헤더에서 가장 먼저(첫 요소) 와야 합니다(CP-006·029에서도 다룸). 키보드 사용자가 Tab을 누르면 가장 먼저 건너뛰기 링크가 잡혀야, 반복 요소를 건너뛸 수 있죠. 그래서 헤더의 첫 요소는 무조건 건너뛰기 링크입니다.

② 그다음 정해진 순서

건너뛰기 링크 이후로는 — 서비스 아이덴티티(로고)가 먼저 와서 ’여기가 어디인지’를 알리고, 이어 유틸리티 그룹(로그인·언어 등 보조 기능), 검색 버튼, 마지막으로 메인 메뉴 순서입니다. 이 순서에는 논리가 있습니다 — 정체성(로고) → 보조 도구(유틸리티·검색) → 핵심 내비게이션(메인 메뉴)으로, 사용자가 헤더를 인지하는 자연스러운 흐름을 따르죠.

③ 일관성

가장 중요한 건 ’일관성’입니다. 모든 정부 사이트가 같은 순서를 따르면, 사용자는 어느 사이트에서든 같은 위치·같은 순서로 헤더 요소를 찾을 수 있습니다. 또 키보드 사용자는 Tab 순서가 일관돼 예측 가능하게 탐색하고, 스크린리더 사용자는 헤더 구조를 일관되게 이해하죠. ’DOM 순서 = 키보드 탐색 순서 = 시각 순서’가 표준대로 정렬돼야, 모든 사용자가 일관된 경험을 합니다(레이아웃 편의 읽기 순서 원리).

만약 사이트마다 순서가 제각각이면 — A는 검색이 먼저, B는 메뉴가 먼저라면 — 사용자는 매번 헤더를 새로 탐색 해야 하고, 키보드 탐색도 예측 불가능해집니다. CP-018은 이 혼란을 막기 위해 표준 순서를 못 박는 것이죠.

3. 점검 / 개선

무엇을 점검하나

건너뛰기 링크 최우선 — 헤더의 첫 요소가 건너뛰기 링크인가.

표준 순서 — 로고→유틸리티→검색→메인 메뉴 순인가.

DOM=시각 일치 — 코드 순서와 시각 순서, 키보드 Tab 순서가 일치하는가.

Before / After

<!-- ✅ 헤더 요소 표준 순서 --> <header> <a class="skip-link">본문 바로가기</a> <!-- 1. 건너뛰기 --> <a class="logo">서비스명</a> <!-- 2. 서비스 아이덴티티 --> <div class="utility">로그인 | 언어</div> <!-- 3. 유틸리티 --> <button class="search">검색</button> <!-- 4. 검색 --> <nav class="main-menu">...</nav> <!-- 5. 메인 메뉴 --> </header>

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

역할	책임
퍼블리셔/개발	헤더 요소를 표준 순서로 마크업(DOM 순서)
접근성 담당	키보드 Tab 순서·스크린리더 순서 검수

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 헤더의 첫 요소가 건너뛰기 링크인가요?

□ 로고→유틸리티→검색→메인 메뉴 순서인가요?

□ DOM 순서와 키보드 Tab 순서가 일치하나요?

❓ FAQ

Q1. 시각적으로만 순서를 맞추면 되나요? 아닙니다. DOM(코드) 순서도 표준을 따라야 키보드·스크린리더가 일관 되게 탐색합니다. CSS로 시각 순서만 바꾸면 안 됩니다. Q2. 검색을 메뉴 뒤에 두면 안 되나요? 표준 순서(검색→메인 메뉴)를 따르는 것이 일관성·사용성에 좋습니다. Q3. KRDS를 채택하면 자동인가요? 표준 헤더는 이 순서로 요소를 배치합니다.

6. 마무리

CP-018의 메시지:

정해진 순서대로 — 건너뛰기 링크가 먼저, 그다음 로고·유틸리티·검색·메뉴. 일관성이 예측 가능성을 만든다.

헤더 요소는 건너뛰기 링크를 가장 먼저, 이어 로고→유틸리티→검색→메인 메뉴 순으로 일관되게 배치합니다. DOM·시각·키보드 순서가 표준대로 정렬돼야, 모든 사용자가 예측 가능하게 헤더를 탐색하죠. 순서가 곧 사용성입니다.

다음 편은 헤더의 간결성을 다룹니다. CP-019 — “핵심적인 정보만 간결하게 제공한다.”

다음 편 예고 ▶ 「139. (CP-019) 핵심적인 정보만 간결하게 제공하고 있다.」

ViewCheck는 헤더 요소들이 표준 순서로 일관되게 배치됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 헤더(Header) 가이드 — https://www.krds.go.kr/html/site/component/component_03.html

WCAG 2.1 SC 2.4.3 Focus Order

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

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