좁으면 접는다

KRDS CP-028 — [모바일] 화면 너비가 충분하지 않아 메인 메뉴를 표시할 수 없을 때 햄버거 메뉴 형태로 제공하고 있다.

0. 들어가며 — 작은 화면의 메뉴 문제

이번 148편은 화면이 좁을 때 메인 메뉴를 햄버거 메뉴로 제공하는 규칙입니다.

데스크톱에서는 메인 메뉴를 가로로 펼쳐 보여줄 수 있지만, 모바일처럼 좁은 화면에서는 그 많은 메뉴가 한 줄에 안 들어갑니다. CP-028은 화면 너비가 부족하면 메뉴를 햄버거 아이콘(☰) 으로 접어 제공하라고 규정하죠. 반응형 디자인의 핵심 패턴입니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 햄버거 메뉴

CP-028 (컴포넌트 > 헤더) “[모바일] 화면 너비가 충분하지 않아 메인 메뉴를 표시할 수 없을 때 햄버거 메뉴 형태로 제공하고 있다.”

화면이 좁아 메인 메뉴를 다 펼칠 수 없으면, 햄버거 메뉴(☰) 로 접어서 제공하라는 뜻입니다.

정리: 화면 너비가 부족하면 메인 메뉴를 햄버거 메뉴로 제공하라. 이게 CP-028입니다.

2. 햄버거 메뉴란, 왜 필요한가

햄버거 메뉴는 가로 세 줄(☰)로 된 아이콘 버튼입니다. 세 줄이 햄버거 빵·패티처럼 보여 ’햄버거’라 불리죠. 누르면 숨겨진 메뉴가 펼쳐집니다.

왜 필요할까요? 공간 제약 때문입니다. 데스크톱(넓은 화면)에서는 “정책·소개·민원·알림·…” 같은 메뉴를 가로로 다 펼쳐 보여줄 수 있습니다. 하지만 모바일(좁은 화면)에서는 이 메뉴들이 한 줄에 들어가지 않죠. 억지로 다 넣으면 글씨가 작아지거나 줄바꿈이 어지러워지고, 터치 타깃(44px)도 못 지킵니다.

그래서 좁은 화면에서는 메뉴를 햄버거 아이콘 하나로 접어 둡니다. 평소엔 ☰ 아이콘만 보이다가, 누르면 전체 메뉴가 펼쳐지죠(보통 화면 옆에서 슬라이드하거나 전체 화면 오버레이로). 이러면 좁은 헤더 공간을 절약하면서도, 사용자가 필요할 때 모든 메뉴에 접근할 수 있습니다. 반응형 디자인(3개 뷰포트 대응)의 대표 패턴입니다.

CP-028의 핵심 조건은 ‘화면 너비가 충분하지 않을 때’ 입니다. 즉, 무조건 햄버거를 쓰라는 게 아니라 — 넓은 화면에서는 메뉴를 펼쳐 보여주고, 좁아져서 메뉴가 안 들어갈 때 햄버거로 전환하라는 것이죠. 반응형 분기점 (breakpoint)에서 데스크톱 가로 메뉴 ↔ 모바일 햄버거 메뉴로 바뀝니다.

구현 시 주의할 점 — 햄버거 버튼에도 텍스트 레이블이 필요하고(CP-024, “메뉴” 또는 aria-label), 키보드로 열고 닫을 수 있어야 하며, 펼침/접힘 상태를 aria-expanded로 알려야 합니다. 단순히 시각적으로 접는 게 아니라 접근 가능하게 만드는 것이 중요하죠.

3. 점검 / 개선

무엇을 점검하나

좁은 화면 전환 — 화면이 좁아지면 메뉴가 햄버거로 전환되는가.

넓은 화면 펼침 — 넓은 화면에서는 메뉴가 펼쳐지는가.

접근성 — 햄버거 버튼에 레이블·키보드 조작·aria-expanded가 있는가.

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

역할	책임
디자이너	반응형 분기점·햄버거 메뉴 설계
개발(프론트)	반응형 메뉴 전환 + 접근성 구현

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

행정·공공기관 디지털 정부서비스 = 전부 해당(반응형 필수).

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 좁은 화면에서 메뉴가 햄버거(☰)로 전환되나요?

□ 넓은 화면에서는 메뉴가 펼쳐지나요?

□ 햄버거 버튼에 레이블·키보드 조작·aria-expanded가 있나요?

❓ FAQ

Q1. 데스크톱에서도 햄버거를 쓰면 안 되나요? 넓은 화면에서는 메뉴를 펼쳐 보여주는 것이 발견성에 좋습니다. 햄버거는 좁은 화면에서 공간이 부족할 때 씁니다. Q2. 햄버거 아이콘만 두면 되나요? 아이콘 옆/안에 “메뉴” 레이블이나 aria-label이 필요합니다(CP-024). Q3. KRDS를 채택하면 자동인가요? 표준 헤더는 반응형 햄버거 메뉴를 제공합니다.

6. 마무리

CP-028의 메시지:

좁으면 접는다 — 화면이 부족하면 메뉴를 햄버거로, 단 접근 가능하게.

좁은 화면에서 가로 메뉴가 안 들어가면 햄버거 메뉴로 접어 공간을 절약하고, 누르면 전체 메뉴에 접근하게 합니다. 반응형 디자인의 대표 패턴이죠. 단, 레이블·키보드 조작·aria-expanded로 접근 가능하게 구현해야 합니다.

다음 편은 건너뛰기 링크의 위치를 다룹니다. CP-029 — “건너뛰기 링크를 최상단에 배치한다.”

다음 편 예고 ▶ 「149. (CP-029) 건너뛰기 링크를 최상단에 배치하고 있다.」

ViewCheck는 좁은 화면에서 메인 메뉴가 접근 가능한 햄버거 메뉴로 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 헤더(Header) 가이드 — https://www.krds.go.kr/html/site/component/component_03.html

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

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