상위와 하위가 한눈에

KRDS CP-095 — 메뉴의 계층 구조를 명확하게 구분하여 표현하고 있다.

0. 들어가며 — 들여쓰기 하나로 길이 보인다

이번 215편은 사이드 메뉴의 계층 구조(상위-하위)를 시각적으로 명확하게 구분하라는 규칙입니다.

사이드 메뉴는 대분류(1수준)와 소분류(2수준)를 함께 보여줍니다. 그런데 이 둘이 같은 들여쓰기·같은 크기·같은 스타일로 평평하게 나열되면 — 무엇이 상위이고 무엇이 하위인지 구분이 안 되죠. 사용자는 메뉴의 구조를 읽지 못해 혼란스럽습니다. CP-095는 들여쓰기·크기·스타일 등으로 계층을 또렷이 구분해 보여주라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 계층 명확 구분

CP-095 (컴포넌트 > 사이드 메뉴) “메뉴의 계층 구조를 명확하게 구분하여 표현하고 있다.”

사이드 메뉴의 상위 항목과 하위 항목을 시각적으로 뚜렷이 구분(들여쓰기, 글자 크기·굵기, 색, 아이콘, 영역 구분 등)해, 사용자가 계층 관계를 한눈에 읽게 하라는 뜻입니다.

정리: 상위-하위 계층을 시각적으로 또렷이 구분해 표현하라. 이게 CP-095입니다.

2. 왜 계층을 시각적으로 구분하나

사이드 메뉴의 가치는 ‘정보 구조를 한눈에 보여주는’ 데 있습니다. 사용자는 메뉴를 훑으며 “이 섹션 아래에 이런 하위 화면들이 있고, 그중 이건 또 더 하위구나” 하는 구조 지도를 머릿속에 그리죠. 이 지도가 그려지려면 — 화면 위에서 상위와 하위가 시각적으로 달라 보여야 합니다. 둘이 똑같이 보이면 구조 정보가 사라져, 메뉴는 그냥 ’평평한 링크 목록’이 되어 버립니다.

계층을 구분하는 시각 장치는 여러 가지이고, 보통 여러 개를 조합합니다:

들여쓰기(indentation) — 하위 항목을 오른쪽으로 들여 써, 부모에 종속됨을 표현. 가장 직관적인 계층 단서.

글자 크기·굵기 — 상위는 크거나 굵게, 하위는 작거나 보통으로.

색·톤 — 상위는 진하게, 하위는 약간 연하게.

아이콘·구분선 — 펼침 화살표, 그룹 구분선, 들여쓰기 가이드선 등.

영역(헤더) — 상위 묶음에 헤더(CP-093)를 두어 그룹임을 표시.

이 장치들이 어우러져 사용자는 별 노력 없이 ‘아, 이건 대분류, 이건 그 아래 소분류’를 읽습니다. 게슈탈트의 ’공통 영역·근접성’ 원리도 작동하죠 — 들여쓰기로 묶이고 가까이 배치된 하위 항목들은 한 부모의 자식으로 인지됩니다.

주의할 점 — 이 시각 구분은 충분히 명확해야 합니다. 들여쓰기가 2~3px로 미세하거나, 크기 차이가 거의 없으면 계층이 안 읽히죠. 동시에 색에만 의존하지 말아야 합니다(KWCAG ‘색 무관 인식’) — 색으로만 상위/하위를 나누면 색각 이상 사용자가 구분 못 하므로, 들여쓰기·크기 등 형태 단서를 함께 써야 합니다.

그리고 이 ‘시각적 계층 구분’은 시맨틱 마크업(CP-099)과 짝을 이룹니다 — CP-095가 눈에 보이는 계층이라면, CP-099는 <h2>~<h6>, <ul>, <li>로 스크린 리더에 전달되는 계층이죠. 시각·비시각 사용자 모두에게 같은 구조 정보를 줘야 완전합니다. CP-095는 그중 ’시각’ 채널을 담당합니다.

3. 점검 / 개선

무엇을 점검하나

상위-하위 구분 — 대분류와 소분류가 시각적으로 또렷이 다른가.

충분한 명확성 — 들여쓰기·크기 차이가 미세하지 않고 분명한가.

색 비의존 — 색만이 아니라 들여쓰기·크기 등 형태 단서도 쓰는가.

개선 방향

하위 항목 들여쓰기 + 글자 크기/굵기/톤 차등 + 그룹 구분선·헤더 조합.

시맨틱 마크업(CP-099)으로 비시각 사용자에게도 계층 전달.

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

역할	책임
디자이너	계층 시각 구분(들여쓰기·크기·톤) 정의
퍼블리셔/개발	시각 구분 + 시맨틱 마크업 구현

기관 유형	CP-095 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (사이드 메뉴 사용 시)

2수준 계층을 가진 사이드 메뉴를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 상위(대분류)와 하위(소분류)가 시각적으로 또렷이 구분되나요?

□ 들여쓰기·크기 차이가 미세하지 않고 분명한가요?

□ 색만이 아니라 들여쓰기·크기 등 형태 단서도 쓰나요?

❓ FAQ

Q1. 들여쓰기만 하면 충분한가요? 들여쓰기는 핵심 단서지만, 크기·굵기·톤·구분선을 함께 쓰면 더 명확합니다. Q2. 색으로 상위/하위를 나눠도 되나요? 색만으론 색각 이상 사용자가 구분 못 합니다. 형태 단서를 함께 써야 합니다. Q3. 스크린 리더에도 계층이 전달되나요? 시각 구분만으론 부족합니다. <h2>~<h6>·<ul>·<li> 시맨틱 마크업(CP-099)으로 전달해야 합니다.

6. 마무리

CP-095의 메시지:

상위와 하위가 한눈에 — 메뉴 계층을 시각적으로 명확히 구분하라.

사이드 메뉴는 정보 구조 지도입니다. 상위와 하위가 똑같이 보이면 구조가 사라져 평평한 목록이 되죠. 들여쓰기· 크기·톤·구분선을 조합해 계층을 또렷이 보여야 하고, 색에만 의존하지 말아야 합니다. 시맨틱 마크업(CP-099)과 함께 시각·비시각 사용자 모두에게 구조를 전달합니다. 다음 편은 모바일에서의 사이드 메뉴 처리입니다.

다음 편 예고 ▶ 「216. (CP-096) [모바일] 화면 너비가 충분하지 않은 경우 사이드 메뉴를 표시하지 않는다.」

ViewCheck는 사이드 메뉴의 계층 구조가 시각적으로 명확히 구분되는지를 진단합니다.

📚 참고 출처

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

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

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