brunch

브런치북 여행앱 어디까지 써봤니? 09화

라이킷 26 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 청개구리 기획자들 Oct 31. 2019

#2. 매 순간 지도가 필요하다면, 지도앱 UX분석

일상의 동반자가 된 지도앱을 UX 관점에서 하나씩 톺아보자

지도앱 시장을 살펴보고, 주요 지도앱(네이버지도, 카카오맵, 구글지도)을 분석하는 글을 연재했습니다. #1. 내 손안의 지도, 지도앱비교 첫 번째 글은 이곳에서 확인하세요!

카카오

일상에서도 여행의 설렘을 느끼게 도와주는 지도앱을 살펴보자

단지 도착만을 하기 위한 여행이라면, 그 여행은 불쌍한 여행이다.
- 아서 콜턴 -

정말? 그럼에도 우리는 목적지에 도착해야 한다.

발걸음을 내딛는 매 순간 지도가 필요한 나로서는 사뭇 다르게 다가온다. 도착만을 위한 여행은 불쌍하다지만, 그럼에도 우리는 목적지에 도착해야 한다. 때로는 도착만으로도 벅차는 순간들이 있다. 한 걸음을 내딭을 때마다 전적으로 의지하는 여행의 동반자, 국내 주요 지도앱의 기능과 특징을 하나씩 사용자경험 관점에서 살펴보도록 하자.

뚜벅이들의 김기사,

대중교통으로 이동경로 살펴보기

국내 3사 주요 지도앱(네이버지도, 카카오맵, 구글맵)을 비교하기 위해, 공통으로 제공하는 기능 중 하나인 “대중교통으로 이동 경로 찾기”를 살펴보았다.

구글맵은 국내에서는 오로지 대중교통을 이용한 이동경로만 제공하기 때문에 현재는 네비게이션 기능을 비교할 수 없다. 해외 여행을 할 땐 참 편리하고 유용하나 국내에서는 법적인 이슈가 있었다. 국내에서 지도 서비스를 제공하려면 서버가 국내에 있어서 한국에서 데이터를 생산해야 한다. 구글은 한국 정부에 지도(지리정보) 반출을 2007년부터 신청해 왔지만, 아직까지도 국외 반출을 허용하지 않고 있다.

따라서 공통적인 기능 비교를 위한 첫 번째 과업(task)으로 “대중교통으로 이동 경로 찾기”를 택하였다. 전반적인 플로우는 다음과 같다.

지도앱 비교할 테스크 순서 : '예술의 전당'에서 '경복궁'으로 이동하기

  1. 검색창에서 장소 '경복궁' 검색하기
  2. 검색 후 도착지 장소로 '경복궁' 선택하기
  3. 이동경로 검색 결과 살펴보기
  4. 가장 높게 추천한 경로 살펴보기

가을 나들이의 대명사 경복궁, 대중교통으로 이동하는 과정을 살펴보자

가을을 만끽하기엔 경복궁이 제격이다.

지도앱에서 짚어볼만한 UX 포인트들은 지도별로 네이버지도, 카카오맵, 구글맵 하이라이트 색상을 주었다.

1. 도착 장소 ‘경복궁’ 검색하기

지도앱 검색창에 '경복궁'으로 했을 때 나오는 화면을 살펴보았다.

장소 검색 결과 미리보기 (네이버지도)

1) 네이버지도

네이버지도는 리뷰 개수 등의 정보를 함께 제공한다. 그래서 검색 결과, 여러 장소가 나온다고 하더라도 쉽게 의사결정을 할 수 있다.

특히, 동일한 이름의 식당 중 내가 가려고 하는 핫한 식당을 선택하고자 할 때 대략적인 식당의 위치와 리뷰의 개수가 의사결정을 하는 데 도움이 된다.

그 외에도 다양한 검색어(예: 경복궁맛집, 경복궁한복대여)를 미리보기 형태로 제공해 준다. 네이버라는 포털 서비스에서 제공한다는 큰 강점인 추천 검색어를 제공하기 때문에 이동할 장소를 정하지 않고 둘러보고 조사하는 용도로써 활용하기에도 유용하다.

