네비게이션

네비게이션은 사용자가 현재 위치, 이동 가능한 목적지, 이동 결과를 예측하도록 돕습니다. 메뉴의 시각적 형태보다 URL 변화 여부와 정보 구조를 먼저 결정해야 합니다.

컴포넌트 목록

컴포넌트	사용 목적	사용 시점과 주의사항
Navbar	제품의 로고, 전역 메뉴, 공통 액션 제공	모든 페이지에서 유지되는 최상위 이동에 사용합니다. 현재 메뉴를 표시하고 모바일 축소 방식을 함께 정의합니다.
Menu	기능 또는 섹션 목록 탐색	여러 목적지를 계층적으로 제시할 때 사용합니다. 메뉴를 열고 닫는 제어와 키보드 이동을 지원합니다.
Breadcrumb	현재 페이지의 상위 계층과 경로 표현	깊이가 있는 정보 구조에서 상위 단계로 이동하도록 제공합니다. 현재 페이지는 마지막 항목으로 표시하되 중복 링크로 만들지 않습니다.
Tabs	같은 페이지와 맥락 안에서 관련 보기 전환	콘텐츠 전환이 페이지 이동보다 가볍고 탭 수가 적을 때 사용합니다. 방향키 이동과 선택·포커스 상태를 구분합니다.
Pagination	큰 데이터 집합을 여러 페이지로 분할	전체 항목을 한 번에 표시하기 어려울 때 사용합니다. 현재 페이지, 전체 범위와 이전·다음 가능 여부를 알립니다.
Steps	순차 작업의 현재 단계와 진행 상태 표시	가입이나 결제처럼 정해진 순서가 있는 작업에 사용합니다. 이동 가능한 단계와 단순 상태 표시를 구분합니다.
Dropdown	제한된 공간에서 보조 메뉴나 액션 노출	자주 사용하지 않는 관련 동작을 묶을 때 사용합니다. 핵심 액션을 숨기거나 Select 대용으로 사용하지 않습니다.

선택 기준

URL과 문서 맥락이 달라지면 Link 기반 탐색을, 같은 페이지의 관련 패널만 전환하면 Tabs를 사용합니다. 값을 선택하는 UI에는 Menu나 Dropdown 대신 Select, Radio 등 폼 컴포넌트를 사용합니다.

상태와 접근성

• 현재 페이지에는 시각적 강조와 aria-current="page"를 함께 제공합니다.
• 펼쳐지는 메뉴는 트리거의 aria-expanded 상태와 닫힌 뒤 돌아갈 포커스 위치를 관리합니다.
• 뒤로 가기, 새로고침, 직접 URL 접근에서도 같은 화면 상태를 재현할 수 있어야 합니다.
• 모바일 메뉴가 열리면 배경 콘텐츠의 포커스 이동과 스크롤 동작을 의도대로 제어합니다.