Bottom navigation, 한 손 엄지 영역의 표준

한 줄로

화면 아래쪽에 자리잡은 메뉴입니다. iOS의 tab bar와 안드로이드의 bottom nav가 사실상 같은 패턴입니다.

어디서 왔나

iOS는 처음부터(2007) tab bar를 표준 패턴으로 채택했습니다. 화면 하단의 4~5개 탭. 메인 메뉴를 한 손 엄지가 닿는 영역에 두는 결정입니다.

안드로이드는 오래도록 햄버거 메뉴를 표준으로 쓰다가, 2016 Material Design 1.0의 업데이트에서 본격적으로 bottom navigation을 표준으로 채택했습니다. 그 이전까지 안드로이드의 햄버거 메뉴가 발견성 문제로 비판받던 시기였습니다.

이 변화 이후 거의 모든 모바일 앱이 bottom navigation을 채택합니다. Instagram, Twitter, Facebook, 카카오톡, 토스, 쿠팡 모두 같은 패턴입니다.

왜 작동하나

Fitts's Law: 엄지가 닿는 영역이 가장 빠르고 정확합니다.

항상 보임: 햄버거처럼 숨지 않습니다.

익숙함: 사용자가 다른 앱에서 학습된 위치입니다.

iPhone X(2017) 이후 홈 인디케이터(home indicator) 영역과 충돌이 생깁니다. 그래서 bottom nav 위에 safe area를 두는 게 표준입니다.

좋은 bottom nav의 조건

3~5개 항목: 더 많으면 시각적으로 복잡.

아이콘 + 라벨: 아이콘만은 의미가 모호.

현재 선택 표시: 색, 언더라인, 도트로.

첫 항목 = 홈: 가장 익숙한 위치.

항목 선택의 우선순위

사용자가 가장 자주 가는 4~5개 페이지.

드물게 가는 페이지는 다른 메뉴로 (햄버거, 프로필 안 등).

각 앱의 bottom nav를 비교해 보면 앱의 정체성을 알 수 있습니다.

인스타그램: 홈 / 검색 / 릴스 / 알림 / 프로필.

토스: 홈 / 송금 / 주식 / 혜택 / 전체.

카카오톡: 친구 / 채팅 / 검색 / 쇼핑 / 더보기.

함정

너무 많은 항목: 6개 이상은 사용자가 분간 못 합니다.

자주 바뀌는 라벨: 사용자가 학습한 위치가 흔들립니다.

아이콘만: 라벨을 빼면 의미 추측이 어렵습니다.

바이브 메이커가 챙길 한 가지

본인 앱의 핵심 동선이 5개 미만이라면 bottom nav가 거의 항상 최선입니다. 5개 초과라면 우선순위를 다시 정해야 합니다. "이 앱에서 사용자가 정말 자주 가는 곳은 어디인가"의 답이 디자인의 기반입니다.

관련

Tab bar · Hamburger menu · Fitts's Law