2) 카카오맵

주소와 장소 카테고리(예: 궁궐, 한정식), 기준점(현재 위치 또는 출발지)과의 거리만 제공한다.

3) 구글지도

카카오맵 또한 추천 검색어(예: 경복궁한정식)를 제공하는 반면, 구글맵은 철저히 장소에 대한 후보군만 제공한다. 이는 구글의 한계점이라기 보다는 법률적인 제한으로 인해 자체 데이터를 적극적으로 활용하지 못해서 발생하는 부분같다.

종합적으로 살펴본다면, 검색해서 내가 원하는 장소를 선택하는 과정에서는 네이버지도에 손을 들어주고 싶다. 일상해서는 명확한 장소보다는 같은 지명이 많은 식당이나 카페 등의 장소를 검색하는 경우가 많을 것이다. 검색어를 입력하고 가려고 하는 장소를 선택할 때, 주소 외에 리뷰의 개수와 TV 출현 여부 같은 추가적으로 제공하는 단서들이 제공되면 잘못된 의사결정(착오, mistake)이나 실수(lapse)를 막는 데 도움을 주기 때문이다.

2-1. ‘경복궁’ 도착지로 설정하기

검색 결과에서 선택한 장소가 찾는 장소인지 확인할 수 있도록, 장소의 기본 정보를 가장 먼저 제공하며 스크롤을 내리면 자사 포털사이트에서 수집한 추가적인 정보를 제공한다.

업체별 의사결정에 도움을 주는 정보들로는 한줄요약, 블로그 리뷰, 평점 등이 있다. (네이버지도 - 카카오맵 - 구글맵 순)

네이버지도와 다른 두 맵의 가장 큰 차이점은 별점과 리뷰이다. 카카오맵과 구글지도는 방문자들의 후기와 별점을 확인할 수 있다. 장소를 브라우징 한다면 리뷰는 꽤나 도움을 주는 정보인데, 네이버지도는 블로그 포스팅을 제공하며, 카카오맵과 구글맵은 평점을 제공한다. 가볍게 둘러보고 장소를 선택하는 게 목적이라면 블로그 리뷰는 다소 무거운 느낌인 반면, 별점이나 한 두 줄의 짧은 코멘트가 더욱 효과적이다. 이에, 네이버에서는 블로그 리뷰 텍스트를 활용하여 한줄 요약 정보를 제공하고 있다.

네이버에서 별점과 리뷰를 제공하기 위해, 올 해 여름부터 방문한 장소를 리뷰할 수 있는 #MY플레이스 서비스 베타버전을 출시하였다. #MY플레이스는 방문한 장소의 영수증을 찍어서 인증하기 때문에, 리뷰 어뷰징을 막을 수 있어서 신뢰 높은 코멘트를 제공한다는 점에서 타사 대비 강점이 될 것으로 기대해 본다.

2-2. ‘예술의전당’ 출발지로 설정하기

'경복궁'을 [도착지]로 선택한 화면 (네이버지도 - 카카오맵 - 구글맵 순)

1인칭 주인공 시점에서 표현하기

'경복궁'을 [도착지]로 설정하면 [출발지]는 자동으로 '현재 위치'로 검색된다. 그리고 '현재 위치'를 표현하는 방식은 서비스별로 조금 다르다.

구글맵은 '내 위치(Your location)'으로 표현하는 반면, 나머지 서비는 현재 위치로 검색된 실제 주소를 보여준다. 간혹 내 위치를 제대로 못잡는 경우도 있기 때문에, 주소를 보여주는 게 의미가 있을 수 있다. 하지만 지도앱 사용이 익숙하지 않는 사용자라면 저 주소가 어떤 의미인지 파악하는 데 학습이 필요하다.

어떤 접근이 더 낫다고 판단하기 어려우나, 구글맵의 1인칭 주인공 시점에서 표현하는 UX Writing이 상냥하다는 느낌을 준다.

디폴트가 주는 맹점

