본문 바로가기

UX + Design

모바일 내비게이션을 위한 기본 지침서

내비게이션에 검색을 추가하는 것에는 가지 이유가 있습니다:

  • 가끔 사용자는 무엇 때문에 검색해야 할지 모르며, 검색 공간을 알기 쉽게 분할도 해줘야 합니다.
  • 사용자가 무언가 찾고 싶어서 타이핑을 때가 내비게이션 링크를 타고 직접 들어가 찾는 것보다 많은 정신적 노력과 높은 인터랙션 비용이 듭니다. (그리고 사실 사용자는 검색어를 작성하지 못하는걸로 또한 악명이 높죠.)
  • 사이트 검색은 검색엔진보다 검색결과가 현저히 낮습니다.

그러나 모바일 기기에서는 내비게이션과 검색 모두 대가가 따릅니다. 스크린 영역을 차지하고 사용자의 시선을 끌며 심지어 데스크탑보다 귀하게 여깁니다. 만약 스크린 영역이 정말로 부족하다면, 페이지 상단에 있는 검색박스나 내비게이션 링크 때문에 사용자가 앱을 수월하게 사용하거나 정보를 빠르게 전달받지 못할 있습니다.


내비게이션과 검색에 접근하거나 찾기 쉽도록 해야 하겠지만, 모바일 사용성의 기본적인 교의를 잊어서는 안되겠습니다. 내비게이션의 접근성과 발견용이성을 취하면서 동시에 콘텐츠를 우선시 있는 방법 - 점이 모바일 내비게이션 구현의 커다란 도전 하나입니다. 다른 방법은 콘텐츠 우선주의 혹은 내비게이션의 접근성 하나를 희생시키는것 밖에 없습니다.





내비게이션 &

최상위 내비게이션


최상위 내비게이션 바는 데스크탑 디자인에서 차용되었습니다. 스크린 상단에 메인 내비게이션 옵션들을 나열하고 있는 단순한 바 형태죠. 꽤 효율적인 것이지만 두 가지 단점이 있습니다. (1) 내비게이션 옵션이 상대적으로 적을 때만 효과적입니다. (2) 어보브더폴드above the fold(사용자가 웹 페이지에 방문했을 때, 스크롤 하지 않고 볼 수 있는 화면 영역) 을 차지합니다. 



BBC 웹사이트(왼쪽) 안드로이드의 구글플레이(오른쪽) 모두 메인 내비게이션으로 최상위 내비게이션 바를 사용하고 있습니다. 구글플레이는 커루셀을 사용해서 내비게이션 바에 많은 아이템을 넣었습니다. 



탭 바

바는 특히 앱에서 최상위 내비게이션 바와 많이 비슷합니다. 안드로이드의 경우 대개 상단에 있고, 아이폰의 경우 대개 하단에 있습니다. 거의 모든 페이지에서 보여지며 내비게이션 바와 같은 단점을 가지고 있습니다. 하나 다른 점이라면 바는 사용자가 페이지 스크롤을 해도 스크린상에 항상 노출되어 있다는 점입니다. 반면에 내비게이션 바는 시작 화면 최상단에 나오지만 사용자가 스크롤을 하면 접히거나 사라집니다. (스티키 내비게이션 아래로 스크롤하면 사라졌다가, 위로 스크롤하면 다시 나타납니다.)



아이폰의 페이스북(왼쪽) 안드로이드(오른쪽) 모두 메인 내비게이션으로 바를 사용했습니다. 탭은 양쪽의 공식 OS 가이드라인을 따라 아이폰에서는 아래에, 안드로이드에서는 위에 배치되어 있습니다. 



