Nav

Nav(내비게이션)는 사람들이 앱이나 사이트의 주요 섹션을 이동할 수 있게 해 주는 링크 목록이에요. 항상 쉽게 접근할 수 있지만 공간을 확보하기 위해 축소할 수 있는 고수준의 길찾기(wayfinding) 컴포넌트예요.

Nav는 한 단계의 중첩만 지원하며 사용 가능한 모든 항목을 보여주지 않을 수 있어요. 더 깊고 복잡한 계층을 보여줘야 한다면 대신 Tree를 사용하세요.

출처: Nav 문서

본문

Behavior (동작)

Structure and strategy (구조와 전략)

좋은 내비게이션은 사람들이 가장 원하는 것으로 빠르게 안내해요. 나쁜 콘텐츠는 사람들을 길 잃고 좌절하게 만들 수 있어요. 제품과 맥락에 따라 내비게이션을 작업 지향적(동사 사용)으로 만들거나 기능 중심(명사 사용)으로 만드세요. 검색과 고정(pinning)은 일관된 내비게이션의 대체물이 아니라는 점을 기억하세요. 다음 지침을 따라 내비게이션을 지름길 없이 가능한 한 직관적으로 만드세요:

  1. 간결하게 유지하세요
  2. 평이한 언어를 사용하세요
  3. 훑어보기 쉽게 만드세요
  4. 사용자의 목표에 집중하세요
  5. 각 링크가 어디로 가는지 또는 사람들이 무엇을 찾는지 명확히 말하세요

Nav를 만드는 것은 상당한 시간 투자가 필요해요. 메뉴에 접근하는 방식은 신제품이냐 기존 제품의 재설계냐에 따라 달라져요. 신제품의 경우 처음 시작하는 정보가 제한적이고 더 많은 가정이 필요할 수 있어요. 기존 제품의 경우 의사 결정을 돕는 많은 데이터에 접근할 수 있을지도 몰라요. 어느 쪽이든 연구 팀과 협력해 유용하고 잘 설계된 nav 메뉴를 만드세요.

작업 지향적 내비게이션 / 기능 중심 내비게이션

Selection (선택)

선택 표시기는 어느 페이지가 활성인지 한눈에 알려줘요. nav 하위 항목이 활성 페이지이고 범주가 닫혀 있다면 선택 표시기는 nav 범주에 표시돼요.

(하위 항목의 선택 표시기 / 닫히면 NavCategory로 선택 이동)

Secondary actions (보조 액션)

NavItem과 NavSubItem은 관련 보조 액션을 가질 수 있어요. 보조 액션은 호버 시 표시되며 고정(pinning)이나 오버플로우 메뉴 접근 같은 액션에 유용해요. 모든 사용자가 Nav를 인지하고 사용하며 조작할 수 있도록 접근성 섹션의 고려 사항을 염두에 두세요.

nav 노드에서 사용 가능한 액션을 최소화하세요. 대부분의 경우 보조 액션은 하나만 유지하세요. nav 노드당 여러 액션이 있다면 오버플로우 메뉴를 통해 접근할 수 있게 만들어 보세요. Nav를 고수준·깔끔·기능적으로 유지하기 위해 컴포넌트에 직접 넣는 대신 다른 서피스에서 편집 가능한 액션을 제공하는 것을 고려하세요.

NavCategoryItem은 보조 액션을 가질 수 없어요.

Layout (레이아웃)

Hamburger icon (햄버거 아이콘)

햄버거 메뉴 아이콘은 여러 애플리케이션에서 Nav를 확장·축소하는 지속적이고 예측 가능한 UX 패턴이에요.

Grouping (그룹화)

Nav는 최대 두 수준의 계층으로 구성할 수 있어요. 단순한 nav는 사이트나 앱의 공간을 같은 수준의 링크로 나열해요. 더 복잡한 nav에서는 링크를 범주로 그룹화해 상호작용을 더 쉽게 만들 수 있어요.

단순 nav / 범주가 있는 복잡한 nav

nav 항목으로 단순한 nav를 만드세요. 이들은 경험의 주요 부분에 대한 빠른 이해를 주는 첫 번째 수준 링크예요.

nav 범주와 하위 항목으로 복잡한 nav를 만드세요. Nav 범주는 확장·축소되어 사람들이 필요한 정보만 볼 수 있게 해요. Nav 하위 항목은 해당 범주 안의 관련 링크를 그룹화하고 하위 페이지로 이동할 수 있게 해요. Nav 범주는 아코디언처럼 정보를 보여주거나 숨겨요. 링크가 아니라 사이트나 앱 위치로 연결되지 않아요.

Icons (아이콘)

가능하면 nav 범주 라벨과 함께 아이콘을 사용하세요. 아이콘은 추가적인 시각적 강조를 만들고 nav 범주를 그 안의 nav 하위 항목과 구별해 줘요. 이해하기 쉬운 단순하고 알아볼 수 있는 아이콘을 사용하세요.

