[나만의 App 기획] 카카오맵(7) - 대중교통 길찾기 경유지 추가를 피그마 프로토타입으로 구현하기

이번 편 노동요 음, 아, 예.

BENEE - Supalonely(feat. Gus Dapperton)

https://youtu.be/Rb6Scz-5YOs

---

드디어 정지은 씨에게 선물할 대중교통 길찾기 경유지 추가를 피그마 프로토타입으로 구현할 시간이다.

 

 

경유지 추가 UI는 다른 경유지 추가와 똑같이 가져간다. 경유지를 검색하여 추가하는 것도 마찬가지다.

 

시간 고정 버튼은 급한대로 iconfy에서 가져왔다. 나중에 다시 디자인할 예정.

저 버튼을 누르면 시간을 바꿔도 해당 기록은 고정된 채로 남아있는다. 고정된 채 남아있는 시간은 도착 시간이 지날 때까지이다. 도착 시간이 지나면 더는 무의미하므로 알아서 풀리도록 한다.

 

오른쪽 아래 화살표를 누르면 경유지가 추가된 전체 경로가 표시된다. 아코디언 메뉴로 아래의 항목들은 쭈욱 밑으로 밀리게 된다.

 

 

그럼 이렇게 메뉴가 나온다. 경유지는 모서리가 둥근 사각형으로 아이콘을 만들었다. 버스와 지하철이 동그란 원으로 표현되고 있어 차이가 나게 디자인하였다. 색깔은 우선 어플리케이션의 main color로 했다. 지하철 노선이 10가지가 넘는 색깔이다보니 그 색깔 다 피하고 하나 정하기에는 무리가 있었다. 차라리 main color를 따르는 게 눈에 띌 것 같았다.

경유지 오른쪽에는 도착지까지 한 번에 계산하는 버튼이 있다. '도착지까지 계산하기' 풀네임 다 적으면 이쁠리 만무하고 아이콘만 두기에는 무슨 버튼인지 모를 것 같았다. 길을 그리는 아이콘을 iconfy에서 찾은 다음 '도착지'라는 말을 추가하여 설명을 보충하였다. '도착지'라는 말은 경유지를 추가할 때 이미 사용자에게 노출되므로 이해하는데 무리가 없을 것이다.

 

도착지까지 검색하면 자동 검색으로 연결된다. 이전의 기능으로 돌아가서 다시 살펴보고 싶을 수 있기도 하고, 잘못 누를 경우도 있으므로 전의 결과로 돌아갈 수 있는 back 버튼을 추가하였다. 

 

이를 종합하여 만든 프로토타입은 아래에서 확인해주세요.