지도 api 기반 프로젝트, 피드백 이후 경험 공유 (20260514)

https://my-plan-nine.vercel.app/

마이 플랜은
모바일 환경에서의 사용을 권장하는 지도 API 기반 장소 안내 프로젝트입니다.

‘지도 API로 해결해볼 수 있는 문제가 무엇이 있을까?’라는 고민에서 시작하게 되었습니다.

평소 식당이나 카페 등을 찾을 때
지도 앱에 접속하여 검색하고 선택하는 과정의 번거로움을
줄여볼 수 있지 않을까? 라는 문제를 제기했고,
이를 기술로 풀어내보았습니다.

프로젝트의 첫 시작은
사용자의 현재 위치를 기준으로 가까운 카페, 식당, 산책로를
초기 카테고리로 안내하는 기능이었습니다.

제가 직접 사용자가 되어 고민해보니,
평소 현재 위치에서 가까운 약국이나 편의점을 찾는 경우가 많다는 것을 깨달았습니다.

그래서 단순히 한 장소만 안내하는 것이 아니라,
사용자가 원하는 순서대로
약국을 들른 뒤 편의점을 가는 것처럼
순서 기반의 위치 경로 안내 기능을 구현하였습니다.

또한 GPS를 활용하여
사용자가 목적지를 향해 제대로 이동하고 있는지
체크할 수 있도록 구현하였습니다.

이 과정에서 마주한 문제는
모바일 브라우저 환경에서 지도 API를 통해
현재 위치 좌표를 요청하고 응답받는 시간이 생각보다 오래 걸린다는 점이었습니다.

이를 해결하기 위해
LocalStorage와 TanStack Query의 캐싱 기능을 활용하여
현재 위치를 즉시 확인하지 못하는 상황에 대한
예외 처리 방안을 고민하고 적용하였습니다.

저는 문제라는 것은 해결과 떼어놓을 수 없는 존재라고 생각합니다.
결국 문제는 언제나 존재하고,
개발자는 그것을 어떻게 해결하느냐가 중요하다고 생각합니다.

제가 올려드린 링크로 직접 접속하시어 경험해보신 뒤,
불편한 점이나 개선할 부분을 발견하신다면
피드백을 남겨주시면 감사하겠습니다.

부족하지만 앞으로도 더 많은 문제를 해결하고,
그 과정을 기록으로 남기고 싶은 마음에
글을 올려보았습니다.

감사합니다.

——————————————————————————————
20260514

안녕하세요
몇 군데 커뮤니티에서 댓글을 남겨주신 피드백을 참고하여

마이 플랜을 새롭게 업데이트 해보았습니다

말씀 주신 내용 중에 수정한 내용을 몇 가지 적어보았습니다

1. 카테고리 변경 요청
식당과 카페는 개인적인 성향을 타고난 거라 해당 장소 카테고리 대신 다른 장소를 알려달라고 하신 것을 반영해보았습니다

[ 제거 ] → 관광지, 식당, 카페
[ 추가 ] → 은행, 병원, 공중화장실

1. 장소 카테고리 별로 장소 보여주는 방식 변경
   이전에는 장소를 터치 및 클릭하여 다른 장소를 보여주는 방식이었습니다
   
   이것을 다음과 같이 바꾸었습니다
   
   → 선택한 유형의 장소들을 한 번에 다가져와 x축 스크롤로 리스트 확인하며 해당 카드 컴포넌트 클릭 또는 터치시 경로를 변경하도록
   
   (아래 이미지 참조)
   
   

   

   
   

2. 요청에 대한 응답이 늦는 방식 및 경로 안내 방식에 대하여
   
   먼저
   위치랑 경로는 t map api를 사용하였습니다
   
   navigator에서 getCurrentPosition 객체를 호출해서 사용자의 위치 좌표를 가져오고 있습니다
   
   그 좌표를 naver 지도 api에서 marker 객체를 사용해 현재 위치 표시를 해주고
   
   t map api에도 같은 좌표를 전송해서 주위의 장소 위치를 가져오고 있습니다
   T map api에 radius라는 쿼리파라미터에 값과 함께 요청하면 그 값에 따라 가까운 거리까지의 위치를 보내주고 있습니다
   
   또한, 이동 경로도 t map api를 사용해서 가져오고 있습니다
   
   처음으로 서비스 접속 시에, getCurrentPosition 객체로 사용자 위치 좌표를 가져오는데,
   
   좌표가 늦게 오는 경우가
   
   사용자의 위치가 지하에 있는 등, 몇 가지 상황이 있는 것으로 보입니다
   
   *결론적으로 서비스 첫 접속 시 좌표를 못 가져오는 상황 자체가 되어버려, 불편한 사용자 경험을 겪게 됩니다 ㅠㅠ
   저의 경우 첫 요청이 오면 그 좌표를 localstorage에 저장하여
   getCurrentPosition에 의해 좌표를 못가져올 때 localstorage의 좌표로 대체하고 있는데
   
   이 부분도 상황에 따라 잘못 적용되어 현재 위치와 동떨어진 곳의 장소를 안내한다는 피드백을 받았습니다
   이 부분도 고민하여 수정하려 합니다
   

3. 바이브코딩이냐? 라는 부분에 대해서
   저는 현재 2~3년의 프론트엔드 경력을 가지고 있으면서 RPA 개발을 하는 개발자입니다
   웹 프론트엔드로 다시 돌아가는 것을 목표로 서비스를 만드는 경험을 하기 위해
   개발을 진행하고 있고,ai는 codex를 사용하여 개발할 때 막히거나 어려움이 있을 때 질문을 던지는 용도 등으로 사용하고 있습니다
   
   아직 부족하여서 ㅠ 바이브 코딩이라는 말씀을 많이 듣지만.. ㅠㅠ 지속적으로 발전하여 성장하는 개발자가 되고 싶습니다