하단 네비게이션에 대해서 끄적끄적

해당 글은 Medium에 Nick Babich가 작성한 UX Design for Mobile: Bottom Navigation을 한국말로 번역한 글입니다. 글쓴이에게 동의를 받은 상태이며 번역하면서 매끄럽지 않은 부분을 다듬는 과정에서 조금의 의역이 포함되어 있을 수 있습니다. 원문은 여기에서 확인하실 수 있습니다.

https://uxplanet.org/perfect-bottom-navigation-for-mobile-app-effabbb98c0f#.ruy29g1xq

— — -

디자이너들은 디자인은 단순히 좋은 겉모습 그 이상이라는 것을 알고 있습니다. 또한 디자인은 웹,앱 관계없이 어떻게 해당 제품이 사용자들의 관심을 끌고 참여할 수 있게 하는 지에 대한 부분도 다루고 있습니다. 이는 마치 대화와 같습니다. 네비게이션은 대화 입니다. 사용자가 해당 서비스를 이용하는 방법을 찾지 못한다면, 그 서비스가 얼마나 좋은 사이트인지 혹은 앱인지의 여부는 더 이상 문제가 되지 않기 때문입니다.

왜 하단 네비게이션이 중요한가?

Steven Hoober는 모바일 사용에 대한 연구를 진행하면서 49퍼센트의 사용자가 스마트폰에서 하나의 엄지손가락만 사용해서 원하는 동작을 수행한다는 사실을 밝혀냈습니다. 아래 그림에서 각각의 다이어그램은 사용자가 엄지를 이용해서 스마트폰 화면 내에서 도달할 수 있는 부분을 다이어그램으로 정리해서 색상별로 표시한 그림입니다. 이 그림에서 녹색은 녹색은 사용자가 한 손 엄지 손가락으로 쉽게 도달할 수 있는 영역, 노란색은 약간 엄지를 뻗어야 하는 부분, 빨간 부분은 사용자가 모바일 기기를 쥐는 방법을 변경해야만 도달할 수 있는 부분입니다.

스마트폰에서 사람의 한 손으로 편안하게 도달할 수 있는 부분에 대한 표시. 이미지 출처는 uxmatters

위의 그림을 고려한다면, 앱 내에서 가장 중요하고 자주 사용하게 될 동작들을 화면의 하단에 두는 것이 중요합니다. 왜냐하면 그 위치가 한 손의 엄지 손가락으로도 편안하게 사용자가 앱을 동작할 수 있는 부분이기 때문입니다.

탭 바 (Tab Bar)

이미 많은 앱들이 위에 설명한 규칙에 따라 앱의 가장 중요한 기능들을 하단 네비게이션(즉, 탭 바)을 통해서 이용할 수 있게 하고 있습니다. 페이스북은 중요한 기능들을 한 번의 탭으로 이용할 수 있도록 했으며, 그 기능들 사이의 전환이 빠르고 쉽게 이루어 질 수 있도록 하고 있습니다.

iOS의 페이스북 앱의 하단 탭 바

하단 네비게이션을 디자인할 때 고려해야 할 3가지 포인트

네비게이션은 사용자가 원하는 곳을 갈 수 있도록 안내해주는 교통 수단입니다. 그리고 하단 네비게이션은 비슷한 중요성을 지닌 목적지들을 위해서 사용되어야 하며 앱의 어디에서건 이 목적지들에 바로 접근할 수 있어야 합니다.

좋은 하단 네비게이션 디자인은 다음의 3가지 법칙을 준수합니다.

1. 가장 중요한 목적지만 보여 준다

3–5가지의 가장 중요한 메뉴만 하단 네비게이션에 이용하세요. 만약 해당 메뉴가 3개 보다 작다면 하단 보다는 상단 탭을 이용하는 것이 좋습니다.

