깊으면 파지 말고 나눠라

KRDS CP-093 — 2개 이상의 수준에 대한 탐색이 필요한 경우 헤더가 있는 사이드메뉴를 사용하고, 본문에 보조적인 탐색 수단을 제공하고 있다.

0. 들어가며 — 2수준을 넘는 깊이의 해법

이번 213편은 앞 편(CP-092)의 후속입니다. 2수준 이상 탐색이 필요하면 헤더가 있는 사이드 메뉴를 쓰고, 본문에 보조 탐색 수단을 제공하라는 규칙이죠.

CP-092는 사이드 메뉴 펼침을 2수준으로 제한했습니다. 그런데 정보 구조가 정말 그보다 깊을 때는? 사이드 메뉴를 3수준으로 더 파는 게 아니라 — 탐색을 두 군데로 나눕니다. 깊은 한 수준은 사이드 메뉴에 ’헤더’를 붙여 맥락을 주고, 더 깊은 탐색은 본문 안의 보조 수단으로 옮기는 것이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 헤더 사이드 + 본문 보조

CP-093 (컴포넌트 > 사이드 메뉴) “2개 이상의 수준에 대한 탐색이 필요한 경우 헤더가 있는 사이드메뉴를 사용하고, 본문에 보조적인 탐색 수단을 제공하고 있다.”

탐색 깊이가 사이드 메뉴 한도(2수준)를 넘는 경우, ①사이드 메뉴에 현재 묶음을 알려주는 헤더를 붙이고, ②더 깊은 탐색은 본문 안의 보조 내비게이션(탭·링크 목록·인페이지 내비 등)으로 분산하라는 뜻입니다.

정리: 깊으면 사이드 메뉴엔 헤더로 맥락을 주고, 더 깊은 탐색은 본문 보조 수단으로 나눠라. 이게 CP-093입니다.

2. 왜 헤더를 붙이고 본문으로 나누나

CP-092에서 봤듯 사이드 메뉴를 3수준 이상으로 깊게 만들면 미로가 됩니다. 그렇다고 깊은 정보를 표현 못 하는 건 아니죠 — 핵심은 ‘한 컴포넌트에 다 욱여넣지 말고 역할을 나누는 것’ 입니다. CP-093은 두 가지 장치를 제시합니다.

① 헤더가 있는 사이드 메뉴. 탐색 묶음이 깊고 클 때, 사이드 메뉴 맨 위에 헤더(제목)를 둡니다. 예를 들어 ‘정책정보’ 라는 헤더 아래 보도자료·입법예고·고시·간행물을 나열하면, 사용자는 ’지금 보는 사이드 메뉴가 정책정보 묶음의 것’임을 압니다. 헤더가 없으면 메뉴 항목만 떠 있어 ’이게 무슨 묶음이지?’가 불명확하죠. 헤더는 사이드 메뉴에 맥락(어떤 상위 묶음인지)을 부여해, 깊은 구조에서도 현재 위치 감각을 유지하게 합니다. 이 헤더는 시맨틱하게는 <h2>~<h6> 제목으로 마크업되어 스크린 리더의 구조 파악도 돕습니다(CP-099와 연결).

② 본문의 보조 탐색 수단. 2수준을 넘는 더 깊은 탐색은 사이드 메뉴 대신 본문 영역으로 옮깁니다. 예를 들어 사이드에서 ’간행물’을 선택해 들어온 화면의 본문 상단에, 간행물의 하위 분류(연도별·주제별 등)를 탭이나 링크 목록으로 펼치는 식이죠. 이렇게 하면 깊은 계층이 사이드 메뉴 하나에 중첩되지 않고, ’사이드(상위 탐색) + 본문(하위 탐색)’으로 수평 분산됩니다. 각 영역은 2수준 이내로 단순하게 유지되면서도, 전체적으로는 깊은 구조를 다 표현하죠.

이 분산의 이점은 — 각 내비게이션이 단순함을 유지하면서(미로 방지), 사용자에게 ‘큰 줄기는 사이드에서, 세부는 본문에서’ 라는 명료한 역할 분담을 준다는 점입니다. 한 화면에서 모든 깊이를 다루려 욕심내면 복잡해지지만, 역할을 나누면 각자 깔끔하죠. 이는 CP-083(브레드크럼이 메뉴를 대체 못 함)에서 본 ‘내비게이션은 역할별로 공존’ 원칙의 연장입니다 — 깊은 구조일수록 여러 탐색 수단이 각자 역할로 협력해야 합니다.

정리하면 — 2수준을 넘는 깊이는 사이드 메뉴를 더 파서가 아니라, 헤더로 맥락을 주고 본문 보조 탐색으로 나눠 해결합니다.

3. 점검 / 개선

무엇을 점검하나

헤더 존재 — 깊은 사이드 메뉴에 묶음을 알리는 헤더(제목)가 있는가.

본문 보조 탐색 — 2수준 초과 깊이가 본문 내 보조 수단으로 분산됐는가.

각 영역 단순성 — 사이드·본문 각각이 2수준 이내로 유지되는가.

개선 방향

사이드 메뉴 상단에 <h2>~<h6> 헤더 추가(CP-099 시맨틱 연계).

깊은 하위 분류는 본문 탭·인페이지 내비·링크 목록으로 이전.

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

역할	책임
기획/IA	깊은 구조의 사이드/본문 역할 분담 설계
디자이너/개발	헤더 있는 사이드 + 본문 보조 탐색 구현

기관 유형	CP-093 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (2수준 초과 탐색 필요 시)

깊은 정보 구조를 가진 대규모 기관 사이트에서 특히 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 깊은 사이드 메뉴에 묶음을 알리는 헤더가 있나요?

□ 2수준 초과 깊이를 본문 보조 탐색으로 나눴나요?

□ 사이드·본문 각각이 2수준 이내로 단순한가요?

❓ FAQ

Q1. 그냥 사이드 메뉴를 3수준으로 만들면 안 되나요? 미로가 됩니다(CP-092). 헤더로 맥락을 주고 깊은 탐색은 본문으로 분산하는 게 정답입니다. Q2. ‘본문 보조 탐색’은 구체적으로 뭔가요?** 본문 상단의 탭, 인페이지 내비(앵커 목차), 하위 분류 링크 목록 등입니다. 다음 컴포넌트 그룹 ’콘텐츠 내 탐색’(CP-106~)과도 이어집니다. Q3. 헤더는 디자인 요소인가요?** 시각 제목이자 <h2>~<h6> 시맨틱 마크업이어야 스크린 리더 구조 파악도 돕습니다(CP-099).

6. 마무리

CP-093의 메시지:

깊으면 파지 말고 나눠라 — 헤더 있는 사이드 메뉴 + 본문 보조 탐색.

2수준을 넘는 깊이는 사이드 메뉴를 더 파면 미로가 됩니다. 대신 사이드엔 헤더로 맥락을 주고, 더 깊은 탐색은 본문 보조 수단으로 분산하죠. 각 영역은 단순하게, 전체는 깊게 — 역할 분담이 핵심입니다. 다음 편은 펼침 영역의 화면 경계 처리 — 뷰포트 밖으로 나가지 않기입니다.

다음 편 예고 ▶ 「214. (CP-094) 하위 메뉴 표시를 위해 확장된 영역이 뷰 포트 바깥으로 표시되지 않게 구현 하고 있다.」

ViewCheck는 깊은 탐색의 헤더 사이드 메뉴·본문 보조 탐색 분산을 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 사이드 메뉴(Side navigation) 가이드 — https://www.krds.go.kr/html/site/component/component_08.html

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

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