얕고 적으면 사이드 메뉴는 과하다

KRDS CP-090 — 탐색 계층 구조가 2수준 이내이고 탐색 항목 수가 적은 경우는 사이드 메뉴를 사용하고 있지 않다.

0. 들어가며 — 규모가 아니라 ’구조’로도 가린다

이번 210편은 앞 편(CP-089)의 짝입니다. 탐색 계층이 2수준 이내이고 항목 수도 적으면 사이드 메뉴를 쓰지 말라는 규칙이죠.

CP-089가 ‘화면 수(규모)’로 가렸다면, CP-090은’탐색 구조의 얕음과 항목의 적음’으로 가립니다. 전체 화면이 많더라도, 정작 탐색 계층이 얕고(2수준 이내) 메뉴 항목이 몇 개 안 되면 사이드 메뉴가 필요 없죠. 두 기준이 합쳐져 ’사이드 메뉴는 깊거나 많을 때만’을 정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 얕고 적으면 미사용

CP-090 (컴포넌트 > 사이드 메뉴) “탐색 계층 구조가 2수준 이내이고 탐색 항목 수가 적은 경우는 사이드 메뉴를 사용하고 있지 않다.”

탐색 깊이가 2수준 이내(상위-하위 정도)로 얕고 메뉴 항목 수도 적다면, 사이드 메뉴를 두지 말고 더 단순한 내비게이션으로 충분하게 하라는 뜻입니다.

정리: 계층이 2수준 이내 + 항목 적음 = 사이드 메뉴 불필요. 쓰지 마라. 이게 CP-090입니다.

2. 왜 얕고 적으면 안 쓰나

사이드 메뉴의 존재 이유는 ’여러 하위 화면 사이를 쉽게 오가게 하는 것’입니다. 이 가치가 살아나려면 두 조건이 필요하죠 — (1) 탐색할 하위 화면이 충분히 많아야 하고, (2) 그것들이 계층(깊이)을 이뤄야 합니다. 둘 중 하나라도 빈약하면 사이드 메뉴는 효용이 떨어집니다.

계층이 얕은 경우(2수준 이내). 탐색 구조가 ‘상위 메뉴 → 화면’ 정도로 끝나면(2수준), 사용자는 상단 메인 메뉴에서 곧장 화면으로 갈 수 있습니다. 그 사이에 사이드 메뉴라는 중간 탐색 층을 둘 이유가 없죠. 사이드 메뉴는 보통 ‘섹션 → 하위 메뉴 → 더 하위’ 처럼 깊이가 있을 때 그 깊은 가지를 펼쳐 보여주는 도구인데, 깊이가 없으면 펼칠 것도 없습니다.

항목이 적은 경우. 한 섹션 안의 하위 화면이 2~3개뿐이면, 그걸 본문 안 링크나 탭 몇 개로 보여줘도 충분 합니다. 굳이 옆에 세로 메뉴 영역을 따로 마련할 필요가 없죠. 항목이 적은데 사이드 메뉴를 두면 CP-089에서 본 ‘빈 껍데기’ 문제가 똑같이 생깁니다.

이 둘을 함께(AND) 따지는 점이 중요합니다 — ‘2수준 이내’이고 ‘항목 수가 적은’ 경우입니다. 즉 얕으면서 동시에 적을 때 사이드 메뉴가 군더더기가 되죠. 반대로 계층이 깊거나(3수준 이상) 항목이 많으면, 사이드 메뉴가 탐색을 크게 도와줍니다 — 이 경우는 다음 편 CP-091~095에서 다루는 ’사이드 메뉴를 제대로 쓰는 법’으로 이어 집니다.

정리하면 — CP-089(규모)와 CP-090(구조)은 사이드 메뉴 도입의 사전 게이트입니다. 작거나, 얕고 적으면 쓰지 않고, 충분히 크고 깊고 많을 때만 도입해 제 효용을 살립니다. ’풍부한 내비게이션 = 좋음’이 아니라 ’구조에 맞는 내비게이션 = 좋음’이라는 사용성 원칙의 반복이죠. 과한 도구는 단순함을 해칩니다.

3. 점검 / 개선

무엇을 점검하나

계층 깊이 — 탐색 구조가 2수준 이내로 얕은가.

항목 수 — 한 섹션 내 하위 항목이 적은가.

사이드 메뉴 적정성 — 얕고 적은데도 사이드 메뉴를 두고 있지 않은가.

개선 방향

얕고 적은 구조면 사이드 메뉴 대신 본문 내 링크·탭으로 대체.

3수준 이상이거나 항목이 많아질 때 사이드 메뉴 도입 검토.

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

역할	책임
기획/IA	계층 깊이·항목 수 분석 후 사이드 메뉴 필요성 판단
디자이너/개발	얕고 적으면 미도입, 대체 내비게이션 적용

기관 유형	CP-090 적용
얕은 구조(2수준 이내)+적은 항목 서비스	✅ 사이드 메뉴 미사용 권장
깊거나 항목 많은 서비스	해당 없음(사이드 메뉴 사용)

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 탐색 계층이 2수준 이내로 얕은가요?

□ 섹션 내 하위 항목 수가 적은가요?

□ 둘 다 해당하는데도 사이드 메뉴를 두고 있지 않나요?

❓ FAQ

Q1. CP-089(규모)와 뭐가 다른가요? CP-089는 화면 수(규모), CP-090은 탐색 구조의 깊이·항목 수입니다. 규모가 커도 구조가 얕고 항목이 적으면 사이드 메뉴는 불필요합니다. Q2. 둘 중 하나만 해당하면요? 본 규칙은 ’얕고(AND) 적음’을 함께 봅니다. 계층이 깊거나 항목이 많으면 사이드 메뉴가 도움이 됩니다. Q3. 그럼 언제 쓰나요? 3수준 이상으로 깊거나 항목이 많아 본문 옆 세로 탐색이 효율적일 때입니다.

6. 마무리

CP-090의 메시지:

얕고 적으면 사이드 메뉴는 과하다 — 2수준 이내 + 적은 항목이면 쓰지 마라.

사이드 메뉴는 하위 화면이 많고 계층이 깊을 때 빛납니다. 얕고(2수준 이내) 적으면 펼칠 것도, 오갈 것도 적어 군더더기가 되죠. CP-089(규모)와 함께 ‘사이드 메뉴는 충분히 크고 깊을 때만’이라는 도입 게이트를 이룹니다. 다음 편부터는 ’사이드 메뉴를 제대로 쓰는 법’ — 현재 화면 강조입니다.

다음 편 예고 ▶ 「211. (CP-091) 현재 탐색 중인 화면에 대한 링크를 강조하여 표시하고 있다.」

ViewCheck는 탐색 구조의 깊이·항목 수 대비 사이드 메뉴 적정성을 진단합니다.

📚 참고 출처

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

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

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