많은 정보를 담은 지도 UI는 왜 짜증날까?

지도 UI 어떻게 활용할까?

우리가 지도를 리스트 보다 선호하는 이유는 한 눈에 필요한 정보를 요약해서 보고 싶기 때문입니다. 많은 정보를 넣어 두는 것은 되려 어떤 정보를 먼저 확인해야 하는지, 사용자에게 혼란을 줄 수 있다는 사실을 잊지 마세요!

WHY : 지도 UI 화면, 왜 중요할까요?

(에디터, 제그마스터) 맛집이나 카페 등을 찾을 때, 우리가 그 장소들을 살펴볼 수 있는 방법은 크게 두 가지가 있습니다. 하나는 지도 위에 내 위치를 중심으로 장소들을 보여주는 방법, 또 하나는 이미지와 텍스트로 구성된 리스트를 보여주는 방법입니다. 지도 위에 장소들이 놓인 경우 시각적인 제한이 덜 하다는 장점이 있는데요. UI 구성과 디테일에 따라 조금씩 달라질 수 있지만, 한 눈에 들어오는 장소들이 리스트에 비해 더 많고 원하는 장소에 대한 정보 역시 화면 전환 없이 빠르게 확인 할 수 있기 때문입니다. 또 특정 지점을 기준으로 거리가 얼마나 되는지도 대략적으로 따져볼 수 있는 기회도 생기기 때문입니다.

예를 들어 강남역 근처 맛집을 지도 UI로 살펴본다면 우리가 강남역을 지도 가운데 또는 한 쪽에 고정시킨 상태로 빠르게 훑어볼 수 있다는 것이죠. 리스트로 살펴볼 때도 거리 등의 정보를 제공받을 수 있지만 한 눈에 볼 수 있는 수가 제한 될 수 밖에 없고 구체적인 장소를 보기 위해서는 다시 지도 UI로 돌아가야 한다는 상대적인 불편이 존재합니다. 오늘은 이런 '지도 UI'를 다양한 서비스에서 어떤 식으로 활용하고 있는지, 사용자에게 어떤 편의를 주고 있는지 구체적인 사례를 중심으로 살펴보고자 합니다.

(에디터, 동동) 생각보다 지도 UI가 활용되는 서비스가 많습니다. 내 위치를 기반으로 주변의 정보를 표기해주는 서비스에 주로 사용됩니다. 최근에는 모빌리티 서비스가 많이 활성화되면서 지도UI가 굉장히 친숙한 화면이 되었는데요. 지도에는 다양한 정보가 표기되죠? 거리와 빌딩 이름 등 지도 내에 표현되는 요소들과 함께 표기되는 정보가 혼선되어 보이지 않도록 보여주는 것이 중요한 화면입니다. 어떻게 표현하면 좋을지 모빌리티 서비스와 여행-중개 서비스들을 중심으로 사례를 살펴보시죠!

사례 : 지도 UI 구성을 위해 살펴볼 5가지 사례

1. 택시 호출 서비스에서 지도 UI가 활용되는 방법
카카오택시, T맵 택시, 반반택시, 온다택시

2. 마이크로 모빌리티 서비스에서 지도 UI가 활용되는 방법
킥고잉, 라임, 씽씽, 타다

3. 주차 서비스에서 지도 UI가 활용되는 방법
카카오주차, T맵 주차, 모두의 주차장, 파킹프렌즈

4. 여행 서비스에서 지도 UI가 활용되는 방법
에어비앤비, 야놀자, 데일리호텔

5. 배달 서비스에서 지도 UI가 활용되는 방법
배달의민족-배민오더, 요기요-테이크아웃

1. 택시 호출 서비스에서도 지도 UI가 활용되는 방법

카카오 택시, T맵 택시

차량 호출 서비스에서 지도 UI는 첫 화면이 될 가능성이 높습니다. 내 위치를 중심으로 원하는 장소까지 이동 하기 위한 가장 직관적인 모습을 하고 있기 때문입니다. (지도가 아닌 다른 모습을 한다면 어떨까 생각해봤는데 쉽게 떠오르지 않네요!) 국내 대표적인 택시 호출 서비스인 카카오T택시와 티맵 택시 역시 마찬가지인데요.

