모바일 UI 디자인 기본 요소 - Tab bar
모바일 앱의 글로벌 내비게이션 컨트롤 Tab bar
탭바 Tab bar는 사용자가 앱 내에서 중요한 콘텐츠 사이를 빠르게 전환할 수 있도록 하는 글로벌 탐색 컨트롤 Global navigation control이다.
Tab bar는 사용자가 현재 탐색 상태를 유지하면서 계층 구조의 최상위 레벨 Top Level의 콘텐츠 그룹에 빠르게 접근할 수 있도록 한다.
글로벌 내비게이션이란?
Tab bar를 디자인하기 전에 먼저 Global Navigation에 대해 이해해야 한다.
‘Global Navigation’은 앱과 웹사이트가 제공하는 콘텐츠의 전체적인 탐색을 지원한다
또한 애플리케이션이나 웹사이트의 어느 곳으로든 이동할 수 있는 일관된 수단을 제공하기 위해 페이지 전체에 걸쳐 화면의 동일한 위치에 유지된다.
쉽고 명확한 글로벌 내비게이션은 좋은 사용자 경험을 디자인하는 첫 번째 단계이다.
글로벌 탐색 컨트롤을 데스크톱 앱이나 웹사이트에서는 Global Navigation Bar라고 부르고 약자로 GNB라고 한다.(외국에서는 Top navigation bar 또는 UI shell header , Navi bar 등으로 다양하게 부르지만 한국에서는 대부분 GNB라고 부른다.) GNB는 페이지를 이동해도 화면의 상단에 고정된 영역에 지속적으로 노출되고 웹사이트 전체에 일관성 있게 적용된다. 사용자는 페이지를 이동하고 탐색하면서 동일한 앱과 웹사이트를 사용하고 있다고 인식한다.
Maze사이트의 일반적인 GNB구조Global navigation bar
GNB의 기본 구조는 왼쪽에는 로고가 위치하고 중앙에는 최상위 레벨의 콘텐츠 그룹이 있고 우측에는 검색과 로그인 또는 장바구니 같은 기능이 있다. 이러한 GNB의 구조와 기능은 웹사이트만을 한정하면 어느 정도 일반화되어 있다.
웹사이트의 아이덴티티를 표현하는 브랜딩요소로 인식되어 GNB의 그래픽을 강조하는 경향이 있었지만 콘텐츠 중심이 되면서 최근의 디자인은 최소화하고 단순해지는 추세이다.
Apple.com의 GNB 디자인 변화위 그림은 Apple 웹 사이트의 GNB 디자인 변화를 정리한 것이다. 초기에는 많은 그래픽을 사용했지만 현재는 그래픽을 거의 사용하지 않는 디자인으로 변화했다.
2000년과 2023년 애플 사이트 비교2000년과 2023년 애플 사이트를 비교하면 2023년의 사이트가 콘텐츠가 더 부각되는 것을 볼 수 있다.
초기의 웹사이트에 비해 현재의 웹사이트는 내비게이션 컨트롤 같은 인터페이스 요소보다는 웹사이트의 콘텐츠를 더 부각해 디자인하는 추세이다. 따라서 GNB는 사용자가 콘텐츠를 보는데 집중할 수 있게 단순한 형태와 최소화된 그래픽을 사용하여 디자인한다.
대부분의 GNB는 페이지를 아래로 스크롤해도 상단에 고정되어 지속적으로 노출한다.(스크롤 시 사라지는 경우도 있다) 모달 Modal을 제외한 웹사이트의 거의 대부분의 페이지에 고정되어 보인다.
디바이스 크기별 글로벌 내비게이션
디바이스나 화면의 크기에 따라 글로벌 내비게이션 컨트롤을 다르게 적용한다.
Material 3의 글로벌 내비게이션 위치PC와 노트북 같은 데스크톱(1240px 이상의 크기화면 - 1280, 1440, 1920)에서는 GNB는 바 형태로 화면의 상단에 위치하거나 Navigation drawer(Side bar)를 사용하고 화면의 왼쪽에 위치한다.
태블릿(600-1239px사이 크기의 화면)의 경우 Apple iOS에서는 사이드바 Sidebars로 안드로이드의 머터리얼 3은 Navigation rail과 사용하고 화면의 왼쪽에 위치한다.
모바일(320-599px사이 크기의 화면)은 iOS는 Tab bar를 안드로이드의 머터리얼 3은 Navigation bar를 사용하고 화면의 하단에 위치한다.
데스크톱의 경우 일반적으로 GNB를 사용하지만 메일, 크라우드, 대시보드 등의 기능위주의 데스크톱 앱은 많은 메뉴를 지원하기 위해 사이드바 Sidebars를 사용한다.
인스타그램 예시인스타그램의 글로벌 내비게이션은 모바일은 Tab bar, 타블릿은 Navigation rail , 데스크탑은 Navigation drawer(Side bar)를 적용했다.
각각의 브레이크포인트 Breakpoint에 따라 일관성 있게 내비게이션 컨트롤을 적용해야 한다. 여기서는 모바일 글로벌 내비게이션 컨트롤인 Tab bar만을 다룬다.
Tab bar 명칭의 통일
Tab bar는 iOS에서는 "Tab bar" 안드로이드 머터리얼 2에서는 "Bottom navigation bar"로 머터리얼 3에서는 "Navigation bar"로 부른다. (Bottom navbar라고 부르기도 한다. ) 버튼 Button과 같이 명칭이 통일되어 있지 않는 인터페이스 요소이다.
구글은 Tab bar를 Material Design 2에서는 Bottom navigation으로 Material Design 3에서는 Navigation bar로 부른다.이 글에서는 Tab bar(탭바)로 명칭을 통일한다. 애플이 모바일 OS인 iOS 초기부터 글로벌 내비게이션 컨트롤로 Tabbar를 사용해 왔기 때문이다. 구글의 안드로이드 OS는 초기에는 햄버거 메뉴(drawer menu)로 사용했다.
Tab bar는 모바일 앱에 최적화된 글로벌 탐색 컨트롤이다.
큰 화면의 데스크톱에서 글로벌 내비게이션은 Gnb와 사이드바로 어느 정도 표준화 또는 일반화되었다고 볼 수 있다. 커머스나 회사 사이트 같은 콘텐츠 중심의 웹사이트는 GNB를 메일이나 구글 드라이브, 지라 같은 데스크톱 앱은 사이드바 Side bar를 주로 사용한다. 모바일의 글로벌 내비게이션은 접근 방법의 차이에 따라 크게 두 가지 방식이 있다. 하나는 구글의 안드로이드에서 사용하는 햄버거 메뉴와 내비게이션 드로워 Navigation Drawer패턴이고 두 번째는 애플 iOS의 탭바이다.
구글은 데스크톱의 내비게이션 방식을 즉 GNB를 모바일에 맞게 적용하는 방법을 고민했다. 이에 따라 글로벌내비게이션은 화면상단의 app bar로 우측에 햄버거 메뉴가 있고 이 메뉴를 터치하면 데스크톱의 메뉴구조가 나타나는 방식이 초기의 안드로이드 앱의 글로벌내비게이션으로 개발되었다.
애플은 iPhone의 운영체제인 iOS개발단계부터 마이크로소프트같이 기존의 데스크톱 OS인 윈도즈를 모바일용으로 확장하지 않았다.
스티브 잡스는 매킨토시용 운영체제인 맥 OS는 방대한 용량 때문에 결코 휴대전화 안에 넣을 수 없다고 생각하고 처음부터 모바일 전용 (iPhone전용) OS를 따로 개발했다
모바일에 최적화된 글로벌 내비게이션 인터페이스를 iOS 초창기부터 만들어졌다. 데스크톱의 글로벌 내비게이션인 GNB의 기능을 하는 내비게이션 컨트롤을 모바일에서는 Tab bar로 불렀다.
Tab bar은 데스트톱 웹사이트의 GNB와 동일한 기능을 한다
GNB와 마찬가지로 Tab bar의 각 항목은 앱 계층의 최상위 레벨 Top Level의 콘텐츠와 기능을 나타낸다. 최상위 레벨로 이동한 사용자는 그 하위레벨로 이동하며 탐색한다. 앱 전체에서 Tab bar를 지속적으로 노출하여 앱의 하위레벨에서 다른 최상위 레벨로 접근이 가능하다. Tab bar를 통해 사용자는 앱의 주요 기능과 콘텐츠를 어디서든 빠르게 이동 또는 접근할 수 있고 현재 위치가 어디인지에 대한 지속적인 정보를 알 수 있다.
Tab bar는 화면의 하단에 레이아웃한다.
데스크톱의 GNB가 상단의 고정된 영역에 레이아웃 한다면 모바일 앱의 Tab bar는 화면의 하단에 레이아웃한다.
스마트폰은 한 손으로 사용하는 경우가 많다. 터치스크린 인터페이스는 미학적으로 보기 좋을 뿐만 아니라 손가락, 특히 엄지손가락에 맞게 구성되어야 한다. 모바일은 손가락으로 조작하고 가장 많이 사용하는 손가락은 엄지 손가락이다. 대부분의 주요 인터페이스 요소가 화면 상단이 아닌 하단에 위치하는 이유이다.
데스크톱 경험을 위해 설계된 인터페이스는 일반적으로 주요 탐색 인터페이스 요소를 화면 상단 또는 왼쪽에 배치하는 디자인 규칙을 따른다. 모바일 경험은 그 반대이다. 모바일 환경의 주요 컨트롤은 엄지손가락만 사용하여 탐색할 수 있는 화면 영역인 "엄지손가락 영역 Thumb zone"에 있어야 한다.
위의 그림같이 모바일의 주요 컨트롤은 화면의 하단에 레이아웃한다. 따라서 대부분의 주요 앱의 Tab bar는 화면의 하단에 위치한다.
모달과 랜딩페이지(상품 상세 페이지 등) 제외한 대부분의 화면에 를 Tab bar위치시킨다.
햄버거 메뉴 Hamburger menu와 Tab bar
데스크톱과 모바일의 가장 큰 차이점은 화면의 크기이다.
화면의 크기가 작아지면서 데스크톱에서 보이던 많은 기능요소들을 모바일에서는 다 담을 수 없다
이러한 문제의 해결 방식은 Tab bar같이 가장 중요한 요소만 노출하고 그 외의 기능은 숨기거나 이전하는 방식이 있고 햄버거 메뉴처럼 전부 숨기고 사용자가 원할 때 찾을 수 있도록 하는 방법이 있다.
Tab bar는 모바일 앱을 위한 인터페이스이고 햄버거는 화면이 넓은 데스크톱 웹사이트의 많은 기능들을 화면이 작은 모바일화면에 맞게 적용하기 위한 해결책으로 볼 수 있다.
구글은 데스크톱의 내비게이션 방식을 죽 GNB를 모바일에 맞게 적용하는 방법을 고민했다. 이에 따라 글로벌 내비게이션은 화면상단의 App bar로 우측에 햄버거 메뉴가 있고 이 메뉴를 터치하면 데스크톱의 메뉴구조가 나타나는 방식이 초기의 안드로이드 앱의 글로벌내비게이션으로 인터페이스였다.
따라서 데스크톱의 많은 기능과 콘텐츠 그룹을 숨기고 작은 햄버거 버튼만 노출했다. 햄버거 버튼을 터치할 경우 숨겨져 있던 내비게이션 기능(Navigation drawer)이 노출된다.
이에 비해 탭바는 처음부터 모바일 앱의 내비게이션을 위해 고안되었다. 화면이 작은 모바일에 맞게 데스크톱의 많은 기능보다는 가장 중요한 기능과 콘텐츠 그룹으로 최적화된 형태이다.
햄버거 메뉴로 대표되는 Navigation drawer는 앱 탐색 시 다음과 같은 문제점이 있다.
첫 번째는 최상위 레벨 간의 접근성이 떨어진다.
최상위 레벨의 하위 레벨을 탐색 중에 다른 최상위 레벨로 이동하기 위해서는 햄버거 메뉴를 터치해서 Navigation drawer를 열고 이동해야 한다. Tab bar의 경우는 하단에 지속적으로 노출되어 이동이 편리하다.
두 번째는 사용자가 현재 위치를 알기가 어렵다.
Navigation drawer가 가려져있어서 앱을 탐색하다가 사용자가 어떤 최상위 레벨을 탐색 중인지 인지하기 어렵다. 그에 비해 Tab bar는 하단에 지속적으로 노출되어 직관적으로 현재위치를 알 수 있다.
안드로이드의 햄버거 메뉴는 Tab bar과 동일한 기능이지만 사용성 측면에서는 Tab bar가 모바일에 더 최적화된 인터페이스이다. 그 증거로 거의 대부분의 앱은 Tab bar를 사용한다. 구글 또한 머터리얼 3부터 Tab bar를 Navigation bar로 명칭을 정하고 주요 컴포넌트로 제공한다. 현재는 (머터리얼 3) 화면 상단의 appbar하단의 Bottom 내비게이션이 공존하고 있다.
구글 플레이 앱의 인터페이스 변화이다.구글 플레이의 인터페이스 변화이다. 내비게이션 컨트롤의 위치를 보면 변화가 확연하다. 가장 최근에는 상단좌측의 햄버거 형태의 아이콘이 사라지고 우측의 오렌지색 아바타 형태로 동일 기능이 이전된 걸 볼 수 있다.
Tab bar의 구조
앱의 최상위 레벨의 기능 또는 콘텐츠 그룹을 나타내는 아이콘과 텍스트 레이블 조합의 텝 항목을 기본으로 한다. 탭 바는 최대 5개의 항목 탭으로 구성되어 있다.
화면 맨 하단에 비형태로 고정되어 사용자에게 각 탭을 터치했을 때 앱의 탐색이 가능함을 인지시킨다.
앱의 글로벌 탐색 컨트롤인 탭바의 요소는 다음과 같다. 애플과 안드로이드의 구조가 약간 상이해서 각 플랫폼의 구조를 같이 다룬다.
1. Icon
2. Label text
3. Container
4. Badge area(optional)
5. Active indicator
1. 아이콘
아이콘은 앱의 주요 기능과 콘텐츠를 상징적으로 표현한다. 아이콘은 앱의 브랜드 아이덴티티 요소의 기능도 한다. 일반적인 형태의 아이콘보다는 브랜드의 특성을 가진 아이콘을 디자인한다. 아이콘의 의미가 명확하게 전달이 안된다면 레이블을 함께 사용한다.
2. Label text
레이블 텍스트는 간결하게 작성하여 앱이 무엇을 할 수 있는지에 대해 직관적으로 전달한다. 긴 레이블은 모바일같이 작은 화면에서는 피한다. 텝의 레이블은 앱 계층 구조의 최 상위 콘텐츠 또는 기능을 의미한다.
3. Container
탭 아이템을 감싸는 바형태의 배경 영역이다. iOS에서는 불투명한 화이트에 백그라운드 블러효과를 적용해 스크롤 시 탭바의 아래에 콘텐츠가 있음을 암시한다.
4. Badge area
탭 아이템의 아이콘 오른쪽 상단에 새로운 콘텐츠가 있을 경우 배지를 표시한다. 페이스북이나 X처럼 새로운 콘텐츠의 수가 포함될 수 있다.
5. Active indicator
현재 방문 중인 최상위 레벨을 표시하는 그래픽 요소이다. iOS에는 없고 안드로이드에만 있는 요소이다.
딱히 필요해 보이지 않는다.
인터렉션
탭 바는 앱 전체에 걸쳐 화면의 하단에 지속적으로 노출된다. 탭 바의 항목을 터치하여 앱의 최 상위 레벨의 콘텐츠 그룹에서 하위 영역으로 이동할 수 있고 하위 레벨에서 탭바의 항목을 터치하여 다른 최상위 레벨로 이동하며 탐색할 수 있다.
내비게이션 트렌지션 Navigation transitions
트랜지션(Transition)이란, 현재 화면에서 다음 화면으로 바뀔 때, 또는 다른 기능의 실행 시 사용하는 화면 전환을 의미한다. 모바일 앱에서 Navigation transitions은 화면과 화면 사이의 계층 구조 및 연계성을 모션(Motion)을 통해 시각적인 피드백으로 앱 탐색을 돕는다.
모바일 앱의 탐색 Navigation은 크게 다음 3가지 유형으로 정리할 수 있다.(내비게이션에 대한 자세한 내용은 다음에 다루기로 한다- 그게 언제가 될지 ㅠㅠ)
최상위 레벨 간 탐색 Top Level Navigation
탭 바를 통해 이뤄지는 앱의 최상위 대상 사이를 이동하는 유형이다.
계층 탐색 Hierarchical navigation
대분류 카테고리에서 중분류, 소분류 카테고리로 이동처럼 앱 계층구조의 상위에서 하위로 순차적으로 탐색하는 유형이다.
동일 레벨 탐색 Lateral Navigation
Tab를 통해 현재 위치에서 동일 계층의 콘텐츠 간을 탐색하는 유형이다.
이러한 탐색 유형은 앱을 사용하는 동안 반복되고 중복되어 일어난다. 사용자에게 어떤 탐색 유형을 하고 있는지 인지시키기 위해 각 탐색 방식에 따라 내비게이션 트렌지션의 모션을 다르게 적용한다.
트렌지션은 사용자가 앱의 계층 구조의 최 상위에 있는지, 계층 구조의 하위로 깊이 탐색하는지, 동일 레벨의 페이지 사이를 이동하는지 이해하는 데 도움을 준다.
탭 바를 통한 최상위 레벨 간 내비게이션 Top Level Navigation 트렌지션은 iOS, 안드로이드 둘 다 페이드 인 fade in 방식 모션을 사용하여 화면의 움직임 없이 전환된다.(두 플랫폼은 모션의 디테일 차이는 있지만 동일한 방식이다. - 마이크로 소프트의 Windows는 아래에서 위로 올라오는 슬라이드 slide up 모션과 페이드 인 모션을 혼합해서 사용하기도 한다.) Tapping만으로 화면이 전환되고 좌우 swipe를 통해 화면의 전환이 되지 않음을 사용자에게 인지시킨다.
Usage guidelines
모달 상태에서는 탭바를 노출하지 않는다.
탭바는 앱을 탐색하는 모든 화면의 하단에 지속적으로 노출하여 앱의 탐색을 돕는다.
사용자가 텍스트를 입력하는 등의 작업이 필요한 모달상태에서는 탭바는 노출하지 않는다. 모달 상태는 사용자가 작업을 완료하는데 집중하고 작업 중에 이탈하지 않게 하기 위해 작업과 관련이 없는 컨트롤은 숨긴다.
탭 바의 항목을 5개 이상 사용하지 않는다.
모바일에서 탭 바의 항목은 3~5개를 권장한다. 5개 이하로 제한하는 이유는 첫째는 6개 이상일 경우 화면의 복잡도가 높아지고 두 번째는 터치 타깃 크기가 작아져 잘못 터치할 확률이 높아지기 때문이다.
탭바에 지나친 그래픽요소는 사용하지 않는다.
앞에서 살펴본 애플의 GNB디자인 변천과정에서 알 수 있듯이 인터페이스 요소의 그래픽은 단순화되는 추세이다. 콘텐츠의 가독성을 높이기 위해서 내비게이션 요소의 그래픽은 최대한 단순화한다.
무지개 아이콘으로 추가하기를 강조한다고 해서 사용자가 추가 기능을 더 많이 사용한다는 보장은 없다. 이런 디자인은 사용자 중심의 디자인이 아니라 공급자 중심의 디자인이다.
과거 머터리얼 디자인 2에서 탭바(Bottom Navigation)의 배경색을 버튼에 사용하는 색으로 디자인했다. 왼쪽과 같은 디자인은 권장하지 않는다.
작성 중입니다...
참고 자료
https://developer.apple.com/design/human-interface-guidelines/tab-bars
https://m3.material.io/components/navigation-bar/guidelines
https://developer.apple.com/videos/play/wwdc2022/10001/
https://uxplanet.org/learn-how-to-design-tab-bars-140ee2914d01
https://babich.biz/bottom-tab-bar-design/
https://spectrum.adobe.com/page/tab-bar-ios/
https://medium.com/lifes-a-picnic/5-steps-to-design-a-tab-bar-the-right-way-b800005691c
https://www.versionmuseum.com/history-of/apple-website
