모바일 앱 내비게이션 패턴: 탭, 드로어, 중첩 흐름
작업 빈도, 정보 구조, 접근성 요구, 현재 위치로 쉽게 돌아올 수 있는지를 기준으로 모바일 앱 내비게이션 패턴을 선택하세요.
내비게이션은 앱의 구조를 이해할 수 있게 해야 합니다. 사용자는 어떤 영역이 있고 자신이 어디에 있으며 작업을 잃지 않고 어떻게 이동할 수 있는지 알아야 합니다. 탭 바, 드로어, 중첩 흐름은 스타일 취향의 문제가 아닙니다. 각각 목적지 사이의 다른 관계를 드러냅니다.
사람들이 반복해서 하는 작업에서 시작한 다음 콘텐츠 계층을 그리세요. 같은 수준의 목적지에는 직접 내비게이션을, 상위에서 세부 항목으로 이어지는 관계에는 중첩 내비게이션을 사용하세요. 앱의 목적지가 작은 화면에 편하게 표시할 수 있는 수보다 많다면 드로어나 큰 화면에 맞춰 변하는 내비게이션을 사용하세요.
핵심 요점
- 자주 다시 방문하는 소수의 구별되는 최상위 영역에는 탭이나 내비게이션 바를 사용하세요.
- 목적지가 다른 영역 안에 의미 있게 속할 때는 중첩 내비게이션을 사용하고 명확한 뒤로 가기 경로를 유지하세요.
- 드로어를 더 넓은 목적지 목록을 보여 주는 방법으로 사용하고 필수 작업을 숨기는 곳으로 쓰지 마세요.
- 레이블, 선택 상태, 포커스 동작, 상태 복원을 명확히 해 사용자가 현재 위치를 파악하고 복구할 수 있게 하세요.
컴포넌트가 아닌 구조에서 시작하기
앱의 목적지를 나열하고 사용자의 사고방식에 따라 묶으세요. 검색은 홈과 나란한 같은 수준의 목적지일 수 있고, 저장한 항목의 상세 화면은 저장한 항목 아래에 속합니다. 사용자가 같은 수준의 영역 사이를 자주 오간다면 선택지를 계속 보이게 하세요. 보통 모음에서 항목 하나로 들어갔다 돌아온다면 스택이나 중첩 흐름이 그 관계를 자연스럽게 전달합니다.
목적지와 행동을 구분하세요. 작성, 공유, 필터링, 정렬은 현재 맥락을 바꾸거나 그 안에서 작동하며, 보통 앱 안의 장소가 아닙니다. 모든 행동을 주요 내비게이션 항목으로 만들기보다 도구 모음, 메뉴 또는 맥락에 맞는 컨트롤에 두세요.
- 반복해서 하는 작업의 이름을 붙이고 어디서나 도달해야 하는 영역을 찾아내세요.
- 내비게이션 컨트롤을 고르기 전에 상하위 관계를 그리세요.
- 같은 계층 수준의 목적지를 시각적으로도 동작 면에서도 일관되게 유지하세요.
세 가지 패턴 비교하기
탭 바나 내비게이션 바는 몇 개의 최상위 목적지를 보이게 하고 빠르게 전환할 수 있게 합니다. 목적지가 같은 수준이고 각 레이블을 설명 없이 알아볼 수 있을 때 효과적입니다. 현재 영역의 선택 상태를 유지하세요. 관련 없는 행동을 바에 밀어 넣거나 중요한 목적지가 더보기 메뉴로 사라지게 하지 마세요.
내비게이션 드로어는 더 크고 묶인 목적지 목록을 담을 수 있고 때로는 계정이나 작업 공간 전환도 담습니다. 모달 드로어는 화면 공간을 절약하지만 열고 선택하는 단계가 하나 더 필요하며 일시적으로 콘텐츠를 가립니다. 작은 휴대전화에서는 자주 쓰는 목적지가 숨겨진 것처럼 느껴질 수 있습니다. Material 3의 현재 Android 지침은 작은 화면의 목적지 3~5개에 내비게이션 바를 권장하고 더 큰 창에서는 형태를 조정합니다. 목적지가 5개 이상이면 드로어를 권장하는 예전 Material 지침을 현재의 보편적인 기준으로 오해해서는 안 됩니다.
중첩 내비게이션은 목록, 카드 또는 링크로 하위 화면을 열고 제목과 뒤로 가기 컨트롤로 경로를 유지합니다. 카테고리, 설정, 제품 상세, 단계별 작업에 적합합니다. 계층이 숨겨져 있거나 뒤로 가기 동작이 일관되지 않거나 형제 영역에 가려고 여러 단계를 계속 되돌아가야 한다면 깊은 중첩이 불편해집니다. 사용자가 분기 사이를 자주 이동한다면 검색, 바로가기 또는 더 명확한 최상위 구조를 추가하세요.
| 패턴 | 적합한 경우 | 주의할 점 |
|---|---|---|
| 탭 / 내비게이션 바 | 소수의 같은 수준 영역에 자주 직접 접근해야 할 때 | 너무 많은 목적지, 모호한 아이콘, 숨겨진 더보기 항목, 탭별 상태 손실 |
| 내비게이션 드로어 | 많거나 그룹으로 묶인 목적지를 정리된 목록으로 보여 줘야 할 때 | 메뉴 뒤에 숨은 필수 영역, 긴 스크롤 목록, 포커스 또는 닫기 문제 |
| 중첩 내비게이션 | 상위 모음에서 관련 세부 항목이나 작업으로 이동할 때 | 불분명한 현재 위치, 일관되지 않은 뒤로 가기, 과도한 깊이, 입력 데이터 손실 |
작업 빈도와 화면 크기에 따라 선택하기
일반적인 세션에서 사용자가 영역 사이를 얼마나 자주 전환하는지 물으세요. 자주 쓰는 목적지가 적고 안정적이라면 보이는 바가 적합합니다. 대부분 한 작업이나 상세 읽기에 집중한다면 내비게이션을 덜 두드러지게 하고 콘텐츠 공간을 확보하세요. 덜 자주 쓰는 영역에는 드로어가 적합할 수 있지만 사용자가 추측하지 않고 찾고 돌아올 수 있는지 확인하세요.
창 크기, 방향, 플랫폼 관례를 고려하세요. Apple의 현재 Human Interface Guidelines는 iPhone 탭 바를 최상위 내비게이션으로 설명하고 iPad에서는 적응형 탭 바/사이드바 표현을 지원합니다. Material 3는 작은 화면 패턴을 내비게이션 바라고 부르며 폭이 넓어지면 다른 형태를 제공합니다. 목적은 비슷하지만 동일한 컴포넌트는 아닙니다. 한 플랫폼의 외관을 다른 플랫폼에 복사하지 말고 각 플랫폼의 기본 배치, 동작, 적응 방식을 따르세요.
현재 위치 파악과 복구를 믿을 수 있게 만들기
아이콘만 쓰면 내비게이션을 배우기 어렵고 화면 읽기 프로그램 사용자에게 불분명할 수 있습니다. 목적지에 짧고 눈에 보이는 레이블을 붙이고 선택 상태를 의미적으로 노출하며 컨트롤에 접근 가능한 이름과 충분한 터치 영역을 제공하세요. 선택 및 비선택 상태의 대비, 큰 글자, 현지화, 오른쪽에서 왼쪽으로 읽는 레이아웃을 확인하세요. 지원하는 경우 VoiceOver 또는 TalkBack과 키보드 또는 스위치 내비게이션으로 테스트하세요. 드로어가 열리거나 목적지를 고르거나 화면을 닫을 때 포커스가 예상 가능한 방식으로 움직여야 합니다.
복구도 내비게이션의 일부입니다. 뒤로와 닫기 동작을 구분하세요. 뒤로는 계층을 되짚고 닫기는 임시 또는 모달 화면을 벗어납니다. 최상위 영역을 전환하거나 상세 화면에서 돌아올 때 유용한 위치와 입력 데이터를 유지하세요. 목적지가 비어 있거나 일시적으로 사용할 수 없다면 내비게이션을 조용히 없애거나 비활성화하지 말고 위치를 유지하며 상태를 설명하세요. 파괴적이거나 비용이 드는 작업이라면 사용자가 확정하기 전에 돌아가는 경로를 명확히 하세요.
실용적인 내비게이션 점검
실제 작업을 하며 앱을 살펴보고 접근성 기능을 켠 상태에서 다시 반복하세요. 현재 영역을 파악하고, 자주 쓰는 목적지에 도달하고, 잘못 이동한 뒤 복구할 수 있는지 기록하세요. 작은 휴대전화와 큰 창에서 같은 여정을 비교하세요. 적응형 레이아웃은 컨트롤의 형태가 바뀌어도 정보 구조를 유지해야 합니다.
화면 라이브러리에서 실제 앱 영역과 흐름 사례를 비교한 다음 자체 제품 작업에 비추어 각각을 평가하세요. 가장 좋은 패턴은 앱이 커져도 구조를 읽을 수 있게 유지하고 중단 후 돌아가는 경로를 명확히 합니다.
- 새 사용자가 레이블만 보고 최상위 영역을 설명할 수 있나요?
- 같은 수준의 목적지 사이를 쉽게 전환하고 선택 상태를 명확히 볼 수 있나요?
- 상세 화면에 의미 있는 제목과 예상 가능한 뒤로 가기 경로가 있나요?
- 드로어를 열고 닫아도 맥락이 유지되고 접근성 포커스가 자연스럽게 움직이나요?
- 큰 글자와 보조 기술에서도 레이블, 터치 대상, 대비, 선택 상태를 사용할 수 있나요?
- 초안 입력, 스크롤 위치, 계층 내 유용한 지점을 잃지 않고 돌아올 수 있나요?
- 큰 화면에서도 서로 경쟁하는 주요 내비게이션을 중복하지 않고 구조가 적응하나요?