카카오 택시는 실행과 동시에 내 위치와 가장 가까운 도로를 '출발'점으로 표기해줍니다. 차량이 어느 방향으로 오는지 함께 보여줘 가고자 하는 방향에 맞게 정확히 탑승 위치를 설정할 수 있다는 장점이 있습니다. 타 택시 호출 서비스 대비 꽤 정확하게 출발지점을 지정해주기에 탑승객이 할 일은 도착지를 직접 입력하거나 즐겨찾기 한 장소에서 고르면 끝!

티맵은 카카오 택시와 순서가 조금 다르게 적용되어 있는데요. 현재 위치를 보여 주지만 도착지 선택 후 출발지를 상세히 지정하게 되어 있습니다. 즉, 앱을 실행하면 내 위치를 대략적으로 알 수 있게 하고, 도착지를 설정한 다음 핀 형태로 구체적인 탑승 위치를 선택할 수 있는 것인데요. 내가 어디에서 어떻게 타게 될 지를 지도 상 미리 인지하고 도착지를 설정하는 것과, 건물 안에 있는 그대로 위치가 찍힌 상태에서 도착지를 설정, 다시 탑승 위치를 설정하는 것에는 꽤 많은 차이가 존재한다고 생각합니다. 특히 처음 방문하는 장소라면 탑승 위치를 정확하게 설정하는 것 자체가 어렵게 다가올 수도 있고요.


(에디터, 제그마스터의 덧붙임) 카카오 택시는 지도 화면 진입과 동시에 나와 가장 가까운 도로 위, 차량 아이콘을 보여 줍니다. 그리고 토스트를 통해 '자동차 아이콘 위치로 택시가 올 예정입니다.'라는 안내를 제공하죠. 카카오 지도와 같은 서비스였다면 간단히 사용자의 위치를 '특정 아이콘' 형태로 지도 내 표기 해주면 그만이지만, 차량 호출 서비스에서는 차량을 어디에서 어떻게 탑승해야 하는지에 대한 '정보'와 '기준'이 명확해야 합니다. 이런 관점에서 보면 티맵, 반반, 온다 택시 등에서는 없는 카카오 택시만의 '차량 아이콘'이 얼마나 유용한 지 알 수 있습니다. 실제 사용성에서도 많은 영향을 끼치는 것이 사실이고요.

반반택시, 온다택시

반반 택시는 카카오 택시의 첫 화면을 닮았고, 온다 택시는 티맵 택시의 첫 화면을 닮았습니다. 하지만 중요한 것은 내가 실제로 어디에 있는지가 아니라, 어디에서 탑승할 수 있는지의 관점에서 봐야 한다는 것. 앞서 말했던 것처럼 건물 안에서 택시를 탑승 할 순 없을테니까요. 같은 지도 UI를 활용한다 하더라도, 서비스의 성격에 따라 어떤식으로 활용할 수 있는지를 잘 보여주는 사례라고 생각합니다.

2. 마이크로 모빌리티 서비스에서 지도 UI가 활용되는 방법

킥고잉, 라임, 씽씽

국내 마이크로 모빌리티 서비스 중 전동 킥보드 공유 서비스가 가장 먼저 떠오르는 분들이 많을 것 같습니다. 라임과 같은 글로벌 서비스들은 물론 킥고잉, 씽씽 등 여러 스타트업이 뛰어든 곳이기도 하죠. 이들에게 중요한 것은 '서비스 제공 지역'과 '반납 불가능지역'입니다. 차량 호출 서비스들이 지도 내 '탑승 위치'가 중요한 기준이 되는 것처럼, 자전거나 전동 킥보드 등을 공유하는 서비스에게는 대여, 반납 등 서비스 이용 지역을 명확히 보여주는 것이 중요한 것이죠. 그래서 앱 실행 후 지도 UI 내 컬러 또는 밝기 등의 대비로 가능 지역을 가능한 구체적으로 안내하고 있습니다.

(왼쪽) 킥고잉은 가능 지역을 밝게, 불가능한 지역을 어둡게 처리해 한 눈에 보여 줍니다. (가운데) 라임은 자신들의 주요 컬러인 연두색으로 지도 내 가능 지역을 보여 줍니다. (오른쪽) 씽씽은 흰 영역이 추가 요금 없이 사용 가능한 곳이며 노란색 계열로 칠해진 곳은 추가 요금을 지불해야 반납 할 수 있는 곳입니다. (공통) 세 서비스 모두 반납 불가능한 지역은 지도 내 '붉은색' 계열로 표기를 해두었네요.

