https://perplz.com/sync/zOVj1G0w 📝 작업과정 이 녹음은 내비게이션 경로상에 사용자가 방문하고 싶었던 곳이 있는지 확인해 주는 서비스 개발 과정을 다룹니다. 카카오 맵 API를 활용하여 경로를 설정하고, 네이버 지도를 통해 중간 경유지를 포함한 경로 안내를 구현했습니다. 수원역에서 서울 시청으로 가는 길에 스타벅스 DT점을 경유하는 시나리오를 통해 서비스의 동작을 시연하며, 모바일 환경에서의 UI 문제점과 개선 방안을 논의합니다. ⏱️ 0:00 서비스 개발 목표 설명 1:08 서비스 예시 설명 4:42 카카오 맵 API 구현 결정 5:34 카카오 디벨로퍼 설정 및 키 복사 7:47 API 연동 확인 및 경로 표시 규로롱: 어 안녕하세요. 지금부터 내비게이션 경로상에 내가 원래 방문하고 싶었던 곳이 있는지 확인해 주는 서비스를 만들어 보겠습니다. 규로롱: 저는 먼저 내비게이터라는 폴더를 열어 줬고요. 여기에 편하게 어 생각나는 대로 요청받은 사항을 써도 됩니다. 규로롱: 내비게이션 내비게이션으로 경로를 입력했을 때 내가 사전에 방문하고 싶었던 곳이나 들릴 곳이 있으면 중간 경로로 보여주는 서비스를 만들어 보려고 해. 규로롱: 예를 들어 나는 수원에 살고 있고 서울로 올라가는 길에 스타벅스 DT를 들리고 싶다면 중간에 들릴 수 있는 곳들을 보여주는 방식이지. 규로롱: 또 내가 늘 방문하는 주유소가 GS라면 음 특정 키로수를 넘었을 때 해당 경로에 있는 곳을 보여주는 식이지. 규로롱: 그 외에 해 볼 수 있는 기능이 있다면 편하게 추천해 줘. 규로롱: 생각하고 있는 내비는 네이버 지도, 카카오 맵, 구글 맵인데 이들 등인데 이들이 API를 제공하는지는 아직 확인하지 않은 상태야. 규로롱: 그 외의 서비스에 대해 궁금한 점 있으면 구체화시키기 위해 편하게 질문해 줘. 규로롱: 음 다 자동으로 일단 보내겠습니다. 규로롱: 기존 내비 중에서 어떤 것을 추천할지. 규로롱: 경로상 최저가 주유소, 브랜드 매장 경유. 규로롱: 위시리스트 근접 추천. 규로롱: 내연 기관 위주. 규로롱: 개인 학습용. 규로롱: 또 기다려 봅시다. 규로롱: 네, 클로드가 답변을 줬는데 음 추천 스택은 카카오 하나로 묶어서 한번 카카오 맵, 내 카카오 내비로 한번 구현해 보겠습니다. 규로롱: 사실 저는 네이버 지도를 사용해서 한번 여기에 익숙해져 보겠습니다. 규로롱: 어 굉장히 독특한 방법을 추천해 주네요. 규로롱: 먼저 외부로 어 해당 검색 카페를 검색하고 그걸로 음 경유지를 카카오가 길을 찾으면 경유지 핸드폰은 네이버 앱에서 네이버 지도에서 나옵니다. 규로롱: 어떻게 나올지 굉장히 기대되는데요. 규로롱: 한번 끝까지 가 봅시다. 규로롱: 자, 이제 제가 할 일은 카카오 디벨로퍼에서 자바스크립트 키를 복사하고 플랫폼 웹에서 로컬 호스트 5,500 카카오 자바스크립트 키 등록체 로컬 호스트 규로롱: 목도라 규로롱: 내비 실행은 모바일로 확인. 규로롱: 오케이, 실제 경로 비용 키부터 넣어보고 화면 필터 가면 다음 V1으로. 규로롱: 허허. 규로롱: 자, 바로 V0까지를 구현해 보겠습니다. 규로롱: 카카오 스킬을 음 여기다가 복사해서 넣으면 될 것 같습니다. 규로롱: 한번 카카오 디벨로퍼를 들어가 보겠습니다. 규로롱: 네, 이렇게 카카오 디벨로퍼스에 들어가서 플랫폼 기안에 자바스크립트 키 플랫폼에 도메인을 등록 해 봅시다. 규로롱: 음 규로롱: 그러면 터미널에서 규로롱: 포트를 넣고 규로롱: 브라우저에서 로컬 호스트 5,500을 켜 보겠습니다. 규로롱: 그러면 규로롱: 투썸 메가 커피. 규로롱: 음 샘플 경로고 서울 시청 실제 경로는 V1 복시 예정. 규로롱: 음 그러면 여기까지 연결이 잘 된 것을 확인했습니다. 규로롱: 자, API가 잘 붙었는지 처음에 언급한 수원역에서 서울 시청 가는 경로는 잘 보여줍니다. 규로롱: 이제 다음 버전 1으로 네이버 모바일 앱으로 띄우는 거를 보여 주겠습니다. 규로롱: 네, 그래서 이제 올라가는 길목에 스타벅스 DT가 있는지 동작이 잘 되는지 한번 찾아보겠습니다. 규로롱: 음 1.5km 이내 지역에 이렇게 스타벅스 DT점이 있는 걸 발견했고요. 규로롱: 이곳 경유에서 안내를 시작하려면 네이버 지도로 열립니다. 규로롱: 한번 모바일로 확인을 해 보겠습니다. 규로롱: 음 이런 식으로 지금 맥북 환경에서 제 테스트용 아이폰을 켰을 때 이렇게 나오는 거를 확인할 수 있었습니다. 규로롱: 자, 실제로 안내가 되는지 수원역 말고 음 과천역에서 가든 파이브 스타벅스 드라이브 뚜루. 규로롱: 하지만 버튼 눌리는 위치가 어색했으니까 예 가는 길목에 규로롱: 자, 모바일로 볼 때는 모바일로 볼 때 스크롤을 아래로 내렸을 때는 음 경로가 안 보여. 규로롱: 확인해 줘. 규로롱: 아마 이 위치 쪽에 있었었는데 이 파란 버튼이 클릭이 돼야 돼서 모바일에서는 스크롤이 안 내려가는 현상 때문에 나온 결과물을 검색해 볼 수가 없 없는 상황입니다. 규로롱: 자, 이렇게 음 UI가 지도가 위로 올라가면서 잘 나오는지 확인해 보겠습니다. 규로롱: 과천역에서 가든 파이브로 1km 이내 경로에서 카페를 찾아 주세요. 규로롱: 그러면 강남 세곡 DT점 이 가장 우회를 적게 할 것 같습니다. 규로롱: 그래서 네이버 지도를 열면 오 네 저희의 개인 정보가 다 나오는 거죠. 규로롱: 경유지를 포함하여 경로 안내를 시작합니다. 규로롱: 경로 안내가 잘 되는 걸 구현했습니다. 규로롱: 이상입니다. 규로롱: 어 진짜 이게 될 줄 몰랐습니다. 규로롱: 그래도 음 더 피드백을 받아가면서 개선해 나가면 음 쓸 수 있는 내비 앱이 될 수 있을 것 같습니다. 규로롱: 네, 또 필요하거나 또 쓸데없지만 만들어 보고 싶은 서비스가 있다면 얼마든지 댓글로 요청해 주시면 감사하겠습니다. 규로롱: 이상입니다.