카카오맵의 와이어프레임을 만들어보자! Figma, 디자인 시스템 및 UX라이팅 2탄 | 코드스테이츠 PMB 17기 W4D4

[ 본 포스팅은 PC 환경에서 보시길 권장합니다 ]

 

 

 

 

 

---

 

 

과제: Figma를 활용해 Wireframe를 제작과 스토리보드 작성, 그리고 UX 라이팅해보기

 

분석할 프로덕트 선정: 카카오맵

 

https://play.google.com/store/apps/details?id=net.daum.android.map&hl=ko&gl=US

카카오맵 - 지도 / 내비게이션 / 길찾기 / 위치공유 - Google Play 앱

 

https://apps.apple.com/kr/app/%EC%B9%B4%EC%B9%B4%EC%98%A4%EB%A7%B5-%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD-no-1-%EC%A7%80%EB%8F%84%EC%95%B1/id304608425

‎카카오맵 - 대한민국 No.1 지도앱

 

 

---

 

 

빠른 길찾기가 필요한 순간! 카카오맵

 

 

카카오맵은 지도, 내비게이션, 길찾기와 같이 빠른 길찾기 서비스를 제공할 뿐만 아니라, 맛집, 주변 추천, 위치공유등 다양한 유형의 길찾기 서비스를 제공하고 있다. 2010년 7월 출시되어 현재 천만 회 이상 다운로드 되었고, 구글 지도, 네이버지도를 이어 구글플레이스토어에서 3위에 위치하고 있다. 

 

 

카카오맵 사용자가 해당 프로덕트 내에서 수행하길 원하는 주요 과제라고 하면 단연코 '길찾기'가 될 것이다. 현재위치에서 가고자 하는 목적지까지 어떻게 갈 수 있는지, 어떤 대중교통을 이용해야 하는지, 시간을 얼마나 걸리는지 확인하기 위해 카카오맵을 사용한다. 

 

 

즉, 카카오맵을 다음과 같이 정의할 수 있을 것 같다:

 

사용자가 카카오맵 내에서 수행하길 원하는 과제는 :

'현재 위치에서 목적지로 갈 수 있는 방법 탐색' 

 

 

카카오맵이 사용자의 어떤 문제를 해결하는지 :

목적지에 갈 수 있는 방법을 모르는 유저에게 유저가 설정한 위치 기준으로 목적지에 갈 수 있는 방법을 추천순, 최소 시간순, 최소 대기순, 최소 도보순, 최소 환승순으로 제시하여 유저가 원하는 방식으로 목적지에 도착할 수 있게 도와준다. 

 

 

User Story: 

카카오맵의 유저는 목적지에 도착할 수 있는 효율적인 방법을 탐색하고자 카카오맵을 이용한다. 

 

 

---

 

 

카카오맵의 와이어프레임

 

 

아래와 같이 길찾기 프로세스에서 보이는 화면을 기준으로 와이어프레임을 제작해보려고 했다:

 

 

 

제작한 와이어프레임:

 

 

---

 

 

스토리보드:

 

 

 

---

 

 

UX라이팅으로 프로덕트를 더 좋게 만들어보기: 

 

 

 

앱 리뷰를 살펴봤는데, 버스 도착 시간이 부정확하다는 리뷰가 많았다. 실제 도착시간과 앱에서 제공하는 시간 사이에 약간의 오차가 있는 것으로 보였는데, 실제 교통상황에 따라 도착시간이 바뀌는 부분에 대해서는 카카오측에서도 조치할 수 있는 부분이 없는 것 같았다. 따라서 필요한 경우 '새로고침'을 통해 버스의 도착 시간을 계속해서 체크할 것을 유저에게 1차적으로 요청하고, 추후 기술 업데이트를 통해 해당 이슈를 해결해야할 것으로 생각된다. 

 

 

해당 요청 문구를 UX 라이팅으로 구현해보고자 했다: 

 

 

기존 '새로고침' 버튼 위에 작은 알림창을 만들었다, 검색한 시간 기준으로 나온 결과라는 것을 유저에게 알려주고, 새로고침을 통해 더 정확한 실시간 시간 및 버스 정보를 얻을 것을 요청한다. 'x' 버튼으로 해당 알림을 끌 수 있고, 알림에 따라 새로고침을 하게 되면, 알림에 뜨는 시간이 새로고침 버튼을 누른 시간을 기준으로 문구가 바뀐다. 

 

 

우선 이런 방식으로 유저가 버스를 오래기다리거나, 놓치는 상황을 줄이고, 지속적인 개발을 통해 해당 이슈를 완전히 해결할 수 있어야 할 것이다. 

 

 

 

-끝-

 

---

그럼 내일 다시 만나자!