일반적으로 '지도'가 들어간 서비스들은 '사용자' 현 위치를 중심으로 정보를 제공하게 되는데요. 공지 등을 통해 서비스 가능 지역을 충분히 안내하겠지만, 이는 부차적인 요소일 뿐 사용자가 실제 보고 있는 화면 내 해당 정보들을 확인 할 수 있는 것이 중요합니다. 내 위치에서 킥보드를 대여 할 수 있는지?를 쉽게 확인 할 수 있어야 한다는 것이죠. 지도상으로 크게 구분되는 정보들이 없다면 대여가 가능하다는 판단을 할 수 있기에 여러 단계를 거친 후에야 그 사실을 알게 될 수 있습니다.


(에디터, 제그마스터의 덧붙임) 저는 킥고잉 > 라임 > 씽씽 순으로 생각했어요. 킥고잉은 밝고 어두운 대비로 어디까지 타고 갈 수 있는지를 시각적으로 가장 먼저 보여주고 구분할 수 있도록 했으며 그 안에서 다시 붉은색으로 반납 불가능한 장소를 보여주고 있어요. 킥보드 위치도 쉽게 확인 할 수 있고요. 씽씽의 경우 여러 컬러가 혼재되어 있어 정확히 무엇을 뜻하는지 쉽게 구분하기 어려웠습니다.

킥고잉, 라임, 씽씽 (2)

많은 정보를 보여줘야 하거나, 지역에 따른 사용성의 한계가 있다면 타다와 같은 방법을 활용해볼 수 있어요. 타다는 출발지와 도착지에 각각 지역 제한을 두고 있는데요. 목적지 설정 시 이에 대한 명확한 안내를 해주고 있습니다. 목적지로 설정할 수 없는 지역에 대해 특히 더 그렇고요. 지도 내 이를 한 눈에 보여주기 어렵다면 오히려 더 효과적인 안내 방법이 될 수 있다고 생각합니다.

3. 주차 서비스에서 지도 UI가 활용되는 방법

카카오 주차, T맵 주차

주차 전쟁이에요 정말.. 일본은 기업형 주차 시스템이 잘 발달 되어 있지만 우리나라는 이제 본격적인 시작이라고 볼 수 있는 단계이기 때문인데요. 카카오내비는 물론, SKT(티맵 주차), 모두의 주차장, 한컴의 파킹프렌즈까지 모빌리티 서비스의 핵심이라고 할 수 있는 '주차 서비스'를 제공하고 있습니다.

네 개의 서비스에서 동일한 장소를 검색 했을 때, 어떤식으로 UI를 구성했는지 살펴봤습니다. 먼저 카카오 주차는 사용자가 입력한 '도착지(장소)'를 중심으로 거리를 주요 정보로 보여줍니다. 이 주차장에서 최종 목적지 까지 도보로 얼마나 걸리느냐를 핵심 정보로 택한 것이죠. 같은 건물이라면 최종 목적지와 주차 장소가 같겠지만, 서울에서 이는 꽤 어려운 일이기에 최종 목적지까지의 도보 이동 기준은 꽤 매력적이었습니다. 또 카카오T와 제휴가 되어 있는 주차장인지도 함께 보여주는데요! 제휴된 곳에서는 따로 결제를 하지 않고도 앱 내 등록된 카드로 자동 결제가 되기에 편리합니다.

티맵 주차는 가격에 초점을 맞췄습니다. (정말 놀라웠던 사실은 방산 시장을 가려는데 도보로 15분 정도 거리에 있는 주차장을 가장 먼저 추천해줬습니다.) 거리도 중요하지만, 머무를 시간에 따른 주차 요금(특히 서울이라면)도 사용자에게 중요한 정보가 될 수 있기 때문이죠. 조금 더 디테일 하게 들여다 보자면 지도 내 주차 시간 등 세부 조건을 바로 바꿔 결과를 확인 할 수 있다는 점이 좋았습니다.


