Gemini 캔버스 대화형 여행 지도

Gemini Canvas를 활용해 웹 브라우저에서 바로 작동하는 단일 HTML Leaflet 대화형 여행 지도를 만드는 생성 프롬프트입니다.

Gemini 캔버스 대화형 여행 지도

이 지침은 Gemini의 캔버스(Canvas) 또는 코드 생성 AI를 활용하여, 웹 브라우저에서 즉시 실행하고 실시간으로 작동하는 단일 HTML 파일 형식의 대화형 여행 지도 가이드 앱을 자동으로 제작하는 프롬프트입니다.

구글맵 API 키 없이 동작하는 Leaflet.js와 감성적인 CartoDB Voyager 타일 레이어를 기반으로, 양방향 일정-지도 연동 및 동선 Polyline 토글, 실제 구글맵 다중 목적지 길찾기 링크가 포함됩니다.

캔버스 지도 핵심 기능

Leaflet.js + CartoDB Voyager: 키 발급 없이 구글맵 스타일의 깔끔한 타일 맵 제공
양방향 인터랙티브 연동: 일정 카드 클릭 시 지도 화면 이동(PanTo) 및 가이드 팝업 자동 오픈
일자별 경로 토글 (Polyline): 1일차 / 2일차 동선 색상 구분 및 켜기/끄기 토글 지원
실제 구글맵 길찾기 연결: 다중 목적지 좌표 파라미터를 포함한 구글맵 앱/웹 길찾기 링크 자동 생성
커스텀 지도 제어: 플로팅 확대/축소(+/-) 버튼 및 사이드바 접기/펼치기(`map.invalidateSize()` 연동)
감성적 톤앤매너: Tailwind CSS 기반 파스텔 베이지/브라운 디자인 적용

Gemini 캔버스(Canvas) 활용 방법

Gemini 접속 후 Canvas 켜기 ➔ Gemini 대화창에서 캔버스(Canvas) 모드를 활성화합니다.
프롬프트 입력 ➔ 아래 [프롬프트 복사] 클릭 후 캔버스 입력창에 그대로 붙여넣습니다.
실시간 웹 앱 확인 ➔ 우측 캔버스 창에 생성되는 단일 HTML 앱을 브라우저에서 즉시 테스트하고 다운로드합니다.

캔버스 대화형 여행 지도 프롬프트

웹 브라우저(캔버스)에서 실시간으로 테스트하고 즉시 실행할 수 있는 단일 HTML 파일 형식의 '대화형 여행 지도 가이드'를 제작해줘. 

[핵심 기능 요구사항]
1. 지도 라이브러리: 구글맵 API 대신 별도의 인증 키가 필요 없고 가벼운 오픈소스 지도 'Leaflet.js'를 사용해줘. 지도의 디자인 타일은 구글맵 스타일의 깔끔한 'CartoDB Voyager' 레이어를 적용해줘.
2. 레이아웃: 화면을 좌우로 나누어, 왼쪽에는 '일정 목록 사이드바', 오른쪽에는 '지도 영역'을 배치해줘. 모바일 화면(웹)에서도 레이아웃이 깨지지 않도록 완전 반응형으로 구현해줘.
3. 양방향 인터랙티브 연동:
   - 왼쪽 사이드바의 특정 여행지 카드를 클릭하면, 지도가 해당 좌표로 부드럽게 화면 이동(PanTo)하며 아름다운 한줄 가이드 팝업창(Popup)이 자동으로 열리게 해줘.
   - 지도 위의 마커를 클릭해도 해당 여행지의 정보가 보여야 해.
4. 경로 그리기 (Polyline): 1일차와 2일차 동선을 서로 다른 색상의 점선(또는 실선)으로 연결해 주되, 상단의 탭 버튼으로 1일차 경로와 2일차 경로를 켜고 끌 수 있는 토글 기능을 넣어줘.
5. 실제 구글맵 길찾기 연동: 상단바에 버튼을 만들어, 클릭 시 사용자의 실제 구글맵 앱(또는 브라우저)에서 해당 동선 그대로 다중 목적지 길찾기가 새 창으로 시작되도록 좌표 정보를 파라미터로 넣은 '구글맵 URL' 링크를 실행해줘.
6. 지도 크기 제어 (확대/축소 및 화면 토글 기능 필수):
   - 지도 배율 조절 (확대/축소): 지도 화면 위에 플로팅 스타일로 작동하는 직관적인 '지도 확대(크게 보기, +)' 및 '지도 축소(작게 보기, -)' 커스텀 버튼을 추가해줘. (기본 Leaflet 컨트롤 대신 서비스의 따뜻한 브라운 톤앤매너에 맞춘 커스텀 UI 적용)
   - 지도 화면 넓게 보기 (사이드바 토글): 이와 별개로, 일정 사이드바를 완전히 접어서 지도를 화면 전체에 꽉 차게 볼 수 있는 '지도 넓게 보기(사이드바 접기/펼치기)' 버튼을 구현해줘. 이 버튼을 누르면 사이드바가 부드럽게 사라지고 지도가 가로로 꽉 차게 늘어나며, 다시 누르면 사이드바가 원래대로 돌아오게 해줘. 이때 화면 크기 변화에 맞춰 지도가 찌그러지지 않고 정상 작동하도록 map.invalidateSize() 로직을 반드시 연결해줘.

[디자인 톤앤매너]
- Tailwind CSS를 사용하여 부드러운 파스텔 베이지와 브라운 계열의 감성적이고 따뜻한 톤으로 스타일링해줘.
- 모든 버튼과 카드에는 둥근 모서리(rounded-2xl)와 자연스러운 그림자 효과를 주어 앱처럼 보이게 해줘.
- 글자는 어르신들도 읽기 편하도록 굵고 선명한 고딕체(Inter 혹은 Gothic A1)를 사용해줘.