네이버지도와 구글맵은 선택한 장소를 [출발지] 또는 [도착지]로 설정할 수 있다. 반면, 카카오맵은 [도착지]만 선택할 수 있으며, ‘경복궁’을 도착지로 선택하면 출발지는 자동으로 현재 위치로 설정하여 이동 경로를 조회한다. 현재 위치에서 이동하지 않을 경우, 이전 단계로 이동하여 출발지를 다시 선택해야 한다는 번거로움이 있다. 해당 위치에서 바로 이동하는 경우가 많기 때문에 감내할 수 있는 수준이지만, 선택한 장소를 도착지로 선택할 수 있는 옵션이 없다는 점은 다소 아쉬운 부분이다. 맥락에 따라 발생하는 번거로움은 분명 사용자에게는 페인포인트(pain point)이자 UX디자이너에게는 언젠간 해결해야할 미션일 것이다.

3. 이동경로 검색결과 살펴보기

이동수단은 기본적으로 대중교통, 자동차, 도보가 있다. 구글은 글로벌 서비스답게 우버와 비행기 경로도 제공한다. 기본으로 선택(default)되는 경로는 이전에 선택했던 경로이다. 한 번에 모든 이동수단의 이동경로를 불러오기 어렵기 때문에 이전에 선택한 이동수단의 경로만 제한적으로 제공하는듯 하다. 그럼에도 가끔은 눈치껏 적절한 이동수단이 선택됐으면 한다. 개인화(personalization) 패턴 분석이 잘 이루어진다면 구현도 가능하지 않을까 기대해 본다.

Design is intelligence made visual

디자인은 시각화된 지성이다. 이동경로 시각화 측면에서는 네이버지도가 가장 직관적이다. 대중교통 경로를 선택할 때 살펴보는 요소는 (1) 전체 이동 시간, (2) 도보 시간, (3) 환승 편의성(횟수, 도보 시간, 이동시간) 순이다. 네이버지도는 세 요소가 의식의 흐름대로 잘 정돈되어 있으며, 정보가 바로 와닿을 수 있도록 시각화하여 제공하기 때문이다.

장소 이동 경로 검색 결과 (네이버지도 - 카카오맵 - 구글맵 순)

지도앱에서도 빠질 수 없는 On-demand

예전에는 없었던 <출발 시간 설정>, <버스 도착 시간> 등의 기능이 생겼다. 출발시간 설정은 특히 저녁에 야간버스를 타야하거나 새벽시간 등 배차간격이 긴 경우에 굉장히 유용하다. 이처럼, 업체의 운영시간이 아닌 <영업중>으로 표시하는 구글처럼 온디멘드(on-demand)의 장점을로컬맵에서도 경험할 수 있어서 발전하고 있다는 느낌이 들었다.

모빌리티도 All-in-one

추천 경로 중 가장 상단의 경로를 선택하면 상세 정보가 나타난다. 버스 추가정보(정류장 번호, 이동 정류장 개수, 혼잡도, 도착 예정 시간)와 지하철 추가정보(빠른 환승 탑승구 번호, 이동 역 개수, 이동 시간, 출구 번호, 대처버스)를 함께 제공한다.

대중교통으로 이동하는 과정에서 부가적인 정보들을 함께 제공해줌으로써, 다른 대중교통 앱 (예: 카카오지하철, 카카오버스)들을 번갈아가면서 접속하여 확인할 필요가 사라지게 된다.

평소에 지도앱으로 길을 찾을 때마다 여러 앱들을 동시에 사용하고, 세션이 끊겨서 다시 검색하고 로딩해야하는 일련의 과정들이 너무 불편했다. 하지만 지금의 지도앱들은 모빌리티 과정을 온전히 이해하고, 그 과정에서 발생하는 번거로운 과정을 생략할 수 있게 도와주어 앱을 사용하면서 유용하고(handy) 쾌적하다는 느낌을 받았다.

이와 유사한 경험을 했던 기능이 아이폰 iOS9 이후에 탑재된 화면 좌측 상단에 있는 '뒤로가기(Back to previous app)'이다. 손쉽게 이전 앱으로 이동할 수 있는 채널을 제공하여, 시퀀스가 끊기지 않고 플로우가 연속적이라는 느낌을 받았다. 출시 당시에는 애플의 꼼꼼함과 배려에 굉장히 감탄했었던 기능이다.