아이콘이 기술적으로 불가능하거나 너무 많은 nav 항목 때문에 선택하기 어렵다면 제거하세요. Nav 범주에 아이콘이 없다면 명확한 계층을 유지하기 위해 하위 항목이 들여쓰기됩니다.

Nav는 아이콘 전용 레이아웃을 지원하지 않아요.

(권장) 아이콘이 있는 Nav / 아이콘이 없는 Nav

Chevron

nav 범주 chevron은 하위 항목이 있음을 나타내요. chevron의 일관된 배치는 예측 가능하게 만들고 nav 범주를 쉽게 구별하게 해 줘요. chevron을 nav 범주의 다른 위치로 옮기지 마세요.

올바른 chevron 위치 / 잘못된 chevron 위치

Flex space

Flex space는 제품 우수성에 중요한 고가치 항목을 담는 데 사용할 수 있는 제품 정의 공간이에요. 예를 들어 검색, 기본 버튼, 앱 이름, 트리 등이 포함될 수 있어요.

Flex space는 Nav drawer의 본문 부분에만 있을 수 있어요. 패딩은 정의되어 있지만 파트너 팀이 접근성 요구사항을 해결해야 해요.

Footer (푸터)

Nav에는 푸터 슬롯이 있지만, 다른 nav 콘텐츠를 가릴 수 있으므로 사용을 권장하지 않아요.

푸터는 Nav 본문에 설정된 계층과 구별되는 지속적인 내비게이션 요소를 만들어요. 긴 내비게이션 스크롤 상태에서 헤더와 푸터는 떠오르고 본문 콘텐츠는 그 뒤에서 스크롤되어 nav 콘텐츠를 숨겨요. 주의해서 사용하고 400% 확대에서 사용 가능한 화면 공간을 다시 확인하세요.

Reflow and overflow (리플로우와 넘침)

Nav 라벨은 한눈에 쉽게 읽도록 간결하게 유지해야 해요. 그러나 긴 라벨은 기본적으로 줄바꿈돼요. 최대 폭은 그 안에 놓이는 drawer에 의해 정의돼요.

잘라내고(truncate) 툴팁이 필요하다면, 툴팁을 nav 노드의 왼쪽이 아니라 오른쪽에 표시하세요. 위쪽에 배치하면 다른 nav 노드를 인지하거나 이해하는 것을 막을 수 있어요.

Nav는 인라인 drawer 안에 위치하며 일반적으로 콘텐츠 옆에 나타나요. 기본적으로 Nav는 260픽셀 폭으로 설정돼요. 640픽셀 화면 폭에서는 화면 공간을 절약하기 위해 오버레이 drawer가 돼요.

Accessibility (접근성)

Secondary actions on hover (호버 시 보조 액션)

보조 액션은 호버나 포커스 시에만이 아니라 항상 DOM에 있어야 해요. 호버나 포커스 때까지 DOM에 나타나지 않으면, 터치 스크린 리더나 가상 커서를 사용하는 데스크톱 스크린 리더를 사용하는 사람들이 해당 옵션에 접근하지 못하게 돼요.

호버와 포커스에서만 액션을 표시할 때는 음성 제어, 시선 추적, 스위치, 기타 대체 입력 설정을 사용하는 사람들이 접근할 수 있도록 컨텍스트 메뉴로도 접근 가능해야 해요.

Content (콘텐츠)

Make it short and clear (짧고 명확하게)

Nav는 유용한 지도 역할을 하고 사용자가 필요할 때까지 길을 방해하지 않도록 의도됐어요. 짧고 훑어보기 쉽게 만드세요. nav 항목 라벨을 지나치게 구체적으로 만들기보다 간결하고 명확하게 유지하세요.

메뉴 버튼으로 Nav를 확장·축소한다면 "Expand navigation" 또는 "Collapse navigation" 툴팁을 사용하세요.

문장형 대문자 표기(sentence style capitalization)를 사용하세요 — 각 nav 항목의 첫 단어만 대문자로 써요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization를 참고하세요.

Maintain taxonomy and order (분류와 순서 유지)

내비게이션에 자연스러운 단어를 사용하세요. 예를 들어 일부 항목은 명사("Files")로, 다른 항목은 형용사("Shared")로 더 의미가 있을 수 있어요. 고객에게 자연스러운 것을 사용하세요.

사람들이 가장 먼저 가고 싶어할 가장 중요한 범주에 우선순위를 두세요. 앱의 nav를 플랫폼 간 일관된 순서로 유지하세요. 이런 일관성은 예측 가능성을 높여 고객 신뢰를 높이고, 고객을 유지하고 참여시키는 데 도움이 돼요.

In user-facing content (사용자 대상 콘텐츠에서)

사용자 대상 콘텐츠에서 앱이나 사이트의 주요 nav를 가리킬 때는 항상 "Navigation"이라는 용어를 사용하세요. 예를 들어 "To change your preferences, go to Settings in Navigation."처럼요.

더 알아보기 (Learn more)

  • Nav 스토리북 및 React 가이드 확인
  • 깊은 계층 구조에는 Tree를 함께 참고하세요
  • Microsoft Writing Style Guide: Capitalization