본문 바로가기

Technology

모바일을 위한 UX디자인: 하단 내비게이션

 최근 구글Material Design Guide(다양한 디바이스를 아우르는 구글의 디자인 가이드라인, 일관된 사용자 경험을 위해 제작되었다)에 Bottom navigation이란 요소를 추가했습니다. iOS와 UI를 차별화 하고 콘텐츠 영역을 확보하겠다는 의도에서 하단에 내비게이션을 두지 않는 것을 원칙으로 하였던 구글이 결국에는 하단 내비게이션을 선택한 것이죠.

구글의 하단 내비게이션, 사진출처



이스북의 변화도 인상적입니다. 주요 메뉴들을 하단 내비게이션으로 끌어냈습니다. 구글의 프로덕트 디렉터인 Luke Wroblewski의 ‘Obvious Always Wins’에 따르면, 기존에 메뉴와 내비게이션의 역할을 하였던 햄버거 메뉴를 없애고 하단에 내비게이션을 두면서 사용성이 더 높아졌습니다.




햄버거 메뉴를 하단 내비게이션으로 대체한 페이스북과 Redbooth, 사진출처




이러한 변화들은 무엇을 말하고 있을까요?  그리고 왜 하단 내비게이션일까요?



스티븐 후버는 일반인의 모바일 기기 사용에 대한 자신의 연구에서, 응답자의 49%가 스마트폰을 사용할 때 한 손으로 잡고 엄지 하나 만을 사용한다고 밝혔습니다.



스마트폰을 잡는 손의 위치에 따라 생기는 두 가지 주요 터치 영역, 사진출처



엄지 손가락을 사용할 때 터치하기 쉬운 영역, 사진출처



 스마트폰을 사용할 때 엄지손가락을 사용하게 되면, 위의 그림과 같이 Thumb Zone이 생깁니다. 녹색이 엄지손가락이 닿기 쉬운 위치이고, 붉은색으로 갈 수록 엄지손가락이 닿기 어려운 위치입니다. 스마트폰의 크기가 커질 수록 그 경계가 더욱 극명합니다.



구글 Material Design의 주요 내비게이션 터치 영역 비교, 사진출처



Thumb Zone을 실제로 대입해보면 그 차이가 더욱 명확합니다. 위의 그림처럼 한 손만 사용하는 사용자의 경우에는 상단에 왼쪽에 위치하는 햄버거 메뉴보다 하단의 내비게이션에 엄지손가락이 접근하기 쉽습니다. 두 손으로 스마트폰을 사용하는 사용자들이 상대적으로 영역에 구애 받지 않는다고 할 때, 기존의 햄버거 메뉴보다는 하단의 내비게이션을 사용함으로써 대부분의 사용자들을 고려한 서비스를 제공할 수 있습니다.  




그렇다면 하단 내비게이션을 잘 만들기 위해서는 어떻게 해야 할까요?



1.가장 중요한 목적지만 담을 것


하단 내비게이션에는 3~5개의 목적지를 담는 것이 좋습니다. 목적지가 3개 미만일 경우는 사용자가 받는 정보가 빈약하여 서비스를 제대로 파악하지 못하게 되고, 5개가 넘어가면 선택 영역이 좁아져서 사용자가 불편함을 느끼고 이용 중인 서비스에 대해 복잡함을 느끼게 됩니다.



목적지가 2개일 때보다 안정적인 3개짜리 내비게이션, 사진출처



5개가 넘어가자 아이콘이 작아지고 복잡해진 내비게이션, 사진출처



Gaumengut의 안정적인 하단 네비게이션, 사진출처



따라서 하단 내비게이션에 너무 축약하거나 너무 많이 보여주기보다는, 3~5개의 엄선된 목적지를 배치하여 안정으로 구성할 필요가 있습니다.



2.현재 위치를 잘 보여줄 것


‘내가 지금 어디에 있는가?’를 사용자가 아는 것은 매우 중요합니다. 여행을 할 때 지도를 펼쳐 들고 내가 지금 어디에 있는 지를 알아야 다음에 어디를 갈지, 어떻게 가야 할 지 한눈에 파악할 수 있는 것과 같습니다.


