넓게 보면 사용자에게 자신이 어디에 있는지, 어디로 가야 하는지, 어떻게 그곳에 도달하는지 알려 주는 모든 것을 내비게이션이라고 부를 수 있어요. 내비게이션을 사용하거나 내비게이션 구조를 커스터마이징할 때는 다음과 같은 흔한 함정에 주의해야 해요.

출처: 문서

본문

사용자가 길을 잃지 않도록 시각적·맥락적 단서를 최대한 많이 제공하세요.
형태(form)와 행동(behavior) 사이의 일관성을 유지하거나, 내비게이션 항목 수를 줄여 사용자의 학습 비용을 낮추세요.
페이지 전환을 최소화하세요(즉, 작업에 필요한 페이지 전환 횟수를 여러 번에서 한두 번으로 줄이라). 그래야 사용자가 어떤 페이지에서 다른 페이지로 이동할 때 짧은 거리만 이동하게 되거든요.

내비게이션 메뉴는 사용자에게 사이트 구조를 보여 주는 효과적이고 사용자 친화적인 방법이에요. 사이트의 정보 아키텍처가 명확하고 안정적이 되면 적절한 형태의 내비게이션을 활용해야 해요.

상단 내비게이션

상단 내비게이션 메뉴는 하이퍼링크를 한 줄로 배치하고 정보를 단순하고 직관적으로 보여 줘요. 랜딩 페이지와 컨슈머 페이싱 웹 앱에 적합해요. 1차 메뉴 항목 수는 2~7개 사이여야 하고, 각 메뉴 항목의 제목은 15자 미만이어야 해요.

사이드 내비게이션

세로 내비게이션은 가로보다 더 유연해요. 메뉴 항목을 아래로 쉽게 확장할 수 있고, 더 긴 라벨도 허용돼요. 스크롤바의 도움으로 무제한의 메뉴 항목을 지원할 수 있어요. 다단계이고 조작이 많으며 대시보드형 웹 앱에 적합해요.

내비게이션이 포함된 더 많은 레이아웃: Layout.

브레드크럼은 사용자에게 페이지 위계에서 자신이 지금 어디에 있는지, 페이지 사이의 부모-자식 관계를 알려 줘요.

브레드크럼

참고:

위계가 깊을 때는 일부 페이지를 숨기는 것이 권장돼요. 표시되는 페이지 깊이는 최대 3 미만이 좋고, 5를 넘지 않아야 해요.

브레드크럼 사용은 가능한 피하세요. 특히 페이지에 사용자가 어디에 있는지 충분히 알려 주는 다른 내비게이션 컴포넌트가 있을 때는요.

탭 (Tabs)

탭은 콘텐츠를 분류해서 제한된 공간에 많은 정보를 보여 주는 방식이에요. 사용자는 페이지를 전환하지 않고도 탭 패널 사이를 쉽게 넘나들 수 있어요. 카테고리는 비즈니스 로직이나 상태로 결정할 수 있고, 각 카테고리의 라벨은 15자 미만이어야 해요.

기본 (Basic)

기본 탭

전체 페이지의 콘텐츠를 제어해요. 핵심 기능 간 전환에 주로 사용돼요.

카드 (Card)

카드 탭

페이지 콘텐츠의 일부를 제어해요. 테두리가 있는 컨테이너가 페이지의 다른 부분과 자연스럽게 구분해 줘요.

필 (Pill)

필 탭

카드 안의 작은 섹션에 주로 사용되거나, 기본·카드 탭과 함께 사용돼요.

카드 안의 옵션 간에 전환해요. 주로 다른 유형의 탭과 함께 사용해서, 사용자가 빠른 탭 전환으로 의도한 콘텐츠로 이동할 수 있게 해 줘요.

세로 (Vertical)

세로 탭

많은 수의 탭 옵션에 사용돼요. 무제한의 카테고리를 담도록 쉽게 확장할 수 있어요.

스텝 (Steps)

스텝은 미리 정의된 워크플로우를 따라 작업을 수행하도록 사용자를 안내하는 내비게이션 바예요. 작업이 얼마나 걸릴지 대략적인 감을 주고, 지금 어느 단계인지 알려 주며, 사용자의 진행 상황을 명확하게 보여 줘요. 복잡하고 절차적인 작업을 단계로 나누는 것은 항상 좋은 생각이에요.

가로 (Horizontal)

가로 스텝

2개 초과 5개 미만의 단계에 사용돼요. 각 단계의 제목은 12자 미만이어야 해요.

세로 (Vertical)

세로 스텝

보통 페이지 왼쪽에 고정 위치로 떠 있어요. 각 단계에 여러 줄 설명을 붙일 수 있어요. 크거나 동적인 수의 단계, 즉 동적 설명이 있는 시간 기반 단계에 적합해요.