UXUI 디자인 요소 컴포넌트 Google Material Design 내비게이션

컴포넌트는 사용자 인터페이스를 구성하는 상호작용 가능한 기본 요소입니다. 이들은 목적에 따라 다음과 같은 카테고리로 분류할 수 있습니다:

• 액션(Action)
• 컨테이너(Containment)
• 커뮤니케이션(Communication)
• 내비게이션(Navigation)
• 선택(Selection)
• 텍스트 입력(Text Input)

---

네비게이션(Navigation)

 

-사용자가 앱이나 웹사이트에서 다른 페이지나 섹션으로 이동할 수 있도록 돕는 메뉴 구성 요소로 일반적으로 상단 바, 사이드 바, 또는 드롭다운 메뉴 형태로 나타납니다.

①Container ②Icon ③Label text ④Active indicator ⑤Small badge (optional) ⑥Large badge (optional) ⑦Large badge label

 

 

• 내비게이션 바(Navigation bars)는 소형 디바이스에서 사용자가 UI 화면 간 전환을 할 수 있도록 합니다.
• 내비게이션 드로어(Navigation drawers)는 대형 디바이스에서 사용자가 UI 화면 간 전환을 할 수 있도록 합니다.
• 내비게이션 레일(Navigation rails)은 중간 크기 디바이스에서 사용자가 UI 화면 간 전환을 할 수 있도록 합니다.
   

내비게이션 바는 3~5개의 목적지로 구성할 수 있습니다.

 

Navigation bar(내비게이션 바)는 보통 3~5개의 목적지(destination)에 접근할 수 있도록 제공합니다. 내비게이션 바는 사용자가 쉽게 접근할 수 있도록 화면 하단(bottom)에 위치합니다. 각 목적지는 아이콘(icon)과 텍스트 라벨(label text)로 구성됩니다. 이 중에서 하나의 목적지는 항상 활성화(active)된 상태입니다. 사용자가 내비게이션 바의 아이콘을 탭(tap)하거나 포커스(focus)하면, 해당 아이콘과 연결된 목적지 화면으로 이동하게 됩니다.

 

제품에 5개 이상의 내비게이션 항목이 있는 경우, 내비게이션 바를 사용하지 않는 것이 좋습니다. 요소들이 서로 겹칠 수 있고, 번역된 텍스트를 표시할 충분한 공간이 확보되지 않을 가능성이 큽니다.

 

모바일 또는 태블릿에서는 내비게이션 바를 최상위 목적지(top-level destinations)에 사용하는 것이 좋습니다.

 

내비게이션 바는 다음과 같은 경우에 사용해야 합니다:

• 제품 내 주요 페이지가 3~5개일 때
• 모바일 또는 태블릿 환경에서만

내비게이션 바는 다음과 같은 경우에 사용하면 안 됩니다:

• 이메일 한 개 확인과 같은 단일 작업(single task)에 접근할 때
  

세로형 내비게이션 항목은 컴팩트한 화면에서 가장 효과적입니다. 가로형 내비게이션 항목은 중간 크기 화면에서 가장 효과적입니다.

 

내비게이션 항목은 세로 또는 가로로 배치할 수 있습니다.

• 모바일과 같은 컴팩트한 화면(compact window)에서는 세로형 항목을 사용합니다.
• 태블릿과 같은 중간 크기 화면(medium window)에서는 가로형 항목을 사용합니다.

 

내비게이션 바에는 5개를 초과하는 항목을 배치하지 마세요. 내비게이션 항목에서 라벨을 제거하지 마세요. 목적지가 3개 미만일 경우 내비게이션 바를 사용하지 마세요. 대신 탭을 사용하세요.

 

제품에 5개 이상의 내비게이션 항목이 있는 경우, 내비게이션 바를 사용하지 않는 것이 좋습니다. 요소 간 충돌이 발생할 수 있으며, 번역된 텍스트를 표시할 충분한 공간이 부족할 가능성이 있습니다.

 

서로 구분되는 페이지에는 내비게이션을 사용하고, 하나의 페이지 내에서 관련 콘텐츠를 나눌 때는 탭을 사용하세요.

내비게이션 바의 목적지는 고정된 위치를 유지해야 합니다. 스크롤하거나 위치를 변경하지 마세요.

 

대신 다음과 같은 방법을 고려하세요:

• 페이지 내에서 유사한 콘텐츠를 구성할 때는 탭(tabs)을 사용하거나
• 모달 형태로 확장되는 내비게이션 레일(modal expanded navigation rail)을 활용해 메뉴 아이콘 뒤에 내비게이션을 숨기는 방식을 사용할 수 있습니다.

Icon

내비게이션 항목이 활성 상태일 때는 채워진 아이콘(Filled icon)을 사용합니다. 채워진 버전의 아이콘이 없다면, 아이콘의 두께(weight)를 더 굵게 해야 합니다.

 

내비게이션 레일 항목은 해당 페이지의 콘텐츠를 상징하는 아이콘을 사용해야 합니다. 일반적으로 널리 사용되는 아이콘을 참고하는 것이 좋습니다.

• 활성 상태(Active): 채워진 형태의 아이콘(Filled icon) 사용
• 비활성 상태(Inactive): 외곽선 형태의 아이콘(Outlined icon) 사용
• 만약 아이콘에 채워진 버전이 없다면, 대신 세미볼드(Semibold) 두께를 적용합니다.

내비게이션 바에서는 여러 색상이나 대비가 낮은 색상 사용을 피해야 합니다. 이는 활성 항목을 구분하고 다른 목적지로 이동하는 것을 어렵게 만듭니다.

 

활성 및 비활성 아이콘은 모두 컨테이너와 최소 3:1 이상의 명도 대비(contrast ratio)를 가져야 합니다.