탭의 위치를
고민하는 사람들을 위하여
상단 탭 vs 하단 탭
안드로이드는 두 종류의 탭을 제공합니다. 상단 탭(Tabs)와 하단 탭(Bottom navigation)입니다. 둘은 형태와 용도가 유사하기에 우리를 항상 고민에 빠뜨립니다. 앱을 만들 때 상단 탭을 쓸 것인지, 하단 탭을 쓸 것인지 말이죠. 이번 글에서는 상단 탭과 하단 탭의 차이, 그리고 경우에 따라 어떤 탭을 사용하는 것이 좋을지 이야기해보고자 합니다.
하단 탭의 도입
하단 탭은 원래 iOS에만 있는 개념이었습니다. iOS는 하단 탭을 메인 내비게이션으로 사용하고 상단 탭(Segmented control. 안드로이드의 상단 탭과는 많이 다릅니다)을 보조 내비게이션으로 사용했습니다. 반면 안드로이드는 상단 탭을 메인 내비게이션으로 사용하였고, 소프트키와의 충돌을 우려해 하단에는 어떠한 내비게이션도 넣지 않았습니다. 그러던 와중, 2016년 3월 Material Design guideline에 하단 탭이 추가되었습니다. 하단 탭이 추가됨과 동시에 많은 앱들이 상단 탭에서 하단 탭으로 옮겨갔습니다. 심지어 구글의 대표 서비스인 유튜브조차 하단 탭으로 옮겨갔죠.
과거의 상단 탭과 현재의 하단 탭그러나 야심차게 도입한 것과는 다르게 각 탭의 역할 구분은 명확하지 않았습니다. 가이드라인은 '상단 탭이랑 하단 탭이 조금 다르긴 한데.. 음.. 그냥 맘에 드는 거 써' 정도였죠. 다행히 2년 간 쓰이면서 각각의 정체성이 조금씩 확립되었고, 이번 Material Design 2.0에도 이를 반영하면서 차이가 좀 더 명확해졌습니다.
과거 가이드라인. 구글도 복붙을 합니다다들 알만한 차이
상단 탭은 위에 있고 하단 탭은 아래에 있다
말 그대로입니다. 상단 탭과 하단 탭은 위치가 반대입니다. 지난 하단 앱 바 글에서도 말했지만, 하단에 있을 경우 엄지 손가락만으로 쉽게 접근 가능합니다. 사용하기에 더 편리하죠. 대신 상단 탭은 누르기 힘들다는 단점을 보완하기 위해 누를 필요 없이 항목 간 전환을 할 수 있도록 스와이프를 지원합니다.
상단 탭은 스와이프를 지원한다
상단 탭을 사용할 경우 항목 간 스와이프로 이동이 가능합니다. 덕분에 인접한 항목을 탭을 누를 필요 없이 빠르게 이동할 수 있습니다. 다만 항목이 많아질 수록 스와이프로 이동하기는 힘들어집니다. 첫 번째 항목에서 다섯 번째 항목으로 가려면 상단 탭은 손을 위로 옮겨 누르거나 4번 스와이프를 해야하는 반면, 하단 탭은 엄지 손가락으로 다섯 번째 항목을 바로 누르면 됩니다.
또한 상단 탭 자체에서 스와이프를 사용하기에, 내부에 스와이프나 가로 스크롤을 사용하는 컨텐츠를 넣기 힘듭니다. 탭과 컨텐츠의 동작이 겹쳐 의도치 않은 결과를 일으킬 수 있죠. 갤럭시 S8 메시지 앱의 경우 상단 탭을 사용하면서 개별 메시지에도 스와이프 기능을 적용했습니다. 두 동작이 겹칠 것을 우려했는지 상단 탭의 스와이프 기능을 없애두었으나, 탭 간 이동을 위해 습관적으로 스와이프를 하면 의도치 않은 기능이 수행됩니다.
메시지를 보낼 의도는 아니었습니다항목의 개수가 다르다
상단 탭에는 2개 이상의 항목을 놓을 수 있으며, 항목의 수가 많더라도 좌우로 스크롤 할 수 있는 스크롤 탭(Scrollable tabs)으로 대응 가능합니다. 사실상 항목 수에 제한을 받지 않는 거죠. 하지만 하단 탭에는 3-5개의 항목만 놓을 수 있습니다. 그 이상일 경우 모든 항목을 인지하기도, 누르기도 어렵습니다. 그렇다고 상단 탭처럼 스크롤을 지원하기에는 형태가 적합하지 않습니다.
항목이 많을 경우 스크롤 탭을 사용하면 됩니다중요한 차이
상단 탭에는 동일 주제, 하단 탭에는 다른 주제의 항목을 놓는다
상단 탭에는 동일한 주제의 항목들을 늘어놓고, 하단 탭에는 서로 연결되지 않은 최상위 항목들(top-level and disconnected from each other)을 늘어놓습니다. 가이드라인에서 상단 탭은 DOGS | CATS | BIRDS라는 동물들을 늘어놓은 반면, 하단 탭은 Favorites | Music | Places | News라는 다소 관계가 없는 항목들을 늘어놓았죠.
상단 탭과 하단 탭은 들어가는 항목들이 다릅니다이 점이 가장 중요한 차이입니다. 이에 따르면 메인 내비게이션에는 하단 탭을 사용하는 것이 적합합니다. 메인 내비게이션의 가장 큰 목적은 앱에 존재하는 주요 기능을 사용자가 바로 인지할 수 있도록 꺼내놓는 것이기 때문이죠. 이러한 기능들이 동일한 주제로 구성되어 있기는 쉽지 않습니다. 메신저 앱이라면 최상위 항목을 채팅목록A, 채팅목록B 보다는 친구목록, 채팅목록으로 구성할테고, 음악 앱이라면 최상위 항목을 힙합, 발라드, 댄스로 놓는 것보다는 홈, 음악목록, 내 음악으로 구성하는 편이 원활한 사용에 도움이 되겠죠.
다만 컨텐츠를 나열식으로 보여주는 앱에서는 상단 탭을 사용하는 쪽이 좋습니다. 구글에서 만드는 대부분의 앱들이 하단 탭(또는 햄버거 버튼)을 사용하지만 Play 스토어는 상단 탭을 사용합니다. Play 스토어는 앱 내에서 무언가를 하기보다는 게임, 영화, 도서 등 다양한 컨텐츠를 쉽게 다운받을 수 있도록 분류해주는 것이 핵심 목적이기 때문이죠.
심지어 상단 탭이 2개입니다이러한 차이 덕분에 상단 탭과 하단 탭이 동시에 쓰이는 것도 가능합니다. 앱의 구성이 복잡해서 하나의 탭만으로 대응이 힘든 경우 우선 하단 탭을 메인 내비게이션으로 사용하고, 해당 항목을 더 세세하게 나눌 때 상단 탭을 사용하는 거죠. 가이드라인에서는 사용은 가능하되 혼란을 일으킬 수 있으니 조심히 쓰라고 하네요.
항목 구성을 잘 해야 혼란을 막을 수 있습니다그러면 뭐가 문제인가?
상단 탭과 하단 탭의 역할이 다름에도 문제가 되는 건, 실제로 그렇게 쓰이고 있지 않다는 점입니다. 서로 다른 주제의 항목들을 상단 탭에 놓고 메인 내비게이션으로 사용하는 앱들 또한 많습니다. 우리가 흔히 쓰는 페이스북 앱을 보면 상단 탭에 뉴스피드 | 친구 | 알림 | 메뉴라는 항목들을 늘어놓았습니다. 트위터는 상단 탭이 홈 | 검색 | 알림 | 쪽지로 구성되어 있으며, 카카오톡은 친구 | 대화 | 채널 | 게임별 | 더보기로 구성되어 있습니다.
물론 이런 앱들은 하단 탭이 생기기 전부터 상단 탭을 쭉 사용해왔기에, 사용자들의 혼란을 우려하여 하단 탭으로 옮겨가지 못했다고 생각할 수도 있습니다. 하지만 Material Design Awards 2017에서 상단 탭을 Profile | Flight | Hotels라는 상이한 항목으로 구성한 앱인 Momondo를 선정하고, Material Design 2.0에서 예시로 나온 Rally 또한 상단 탭이 OVERVIEW | ACCOUNTS | BILLS | BUDGETS | SETTINGS라는 서로 다른 주제로 이루어져 있습니다.
왼쪽은 페이스북, 오른쪽은 Momondo입니다이는 안드로이드 사용자들이 상단 탭에 익숙하고, 이것을 메인 내비게이션으로 사용하더라도 사용성 측면에서 크게 나쁠 것이 없기 때문입니다. 그렇기에 실제로 앱을 만들 때에는 아래와 같은 내용을 복합적으로 고려해서 탭의 위치를 선정해야 합니다.
1. 탭의 항목이 동일한 주제인지, 서로 다른 주제인지
물론 이것이 기본이 되어야 합니다. 동일한 주제일 경우 상단 탭, 서로 다른 주제일 경우 하단 탭을 쓰는 것이 좋습니다. 다만 다른 조건들에 문제가 생긴다면 이를 고집할 필요는 없습니다.
2. 타겟 사용자가 어떤 탭에 익숙한지
1번만큼이나 중요한 것이 사용자 친숙도입니다. 두 탭이 기능적으로 큰 차이가 없다면 사용자가 어느 쪽을 선호하는지가 중요하죠. 어떤 사용자군이 어떤 탭을 선호하는지 직관적으로는 알 수 없기에, A/B 테스트나 리서치 등을 통해 파악해야 합니다.
3. 내부에 스와이프나 가로 스크롤 컨텐츠가 들어가는지
해당 컨텐츠가 들어갈 경우 상단 탭과 동작이 겹칠 수 있기에 하단 탭을 쓰는 것이 좋습니다.
4. 탭에 들어갈 항목의 갯수가 얼마나 되는지
항목이 2개일 경우 상단 탭을 쓰는 것이 좋습니다. 또한 항목이 6개 이상일 경우 상단 스크롤 탭을 쓰는 것이 좋습니다. 단순히 현재의 상황만이 아니라, 나중에 탭의 개수가 많아질 가능성이 있는지까지 염두에 두어야 합니다.
5. 항목을 두 번 이상 세세하게 분류해야 하는지
탭 하나만으로 모든 항목을 분류할 수 없다면 두 탭을 모두 사용하는 것도 괜찮습니다. 하단 탭을 메인 내비게이션으로, 상단 탭을 보조 내비게이션으로 사용 가능합니다.
6. 아이폰, 태블릿, 웹 등의 플랫폼을 지원할 것인지
안드로이드와 iOS 버전을 모두 만든다면 일관성을 위해 하단 탭을 사용하는 것이 좋습니다. iOS의 상단 탭은 안드로이드의 상단 탭과 형태가 많이 다르고 용도도 제한적이기에 상단 탭으로는 일관성을 유지하기 힘듭니다.
태블릿, 웹 버전을 만든다면 일관성을 위해 상단 탭을 사용하는 것이 좋습니다. 하단 탭은 모바일 전용 UI이기에 태블릿, 웹과의 일관성을 유지하기 힘듭니다.
첫 글을 정말 생각지도 못하게 많은 분들이 공유해주셔서 놀랐어요. 덕분에 두 번째 글은 좀 더 즐겁게 썼습니다. Material Design에 관심이 많다보니 두 번째 글도 이를 주제로 썼는데, 쓰면 쓸수록 얼마나 모르는 것이 많은지 느껴지네요. 이건 좀 비약이다, 좀 아니다 싶은 내용이 있으면 언제든 말씀 부탁드립니다.
읽어주셔서 감사합니다.
