공간이 되면 보여줘라

KRDS CP-063 — [모바일] 화면 너비가 충분한 경우에는 1수준 메뉴 전체를 확인할 수 있도록 표현하고 있다.

0. 들어가며 — 무조건 접지는 말 것

이번 183편은 화면 너비가 충분하면 1수준 메뉴 전체를 노출하는 규칙입니다.

CP-028에서 화면이 좁으면 메뉴를 햄버거로 접는다고 했죠. 하지만 화면 너비가 어느 정도 충분하다면 — 굳이 다 접지 말고 1수준 메뉴(대분류)는 펼쳐서 보여주는 게 좋습니다. CP-063은 공간이 되면 1수준 메뉴를 노출하라고 규정하죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 1수준 메뉴 전체 확인

CP-063 (컴포넌트 > 메인 메뉴) “[모바일] 화면 너비가 충분한 경우에는 1수준 메뉴 전체를 확인할 수 있도록 표현하고 있다.”

화면 너비가 충분하면, 메뉴를 다 접지 말고 1수준(대분류) 메뉴 전체가 보이게 표현하라는 뜻입니다.

정리: 화면 너비가 충분하면 1수준 메뉴 전체를 확인할 수 있게 표현하라. 이게 CP-063입니다.

2. 왜 1수준을 노출하나

반응형 메뉴는 화면 크기에 따라 형태가 바뀝니다 — 넓으면 펼침, 좁으면 햄버거(CP-028). 그런데 그 중간, 화면 너비가 어느 정도 충분한 경우(태블릿·큰 모바일 등)에는 모든 걸 햄버거로 접기보다, 1수준 메뉴(대분류) 는 펼쳐서 보여주는 것이 좋습니다.

이유는 발견성입니다. 메뉴가 항상 보이면(펼쳐져 있으면), 사용자는 사이트에 어떤 주요 영역이 있는지 한눈에 파악합니다. 반면 모든 메뉴가 햄버거 아이콘 안에 숨으면 — 사용자는 그 아이콘을 눌러봐야 비로소 메뉴 구조를 알 수 있죠. 햄버거 메뉴는 ’발견성이 낮다’는 단점이 있습니다(아이콘 뒤에 무엇이 있는지 안 보임). 그래서 공간이 허용하는 한, 적어도 1수준 메뉴(사이트의 큰 줄기)는 펼쳐 보여주는 게 사용성에 좋습니다.

CP-063의 핵심 조건은 ‘화면 너비가 충분한 경우’ 입니다 — 즉, 1수준 메뉴를 한 줄에 펼칠 공간이 될 때 입니다. 1수준 항목이 많지 않고 화면이 어느 정도 넓으면(태블릿 가로, 큰 폰 등), 햄버거로 접지 말고 1수준을 노출하는 것이죠. 하위 수준(2·3수준)은 펼치면 공간이 부족하니 접어두고(클릭 시 펼침), 1수준만큼은 보이게 하는 균형입니다.

이는 CP-028(좁으면 햄버거)과 짝을 이룹니다 — 정말 좁으면 햄버거(028), 충분하면 1수준 노출(063) 이라는 반응형 단계 설계죠. 화면 크기에 따라 햄버거 ↔ 1수준 노출 ↔ 전체 펼침으로 단계적으로 적응하는 것입니다. 무조건 접거나 무조건 펼치는 게 아니라, 공간에 맞춰 최적의 노출 수준을 선택하는 것이 좋은 반응형 메뉴입니다.

핵심은 — 햄버거 메뉴는 공간이 정말 부족할 때의 수단이지, 공간이 충분한데도 발견성을 희생하며 접을 이유는 없다는 것입니다. 보여줄 수 있으면 보여주는 게 사용성에 낫죠.

3. 점검 / 개선

무엇을 점검하나

1수준 노출 — 화면이 충분하면 1수준 메뉴가 펼쳐 보이는가.

불필요한 접기 없음 — 공간이 충분한데 햄버거로 다 접지 않았는가.

단계적 적응 — 화면 크기에 따라 노출 수준이 단계적으로 바뀌는가.

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

역할	책임
디자이너	화면 크기별 메뉴 노출 단계 설계
개발(프론트)	반응형 분기점별 1수준 노출 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 화면이 충분하면 1수준 메뉴가 펼쳐 보이나요?

□ 공간이 충분한데 햄버거로 다 접지 않았나요?

□ 화면 크기에 따라 노출 수준이 단계적으로 바뀌나요?

❓ FAQ

Q1. CP-028(햄버거)과 모순 아닌가요? 짝입니다 — 정말 좁으면 햄버거(028), 충분하면 1수준 노출(063)입니다. 화면 크기별 단계 설계죠. Q2. 왜 햄버거가 발견성이 낮나요? 아이콘 뒤에 메뉴가 숨어, 눌러봐야 구조를 압니다. 펼쳐 있으면 한눈에 보이죠. Q3. KRDS를 채택하면 자동인가요? 표준 반응형 메뉴는 화면 크기별로 적절히 노출합니다.

6. 마무리

CP-063의 메시지:

공간이 되면 보여줘라 — 햄버거는 정말 좁을 때의 수단, 충분하면 1수준 메뉴를 노출한다.

햄버거 메뉴는 발견성이 낮으므로, 화면 너비가 충분하면 1수준 메뉴는 펼쳐 보여주는 게 좋습니다. 좁으면 햄버거 (028), 충분하면 1수준 노출(063)로 화면 크기에 맞춰 단계적으로 적응하죠. 보여줄 수 있으면 보여주는 게 사용성에 낫습니다.

다음 편은 메뉴의 내비게이션 섹션 인지를 다룹니다. CP-064 — “메뉴 컨테이너가 내비게이션 섹션임을 스크린리더가 인지하게 구현한다.”

다음 편 예고 ▶ 「184. (CP-064) 메뉴의 컨테이너가 내비게이션 섹션임을 스크린 리더에서 인지할 수 있도록 구현되어 있다.」

ViewCheck는 화면이 충분할 때 1수준 메뉴가 노출되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 메인 메뉴(Main menu) 가이드 — https://www.krds.go.kr/html/site/component/component_06.html

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

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