또한 하단에 5개 이상의 메뉴를 표시하는 것은 좋지 않습니다. 이럴 경우 각각의 탭이 너무 가깝게 붙어 있게 되고 이를 사용자가 정확하게 선택하는 것이 힘들 수 있습니다. 더군다나, 탭을 하나 추가한다는 것은 단순히 메뉴를 하나 늘리는 것이 아닌 앱 자체의 복잡도를 증가시킨다는 얘기입니다.

정말로 하단 네비게이션에 들어가야할 메뉴 혹은 기능들이 5개를 넘어간다면 그 경우에는 하단 보다는 다른 영역에서네비게이션을 표시하는 것이 좋습니다.

스크롤을 피하라

화면 사이즈가 작은 경우에, 네비게이션의 일부를 숨김으로서 정해진 화면 사이즈에 구애 받지 않고 영역에 대한 문제를 해결할 수 있습니다. 즉 하단에 스크롤 가능한 탭 바를 이용하면 모든 메뉴에 대한 옵션들을 화면에 구애받지 않고 배치할 수 있습니다. 하지만 이는 사용성 및 메뉴의 중요도 부분에 있어서 비 효율적입니다. 사용자가 스크롤을 하지 않으면 해당 옵션들을 모두 표시할 수 없기 때문입니다.

“눈에서 멀어지면 마음에서도 멀어진다” iOS용 Rookie Cam 앱

2. 현재의 위치에 대해서 잘 알려줄 수 있어야 한다

현재 사용자가 어느 곳에 있는 지에 대해서 잘 알려주지 않는 것은 아마 가장 흔하게 저지르는 실수 중의 하나입니다. “난 누군가, 또 여긴 어딘가?” 는 사용자들에게는 가장 기본적인 질문으로, 이를 잘 대답하는 것이 사용자들을 잘 안내하는 첫걸음이자 지름길이라 할 수 있습니다. 그들이 어떻게 a에서 b로 갈 수 있을 지에 대해서 별다른 도움 없이 한번에 알 수 있도록 해야 합니다. 추가적인 설명이 필요 없도록 적절한 디자인 요소들(아이콘들, 레이블들, 그리고 색깔들)을 제공해 주는 것이 좋습니다.

아이콘들

아이콘을 통해서 어떤 기능인지 어떤 표시인지를 설명해 줄 수 있기 때문에, 하단 네비게이션에서 각 내용들을 아이콘으로 적절하게 소통하는 것이 중요합니다. 검색, 출력, 이메일처럼 이미 사용자들이 익숙하고 잘 알고 있는 보편적인 아이콘들이 있습니다. 하지만 불행하게도 이 ”보편적인” 아이콘들을 그렇게 많지 않습니다. 그리고 때로는 너무 미적인 요소를 강조하는 바람에 아이콘의 기능적인 부분들을 숨김으로서 실제로 해당 아이콘의 의미를 알아차리기 매우 어렵게 만드는 경우도 있습니다.

이전 버전의 안드로이드 Bloom.fm app입니다. 각각의 메뉴가 어떤 메뉴를 의미하는지 사용자가 이해하기 어렵게 되어 있습니다. 이 문제에 대해서는 이전 글에서도 한 번 언급한 적이 있습니다. (“Icons as Part of an Awesome User Experience”)

색상

하단 네비게이션에서 각각의 메뉴들에 대한 아이콘과 레이블들에 각각 다른 색을 이용하는 것을 피하는 것이 좋습니다. 대신 앱의 주요 색깔들을 이용해서 주목을 끌 수 있도록 하는 것이 좋습니다.

왼쪽: 각기 다른 색깔의 아이콘은 앱을 크리스마스 트리 처럼 보이게 한다.
오른쪽: 오직 한 가지의 주요 색상만 사용하였다.

간단한 공식을 따라라 — 하단 네비게이션에서 현재 위치 하고 있는 부분(아이콘 및 레이블 까지 포함해서)을 강조해 주세요. 앱의 주요 색상을 이용하는 것이 좋습니다.

아래는 iOS 트위터 앱의 하단 네비게이션입니다. 메세지 항목이 활성화가 되어 있는 것을 쉽게 확인할 수 있습니다.

