깊어야 둘까지

KRDS CP-092 — 메뉴의 계층 구조는 최대 2개 수준까지 사용하고 있다.

0. 들어가며 — 너무 깊으면 길을 잃는다

이번 212편은 사이드 메뉴의 계층 구조를 최대 2개 수준까지만 쓰라는 규칙입니다.

사이드 메뉴는 하위 메뉴를 펼쳐 보여줍니다 — 1수준(대분류) 아래 2수준(소분류)까지. 그런데 여기에 3수준, 4수준 까지 중첩하면 — 메뉴가 끝없이 들여쓰기되어 사용자는 ‘내가 몇 단계나 들어왔지?’ 하고 길을 잃죠. CP-092는 사이드 메뉴 안의 펼침 깊이를 2수준으로 제한해, 탐색을 단순하게 유지하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 최대 2수준

CP-092 (컴포넌트 > 사이드 메뉴) “메뉴의 계층 구조는 최대 2개 수준까지 사용하고 있다.”

사이드 메뉴 내부의 펼침 깊이를 2수준 이내(대분류 → 소분류)로 제한하고, 그보다 깊은 중첩은 만들지 말라는 뜻입니다.

정리: 사이드 메뉴 계층은 2수준까지. 3수준 이상으로 깊게 만들지 마라. 이게 CP-092입니다.

2. 왜 2수준으로 제한하나

메뉴 계층이 깊어질수록 사용자의 인지 부담과 조작 부담이 함께 커집니다.

인지 부담 측면. 사람이 한 번에 머릿속에 유지할 수 있는 ’위치 맥락’에는 한계가 있습니다. 메뉴가 1수준 → 2수준이면 “대분류 안의 소분류” 라는 단순한 관계라 누구나 따라가죠. 그런데 3수준, 4수준으로 들어가면 “대분류 안의 중분류 안의 소분류 안의…” 처럼 관계가 복잡해져, 사용자는 자기가 어느 깊이에 있는지 헷갈립니다. 깊은 트리는 ’미로’처럼 느껴지죠.

조작 부담 측면. 깊은 사이드 메뉴는 펼침을 여러 번 반복해야 목표에 닿습니다 — 1수준 펼치고, 2수준 펼치고, 3수준 펼치고… 클릭이 늘수록 도달이 느려지고, 모바일에선 좁은 화면에 깊은 들여쓰기가 겹쳐 가독성이 무너 집니다(CP-094의 ‘뷰포트 밖으로 나가는’ 문제와도 연결). 또 깊은 트리는 화면 세로 공간을 많이 잡아먹어 본문을 밀어냅니다.

그래서 KRDS는 사이드 메뉴 계층을 2수준으로 제한합니다. 대부분의 공공 서비스 정보 구조는 ‘섹션 → 화면’ 또는 ‘대분류 → 소분류’ 2수준으로 충분히 표현되죠. 만약 정보가 정말 3수준 이상으로 깊다면 — 사이드 메뉴 하나에 다 욱여넣지 말고, 다른 탐색 수단을 병행하라는 것이 다음 편 CP-093의 내용입니다(헤더가 있는 사이드 메뉴 + 본문 보조 탐색). 즉 깊은 구조는 사이드 메뉴를 더 깊게 파는 게 아니라, 탐색 방식을 분산해 해결합니다.

이 규칙은 앞선 CP-089·090과 짝을 이룹니다 — CP-089·090이 ‘얕고 작으면 사이드 메뉴를 쓰지 마라’(하한)였다면, CP-092는 ‘쓰더라도 너무 깊게는 쓰지 마라’(상한)입니다. 사이드 메뉴는 ‘적당한 깊이(정확히는 2수준)에서 가장 잘 작동하는’ 도구라는 뜻이죠. 얕으면 불필요하고, 너무 깊으면 미로가 됩니다.

정리하면 — 사이드 메뉴의 펼침 깊이는 2수준이 상한이고, 그 이상의 정보 깊이는 메뉴를 더 파는 대신 보조 탐색 수단으로 분산해야 합니다.

3. 점검 / 개선

무엇을 점검하나

계층 깊이 — 사이드 메뉴 펼침이 2수준을 넘지 않는가.

3수준 처리 — 더 깊은 정보가 있으면 보조 탐색(CP-093)으로 분산했는가.

들여쓰기 가독성 — 깊은 중첩으로 가독성·공간이 무너지지 않는가.

개선 방향

3수준 이상 구조는 2수준으로 재설계하거나 본문 보조 탐색으로 이전(CP-093).

정보 구조(IA)를 단순화해 사이드 메뉴 깊이 축소.

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

역할	책임
기획/IA	정보 구조를 2수준 이내로 설계
디자이너/개발	사이드 메뉴 펼침 깊이 2수준 제한 구현

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

깊은 정보 구조를 가진 대규모 기관 사이트에서 특히 주의가 필요합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 사이드 메뉴 펼침이 2수준 이내인가요?

□ 3수준 이상으로 중첩되지 않았나요?

□ 더 깊은 정보는 보조 탐색 수단으로 분산했나요(CP-093)?

❓ FAQ

Q1. 정보가 3수준 이상 깊으면 어쩌나요? 사이드 메뉴를 더 깊게 파지 말고, 헤더 있는 사이드 메뉴 + 본문 보조 탐색으로 분산합니다(CP-093). Q2. 왜 하필 2수준인가요? 대부분의 정보 구조는 대분류-소분류 2수준으로 충분하고, 그 이상은 인지·조작 부담이 급증합니다. Q3. 메인 메뉴는 더 깊어도 되나요? 컴포넌트마다 기준이 다릅니다. 사이드 메뉴는 본 규칙대로 2수준이 상한 입니다.

6. 마무리

CP-092의 메시지:

깊어야 둘까지 — 사이드 메뉴 계층은 최대 2수준으로 제한한다.

메뉴가 깊어질수록 사용자는 미로에 빠지고 조작도 늘어납니다. 사이드 메뉴는 2수준(대분류-소분류)에서 가장 잘 작동하죠. 더 깊은 정보는 메뉴를 파는 대신 보조 탐색으로 분산합니다. CP-089·090(하한)과 함께 사이드 메뉴의 적정 범위를 정하는 상한 규칙입니다. 다음 편은 바로 그 ’깊을 때의 대안’입니다.

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

ViewCheck는 사이드 메뉴 계층이 2수준 상한을 지키는지를 진단합니다.

📚 참고 출처

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

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

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