여러 명의 출발지를 입력하면 딱 중간에 있는 지하철역과 각자의 소요시간·요금을 한눈에 보여주는 만남 장소 추천 서비스
주소 입력부터 소요시간 비교까지 4단계로 끝나요
지도 중심의 직관적인 UX로 설계했어요
모든 출발지의 위경도 좌표 평균으로 중간 지점을 계산하고, 카카오 키워드 검색으로 가장 가까운 지하철역을 자동으로 찾아요. T맵 대중교통 API로 각 출발지에서 그 역까지의 실제 경로와 요금을 병렬로 조회해요.
지도 클릭 역지오코딩, GPS 현재 위치, 카카오 키워드 장소 검색, 텍스트 직접 입력. 어떤 방식이든 입력칸에 자동으로 채워져요.
각 출발지에 번호를 매겨 지도 마커와 결과 패널에 동일하게 표시해요. 소요시간·요금을 한 화면에서 비교할 수 있어요.
T맵 API의 경로 좌표를 카카오 지도 위에 폴리라인으로 그려 각 출발지의 실제 이동 경로를 시각적으로 확인할 수 있어요.
Django 앱을 Whitenoise로 정적 파일을 처리하고 Vercel 서버리스 함수로 배포해요. 별도 서버 없이 운영돼요.
백엔드는 Python/Django, 프론트는 Vanilla JS로 구현했어요
두 개의 외부 API를 조합하며 생긴 문제들을 해결했어요
T맵 API 요청을 출발지 수만큼 순차적으로 보내면 마지막 결과가 나올 때까지 대기 시간이 길어졌어요. 5명이면 5번의 API 왕복 시간이 쌓였어요.
Promise.all()로 모든 경로 요청을 병렬로 처리했어요. 요청 수에 관계없이 가장 느린 단일 응답 시간만 기다리면 돼서 체감 속도가 크게 개선됐어요.
카카오 지도에서 클릭한 좌표를 T맵 API에 출발지로 전달했을 때 좌표 체계가 달라 경로가 엉뚱한 위치에서 계산되는 문제가 있었어요.
카카오는 WGS84, T맵도 WGS84를 기본 사용하지만 API 파라미터 키 이름이 달라 혼동이 생겼어요. 각 API 문서를 재확인해 좌표 파라미터를 올바르게 맞춰 해결했어요.
Django 앱을 Vercel에 배포하니 정적 파일(CSS, JS, 이미지)을 서빙하지 못해 화면이 깨지는 문제가 발생했어요.
Whitenoise 미들웨어를 추가하고 STATIC_ROOT 경로를 설정해 Vercel 빌드 시 정적 파일을 함께 포함시켜 해결했어요.