GNB
Global Navigation Bar의 약자로, 서비스의 가장 기본적인 내비게이션을 담당하는 메뉴입니다.
서비스의
정체성을 전달하는 역할로 사용자 동선을 안내와 상위 레벨 탐색을 위해 제공되는 컴포넌트입니다.
Anatomy
-
1. Menu Icon (Optional)
메뉴를 효과적으로 전달하기 위해 아이콘을 함께 제공합니다.
-
2. Text
핵심 경로에 대한 정보를 표기합니다.
-
3. Icon (Optional)
하위 Depth가 있을 경우 표시합니다.
-
4. Line (Optional)
선택된 상태를 표시합니다.
-
5. Container (Optional)
포커스 영역을 표시합니다.
메뉴별 위계를 명확하게 구분시켜 제공합니다.
서비스 메뉴는 고유의 아이덴티티 컬러를 사용할 수 있습니다.
States
-
1. Normal
서비스의 제공된 메뉴를 선택할 수 있는 기본 상태입니다.
-
2. Focus
사용자가 위치한 메뉴를 표시하며 다른 메뉴로 이동할 수 있는 상태입니다.
-
3. Select
메뉴가 선택되어 사용자가 위치한 경로를 안내하는 상태입니다.
Placement
TV 화면 좌측에 위치합니다.
하위 Depth가 있는 경우 우측에 배치합니다.
Types
General Home
GNB 메뉴가 열리지 않은 기본적인 상태로 아이콘만 단독으로 노출합니다.
사용자가 선택하여
진입된 메뉴는 컬러와 라인을 활용하여 다른메뉴와 구분합니다.
서비스 톤 앤 매너와 맞지 않거나 시인성을 해치는 아이콘, 컬러를 사용하지 않습니다.
GNB Depth
포커스를 통해 메뉴가 열린 상태로 다른 메뉴에 대한 경로를 제공합니다.
선택된 메뉴의 하위
Depth가 있을 경우 우측에 함께 제공합니다.
하위 Depth가 없는 경우에는 화살표 아이콘을 제공하지 않습니다.
최대 글자 수가 초과할 경우 말 줄임표로 표기합니다.
Usage
General GNB
2 Depth 내 핵심 메뉴는 아이콘과 함께 사용하여 강조할 수 있습니다.
2 Depth로 진입한 경우 콘텐츠 영역을 확보하기 위해 1 Depth 위치로 이동할 수 있습니다.
GNB가 열리지 않은 상태에서는 메뉴를 이동할 수 없습니다.