ChatGPT Map 활용 맛집 동선 시각화 페이지 30분 만에 만들기
맛집 순서대로 선 그어주는 지도, 30분 만에 띄우기
인스타그램이나 블로그에서 다양한 맛집 목록을 확인하고 나면, 위치 파악을 위해 매번 지도를 켜고 검색을 반복하게 됩니다. 동선이 효율적이지 않으면 모임 당일 불필요한 이동 거리가 늘어나 쉽게 지치곤 합니다. 지난 글에서 Discord 연동 자동화 기능을 구현해 보았으니, 이번에는 맛집 위치만 정리해 한눈에 들어오는 지도와 최적의 이동 동선까지 보여주는 모바일 페이지를 구축해 보겠습니다.
가고자 하는 장소들의 이름과 대략적인 위치 정보만 수집하여 ChatGPT에 제공하면, 모바일에서 편리하게 확인하며 일정을 계획할 수 있는 인터랙티브 지도 화면을 30분 만에 완성할 수 있습니다. 완성된 페이지의 링크를 모임 구성원들과 공유하면 복잡한 경로를 명확하게 전달하는 데 큰 도움이 됩니다.
지도와 카드를 동시에 띄우는 가벼운 도구 하나면 충분하다
이번 작업에서는 ChatGPT의 도움을 받아 코드를 생성하고 화면을 구성합니다. 추가적인 유료 도구나 결제 과정 없이 구현이 가능하므로 가벼운 마음으로 시작할 수 있습니다. 네이버나 카카오 지도 API의 경우 개발자 계정 등록과 키 발급 절차가 다소 번거로울 수 있습니다. 이러한 과정을 거치지 않고 웹에 바로 연동하기 위해 오픈소스 라이브러리인 Leaflet.js를 사용합니다. 지도에 위치 표시 핀을 추가하고 경로를 실시간 선으로 연결하는 작업까지 모두 무료 라이브러리로 원활하게 처리할 수 있습니다.
프롬프트 3개로 만드는 모바일 맞춤형 맛집 보드
이러한 순서로 진행하는 이유는 초기 연동 시 발생할 수 있는 오류를 최소화하기 위해서입니다. 처음부터 실시간 위치 정보를 동적으로 받아오는 기능을 넣으면 디버깅이 까다로워집니다. 따라서 라이브러리가 브라우저에서 정상적으로 로드되는지 확인하기 위해 고정된 데이터 3개로 기본 레이아웃을 먼저 잡는 것이 효율적입니다. ChatGPT가 제공한 코드를 텍스트 편집기에 저장한 뒤 index.html로 파일을 생성해 브라우저로 실행하면 세련된 어두운 테마의 지도와 목록 영역이 표시됩니다.
단순히 마커만 지도에 표시되면 전체적인 방문 순서나 이동 흐름을 파악하기 어렵습니다. 첫 목적지부터 마지막 장소까지 순차적으로 잇는 선을 그리고 각 카드에 클릭 이벤트를 바인딩해야 경로 안내 도구로서의 사용성이 향상됩니다. 수정된 코드를 적용하면 항목을 선택할 때마다 지도의 중심이 이동하며 파란색 추천 경로선이 표시되는 것을 확인할 수 있습니다.
새로운 위치를 추가할 때마다 소스 코드를 열어 좌표 데이터를 수정하는 방식은 코딩에 익숙하지 않은 사용자에게 비효율적입니다. 화면에서 직접 텍스트를 입력해 지도를 동적으로 갱신할 수 있어야 실용성이 높아집니다. 원하는 위치 좌표를 입력창에 넣으면 즉각적으로 핀과 경로선이 업데이트되는 완성도 높은 애플리케이션으로 동작하게 됩니다.
문제 해결하기
현상: 지도가 표시되어야 할 영역에 바둑판 무늬 격자나 손상된 이미지만 나타나며 회색 화면으로 유지됩니다.
원인: 지도 데이터를 받아오는 Leaflet CDN 경로가 올바르지 않거나 HTML 문서의 head 태그 내에 관련 CSS 링크가 제외되었을 때 주로 나타나는 현상입니다.
해결: index.html 파일 상단에 명시된 Leaflet.js 스타일시트와 스크립트 CDN 경로가 누락 없이 작성되었는지 확인하고 브라우저 개발자 도구의 콘솔 탭을 통해 네트워크 에러 여부를 검토해야 합니다.
현상: 장소 목록에 맛집 데이터를 새로 입력했으나 지도상에 마커 핀이 추가되지 않습니다.
원인: 쉼표를 기준으로 텍스트 값을 구분하는 과정에서 불필요한 공백이 포함되었거나 입력된 위도와 경도가 문자열 형태로 처리되어 수식 연산에서 예외가 발생했기 때문입니다.
해결: 입력을 받아오는 변수에 parseFloat() 처리를 추가하여 확실하게 숫자 형식으로 파싱하고, split(',') 호출 부분 뒤에 trim()을 적용해 텍스트의 불필요한 여백을 제거하도록 코드를 재요청합니다.
현상: 모바일 환경에서 화면을 스크롤할 때 지도 영역이 원치 않게 줌인 또는 줌아웃되는 제어 간섭이 발생합니다.
원인: 모바일 기기의 터치 드래그 동작이 페이지 스크롤 대신 지도 라이브러리의 화면 확대 및 축소 제어로 흡수되면서 생기는 충돌입니다.
해결: Leaflet 초기화 옵션 설정 항목에 'dragging: !L.Browser.mobile, touchZoom: !L.Browser.mobile' 설정을 정의하여 모바일 접속 시에는 드래그 기능과 터치 줌을 해제하고 터치 동작을 통한 화면 이동이 자연스럽게 처리되도록 보완합니다.
추가로 개선해볼 만한 기능
기본적인 구성이 완료되면 지인들에게 이동 계획을 알기 쉽게 전달할 수 있는 유용한 지도 도구가 마련됩니다. 다만 수동으로 위도와 경도 좌표를 검색하여 입력하는 과정은 반복 작업이 요구될 수 있습니다. 다음 편에서는 카카오맵 주소 검색 API 서비스를 결합하여 명칭이나 지번 주소만 입력해도 위경도 좌표를 자동 추출해 마커를 생성하는 실용적인 유틸리티를 추가하고 공유 가능한 링크 생성 로직까지 단계별로 연동해 나가겠습니다.
이런 글도 있어요
관련 검색어
- 🔍 ChatGPT 사용법
- 🔍 ChatGPT 비교
- 🔍 맛집 지도 사용법
- 🔍 맛집 지도 비교
- 🔍 동선 시각화 사용법
- 🔍 동선 시각화 비교