이전에 사용하던 앱으로 간편하게 이동할 수 있는 아이폰의 '뒤로가기' 버튼이다.

4. 가장 높게 추천해준 경로 살펴보기

이전의 과정들이 모두 비슷하고 차이가 대동소이했다면, 실제로 이동하는 경로를 보여주는 UI 측면에서 많은 차이가 있었다.

1) 네이버 지도

네이버지도는 단계별 경로는 모두 끊어서 보여주어 그 이동 과정에만 집중할 수 있도록 도와준다. 단, 스텝별로 다른 화면에서 보여주기 때문에 연속성과 일관성이 떨어진다는 느낌이 강하다. 전체 경로를 살펴보려면 다시 뒤로 이동해야 한다. 단계별 경로를 보여주는 화면에서는 이전이나 다음 경로를 보기 위해 스와이프를 할 때, 힘을 주어 길게 좌우로 밀어야 하기 때문에 인터력션이 부자연스럽다. 지도 이동과 경로 이동의 전환을 구분짓기 위한 의도인 것 같지만, 영역이 충분히 분리되어있기 때문에 조금 더 안정감있는 화면 전환을 제공해도 좋을 것 같다.

마지막으로 아쉬운 부분은 세션 시간이다. 이동하는 동안 계속 지도를 계속 살펴보는데, 세션 시간이 너무 짧다. 세션이 만료되어 경로를 다시 볼 때마다 이동경로를 재검색해야한다는 번거로움이 있다. 지도앱을 사용하는 맥락을 십분 고려해주었다면, 더 나은 경험을 줄 수 있지 않았을까 생각해 본다.

네이버지도 상세 이동경로 화면 (1) 경로 선택 후 첫 화면 (2) 상세 경로를 위로 올린 경우 (3) 단계별 경로를 선택한 경우

2) 카카오맵

카카오맵은 화면 전환 없이 한 화면에서 모든 이동경로를 보여준다. 많은 정보를 제공하는 사이트에서는 찾아볼 수 있지만 데일리앱에서는 만나기 어려운 'ㄱ' 형태의 레이아웃을 사용한다. 화면 전환 없이 단계별 이동경로를 보여주기 때문에 흐름이 끊기지 않고 연속적이라는 느낌을 준다. 그러나 고정적으로 공간을 차지하는 헤더와 사이드바 때문에 갇힌 느낌이다.

두 번째로 살펴볼 포인트는 마이크로 인터랙션이다. 좌측 팝업레이어를 선택하거나 스크롤 하면 지도가 축소되어 전체 경로를 보여준 뒤 줌 아웃되어 해당 단계의 지도를 보여준다. 이 과정에서도 인터랙션이 과해서 통제감을 잃은 느낌이다. 서비스를 이용할 때 중요하게 생각하는 경험 중 하나는 통제위치(locus of control)이다. 사회심리학 개념을 HCI 분야에도 끌고 온다면, 내부적 통제 위치(inner control)은 제이콥닐슨의 사용성 10 원칙 중에서 #3. User control and freedom, 사용자의 주도권에 해당될 것이다.

다음맵의 상세 경로 화면

3) 구글지도

구글지도는 단계별 이동경로를 하단에서 레이어로 보여준다. '역시 구글'이라는 수식어에 걸맞게 가장 안정적인 UI를 제공한다.(주관적일 수 있다.) 상세 이동 경로를 하단에 보여주면서 위로 스와이프하면 바로 접근할 수 있기 때문에, 플로우의 연속성과 접근성을 모두 충족시켜준다.

구글지도의 상세 경로 화면

일관된 UI를 제공하는 일전의 과정들과 달리, 선택된 이동 경로를 보여주는 화면에서는 서비스마다 확연히 달라서 신기했다. 각 서비스만의 관점과 철학이 엿보이는 부분이었다. 어떤 UI가 낫다고 결정하긴 어렵지만, 똑같은 정보와 기능이라도 다양하게 구성해볼 수 있다는 시사점을 주었다.