KRDS MegaMenu 완전정복 — 공공 웹사이트 네비게이션 만들기

공공 웹사이트 헤더에 있는 그 복잡한 메뉴, 직접 만들려면 머리 아프죠?

웹접근성 키보드 네비게이션, 포커스 관리, ARIA 속성... 하나하나 다 신경 써야 해요.

KRDS 네비게이션 종류

공공 웹사이트에서 쓰는 네비게이션 패턴:

컴포넌트	용도	복잡도
Header	기본 상단바	⭐
HeaderWithNavigation	일반 메뉴	⭐⭐
HeaderWithMegaMenu	대형 메뉴	⭐⭐⭐
HeaderWithPanelMenu	사이드 패널	⭐⭐⭐

대부분 HeaderWithMegaMenu를 많이 써요.

기본 Header

로고만 있는 심플한 헤더예요.

HeaderWithNavigation (일반 메뉴)

depth 1개만 있을 때 쓰면 돼요.

HeaderWithMegaMenu (핵심)

Depth 2개 이상 필요할 때:

이게 공공 웹사이트에서 제일 많이 보는 형태예요.

메뉴 구조 설계 팁

1. Depth는 최대 3까지

4depth 넘어가면 사용자가 헷갈려요.

2. Category는 묶음 단위

연관된 메뉴끼리 카테고리로 묶으면 보기 좋아요.

웹접근성 자동 처리

HANUI MegaMenu가 자동으로 해주는 것들:

키보드 네비게이션

• Tab: 다음 메뉴로 이동
• Shift + Tab: 이전 메뉴로 이동
• Enter / Space: 서브메뉴 펼치기
• Esc: 서브메뉴 닫기
• Arrow: 서브메뉴 내 이동

직접 구현하면 진짜 복잡한데, 다 자동이에요.

ARIA 속성

웹접근성 심사 통과에 필수예요.

포커스 관리

• 메뉴 열면 첫 번째 아이템에 포커스
• Esc 누르면 원래 버튼으로 포커스 복귀
• 서브메뉴 밖 클릭하면 자동 닫힘

모바일 대응

반응형 자동 처리돼요. 모바일에선 햄버거 메뉴로 바뀌어요.

실제 Next.js 프로젝트 예시

정리

1. 단순 메뉴 → HeaderWithNavigation
2. 복잡한 메뉴 → HeaderWithMegaMenu
3. 사이드 메뉴 → HeaderWithPanelMenu

웹접근성 자동 처리되니까 데이터 구조만 잘 짜면 돼요.

더 자세한 예시는 hanui.io/components/header에서 확인하세요.

---

관련 글:

• HANUI 컴포넌트 시스템 소개
• Next.js + HANUI 프로젝트 세팅 가이드
• HANUI Kits — API + 상태관리까지 묶은 기능 키트

관련 프로젝트:

• HANUI — KRDS 기반 React 디자인 시스템
• claude-settings — Claude Code 슬래시 커맨드 모음