Top Navigation
화면 상단에 위치하여 탐색 인터페이스를 제공하는 네비게이션 컴포넌트입니다.
Anatomy
Top Navigation은 Root 타입과 Standard 타입, 두 가지로 나뉩니다. 각 타입은 별도의 구현체와 Figma 컴포넌트로 제공됩니다.
Properties
Title Type
Root Top Navigation의 Title 영역에는 Label만 표시하는 Text 타입과, 선택 시 동작이 있는 Button 타입을 선택하여 사용할 수 있습니다.
Standard Top Navigation의 경우 Title 영역을 Slot으로 구성하여 조금 더 다양한 조합으로 사용할 수 있습니다.
Left Slot
Standard 타입 Top Navigation은 2-depth 이상의 화면에서 사용하며, 왼쪽에 네비게이션 액션을 배치할 수 있습니다. 뒤로가기와 닫기 버튼을 배치할 수 있으며, 두 버튼은 서로 다른 동작을 제공합니다. 각 버튼의 차이를 이해하고 정확한 용도에 맞게 사용해야 합니다.
왼쪽에 추가 액션이 필요한 경우 숨겨진 Icon Button을 사용할 수 있습니다. 꼭 필요한 상황에서만 제한적으로 사용하는 것을 권장합니다. 이 옵션은 Figma에서만 제공합니다.
Right Slot
Top Navigation 우측은 Slot으로 구성되어 Icon Button 또는 Text Button을 배치할 수 있습니다. Icon Button은 최대 3개까지 추가 가능하며, 타이틀 영역과 겹치지 않도록 개수를 조정하여 사용하는 것을 권장합니다.
Notification Badge
Icon Button에 Notification Badge를 표시할 수 있습니다. Small과 Large 사이즈 모두 사용 가능하며, Large 사이즈는 숫자 정보가 필요한 경우에 사용합니다.
Guidelines
Root Top Navigation과 Standard Top Navigation의 차이
Top Navigation은 Root 타입과 Standard 타입, 두 가지로 나뉩니다. 각 타입은 별도의 구현체와 Figma 컴포넌트로 제공됩니다.
Root Top Navigation
앱의 최상위 루트 탭에서 사용되며, 핵심 액션 진입을 제공합니다.
Standard Top Navigation
2-depth 이상의 화면에서 사용됩니다. 뒤로가기 또는 닫기, 타이틀, 보조 액션을 통해 현재 위치와 주요 인터랙션을 안내합니다.
뒤로가기(Back)와 닫기(Close) 동작
뒤로가기(Back)와 닫기(Close)는 비슷해 보이지만 서로 다른 동작을 제공합니다. 사용자의 흐름에 큰 영향을 주므로 각 동작을 정확히 이해하고 사용하는 것이 중요합니다.
| 구분 | 뒤로가기 (Back) | 닫기 (Close) |
|---|---|---|
| 이동 방식 | 이전 화면으로 이동 | 현재 레이어/플로우 종료 |
| 적용 위치 | 일반 페이지, 계층 구조 화면 | 모달, 독립 플로우 |
| UX 의미 | 한 단계 뒤로 가기 | 이 플로우를 끝내고 나가기 |
| 아이콘 | < (Chevron Left) | X (Close) |
| 예상 행동 | 이전 단계 유지 | 현재 상태/입력 값이 폐기될 수 있음 |
뒤로가기 (Back)
네비게이션 스택을 기반으로 현재 화면을 이전 화면으로 되돌립니다. 히스토리 기반(History Back)과 계층 기반(Hierarchy Back)으로 구분되며, 화면의 목적과 진입 경로에 따라 선택해서 사용합니다.
- 계층적인 화면 구조에서 단계별 이동이 필요한 경우
- 사용자의 입력 내용을 유지해야 하는 경우
닫기 (Close)
현재 화면을 종료하고 상위 레이어로 복귀합니다. 페이지 히스토리를 거슬러 올라가는 것이 아니라, 열려있는 모달, Bottom Sheet, 전체 화면 등을 닫는 동작입니다.
- 모달/풀스크린 모달/Bottom Sheet처럼 레이어를 닫는 경우
- 상태를 초기화하거나, 플로우를 종료하거나, 작업을 중단하는 경우
뒤로가기(Back)의 두 가지 동작: History Back vs. Hierarchy Back
뒤로가기 버튼은 일반적으로 '이전 화면으로 돌아가는 행동'으로 생각할 수 있지만, 실제로는 History Back(히스토리 기반)과 Hierarchy Back(계층 기반)으로 구분됩니다. 사용자가 예상치 못한 이동을 경험하지 않도록 일관된 정책을 적용하는 것이 중요합니다.
| 구분 | History Back | Hierarchy Back |
|---|---|---|
| 기준 | 사용자의 실제 이동 경로 | 앱의 정보 구조 (IA) |
| 이동 결과 | 직전 화면으로 이동 | 상위 레벨 화면으로 이동 |
| 외부 진입 | 외부로 다시 나갈수도 있음 | 앱 내부 상위 화면으로 고정 |
| 대표 케이스 | 검색, 추천, 피드 기반 탐색 | 설정, 프로필, 고정 구조 메뉴 |
History Back (히스토리 기반 뒤로가기)
사용자가 실제로 거쳐온 페이지 순서대로 돌아가는 뒤로가기 방식입니다. 방문 기록을 기반으로 동작합니다.
- 검색, 추천 지면 등 연속적인 탐색 흐름이 있는 경우
- 외부에서 딥링크로 상세 화면에 바로 진입한 경우, Back하면 외부 브라우저로 돌아갈 수 있음
Hierarchy Back (계층 기반 뒤로가기)
앱의 정보구조(IA)에 따라 상위 레벨 화면으로 이동하는 뒤로가기 방식입니다. 앱 구조를 기반으로 동작합니다.
- 설정 화면처럼 고정된 구조를 따라 이동해야 하는 경우
- 외부에서 딥링크로 상세 화면에 바로 진입한 경우, 상위 화면으로 이동하도록 정의할 수 있음
타이틀 작성하기
타이틀은 한 줄로 표시되도록 간결하게 작성합니다. 액션 개수에 따라 타이틀 길이가 자동 조정되며, 길어지면 말줄임으로 표시됩니다. 글로벌 앱에서는 말줄임 대신 그라디언트로 표시됩니다.
Figma에서는 타이틀 말줄임 처리가 되어 있지 않습니다. 구현체에서 확인해주세요.
우측 액션 영역 사용하기
Top Navigation 우측에는 화면에서 접근 가능한 보조 액션을 표시할 수 있습니다. 아이콘 버튼은 최대 2개까지 표시하는 것을 권장합니다. 필요시 3개까지 표시할 수 있으나, 타이틀 텍스트가 충분히 표시되지 않을 수 있으니 주의하세요. 텍스트 버튼은 1개만 표시할 수 있습니다.
액션이 3개를 초과하는 경우, 더보기 버튼과 Menu Sheet를 조합하여 중요한 액션만 노출하고 나머지는 숨기는 것을 권장합니다.
스크롤 시 동작
Top Navigation은 스크롤 시 항상 상단에 고정되는 동작을 기본으로 가집니다. 고정된 영역과 스크롤되는 영역을 구분하기 위해 별도의 시각적인 장치를 표시하지 않습니다.
배경이 투명한 Top Navigation을 사용하는 경우 스크롤할 때 배경색이 채워지는 동작을 가집니다.
Top Navigation V3 변경점
- Main Tab과 Sub Page를 별도 컴포넌트로 분리하여 제공해요.
- Main Tab의 높이와 타이틀 크기를 조정하여 더 명확하고 직관적으로 개선했어요.
- 액션 아이콘 간격을 넓혀 터치 영역을 확보하고 시각적 균형을 맞췄어요.
- 액션 아이콘에 Notification Badge 컴포넌트를 적용했어요.
- 더 깔끔한 인상을 위해 Divider를 제거했어요.
- Left Action 속성을 새로 추가해 Back, Close 등 다양한 상황에서 더 편리하게 사용할 수 있어요.
Specification
theme=cupertino
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | minHeight | 44px |
| paddingX | |||
| icon | size | 24px | |
| targetSize | 44px |
theme=android
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | minHeight | 56px |
| paddingX | |||
| icon | size | 24px | |
| targetSize | 44px |
tone=layer
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | |
| title | color | ||
| subtitle | color | ||
| icon | color |
tone=transparent
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | color | #00000000 |
| title | color | ||
| subtitle | color | ||
| icon | color |
divider=true
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | strokeColor | |
| strokeWidth | 1px |
titleLayout=titleOnly
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | title | fontSize | |
| fontWeight | |||
| lineHeight |
titleLayout=withSubtitle
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | title | fontSize | |
| fontWeight | |||
| lineHeight | |||
| subtitle | fontSize | ||
| fontWeight | |||
| lineHeight |
Last updated on