LESSON 11

지도 고급 — 네이버·카카오 API

iframe 삽입에서 한 단계 더, 마커·팝업·길찾기 연동

오늘의 목표

네이버 지도 JS API 또는 카카오맵 API를 이용해 커스텀 마커와 정보창을 만들고, 길찾기 버튼을 연결합니다.

예상 소요 시간 약 50분

기본 iframe vs API 방식 비교

	iframe 퍼가기 (기본)	JavaScript API (이번 강)
설치	복사·붙여넣기만	API 키 발급 필요
마커 커스텀	불가	로고·색 자유롭게
팝업 정보창	불가	영업시간·전화번호 노출
길찾기 연동	불가	버튼 클릭으로 앱 열기
지도 스타일	불가	색조·레이어 제어

1. 네이버 지도 JS API

키 발급

console.ncloud.com 접속 → 로그인
AI·NAVER API → Maps → Web Dynamic Map 신청
사용 신청 → 내 서비스 도메인 에 localhost 와 내 도메인 (mycafe.kr) 입력
발급된 Client ID 복사

월 10만 건까지 무료입니다.

Claude Code에게 넘기기

앱 대화창에:

#1 프롬프트 11-1🔴 고급

네이버 지도 JS API를 써서 오시는 길 섹션에 지도를 넣어줘.

Client ID: [복사한 ID]
좌표: [가게 주소] (좌표를 모르면 네이버 지도에서 가게를 검색해서 URL에서 뽑아줘)
마커는 가게 로고색(#3B5E2B)으로
마커 클릭하면 팝업: 가게 이름, 영업시간(월~~금 10:00~~20:00), 전화(010-1234-5678)
팝업 아래 "카카오내비로 길찾기" 버튼 — 클릭하면 카카오내비 딥링크로 열기
폰에서 가로 꽉 차게, PC에서 최대 800px, 높이 400px

승인 → Yes → 미리보기 확인.

길찾기 버튼 딥링크

#2 프롬프트 11-2🟢 초급

"네이버로 길찾기" 버튼도 추가해줘. 클릭하면 nmap:// 딥링크로 네이버 지도 앱이 열리고, 앱이 없으면 https://map.naver.com/...으로 이동하게.

2. 카카오맵 API (선택)

키 발급

developers.kakao.com 로그인 → 내 애플리케이션 → 애플리케이션 추가하기
앱 이름 입력 → 생성 → 앱 키 탭 → JavaScript 키 복사
플랫폼 탭 → Web → 도메인 등록: http://localhost:5500, https://mycafe.kr

Claude Code에게 넘기기

#3 프롬프트 11-3🔴 고급

카카오맵 API로 오시는 길 지도를 바꿔줘.

JavaScript 키: [복사한 키]
좌표: 위도 [위도], 경도 [경도] (모르면 알려줘)
마커 커스텀 이미지는 images/marker.png 쓸 거야 (없으면 기본 마커)
클릭하면 카카오맵 앱으로 길찾기 열기

좌표 찾기가 막히면

#4 프롬프트 11-4🔴 고급

주소 "[가게 주소]"의 위도/경도를 알려줘. 네이버 지도 URL이나 카카오맵 API로 변환해줘.

오늘의 실습 체크

🧪 실습

API 키를 발급받았다
커스텀 마커가 지도에 표시된다
마커 클릭 시 팝업(영업시간·전화)이 뜬다
길찾기 버튼이 동작한다
커밋했다