이와 반대로 하단 네비게이션에 전체적으로 색상이 사용되었다면, 오히려 현재의 위치를 흑/백으로 표시하는 것도 방법이다.

왼쪽: 색깔이 있는 하단 네비게이션 바를 고려 할 때 쌍을 색깔이 들어간 아이콘은 피하는 것이 좋다.
오른쪽: 흑백의 아이콘을 사용하는 것이 좋습니다.

텍스트 레이블

텍스트 레이블은 아이콘을 명확하게 안내해 줄 수 있도록 짧고 의미있게 제공되어야 합니다. 레이블이 길어져서 단어가 짤리거나 글자 크기가 작아지거나, 혹은 2줄로 레이블을 제공하는 일이 없도록 해야 합니다. 사용자들은 메뉴를 탭을 했을 때 어떤 일이 일어날지 정확하게 이해하고 싶어 하기 때문에, 메뉴 항목들은 쉽게 읽힐 수 있어야만 합니다.

메뉴 사이즈

하단 메뉴의 사이즈를 쉽게 탭할 수 있도록 크게 만들어 주세요. 전체 사이즈를 메뉴 수로 나누던가, 혹은 가장 메뉴 중 가장 큰 넓이를 기준으로 탭 영역을 동일하게 적용하는 방법도 있습니다. 구글에서 제공하는 안드로이드 가이드라인은 아래의 수치를 모바일 하단 네비게이션의 가이드라인으로 제공하고 있습니다.

모바일에서 고정된 하단 네비게이션 영역의 수치, 단위는 dp.

탭의 배지

하단 바의 아이콘에 배지를 노출시킴으로 해당 영역과 관련된 새로운 정보가 있다는 것을 알려줄 수 있습니다.

이 경우 배지가 다른 아이콘들의 시안성등에 방해가 되지 않도록 주의해 주세요.

3. 네비게이션이 그 자체가 증거가 될 수 있도록

좋은 네비게이션은 보이지 않는 손처럼 사용자들의 흐름에 맞추어 안내해줄 수 있어야 합니다. 정말 쿨하고 끝내주는 기능이라도 사용자가 찾을 수 없다면 소용이 없다.

행동

각각의 하단 네비게이션의 아이콘들은 정해진 목적지로 바로 이동해야 합니다. 이를 선택했을 때 다른 메뉴나 팝업이 표시되는 것을 바람직하지 않습니다. 하단 네비게이션의 아이콘을 탭하는 경우 사용자는 관련된 화면으로 바로 이동을 하던지 혹은 현재 페이지가 업데이트 되는지 등의 액션을 확인할 수 있어야 합니다.

하단의 네비게이션을 현재의 화면과 관련된 액션이나 조작을 할 수 있도록 하지 마세요. 만약 그러한 기능이 필요하다면 대신 하단 네비게이션 보다는 toolbar를 이용하는 것이 좋은 방법입니다.

iOS툴바

통일성을 유지하기

가능하면 최대한 모든 화면에서 동일한 네비게이션 탭 바를 보여주는 것이 좋습니다. 화면의 방향이 가로/세로의 경우에도 동일한 탭 바를 노출함으로 사용자들에게 시각적인 안정감을 주는 것이 중요합니다.

또한, 기능이 동작하지 않는 경우에도 탭 바에서는 계속 보여주는 것이 좋습니다. 특정 상황에서는 보여지고 특정 상황에서는 볼 수 없는 부분이 있다면 그 앱은 UI적으로 불안정하고 예측하기 힘든 앱이 될 수 있습니다. 가장 좋은 방안은 모든 탭들이 보여지고, 왜 해당 탭을 이용할 수 없을지에 대해서 설명을 해주는 것이 가장 좋은 해결책입니다. Dropbox에서 사용자가 offline에서 이용할 수 있는 파일이 없는 경우, Dropbox의 offline 탭을 선택하면, 어떻게 하면 파일들을 offline에서 이용하게 할 수 있는지에 대한 설명이 보여집니다. 이를 흔히들 empty state라고 얘기합니다.

