Navigation
Components
Navigation은 2가지로 Bottom Navigation, GNB Header이며 화면 위치에 따라 분류됩니다.
Bottom Navigation은 5개의 아이콘으로 구성되어 화면 최하단에 노출되며 선택에 따라 해당되는 내용의 화면이 보여집니다.
Header는 화면 내용에 따라 타이틀과 아이콘이 달라지므로 참고하여 사용합니다.
- A
- B
Bottom Navigation
Bottom Navigation은 화면 하단에 노출되는 요소로 다른 페이지로 빠르게 이동할 수 있게 해줍니다. 5가지의 아이콘을 탭하면 사용자는 해당 아이콘과 연결된 최상위 내비게이션 대상으로 이동합니다. 언제 어디서든 직관적이고 예측 가능해야 하며 스크롤 시에도 계속 하단에 고정되어 노출합니다.
Anatomy
Variants
States
Bottom Navigation의 아이콘은 Inactive, Active로 분류됩니다. 사용자 위치를 나타내므로 시각 일관성 고려를 위해 Active Icon Color는 Green-500, Inactive Icon Color는 Gray-900을 활용합니다.
기본 설정값에서 내비게이션 아이콘 하나는 활성화된 상태로 설정하여 사용합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| State | Active, Inactive | Active Home Only |
Behaviors
Transitions
Bottom Navigation은 항상 하단에 고정되어 노출되며 각 하단 탐색 아이콘은 Acitve상태일 때 해당되는 메인페이지로 화면이 전환됩니다. Category&Search가 Active상태일 때에는 통합 검색 대기 레이어가 출현하며 Bottom Navigation은 노출되지 않습니다.
Home, Mypage, History가 Active인 상태에서 한 번 더 탭하면 페이지 최상단으로 스크롤되어 새로고침 됩니다.
Smilehome Interaction
프로모션 이벤트 기간동안 Smilehome 아이콘의 인터렉션은 앱 진입 시 마다 최초 1회 재생되며 홈 이탈 후 재진입할 때는 재생되지 않습니다.
Usage Guidelines
Do : 탐색 옵션은 5개 고정으로 사용
동일한 간격과 아이콘 사이즈를 유지하여 사용합니다.
Do : 모바일 웹에서 탐색 옵션은 4개 고정으로 사용
모바일 웹에서는 Smilehome 메뉴는 노출되지 않고 나머지 탐색 옵션 4개만 사용합니다.
Do : 아이콘 컬러와 상태값은 한 가지로 사용
아이콘 컬러는 정해진 색상 한 가지만 사용하며 화면 위치에 맞는 아이콘 버튼 한 가지만 Active로 표시됩니다.
Don’t : 아이콘 컬러와 상태를 중복으로 사용하지 않음
기본 색상이 아닌 다른 색상의 아이콘을 사용하지 않으며, Active상태의 아이콘을 중복으로 사용하는 것을 제한합니다.
Do : Smilehome 아이콘은 8의 간격을 두고 사용
아이콘들은 동일한 간격을 유지하되 SmileHome의 경우 아래 높이 기준 8의 간격을 두고 중앙에 배치하여 사용합니다.
Don’t : Smilehome 아이콘 아래 간격 생략
Smilehome 아이콘의 위치를 아래 기준 8의 간격을 유지하지 않은 경우를 제한합니다.
Do : Smilehome 프로모션 진행 시
동일한 간격과 아이콘 사이즈를 유지하면서 프로모션 내용에 따라 표현에 대한 확장 가능성이 있습니다.
Spec
Sizes
Bottom Navigation의 Container는 단일 사이즈로 높이 기준 48을 사용합니다. 이외 각 아이콘 버튼의 Touch Area는 48, 아이콘 Style은 ‘32 size’로 고정해 사용합니다. Smilehome 아이콘은 Container기준 Center에서 높이 8의 간격을 두고 사용합니다.
Size in Tablet
태블릿에서 최대 너비는 768을 기준으로 균등하게 나누어 각각 153.6의 Center에 배치합니다. 전체 너비는 운영체제나 디바이스에 따라 동적으로 바뀝니다.
Interaction Area
Smilehome은 Lottie 링크로 제공하며 터치 영역 넓이는 106 x 88입니다.
GNB Header
GNB Header는 현재 화면과 관련된 정보와 작업을 표시하며 연속된 화면의 계층을 탐색할 수 있도록 합니다. Contextual Action icon(아이콘 버튼)은 같은 위치에 있지만 상황에 따라 알맞게 바꿔 사용합니다. 가장 왼쪽에 Navigation icon을 배치하고, 현재 위치한 화면의 Title과 상황 별 작업에 따른 Action items를 배치하여 사용합니다.
Anatomy
Variants
Contents
GNB Header는 Basic 일반 헤더와 Corner별 헤더가 있습니다. GNB Header의 타이틀 영역을 화면의 내용에 맞는 Corner별 서비스 로고이미지를 배치하여 사용 가능합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Contents | Basic, Corner | - |
Behaviors
Scrolling the screen
GNB Header는 스크롤 방향과 화면 내의 Tab 등 구성요소의 노출 시점에 따라 최상단에 각각 다르게 노출됩니다.
Basic Header는 스크롤, 역스크롤 시 최상단에 고정되어 항시 노출됩니다.
Tab이 있는 화면에서는 공통적으로 역스크롤 시 GNB Header와 Tab이 함께 고정되어 노출됩니다.
Usage Guidelines
Do : 타이틀 텍스트는 정해진 영역에 맞게 사용
현재 위치한 화면 또는 섹션에 대한 제목을 간단하고 명확하게 정의하여 사용합니다.
Don’t : 타이틀을 잘리게 사용하지 않음
전체 타이틀 텍스트를 숨기거나 자르면 오해가 발생할 수 있으므로 제한합니다.
Do : Left To-Right 타이틀 사용 (e.g. 상품 상세 페이지)
왼쪽에서 오른쪽으로 쓰는 타이틀의 헤더는 상품 상세 페이지에서만 한정적으로 사용합니다.
Do : Corner 전용 헤더 사용 (e.g. 상품 상세 페이지)
코너 전용 헤더는 Navigation아이콘 버튼과 Action아이템 버튼의 컬러를 반전시켜 Container의 컬러와 타이틀을 변경하여 사용 가능합니다.
Spec
Sizes
GNB Header의 Container는 단일 사이즈로 높이 48을 사용합니다. 아이콘 Style은 ‘24사이즈’ 고정으로 Touch Area는 48입니다.
전체 너비는 운영체제나 디바이스에 따라 동적으로 바뀝니다.