(에디터, 제그마스터의 덧붙임) 사용자가 한 번의 행동을 더 하지 않고도 어떤 정보를 얻을 수 있는지 미리 알려주는 방법이 필요해요. 카카오와 티맵은 모두 특정 장소에 대한 정보를 카드 형태로 제공해주는 것처럼 말이죠. 이런 정보를 미리 제공해주지 않으면 사용자는 직접 어느 한 장소(주차장)을 탭해야 하고, 탭 한 다음에야 정보 기준을 알 수 있게 됩니다. (아래의 사례를 통해 보면 더 직접적인 비교가 될 거에요!)

모두의 주차장, 파킹프렌즈

모두의 주차장은 티맵 주차와 마찬가지로 가격정보를 가장 먼저 보여줍니다. 내가 가고자 하는 목적지 중심의 주차장 이용 시, 총 가격이 얼마인지 쉽게 확인할 수 있습니다. 한 가지 추가된 정보가 있다면 해당 주차장이 '여유'있는지에 대한 정보를 함께 제공해준다는 점입니다. 이미 차들로 가득찬 주차장은 리스트에서 보여주지 않는 것이 더 편리할 수 있지만, 초보 운전자나 초행길인 경우 주차면이 여유 있는 주자창을 찾는게 도움이 될 수 있다는 점이 적용된 것은 아닐까 싶습니다.

파킹프렌즈는 여러 정보가 혼합되어 있는데요. 기본적으로 어디에 주차장이 있는지 쉽게 확인할 수 있도록 하고 있습니다. 위 이미지에는 포함되어 있지 않지만, 종일권을 구매할 수 있는 주차장은 '종일권'이라는 텍스트로 구분을 해주고 있으며 '시간권' 역시 동일한 방법으로 표기해주고 있습니다. 아쉬운 점은 앞선 세 서비스와 달리 지도상으로 사용자가 볼 수 있는 기본 정보는 '위치' 뿐이라는 것입니다. 이후의 행동에 따라 정보를 확인 할 수 있는 구조이기 때문이죠.


(에디터, 제그마스터의 덧붙임) 지도를 먼저 보여준다는 것은 서비스에 따라 명확한 목적을 담고 있어야 함을 의미합니다. 마이크로 모빌리티 서비스에서 이동, 반납 가능 지역을 한 눈에 볼 수 있게 한다거나 주차 앱에서 최종 목적지에 따른 주변 주차장과 거리를 보여준다거나 하는 식으로 말이죠. 또 하나 중요한 점은 지도 화면에서 벗어나지 않고 기본 정보 확인과 추가 정보 확인이 자유로워야 한다는 점입니다. 주차 서비스에서 화면 전환 없이 보고 있는 지도에서 시간대를 변경할 수 있거나, 차량 호출 서비스에서 목적지를 현 위치가 찍힌 지도 화면 내 변경할 수 있는 것처럼 말이죠.

4. 여행 서비스에서 지도 UI가 활용되는 방법

에어비앤비, 야놀자, 데일리호텔

이번에는 여행 숙소 예약 시 자주 사용하는 3가지 서비스를 살펴보겠습니다. 서비스의 공통점은 모두 숙소 검색 결과를 지도UI에 표기하지않고 썸네일 리스트 형태로 제공해준다는 점입니다. 지도 내 확인은 한 depth 더 안쪽에 배치해두었어요. 아무래도 '비교'의 속성이 더 강하게 적용될 수 밖에 없기 때문인데요. 지도 위에서는 여러 숙소를 동시에 확인 할 수 없습니다. 지도에서는 어느 곳에 숙소가 있는지 확인 할 수 있고, 특정 숙소를 탭 했을 때 카드 형태로 정보를 제공 받게 됩니다.

에어비앤비 : 지도 위 숙소 아이콘을 통해 위치 확인이 가능하며, 카드에서는 숙소명, 평점 정보 확인 가능

야놀자 : 지도 위 숙소 가격을 표기, 카드에서는 숙소명, 후기, 혜택, 가격 및 체크인 정보 확인 가능

데일리 호텔 : 야놀자와 마찬가지로 가격 정보를 먼저 확인 가능하며, 카드에서는 이름, 장소 확인 가능

개인적으로 야놀자가 예약에 필요한 정보를 한 눈에 볼 수 있어 편리했습니다. 지도 UI는 위치와 정보가 동시에 잘 표현되야 하기 때문에 주로 하단, 상단에 카드 형태로 정보를 제공하는데, 폰트 사이즈, 썸네일 이미지 비율 등 카드가 지도를 보는데 있어 방해가 되지 않도록 구성하는 것이 중요합니다.