dropbox app의 empty states

숨겨라!

만약 해당 화면이 스크롤 되는 피드라면 사용자들이 새로운 피드들을 찾아서 스크롤하는 순간에는 탭바를 숨기고 스크롤을 멈추고 다시 처음으로 돌아가려는 순간에 탭바를 노출하는 방법도 있습니다.

하단 네비게이션 바의 경우 스크롤에 따라서 다이나믹하게 표시됩니다.

비주얼 적인 기쁨

화면 전환시에 수평적인 모션을 사용하는 것을 피해주세요. 활성화/비활성화 된 화면 간의 전환에는 페이드 아웃되는 애니메이션을 사용하는 것이 더 좋습니다.

크로스 페이드 애니메이션, 출처: Material Design

정리

하단 네비게이션은

  • 잘 보여지고 잘 구성되어야 합니다. (3–5가지의 가장 중요한 목적지를 설정하고 스크롤은 사용하지 않는 것이 좋습니다.)
  • 명확해야 합니다. (네비게이션내의 요소들을 쉽게 확인할 수 있어야 하고, 탭하는데 문제가 없을 정도록 커야 합니다.)
  • 단순해야 합니다. (각각의 내비게이션이 정확한 목적지에 도달할 수 있도록 하고 모든 하단 네비게이션을 포함 모든 요소들을 앱 내에서 일관성 있게 유지하라)

결론

사용자들을 잘 안내해 주는 것은 어느 사이트나 앱에서건 가장 우선도 및 중요도가 높은 사항입니다. 궁극적으로는 사용자의 멘탈 모델과 자연스럽게 어우러지는 인터액션 시스템을 만드는 것이 가장 중요한 점이라고 할 수 있습니다. 디자이너들은 사용자들을 위해서 디자인을 합니다. 즉, 언제나 앱을 사용하는 사용자 페르소나를 생각하고 그들이 이 앱을 사용할 때의 목적을 생각하고 디자이너가 설계한 네비게이션을 통해서 그 목적을 달성할 수 있도록 해야 합니다. 제품이나 서비스가 더 사용하기 쉬워질 수록 사용자들이 더 해당 제품이나 서비스를 이용하려고 할 것입니다.

— -

글을 오랜만에 번역하다 보니 제 글 쓰는 것보다 훨씬 더 시간이 걸리네요. 전체적인 의견에 대해서는 동의합니다만, 기본적인 내용들이 많이 들어 있어서 현장에서 경험이 있으신 분들이면 익숙한 내용일 수도 있어서 조금 걱정도 되고 합니다.

글쓴이는 하단 네비게이션의 중요성에 대해서 이야기 했지만, 대체적으로 아이폰에 해당하는 이야기로 보여지고, 안드로이드 같은 경우는 소프트 키가 있는 경우에는 기본 키와 겹쳐져서 오히려 하단 네비게이션이 더 조작에 있어서 혼란은 주는 경우도 있기 때문에, 반드시 앱의 목적과 단말기와 맞는 ui를 고려하는 것이 좋습니다. 물론 그 과정에서 사용자의 피드백은 결정하는 것에 가장 중요한 요소가 될 수 있구요.

번역하다 보니, 단순히 하단 네비게이션에 대한 것이 아닌 기본적인 ui를 설계하고 고민하는 것에 있어서의 원칙? 이라고 봐도 무방할 것으로 보입니다. 현재 상태를 잘 보여주기, 어느 화면에서나 동일한 것들을 노출시켜 주기, 사용자가 행할 수 있는 key task는 3–5개 정도 이런 것들은 굳이 하단 네비게이션이 아닌, 현재 만드는 서비스의 ui에서 기본적으로 갖추어야 하는 사항들이기 때문에 다른 부분에도 적용해서 일관된 ui로 사용자를 잘 안내할 수 있다면 일단은 성공한 앱이라고 볼 수 있을 것입니다.