9. 내비게이션

기존 서비스의 내비게이션을 정리하는 과제를 맡게 되면서, 몇 가지 정리해보는 것들.

1. 내비게이션이란?

우리가 운전할 때 보는 내비의 그 내비게이션, 맞다. 요즘 유행하는 게임 Among Us에서 항로를 조정하는 미션을 수행하는 장소인 Navigation(한글판에선 항해실) 맞다. 내비게이션은 길 찾기다. 복잡한 디지털 서비스 안에서 사람들이 길을 잃지 않도록 너 지금 여기 있어! 라고 알려주는 이정표이다. 

대충 이런 것

 

따라서 내비게이션은 1)현위치가 어디인지 알려주어야 하며, 2)현위치에서 다른 곳으로 이동하는 방법을 제공하여야 한다.

이게 화면을 넓게 쓰는 PC에서는 꽤 쉬운데, 대충 상단에 GNB 박아놓고 현재 위치하고 있는 카테고리에 불 들어오게 해 놓고, 또 이동은 GNB를 이용해 자유자재로 원 클릭으로 완전히 다른 화면으로도 이동할 수 있고, 브라우저의 뒤로 가기 버튼이나 키보드 백 버튼을 통해 이전 페이지로 넘어가는 인터랙션도 너무 익숙한 조작이기 때문이다. 

©다음카카오

한 가지 예시) 나는 현재 DAUM이라는 홈페이지의 '금융' 대카테고리에 있으며, '금융'에서도 '해외' 소카테고리에 위치해 있다. DAUM 로고를 눌러 언제든지 첫 화면으로 이동할 수 있고, '부동산'을 누르거나 다른 소카테고리들을 눌러 다른 카테고리로 이동할 수 있다.

2. 모바일 내비게이션의 특징

PC에서는 규칙성만 있다면 넓은 공간을 활용해 어떻게든 모든 화면으로 통하는 내비게이션을 만들 수가 있지만 모바일은 작은 화면의 특성 상 많은 요소를 보여주기가 쉽지 않다. 따라서 그 동안은 주로 삼선 모양의 내비게이션(햄버거를 닮았다고 해서 햄버거 버튼이라 부르는)을 넣고 이 버튼을 누르면 모든 메뉴가 펼쳐지도록 하여 다른 메뉴로 접근하도록 만든 사례가 많았다.

너무 복잡한 햄버거 메뉴 사례 ©KB국민카드

그러나 이 방법도 메뉴가 너무 많으면 길 찾기가 복잡해지기 때문에 요즘 잘나가는 모바일 서비스들은 주로 화면 하단에 고정적으로 3~5개의 대 카테고리를 배치해놓고 이 카테고리 별로 분리된 홈 화면을 운영하는 형태로 구조를 만들고 있다. 각 카테고리의 소 카테고리로 이동하려면 해당하는 대카테고리의 홈화면으로 이동한 후에 이동하여 좀 더 명확하게 분리된 형태이다. 이러한 하단 메뉴를 'Tab Bar' 라고 한다. (안드로이드에선 Bottom Navigation이라 칭함)

Tab Bar를 활용한 사례 ©카카오뱅크

3. 좋은 내비게이션 만들기

앞서 내비게이션이 길 찾기라고 했는데, 결국 길을 쉽게 찾도록 하기 위해서는 정보의 구조가 쉽고 명확하면 된다. 이는 쇼핑몰과 백화점 차이를 살펴보면 알 수 있는데,  쇼핑몰의 경우는 여성의류 옆에 화장품 가게도 있고, 그 옆에 식당도 있고 그러다 갑자기 애견샵이 나오기도 한다. 반면 백화점은 1층은 명품과 화장품, 2층은 잡화, 3층은 여성의류.. 탑층은 식당가로 꾸며져 있는 등 서로 다른 층(카테고리)마다 그에 맞는 매장(컨텐츠)이 위치하고 있다. 따라서 내가 원하는 매장을 바로 찾아가기에는 백화점이 훨씬 편하게 되어 있는 것이다. 이처럼 좋은 내비게이션을 만들기 위해선 먼저 정보구조를 뜯어보는 작업이 선행되어야 한다.

복잡한 정보구조(상점 배치)와 내비게이션(길 찾기)의 예시 (스타필드 코엑스몰)

다음 글에는 정보구조에 대해 정리해보려고 한다.