카카오 버스 Wireframe 만들어 보기 [코드스테이츠 PMB 10기]
인턴생활을 하던 작년과 올해 6개월 동안 지하철을 타고 내려서 버스로 환승했다. 독립문역에서 시청까지 가는 버스는 총 6대. 많다고 느껴질 수도 있지만 출근시간에는 사람이 너무 많아서 버스가 그냥 무정차로 지나가기도 한다. 그래서 나에게 반드시 필요한 어플은 카카오 버스였다. 처음 회사를 다닌 2개월 동안은 미리미리 여유롭게 나가고 천천히 버스를 기다렸다. 하지만 인간은 적응의 동물(?) 지각은 안 하지만 최대한 딱 맞춰서 출근하는 방법을 알아버린 후에는 'ㅇㅇ시 ㅇㅇ분에 지하철에서 내리기, ㅇㅇ시 ㅇㅇ분 전까지는 버스 정류장에 내리기' 루틴이 생겨버렸다. 지각은 하지 않지만 조금만이라도 늦으면 지각을 할 수 있는 그런 시간에 지하철에 내린 후, 6대의 버스 중 어느 버스가 몇 분 남았는지 확인하고 매일 아침 뛰었다. 그래서 카카오 버스의 즐겨찾기 저장 후 첫 화면에서 확인하는 도착정보 기능은 나에겐 필수 기능이었다.
그럼 해당 기능이 사용자의 어떤 문제를 해결하는지 정의하고 이에 대한 User Story를 작성해 보자.
버스 도착 정보 확인하기, 어떤 문제를 해결하고 있을까?
자주 이용하는 버스가 있으면 해당 버스를 타야 될 때마다 버스가 언제 오는지 확인을 하고 싶을 것이다. 하지만 하나의 버스 정류장에서도 수많은 버스가 오고 가는 만큼, 내가 원하는 버스의 도착시간을 한눈에 파악하기도 어렵고, 미리 내 핸드폰으로 실시간 도착정보를 확인하고 싶다. 그래서 카카오 버스는 광역시 포함 전국 57개 도시의 버스정보 중 내가 원하는 버스만 즐겨찾기를 하면, 첫 화면에서 내가 저장한 버스의 실시간 도착정보를 확인할 수 있다.
User Story는 무엇일까?
우선 카카오 버스를 사용하는 사용자의 모습을 살펴보자.
매일 출근길은 정말 지옥이다. 지하철에 내리자마자 내가 환승해야 되는 버스가 얼마나 남았는지 확인하고 달리던지 여유롭게 걸어가던지 결정해야 된다. 내가 매일 타는 버스의 도착 정보를 실시간으로 보면 좋을 것 같다. 5초 만에 버스 도착 정보를 확인할 수는 없을까?
위에서 정의한 시나리오를 바탕으로 유저 스토리를 정리해 보자.
특정 버스를 자주 이용하는 고객은
버스 도착 시간에 맞춰 움직이기 위해
실시간 버스 도착 정보를 확인하고 싶다
화면 흐름을 종이에 그려보기(Lo-Fi)
User Story를 해결하기 위한 핵심 기능과 Flow를 파악하고, 화면 흐름을 Lo-Fi Wireframe으로 그려보자.
User Story를 해결하기 위한 핵심 기능은 버스 도착 정보 확인하기 기능이다.
해당 기능의 Flow는 1. 버스번호로 검색 2. 정류장 이름으로 검색 2가지로 나뉜다.
- 버스 번호로 검색 시 플로우
홈 -> 버스 번호 검색 -> 내가 찾는 버스 클릭 -> 정류장 선택 -> 즐겨찾기 추가(별 누르기)& 홈 버튼 클릭 -> 홈에서 내가 즐겨찾기 한 버스 확인
- 정류장 이름으로 검색 시 플로우
홈 -> 버스 정류장 검색 -> 내가 찾는 정류장 선택 -> 원하는 버스 즐겨찾기 추가(별 누르기) & 홈 아이콘 클릭 -> 홈에서 내가 즐겨찾기 한 버스 확인
피그마로 Mid-Fi Wireframe 디자인 하기
이번엔 Figma를 통해 위에서 구성한 화면의 Mid-Fi Wireframe을 디자인해 보자.
- 버스 번호로 검색했을 때
- 정류장 이름으로 검색했을 때
'카카오 버스' Mid-Fi Wireframe
오늘은 피그마 실습을 하는 날이었다. 시작은 호기롭게 High-Fi까지 만들고 스토리보드까지 작성해보자! 였지만... 결국엔 Mid-Fi 까지만 만들 수 있었다. 생각보다 시간도 너무 오래 걸렸고 어떤 컴포넌트를 써야 할지 고민이 많이 되었다. 그래도 PM이라면 당연히 알아야 할 피그마에 대해 제대로 배워본 것 같아서 뿌듯했다. 다음엔 스토리보드까지 완성해서 누가 봐도 피그마에 만든 와이어프레임을 보고 이해했으면 좋겠다.
+) 카카오 버스를 역으로 그려보면서 내가 쓰지 않던 기능도 보였고, 왜 이건 여기다가 뒀지? 싶은 이상한 부분도 보였다. 내가 몰랐던 기능을 오늘에서야 알고, 유저가 사용하기에 불편한 점은 모두 UX를 수정해야 되는 게 아닌가? 싶다. 다음에 시간이 된다면 카카오 버스의 UX를 개선해 보고 싶다.