바와 내비게이션 모두 상대적으로 선택옵션이 적게 있는 경우에 적절합니다. 만약 5 이상의 옵션이라면 /내비게이션 바는 맞지 않으며, 옵션의 터치 영역도 너무 좁아 문제가 생깁니다. 해결책으로는 구글 플레이 앱과 같이 커루셀carousel /내비게이션 바가 있겠지만, 이것 역시 항상 옳다고 말할 수는 없습니다. 눈에서 멀어지면 마음에서도 멀어지듯, 만약 아래 날씨 앱처럼 바에 카테고리가 너무 많아서 커루셀 방식으로 되어있다면, 많은 사용자들이 눈에 보이는 옵션만 선택할지 모를 일입니다. 



안드로이드의 날씨 채널에서 이전 버전은 하단에 커루셀 바를 두었습니다. 기존 바와 커루셀 사이의 구분이 불분명해보여 정확히 무엇인지 예측하기 힘들며 숨겨져있는 아이콘도 보이지 않아 발견 용이성도 떨어집니다.








/내비게이션 바는 스크린에서 크롬 영역이며, 약간의 공간을 유틸리티 내비게이션utility-navigation(연락처, 구독, 저장, 로그인, 공유 같은 2 액션이 있는 내비게이션) 이나 검색박스를 위해 사용되어야 합니다. 만약 4-5개의 메인 내비게이션 옵션이라면 화면상에 다 보여주기에 충분합니다. 그러나 내비게이션은 반드시 크롬 영역의 문맥에 맞게 생각해봐야 합니다. 내비게이션에 적은 수의 옵션이 있다하더라도 유틸리티 내비게이션이나 검색박스가 그 안에 추가된다면, 페이지 상에 차지하는 메인 영역의 비율이 쓸데없이 너무 클 것입니다. 



오토존닷컴autozone.com: 메인 내비게이션 카테고리라고는 4 밖에 없는(shop, repair help, deals, find store) 사이트이지만, 페이지 상에는 그보다 많은 크롬 요소들이(logo, shopping cart, my zone link, search box) 넓은 영역에 퍼져 있습니다. 



햄버거 메뉴 

햄버거 메뉴는 메인 내비게이션 옵션들을 내포하고 있는 메뉴로써, 평소에는 디테이한 옵션들을 숨기고 있다가 필요시에 보이게 합니다. 햄버거 아이콘이 아마 내비게이션 메뉴를 위한 기표로 가장 많이 언급됬다면, 다른 레이블이나 아이콘도 내비게이션을 위해 사용될 수 있습니다. (조사에 따르면 햄버거 아이콘보다 '메뉴'라고 적혀있는게 사용자가 약간 더 선호했다고 합니다.) 헴버거 메뉴의 가장 큰 이점은 자그마한 공간에 수 많은 내비게이션 옵션들을 넣을 수 있다는 점과 서브메뉴를 쉽게 지원할 수 있다는 점입니다. 단점은 "눈에서 멀어지면 마음에서도 멀어지듯이" 발견 용이성을 떨어진다는 점입니다. 




기표가 없는 햄버거 메뉴는 제스처를 통해서 찾을 수 있습니다. 세포라Sephora 앱을 보면, 왼쪽 끝에서 수평으로 스와이핑을 하면 햄버거 메뉴를 열 수 있습니다. (애플은 iOS는 7 이후로는 '뒤로가기'로 사용하려 해서 문제입니다.)



아이폰의 세포라Sephora: 메뉴 버튼은 없습니다. 하지만 스크린 왼쪽 끝에서 수평으로 스와이프하면 메뉴가 나옵니다. 왠만한 사용자라면 메뉴를 찾지 못할 것이고, 그럼으로 앱을 제한적으로 밖에 사용하지 못할 겁니다. 



햄버거 메뉴는 적어도 내비게이션 옵션에게 발견 용이성을 주며, 콘텐츠의 양이 무겁거나 주로 둘러보기만 하는 사이트나 앱에 아주 적합합니다. 만약 사용자가 어떤 섹션을 찾아가는데 안내나 도움이 필요 없어도 된다면 햄버거 메뉴가 적절합니다. 또한 햄버거 메뉴는 콘텐츠로부터 아주 적은 영역만을 차지하기도 합니다.


