{3줄 요약}
내비게이션은 지도예요. 사용자가 지금 어디 있고, 어디로 갈 수 있는지를 항상 알 수 있게 해야 해요.
내비게이션이 실패하면 기능이 있어도 찾지 못하는 것과 같아요. 사용자는 길을 잃으면 떠나요.
이 사례들은 같은 내비게이션 문제를 서로 다른 방식으로 풀었어요. 어떤 결정이 어떤 결과를 만들었는지 봐요.
내비게이션 설계는 정보 구조의 구현이에요
정보 구조(IA)가 "정보를 어떻게 조직할 것인가"를 결정한다면, Navigation Design은 그 구조를 사용자가 이동할 수 있는 인터페이스로 만드는 일이에요.
좋은 정보 구조가 있어도 내비게이션 설계가 나쁘면 사용자는 구조를 파악하지 못해요.
반대로 내비게이션이 아무리 예뻐도 정보 구조가 잘못됐으면 사용자는 길을 잃어요.
이 글에서는 내비게이션 설계가 실제 서비스에서 어떻게 결정됐는지, 그 결정이 왜 효과적이었는지를 분석해요.
내비게이션에서 어떤 문제가 생기나요
"어디 있지?" 문제: 사용자가 현재 자신이 어느 페이지에 있는지 모르는 상황이에요.
특히 깊은 뎁스(depth, 메뉴의 단계)에 들어갔을 때 많이 생겨요.
"어디서 찾지?" 문제: 원하는 기능이나 콘텐츠가 어느 메뉴 아래 있는지 예측이 안 돼요.
메뉴 레이블이 모호하거나, 사용자의 정신 모델과 다른 방식으로 분류되어 있을 때 생겨요.
"너무 많다" 문제: 상단 메뉴, 사이드바, 탭, 퀵메뉴가 동시에 있어서 어디를 봐야 할지 모르는 경우예요.
기능이 늘어나면서 메뉴를 계속 추가한 결과예요.
세 가지 내비게이션 패턴과 이유
[사례 1] 배달의민족 - 하단 탭 바
배달의민족은 앱의 주요 섹션을 화면 하단에 5개 탭으로 모았어요.
홈 / 주문내역 / 쿠폰 / MY 같은 구조예요.
왜 하단인가?
모바일에서 엄지손가락이 가장 편하게 닿는 영역이 화면 하단이에요.
탭 바가 상단에 있으면 주요 이동 경로를 매번 화면 위쪽으로 손을 뻗어서 눌러야 해요.
왜 5개 이내인가?
Miller's Law(밀러의 법칙, 사람이 단기 기억에 유지할 수 있는 항목은 7±2개)에 따르면 5개 이상의 탭은 사용자가 선택 피로를 느껴요.
탭이 너무 많으면 "지금 어느 탭이었지?"를 매번 확인해야 해요.
[사례 2] 네이버 앱 - 그로울러 + 탭 하이브리드
네이버는 방대한 서비스를 가지고 있어요.
뉴스, 쇼핑, 지도, 카페, 블로그, 웹툰, 뮤직.
... 이걸 하단 탭에 다 넣을 수 없어요.
해결책: 핵심 5개 탭(홈, 쇼핑, 뉴스 등)은 하단 고정, 나머지 서비스는 그로울러 메뉴(hamburger menu, 화면 모서리의 ≡ 아이콘을 누르면 나오는 전체 메뉴)로 접근.
이 구조가 효과적인 이유: 자주 쓰는 것은 항상 보이는 곳에, 가끔 쓰는 것은 한 단계 더 들어가야 하는 곳에.
모든 기능을 동일한 가시성으로 줄 필요 없어요.
사용 빈도에 따라 접근 위치를 달리하는 Progressive Disclosure(점진적 공개, 필요한 시점에 필요한 정보만 드러내는 방식)예요.
[사례 3] 토스 - 컨텍스트 기반 내비게이션
토스는 상단 탭이나 하단 탭이 화면 전체를 지배하지 않아요.
대신 현재 화면의 맥락에서 필요한 다음 행동이 자연스럽게 보이는 구조예요.
예: 잔액 화면에서는 "보내기", "받기", "충전" 버튼이 바로 보여요.
탭으로 이동해서 기능을 찾지 않아도 돼요.
사용자가 "잔액을 봤으니 다음에 뭘 하고 싶을까"를 예측해서 그 행동을 바로 옆에 뒀어요.
이게 정보 구조와 내비게이션이 함께 설계된 결과예요.
"사용자가 이 맥락에서 다음에 원하는 것이 무엇인가"가 내비게이션 구조가 됐어요.
내비게이션 결정이 만드는 차이
세 사례의 접근은 달랐지만 결과는 같아요.
사용자가 "어디 가야 하지?"를 고민하지 않아도 되는 상태를 만들었어요.
좋은 내비게이션의 공통점:
- 현재 위치를 항상 알 수 있어요 (활성 탭이 강조됨, 브레드크럼 등)
- 자주 쓰는 경로는 접근이 쉬워요
- 메뉴 레이블이 사용자의 언어로 되어 있어요
- 화면이 달라져도 내비게이션 위치가 일관해요
내비게이션 설계에서 가져갈 것들
플랫폼 컨벤션을 지키는 게 먼저예요: iOS는 하단 탭 바, Android는 상단 탭 또는 하단 탭을 주로 써요.
사용자는 이미 이 패턴에 익숙해요.
창의적인 내비게이션은 매력적으로 보이지만, 익숙한 패턴을 벗어나면 학습 비용이 생겨요.
뎁스(깊이)를 3단계 이내로 관리해요: 메인 → 섹션 → 콘텐츠.
이 이상 깊어지면 사용자가 위치 감각을 잃어요.
4단계 이상이 필요하다면 정보 구조를 먼저 재검토해야 해요.
내비게이션 개선은 A/B 테스트로 검증하세요: 내비게이션 변경은 파급력이 커요.
탭 이름 하나, 순서 하나가 이탈률과 클릭률에 영향을 줘요.
전체 배포 전에 일부 사용자에게 먼저 테스트하는 게 안전해요.
지금 작업 중인 프로젝트에 대입해보세요
- 이 사례에서 어떤 사용자 문제를 어떤 내비게이션 패턴으로 풀었나요?
- 내 서비스의 내비게이션에서 사용자가 가장 헤매는 지점은 어디인가요?
- 지금 내비게이션 뎁스가 3단계를 넘는 경로가 있나요?
관련 아티클
- 레이아웃 구조 이해 - 내비게이션이 전체 레이아웃에서 어떤 위치인지 연결해요.
- 정보 구조(IA) - 내비게이션이 작동하려면 정보 구조가 먼저 잘 설계되어야 해요.
- 검색 UX 설계 - 내비게이션과 함께 사용자 탐색을 지원하는 검색 경험이에요.
참고 문헌
- Peter Morville & Louis Rosenfeld, 《Information Architecture for the Web and Beyond》 - 내비게이션 설계의 이론적 기반과 패턴을 가장 체계적으로 다뤄요.
- Jenifer Tidwell, 《Designing Interfaces》(2020) - 탭 바, 그로울러, 브레드크럼 등 실무 내비게이션 패턴을 구체적으로 설명해요.