# 07.내비게이션UI(2)-iOS vs Android
탭 바 및 사이드 드로어 UI - iOS vs 안드로이드
# 07. 내비게이션 UI(2)-iOS vs Android
탭 바 및 사이드 드로어 UI - iOS vs 안드로이드
# Persistent Navigation - 탭 메뉴(Tab Menu) / 탭 바(Tab Bar)
명시적으로 메뉴 접근이 가능한 Persistent Navigation의 UI로는 스프링보드, 리스트, 대시보드, 갤러리, 탭 등이 있지만 그중 가장 대표적인 것이 바로 탭 메뉴(Tab Menu) / 탭 바(Tab Bar)다. 탭 메뉴 가이드라인은 모바일 OS 마다 조금씩 다르지만 여기서는 iOS와 안드로이드 가이드를 중심으로 살펴보겠다.
■ iOS의 Tab Menu 가이드
애플은 iOS 가이드라인에서 flat 한 앱의 내비게이션을 디자인할 때는 탭 바를 사용하는 것을 추천하며 그 속성으로는 투명도가 있을 것, 언제나 화면 하단에 나타날 것, 최대 5개의 메뉴까지 들어갈 것, 같은 높이를 유지할 것, 특정 정보 표시를 위해 배지를 사용할 것, 액션이 있는 메뉴에 대해서는 탭 바가 아닌 툴바를 활용할 것, 기능을 사용할 수 없다고 해서 화면에서 생략하지 말 것(모든 탭들이 동작하도록 하되, 사용 불가한 탭이 있으면 그 이유를 설명해줄 것)등을 제시한다(https://goo.gl/MnWqv5).
탭바 형태로 변경된 페이스북의 UI (출처: www.lukew.com/ff/entry.asp?1945)iOS에서 탭 바(Tab Bar)와 툴바(Tool Bar)는 차이가 있다. 탭 바는 메인 카테고리의 내비게이션을 가능하게 한다면 툴바는 특정화면에서 가능한 액션을 보여준다. 하지만 인스타그램처럼 특정 행위(사진 찍기)가 앱의 주요 기능이라면 액션을 유도하는 메뉴가 탭 바에 들어가기도 한다.
■안드로이드의 Tab Menu 가이드
안드로이드에서 정의하는 탭(Tabs)은 iOS와는 조금 다르다.
Google의 가이드라인은 하위계층을 포함한 상위계층이 있는 경우와 동일한 카테고리가 묶인 경우 탭 UI가 내비게이션에 적합하다고 정의하며, 메뉴 간의 이동이 빈번한 경우, 소수의 상위 카테고리를 포함한 경우, 다른 메뉴에 대한 인지를 높이기 위한 경우 탭의 사용을 추천한다(https://goo.gl/sqd7JQ).
안드로이드 가이드의 탭 메뉴가 iOS 가이드라인의 탭 메뉴와 다른 점은 첫째, 화면 상단부(앱바의 바로 아래)에 위치할 것, 둘째, 스크롤 가능 여부에 따라 fixed tab bar와 scrollable tab bar로 나눠진다는 것이다. iOS와 안드로이드 탭 바에 대한 가이드라인의 사이를 정리하면 아래 그림과 같다. (하지만 가이드는 가이드일 뿐..)
Tab Bar Guide: iOS vs Android 안드로이드 OS가 scrollable tab을 가이드에서 추천하는 것은 주목할 만하다. iOS와 달리 탭 사이의 내비게이션에 있어서 스와이핑이라는 제스처를 활용하기 때문이다. 때문에 안드로이드 가이드는 스와이핑을 지원하는 콘텐츠에서는 탭 메뉴를 사용하는 것을 지양하는데, 이는 콘텐츠 뷰와 메뉴 내비게이션에 있어서 스와이핑이라는 동일한 제스처가 충돌하기 때문이다.
Don't use tabs with content that supports the swipe gesture, because swipe gestures are used for navigating between tabs. For example, avoid using tabs in a map where content is pannable, or a list where items can be dismissed with a swipe.
- Google Design Guidelines
구글 디자인 가이드에서는 탭을 사용할 때 높이, 너비 등을 탭에 글씨만 들어갈 때와 글씨와 아이콘이 함께 들어갈 때, 아이콘만 들어갈 때로 세분화하게 명확하게 명시하고 있으니 자세한 내용은 구글 디자인 가이드(https://goo.gl/iKaF1k)를 참고하면 좋을 듯!
■ 변형된 탭의 유형
탭은 상단 혹은 하단에 고정된 형태라는 것이 항상 유효한 것은 아니다! 상황에 따라 탭이 등장하고 사라지는 새로운 유형의 탭이 등장했기 때문이다.
Pinterest 의 탭바는 액션에 따라 나타났다 사라진다. (출처: <모바일 패턴 갤러리>)핀터레스트(Pinterest)의 탭 바는 사용자가 스크롤 다운을 할 때는 사라졌다가 사용자가 다시 스크롤 업을 하면 재등장한다. 콘텍스트에 따라 내비게이션 UI를 달리한 것인데 스크롤 다운을 할 때는 콘텐츠를 브라우징하는 상황이기에 탭 바의 역할(메뉴 간 이동)이 중요하지 않아 화면 상에서 사라지도록 해서 콘텐츠 뷰잉을 최적화하는 반면, 스크롤 업을 할 때는 콘텐츠를 브라우징 하는 행위를 멈추고 다른 메뉴로의 이동이 충분히 가능한 상황이기에 다시 탭 바를 스크린에 보여준다.
# Transient Navigation - 사이드 드로어(Side Drawer)
탭 메뉴가 항상 화면에 등장하는 Persisten Navagation의 대표적 UI라면, 화면에 바로 메뉴가 보이지 않고, 특정 제스처를 통해 접근이 가능한 Transient Navigation의 대표적 UI는 햄버거 메뉴라고 불리는 사이드 드로어(Side Drawer)다. 사이드 드로어는 overlay와 inlay 두 가지 형태로 분류 가능하다.
# 사이드 드로어(Side Drawer)의 두 가지 유형
■ Overlay Side Drawer: 드로어가 원래 화면을 덮거나 겹쳐지는 형태로 나타나는 경우
■ Inlay Side Drawer: 드로어가 원래 화면을 옆으로 밀어내는 형태로 나타나는 경우
유튜브의 사이드 드로어(좌-iOS)Inlay Side Drawer (우-Android)Overlay Side Drawer유튜브의 경우 iOS에서는 Inlay 형태의 사이드 드로어를 사용하는 반면 안드로이드에서는 Overlay형태를 사용한다. iOS 디자인 가이드는 사이드 드로어에 대한 가이드가 따로 존재하지 않지만 구글의 경우 내비게이션 드로어(Navigation Drawer)라 해서 Overlay형의 사이드 드로어를 추천한다(https://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-content).
구글 디자인 가이드에서 정의하는 Navagation Drawer 형태더불어 메뉴 드로어(Menu Drawer)의 두 가지 형태에 대해 이전 글에서 iOS 개발자신 주영민님께서 다음과 같은 말씀을 남겨주셨는데 UI 선택에 있어 개발 이슈의 중요성을 상기시켜주셨다. 애플 특유의 블러가 개발의 측면에서는 상당히 비효율적임에도 불과하고 애플 특유의 감성 때문에 레이어를 블러로 형태로 표현하는 것을 포기하지 않는다고 알고 있는데 슬라이드 형태로 자연스럽게 밀리는 Inlay 형태의 메뉴 드로어 또한 비슷한 맥락이지 싶다.
메뉴 드로어 UI에 대한 주영민 개발자님의 조언# 탭 바 및 사이드 드로어 UI에 대한 단상
원래는 패턴에 따른 내비게이션 UI 중심으로 정리를 해보고 싶었는데,
역시나 같은 내비게이션 형태에 따른 iOS vs 안드로이드 진영의 분류가 주가 되어버린 느낌이다.
그 말은 즉슨.. 어떤 내비게이션 UI를 사용하느냐도 중요하지만
같은 내비게이션 형태라도 OS별 UI를 고려하는 것도 굉장히 중요하다는 점!
플러스 탭 바 VS 사이드 드로어에 대한 분쟁에 대한 사견은 이렇다.
화면과 메뉴 구조 상 탭 바(탭 바라서 탭 바라기보다는 Persistent Navigation UI로서의 탭 바)가 허용이 되는 조건이라면 보다 직관적인 UI인 탭 바가 옳다. 그러나 해당 서비스의 타깃에 따라 내비게이션 UI의 중요성이 조금씩 다르지 않을까 싶다. 네이버나 카톡, 위메프 등 정말 나이불문, 성별불문의 일반적인 대중을 타깃으로 하는 서비스는 내비게이션 UI에 따른 사용률의 변화가 더 민감한 반면, 슬랙(Slack)이나 아사나(Asana) 같은 어느 정도 IT에 대해 충분히 익숙한 사용자를 대상으로 하는 서비스는 UI 변화에 따른 사용률의 민감도가 더 낮지 않을까?