야놀자와 데일리 호텔은 특정 지역 내 숙소가 많을 경우, 가격이 겹쳐서 잘 보이지 않는 경우도 있었는데요. 카드를 어떻게 구성하느냐도 중요하지만, 카드 확인 전 지도 위에 뿌려진 여러 정보를 사용자가 별도의 노력 없이 쉽게 확인 할 수 있도록 구성하는 것 역시 중요합니다.


(에디터, 동동의 덧붙임) 참고로 에어비앤비, 야놀자는 구글 맵을 활용했고, 데일리 호텔의 경우 OS를 타게끔 구성했습니다. (아이폰이라면 애플맵) 국내에서 활용 가능한 지도 API 종류가 여럿 존재하기에 서비스 목적에 맞는 API는 무엇이며, 과금 등의 정책이 어떤지 함께 고려하는 것 역시 중요합니다.

5. 배달 서비스에서 지도 UI가 활용되는 방법

배달 서비스에서도 지도 UI가 여러 메뉴에 등장합니다. 음식점 위치와 배달 진행경로 등을 지도와 함께 보여주는데요. 배달의 민족 배민오더 메뉴와 요기요 테이크 아웃 메뉴를 살펴보면 모두 음식점 리스트까지 도달 하기 위해 3단계가 필요합니다.

배달의 민족 배민오더

배민오더는 주문 후 사용자가 식당으로 찾아가야 하는 경우가 있는데요. 배민만의 방법으로 풀어낸 아이콘으로 식당 카테고리를 보여줍니다. 또 메뉴에 진입하면 하단 1/3정도의 영역을 내부 이벤트용 배너와 추천 태그 영역으로 활용하고 있습니다. 상호명이 지도 내에서 잘 보이진 않지만, 탭하면 하단에 식당의 상세 정보가 표기됩니다. 어떤 종류의 식당이 있는지를 먼저 보여주고자 하는 목적이 드러나는 부분입니다.

요기요 테이크아웃

요기요 테이크아웃은 얼마전 업데이트를 진행했는데요. 근처 가게 리스트는 목록으로 따로 배치하고, 아이콘을 선택 했을 때 하단에 카드 형태로 가게 정보를 보여줍니다. 배달의 민족과 다른 부분은 최초 화면에 별도의 피처드 영역이 없다는 점 그리고 상단 센터에 "재검색" 버튼을 배치했다는 점인데요. 개발 구조상 배달의 민족은 포인트가 이동하면 그 근처를 바로 재검색이 바로 이뤄지는 반면, 요기요는 특정 영역까지만 검색된 결과를 보여주고 핀을 옮겼을 때는 재검색 버튼을 눌러야한다는 점에 차이가 있었습니다. 사용자 측면에서는 배민오더처럼 이동하면 자연스럽게 검색 결과가 바뀌는게 더 서비스가 빠르다고 체감할 수 있겠죠?


(에디터, 동동의 덧붙임) 사실 두 서비스의 차이점은 해당 기능을 바라보는 서비스 포인트에서 발생합니다. 배민오더는 말 그대로 "주문(Order)"의 기능에 초점을 맞춰서 오더 방식을 기준으로 피처드와 QR코드주문 버튼을 배치했고요. 요기요 테이크아웃은 "포장"에 초점을 맞춰서 리스트 내의 필터는 음식점 카테고리 필터를 배치해 사용자가 포장할 음식을 빠르게 찾게 해주는데 집중했다고 생각됩니다.

결론 : 지도 UI를 활용한 화면을 구성할 때 체크해보세요

1. 서비스 성격에 따라 가장 중요한 '정보'가 무엇인지 명확하게 정의 되어야 합니다.
2. 많은 정보를 담기 보단, 앞서 결정 된 '주요 정보'를 먼저 보여줄 수 있어야 합니다.
3. 사용자가 별도의 행동을 하지 않더라도 필요한 정보를 쉽게 확인 할 수 있어야 합니다.
4. 지도에서 벗어나지 않고 사용자가 원하는 추가 조건을 확인 할 수 있도록 도와줘야 합니다.
5. 서비스 성격에 가장 잘 맞는 지도 API가 무엇인지 명확한 답을 찾아야 합니다.
6. 지도 API를 활용한다면 꼼꼼한 비교가 필요합니다.