Tab bar, iOS 2007 첫 등장

한 줄로

iPhone 출시와 함께 등장한 화면 하단의 메뉴 막대입니다. 모바일 앱 구조의 표준이 됐습니다.

어디서 왔나

2007년 1월, Apple이 iPhone을 발표했습니다. 첫 iOS의 Mail, Phone, iPod 앱에 화면 하단에 4~5개 아이콘 + 라벨이 늘어선 막대가 있었습니다. Apple은 이를 Tab Bar라 이름지었습니다.

당시 휴대폰 UI의 주된 패턴은 메뉴 트리(폴더 안의 폴더)였습니다. iPhone의 tab bar는 다른 발상이었습니다. 앱의 핵심 영역 4~5개에 항상 접근 가능하게 만들기였습니다.

이 패턴이 iOS의 표준 컴포넌트가 됐고 2016년 안드로이드의 bottom navigation도 사실상 같은 개념으로 통일됐습니다.

Tab bar의 변형

iOS HIG가 정의하는 변형입니다.

표준 tab bar: 아이콘 + 라벨, 화면 하단.

컴팩트 모드: 가로 모드에서 더 좁게.

선택 강조: 색, 채워진 아이콘으로.

iPhone X 이후의 변화

2017년 iPhone X 출시 후 화면 하단에 홈 인디케이터(home indicator)(검은 막대)가 자리잡았습니다. Tab bar는 이 인디케이터 위에 살짝 떠 있는 형태로 변경됐습니다. 새 디자인 가이드입니다.

Tab bar 높이 49pt (구)에서 83pt (iPhone X 이후, 인디케이터 영역 포함)로 바뀝니다.

마지막 항목과 화면 가장자리 사이 여백을 늘립니다.

Tab bar vs Bottom navigation

iOS의 tab bar: Apple HIG 용어. iOS 앱.

Android의 bottom navigation: Material Design 용어. 안드로이드 앱.

두 개념은 거의 동일하지만, 미묘한 시각적 차이가 있습니다.

iOS: 라벨이 항상 표시.

Material: 선택 항목만 라벨 표시 (옵션).

iOS: 단색 아이콘 + 색 변화로 선택 표시.

Material: 채워짐(filled)과 외곽선(outlined) 변환.

크로스 플랫폼 앱은 보통 한 가지로 통일하거나, 각 플랫폼 가이드를 따릅니다.

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

iOS와 Android에서 동시에 동작하는 앱을 만든다면, 각 플랫폼의 표준 가이드를 따르는 게 사용자 학습 비용을 줄입니다. Jakob's Law의 직접 적용입니다. 사용자는 다른 앱에서 본 패턴을 기대합니다.

관련

Bottom navigation · Hamburger menu · Safe area