제목 : 모바일 UI 디자인 기본 요소 - Tab bar 링크 : 요약1. 글로벌 내비게이션(Global Navigation)
•
앱과 웹사이트가 제공하는 콘텐츠의 전체적인 탐색을 지원함
•
페이지 전체에 걸쳐 동일한 위치에 유지되는 것이 특징
•
쉽고 명확한 글로벌 내비게이션은 좋은 사용자 경험을 디자인하는 첫번째 단계임
2. 글로벌 내비게이션 바(Global Navigation Bar)
•
과거에는 GNB의 그래픽을 강조하여 브랜드 아이덴티티를 표현하였으나, 최근에는 그래픽 요소를 최소화하고 콘텐츠를 강조하는 디자인을 많이 사용하는 추세
3. 디바이스 크기별 글로벌 내비게이션
•
디바이스나 화면의 크기에 따라 글로벌 내비게이션 컨트롤을 다르게 적용
4. 모바일의 글로벌 내비게이션 (탭바)
•
접근 방법의 차이에 따라 크게 두 가지 방식
•
(1) 구글의 안드로이드에서 사용하는 햄버거 메뉴와 내비게이션 드로워패턴
- 데스트톱의 GNB를 모바일에 맞게 적용하는 방법을 고민함. 우측에 햄버거 메뉴를 두어 터치 시 데스크톱의 메뉴구조가 나타나는 방식으로 초기 안드로이드 앱에 개발됨
•
(2) iOS의 탭바(내비게이션 바)
- 맥 OS는 방대한 용량으로 인해 모바일 전용 OS를 별도로 개발하여 모바일 최적화된 글로벌 내비게이션 인터페이스인 Tab bar를 만듦
4-1. 탭바(Tab bar)
•
사용자가 앱 내에서 주요 콘텐츠를 빠르게 전환할 수 있도록 하는 글로벌 탐색 컨트롤
•
사용자가 현재 탐색 상태를 유지하면서 최상위 레벨의 콘텐츠 그룹에 빠르게 접근할 수 있도록 도움
4-2. 화면 하단에 위치한 Tab bar
•
스마트폰은 한 손으로 사용하는 경우가 많기 때문에, 특히 엄지손가락만 사용하여 탐색할 수 있는 화면의 범위 범위(Tumb zone)를 고려해야 함. 대부분의 주요 인터페이스 요소를 화면 하단에 위치하는 이유
Vs.) 햄버거 메뉴로 대표되는 Navigation drawer
•
메뉴가 숨어있기 때문에 최상위 레벨 간의 접근성이 떨어짐
•
사용자의 현재 위치를 알 수 없음
4-3. Tab bar의 구조
•
최대 5개의 항목 탭으로 구성
•
화면 맨 하단에 바형태로 고정되어 유저에게 각 탭을 터치했을 때 앱의 탐색이 가능함을 인지시킴
•
Tab bar의 요소
- Icon : 앱의 주요 기능과 콘텐츠를 상징적으로 표현
- Label text : 간결하게 작성하여 직관적으로 전달
- Badge area : 새로운 콘텐츠가 있을 경우 아이콘의 우측 상단에 뱃지를 표시
•
모달 상태에서는 탭바를 노출하지 않음
- 사용자가 텍스트를 입력하는 등의 작업이 필요한 모달상태에서는 탭바를 노출하지 않음
- 모달 상태는 사용자가 작업을 완료하고 이탈을 방지하기 위해 작업과 관련없는 컨트롤은 숨김
느낀 점모바일과 데스크탑의 GNB 용어가 다르다는 것을 이 아티클을 보고 처음 알았다. GNB는 데스크탑에서 쓰는 용어이고, 모바일의 Tab bar는 그와 같은 기능을 하지만 용어는 조금 다르다. (Navigation bar라고 부르기도 하지만 아티클에서는 Tab bar로 통일하여 설명한다.)
이 아티클에서는 데스크탑에서 모바일로 옮겨올 때 구글과 애플의 차이를 알려준다. 이미지를 보면 정확히 그 개념을 알 수 있기에 아티클을 직접 읽는 것을 추천한다. 초기에 구글은 데스크탑과 유사한 방식을 사용했고, 애플은 아예 모바일 버전을 따로 만들어 모바일에 최적화된 방싱을 사용했다. 결국 구글은 애플과 유사한 방식을 차용하게 되었다는 히스토리가 흥미롭다. 결국 새롭게 포맷을 바꿀 때에는 그 환경에 맞는 방식을 새롭게 고민해야 한다는 점을 느꼈다.
“모달 상태에서는 탭바를 노출하지 않는다.”
최근에 탭바에 있는 ‘00작성’ 메뉴를 클릭할 때 탭바가 사라지는 것이 이상하지 않냐는 질문을 받았다. 그때는 “작성하기 버튼 하단에 탭바가 있으면 UX상 좋지 않을듯 싶다”라는 이유를 들며 답변을 했었다. 이 아티클을 보니 내가 왜 그렇게 대답을 했는지에 대한 이유를 찾을 수 있었다. 유저가 작업을 완료하는데 집중하고 이탈하지 않도록 하려면 모달 상태에서는 탭바를 노출하면 안되는 것이었다. 감으로 두루뭉술하게 답했던 것을 이젠 적절한 이유를 들어 설명할 수 있을 내 자신이 기대가 된다.