Navigation

Navigation은 사용자가 필요한 것을 찾도록 도와주며 현재 위치를 알려주는 컴포넌트입니다. 제품 내에서 상위 수준 탐색에 사용되는 구성 요소로 동일한 Hierarchy Level 화면 혹은 메뉴 사이를 이동할때 사용 됩니다.

Wind GNB

Wind GNB는 화면 좌측에 고정되어 노출되는 요소로 다른 페이지로 빠르게 이동할 수 있게 해줍니다. 5가지의 아이콘을 탭하면 사용자는 해당 아이콘과 연결된 최상위 네비게이션 대상으로 이동합니다. 언제 어디서든 직관적이고 예측 가능해야 하며 스크롤시에도 좌측에 고정되어 노출합니다. GNB는 항상 Expand 상태를 기본 상태로 정의합니다. Wind 에서 사용되는 GNB는 Wind, Wind Farm, 그리고 Admin으로 크게 세가지로 분류 됩니다.

앱 진입 시 Main Navigaiton Bar의 'DASHBOARD'가 Active 상태이며 기본값으로 계속해서 노출됩니다.

Anatomy

Variants

Main GNB의 아이콘은 Active, Inactive (Selected, Unselected)로 분류됩니다. 사용자 위치를 나타내므로 시각 일관성 고려를 위해 Active Icon Color는 Green-500, Inactive Icon Color는 Gray-500을 활용합니다. 기본 설정값에서 네비게이션 아이콘 하나는 활성화된 상태로 설정하여 사용합니다. (e.g. 로그인하여 첫 디폴트 화면으로는 Dashboard가 선택된 화면으로 한다.)

GNB Fold

GNB의 경우 사용의 용도에 따라 접었다 필 수 있으며, 해당 Action을 수행 할 수 있는 Icon Button의 경우 GNB 가장자리를 Hover시 표출 되는 것이 특징입니다.

Scroll Bar

GNB에 표출되는 Item이 화면의 영역을 넘어 갈때, Scroll Bar가 생성되며, Item의 영역 기준으로 Scroll Area가 생성되는 것이 특징입니다.

Table of Figma Properties - Wind GNB

Table of Figma Properties - Wind GNB / Item

Table of Figma Properties - Item

Table of Figma Properties - Menu

GNB Dropdown

GNB Dropdown은 옵션 리스트 중 하나의 옵션 선택 시 활용되는 컴포넌트입니다. 선택 가능한 옵션 개수가 다수일 경우, 드롭다운 메뉴를 사용해 값을 노출합니다. 드롭다운 아이템 리스트 탑색 옵션 선택 시 선택 값에 해당하는 디스플레이 화면으로 전환됩니다.

Spec

Spacing

GNB의 영역은 각 컨테이너 높이 36px을 사용합니다. Dashboard 와 Inspection간의 간격은 24px을 띄고 시작합니다. 또한 각 탭과 아이콘 별 간격은 Container 기준 Center에서 높이 12px의 간격을 두고 사용합니다. 아이콘과 레이블의 간격은 12px 입니다.

Extended Structure

Wind Farm 화면에서 사용되는 GNB는 기본 구조에 비해 추가 요소가 포함된 확장형 구조를 사용합니다. 상단에는 이전 화면으로 이동하는 Back Button이 배치되며, Farm 전환을 위한 Dropdown Button이 함께 제공됩니다. 이를 통해 사용자는 현재 컨텍스트를 유지한 상태에서 상위 화면으로 이동하거나 다른 Farm으로 빠르게 전환할 수 있습니다.

Usage Guidelines

Main GNB의 아이콘은 Active, Inactive (Selected, Unselected)로 분류됩니다. 사용자 위치를 나타내므로 시각 일관성 고려를 위해 Active Icon Color는 Green 500, Inactive Icon Color는 Gray 500을 활용합니다. 기본 설정값에서 네비게이션 아이콘 하나는 활성화된 상태로 설정하여 사용합니다. (e.g. 로그인하여 첫 디폴트 화면으로는 Dashboard가 선택된 화면으로 합니다.)

Do : GNB의 Menu의 Item 경우 Icon을 사용하지 않음

같은 위계로 사용 되는 Item들의 경우에 묶어서 사용하되, 최상위 위계에 해당하는 Item에만 Icon을 함께 사용하는 것을 원칙으로 합니다.

Don't : Active GNB Item의 상태는 단일하게 사용

Default의 상태로 정의되어진 색상이 아닌 다른 색상의 아이콘 및 Text Label의 색상으로 사용하지 않으며, GNB에서 Active 상태의 경우 중복되어 사용 되는 것을 지양 합니다.