하단 내비게이션에는 주로 아이콘을 사용하는데, 아이콘에 각기 다른 색을 쓰는 것보다는 주요 색으로 통일하고 사용자가 현재 있는 위치의 아이콘만 색깔을 다르게 하는 것이 좋습니다.



크리스마스 트리 같은 색(왼쪽)보다는 주요한 색 하나를 쓰는 것(오른쪽)이 눈에 띕니다. 사진출처



메시지가 파란색으로  활성화 중인 트위터의 하단 내비게이션, 사진출처



 목적지 각각을 어떻게 잘 설명하느냐도 내가 지금 어디에 있는지 파악하는 데 중요한 역할을 합니다. 해당 메뉴의 역할이 충분히 설명되지 않은 아이콘을 사용하거나, 텍스트 라벨이 간결하고 함축적으로 목적지를 설명하지 못하면 사용자가 한눈에 현재 위치를 파악하는 데 어려움을 겪을 수 있습니다.



아이콘이 무엇을 나타내는지 알기 힘든 Bloom.fm 앱, 사진출처



텍스트 라벨이 간결하지 못해서 발생하는 나쁜 예, 사진출처



3.따로 설명이 필요 없도록 명확하게 표현할 것


 사용자를 이끄는 매력적인 특징과 콘텐츠가 있다고 하더라도 사용자가 그것을 발견하지 못하면 아무 소용이 없을 것입니다. 그래서 하단 내비게이션은 명확해야 합니다.


하단 내비게이션은 눌렀을 때 어떤 단계를 거치지 않고도 직접 연관된 화면이 보이는 목적지로 향해야 합니다. ‘Photo’라고 하면 사진들을 모아 놓은 앨범이 아니라 모든 사진이 쭉  나열되어 있는 화면이 나와야하는 것이죠.



직접적인 화면을 보여주는 하단 내비게이션, 사진출처



그리고 가능하면 어떤 화면이든지 항상 같은 내비게이션을 노출해야 합니다. 그래야 사용자가 안정적으로 느낄 수 있고, 각각 내비게이션의 목적에 대한 이해도 더욱 쉽게 할 수 있습니다. 일시적으로 사용이 불가능한 목적지가 하단 내비게이션에 존재할 수 있습니다. 그럴 때는 내비게이션 상에서 지우는 것이 아니라, 왜 사용이 불가능한지 알려주는 화면을 보여주고 내비게이션을 고정함으로써 각 목적지의 존재감을 명확히 할 수 있습니다.      

  



모바일 웹을 디자인하고 계신가요? 앱을 디자인하고 계신가요?


좋은 하단 내비게이션은 사용자를 이끄는 보이지 않는 손과 같습니다. 사용자가 가고 싶은 길을 쉽게 갈 수 있도록 안내하고, 더 나아가서는 사용자를 움직이게 만듭니다. 하단 내비게이션으로 사용자의 행동을 디자인해보는 것은 어떨까요?



출처 : Medium, GS real design


by 수달 발자국









  • 수성비 2016.04.17 15:48 신고

    저는 지금까지 상단 네비게이션도 괜찮다고 생각했는데 이 글을 보고 생각이 약간 바뀌었네요. 앞으로 누리사랑방 스킨 같은 거 수정할 때 참고해야겠습니다.

  • yoojiseong 2016.04.23 00:00 신고

    정말 재미있게 잘 봤습니다. 디자인을 하다보면 자기 생각에 빠져 정작 중요한 부분을 놓치게 되는데요 포스팅을 보면서 무엇이 중요한지 다시한번 생각할 수 있게 되었네요!

  • 방랑객 2016.06.09 11:41

    요즘 스마트폰 웹브라우저들 자체에 하단 메뉴들도 하단메뉴를 침범해서.... 여간 짜증나는게.... 모바일웹에 하단 메뉴 적용해도 웹브라우저 하단메뉴에 먹혀버리는 ㅠㅠ..... 이런식이면 상단메뉴바로 다시 회귀할 것 같은 개인적인 생각...

  • 야호 2016.07.08 15:41

    모바일 앱일 경우와 웹일 경우의 차이점이 있나요? 고려해야하는 점이 뭘까 고민해봤는데 잘 모르겠어요...