모바일 내비게이션 설계 가이드: 탭·드로어·하단 내비게이션

2026년 10월 17일 업데이트

모바일 내비게이션은 사용자가 목적지의 위치를 예측하고 한 손으로 이동하며, 화면을 바꾼 뒤에도 맥락을 잃지 않을 때 효과적입니다. 최상위 목적지의 수, 전환 빈도, 현재 작업의 하위 섹션을 기준으로 패턴을 선택하세요.

Pixso UI 디자인 협업에서 정보 구조를 정리하고 후보 패턴의 프로토타입과 예외 상태를 팀과 검토할 수 있습니다.

1. 목적지와 전환 빈도부터 정리하기

최상위 목적지를 적고 빈도, 긴급성, 현재 작업과의 관계로 분류합니다. 자주 이동하는 목적지를 화면이 복잡해 보인다는 이유만으로 메뉴 안에 숨기지 마세요.

하단 내비게이션은 소수의 목적지를 자주 오갈 때 적합합니다. 명확한 레이블이나 익숙한 아이콘·레이블 조합을 사용하고 선택 상태를 분명하게 표시하세요.

탭은 같은 대상이나 작업의 병렬 화면에 적합합니다. 프로젝트 안의 개요, 활동, 설정처럼 서로 같은 수준인 화면을 전환할 때 사용하세요. 서로 다른 제품 영역을 섞거나 설명이 필요한 긴 레이블을 넣으면 혼란이 생깁니다.

선택된 탭을 항상 보여 주고, 가로 스크롤이 필요하면 알아볼 수 있는 단서를 제공합니다. 탭이 늘어나면 글자를 줄이기보다 정보 구조를 다시 검토하세요.

드로어는 워크스페이스 전환, 도움말, 계정, 설정처럼 매번 사용하지 않는 목적지를 담는 데 적합합니다. 주요 작업이나 자주 확인할 목적지를 숨기는 용도로는 적합하지 않습니다.

드로어를 열었을 때 현재 화면과의 관계를 유지하고 닫는 방법을 명확히 하세요. 지원 플랫폼의 키보드, 스크린 리더, 포커스 동작과 열림·닫힘·중단 상태도 프로토타입으로 확인합니다.

전역은 제품 안의 위치, 로컬은 목적지 안의 섹션, 컨텍스트 동작은 현재 항목에서 할 일을 답합니다. 각 수준을 서로 다른 시각·상호작용 방식으로 표현하세요.

긴 레이블, 딥 링크, 결과 없음, 오프라인, 권한 제한, 다른 앱에서 돌아오는 상황을 테스트하세요. 선택 목적지 복원, 입력 보존, 뒤로 가기 제스처의 계층 이동을 미리 정합니다.

Pixso에서는 화면 옆에 작은 상호작용 표를 두고 각 컨트롤을 목적지에 연결한 뒤 유지해야 할 상태를 주석으로 남길 수 있습니다.

레이블, 포커스 순서, 대비, 터치 영역, 모션은 내비게이션 설계의 일부입니다. 색상만으로 상태를 전달하지 말고 큰 글자와 긴 번역에서도 동작하는지 확인하세요.

자주 전환하는 안정적인 최상위 목적지만 넣습니다. 정해진 숫자는 없으며 레이블이 빽빽해지면 계층을 다시 설계하세요.

보조 목적지에는 유용합니다. 주요 작업을 숨기거나 안에 무엇이 있는지 알기 어렵게 만들 때 문제가 됩니다.

수준이 분명하면 가능합니다. 하단 내비게이션은 전역 영역을, 탭은 현재 영역의 형제 화면을 전환하도록 역할을 나누세요.

목적지, 전환 행동, 작업 계층을 기준으로 내비게이션을 선택하세요. 자주 사용하는 영역은 발견 가능하게 유지하고, 탭은 같은 수준의 화면에만 사용하며, 드로어에는 보조 목적지를 배치합니다.