좁으면 햄버거로 통합

KRDS CP-097 — [모바일] 햄버거 아이콘으로 축소된 메인 메뉴를 통해 정보 구조를 탐색하고 있다.

0. 들어가며 — 사이드 메뉴를 접은 자리의 대안

이번 217편은 앞 편(CP-096)의 짝입니다. 모바일에서는 햄버거 아이콘으로 축소된 메인 메뉴를 통해 정보 구조를 탐색하게 하라는 규칙이죠.

CP-096에서 좁은 화면의 사이드 메뉴를 숨겼습니다. 그럼 사이드 메뉴가 담당하던 탐색은 어디로 갈까요? 모바일 에서는 상단의 햄버거 아이콘(☰)을 누르면 펼쳐지는 메인 메뉴 안에 정보 구조 전체를 담아, 사용자가 거기서 탐색하게 합니다. 데스크톱의 ‘메인 + 사이드’ 이원 탐색이 모바일에선 ‘햄버거 메인’ 하나로 통합되죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 햄버거 메인 메뉴로 탐색

CP-097 (컴포넌트 > 사이드 메뉴) [모바일] “햄버거 아이콘으로 축소된 메인 메뉴를 통해 정보 구조를 탐색하고 있다.”

모바일에서 사이드 메뉴를 숨기는 대신(CP-096), 햄버거 아이콘으로 펼쳐지는 메인 메뉴 안에 사이트 정보 구조를 담아 사용자가 탐색할 수 있게 하라는 뜻입니다.

정리: 모바일 탐색은 햄버거 메인 메뉴로 통합 제공하라. 이게 CP-097입니다.

2. 왜 햄버거 메인 메뉴로 통합하나

모바일의 가로 공간은 데스크톱의 1/3 수준입니다. 데스크톱에서 늘 펼쳐 보이던 ’메인 메뉴(상단 가로) + 사이드 메뉴(본문 옆 세로)’를 그대로 옮기면 화면이 메뉴로 도배되어 본문 자리가 없죠. 그래서 모바일에서는 내비게이션을 평소엔 접어 두고(축소), 필요할 때 펼치는 패턴을 씁니다. 그 접힌 상태를 여는 표준 트리거가 바로 햄버거 아이콘(☰) 입니다 — 세 줄 가로선이 ’메뉴’를 뜻하는, 모바일에서 널리 학습된 관용 기호죠.

핵심은 — 데스크톱에서 분리돼 있던 두 탐색(메인 + 사이드)을 모바일에서는 하나의 햄버거 메뉴 안에 통합한다는 점입니다. 햄버거를 누르면 펼쳐지는 메뉴 안에, 사이트의 대분류(메인 메뉴 역할)와 그 하위 화면들(사이드 메뉴 역할)을 계층 구조로 담습니다. 사용자는 이 하나의 메뉴에서 ‘사이트 전체 어디로든’ + ’섹션 안 어디로든’을 모두 탐색하죠. 사이드 메뉴를 숨겼다고 그 탐색 기능이 사라진 게 아니라, 햄버거 메뉴 안의 계층으로 흡수된 것입니다.

이 패턴의 장점은 — 평소엔 본문이 화면 전체를 쓰고(CP-096), 탐색이 필요할 때만 햄버거로 메뉴를 불러와 화면을 효율적으로 쓴다는 점입니다. 또 메인·사이드가 하나로 합쳐져 사용자가 두 개의 다른 메뉴를 오갈 필요 없이 한 곳에서 전체 구조를 봅니다.

다만 햄버거 메뉴도 접근성을 갖춰야 합니다 — 햄버거 버튼에는 aria-label="메뉴" 같은 이름과 펼침 상태를 알리는 aria-expanded(CP-104 맥락)를 줘야 스크린 리더 사용자가 쓸 수 있고, 펼친 메뉴 내부는 사이드 메뉴와 동일하게 시맨틱 계층 마크업(CP-098·099)과 현재 위치 표시(CP-100·101), 키보드 탐색(CP-102·103)을 갖춰야 하죠. 즉 ’표시 형태’만 햄버거로 바뀔 뿐, 내비게이션이 지켜야 할 접근성 요건은 그대로 적용됩니다.

정리하면 — 모바일에서는 사이드 메뉴를 숨기되(CP-096), 그 탐색 기능을 햄버거 메인 메뉴 안의 계층으로 통합 제공해 좁은 화면에서도 사용자가 정보 구조 전체를 탐색하게 합니다.

3. 점검 / 개선

무엇을 점검하나

햄버거 제공 — 모바일에서 햄버거 아이콘으로 메뉴를 열 수 있는가.

정보 구조 포함 — 펼친 메뉴 안에 대분류 + 하위 화면(사이드 역할)이 계층으로 담겼는가.

접근성 — 햄버거 버튼 aria-label·aria-expanded, 메뉴 내부 시맨틱·키보드 탐색이 갖춰졌는가.

개선 방향

햄버거 버튼에 이름(aria-label)·펼침 상태(aria-expanded) 부여.

펼친 메뉴에 메인+사이드 통합 계층 + 시맨틱 마크업(CP-098·099)·현재표시(CP-100·101) 적용.

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

역할	책임
디자이너	모바일 햄버거 메뉴·통합 계층 설계
퍼블리셔/개발	햄버거 토글·접근성 속성·계층 구현

기관 유형	CP-097 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (모바일 지원 시)

모바일 트래픽이 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모바일에서 햄버거 아이콘으로 메뉴를 열 수 있나요?

□ 펼친 메뉴에 사이트 정보 구조 전체(대분류+하위)가 담겼나요?

□ 햄버거 버튼·메뉴에 접근성(aria-label·aria-expanded·시맨틱)이 갖춰졌나요?

❓ FAQ

Q1. 사이드 메뉴를 숨기면 섹션 내 탐색이 안 되지 않나요? 그 기능을 햄버거 메인 메뉴의 계층으로 흡수합니다. 탐색 기능은 유지됩니다. Q2. 햄버거가 너무 흔한 패턴 아닌가요? 모바일에서 널리 학습된 관용 기호라 오히려 직관적입니다. 다만 aria-label로 ’메뉴’임을 명시해야 합니다. Q3. 햄버거 메뉴도 접근성을 지켜야 하나요? 네. 표시 형태만 바뀔 뿐, 시맨틱·키보드·현재표시 등 내비게이션 접근성 요건은 그대로입니다.

6. 마무리

CP-097의 메시지:

좁으면 햄버거로 통합 — 모바일은 햄버거 메인 메뉴로 정보 구조를 탐색한다.

모바일에선 사이드 메뉴를 숨기고(CP-096), 그 탐색 기능을 햄버거 메인 메뉴 안의 계층으로 통합합니다. 평소엔 본문에 전폭을 주고 필요할 때만 메뉴를 불러오죠. 표시 형태만 바뀔 뿐 접근성 요건은 그대로입니다. 다음 편부터는 사이드 메뉴의 접근성 — 컨테이너를 내비게이션 섹션으로 인지시키기입니다.

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

ViewCheck는 모바일에서 햄버거 메인 메뉴로 정보 구조 탐색이 통합 제공되는지를 진단합니다.

📚 참고 출처

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

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

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