그러나 내비게이션이 메뉴 아래에 숨겨져 있다는 점을 유념한다면 사용자는 아무튼 열어보고 체크해봐야 합니다. 햄버거 메뉴가 자주 사용 되어지고 모바일 사용자들에게 점차 친숙해져 있다해도, 아직 많은 사람들이 단순히 열어보질 않고 있습니다. 심지어 열어봤던 사용자도 시간이 지나면 기억하지 못하는 경우도 발생하고 있습니다. 


만약 햄버거 메뉴를 사용하려 한다면, 다른 방식으로 내비게이션을 지원하도록 생각해보는게 좋습니다. 섹션간 이동하는 링크를 늘려 발견 용이성을 높일 수 있도록 IA(정보설계) 구조를 만들어 보세요. 






내비게이션 허브

내비게이션 허브는 모든 내비게이션 옵션들을 리스트 형식으로 나열한 페이지를 말합니다. 다른 곳으로 가기 위해서 사용자는 우선 허브로 돌아간 다음, 옵션 리스트를 선택해야 합니다. 이러한 내비게이션 접근법은 주로 홈페이지를 내비게이션에 독점적으로 내주며, 각각의 내비게이션 사용을 위해 다시 허브로 돌아가는 추가적인 스텝을 밟습니다. 태스크 기반의 웹사이트와 앱, 특히 사용자가 내비게이션 계층에서 하나의 옵션만을 사용하는 경우에 효과적입니다.


내비게이션 허브로서 홈페이지는 주요 공간영역이 낭비될 것이고 모든 내비게이션은 홈페이지를 전부 써버려야 할 것입니다. 위 두 가지가 주요 단점으로 보이지만, 콘텐츠를 둘러보거나 사용하는 것이 아니라면 큰 문제가 되지는 않습니다. 그러나 아주 특수한 태스크 완수하기 위해서라면 문제가 되겠죠. (예를 들어, 비행기 체크 인이나 핸드폰의 세팅을 바꿀 때.) 


이러한 사이트나 앱은 내비게이션 허브 형식의 홈페이지의 장점을 취할 수 있습니다. 특히 사용자가 하나의 세션에서 하나의 태스크만 처리하는 경우나 내비게이션 트리 안에서 자주 이동하지 않는 경우가 될 수 있습니다.



유나이티드United 홈페이지를 내비게이션 허브로 사용하고 있습니다. 페이지 깊숙이 들어갔다가 다른 내비게이션 옵션으로 들어가려면 화면 우측상단에 있는 Home 버튼을 통해 다시 홈페이지로 돌아가야 합니다. 



위의 유나이티드United의 예를 보면, 사용자는 티켓을 사는 것과 체크인 하는 것을 하나의 세션에서 동시에 진행할 수 없습니다. 그래서 대다수의 사용자의 허브로 다시 돌아오지 않을 것이기에 좀 더 효율적인 방식으로 사용자에게 서비스를 제공할 필요가 있습니다. 



마치며


내비게이션은 중요한 요소이며 모바일 상에서 접속 가능성을 높이는 것은 하나의 도전입니다. 왜냐하면 화면 크기의 제약과 콘텐츠를 UI 요소보다 우선시 해야 하기 때문입니다. 모든 내비게이션 패턴에는 각자의 사용성의 문제를 겪으면서 동시에 이 도전을 해결하려고 합니다. 모바일에서는 사용자가 사용하면서 최소한의 불편함을 겪을 내비게이션을 고르는 것이 키포인트 입니다.

  • 햄버거 메뉴는 아주 많은 옵션들을 수용합니다. 하지만 발견 가능성은 낮습니다. 주로 정보를 둘러보기만 하는 사이트에 적합한 내비게이션 입니다.
  • 탭/내비게이션 바는 페이지의 영역을 차지합니다. 내비게이션 옵션의 갯수가 적을 때 사용하기 좋습니다. 

  • 태스크를 처리하기 위한 성격의 사이트라면 내비게이션 허브 패턴을 사용하세요. 






Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.