topic★★★★★난이도

Leaflet — 인터랙티브 지도

경량 인터랙티브 지도 라이브러리. 마커, 팝업, 타일 레이어를 자유롭게 구성.

#Leaflet#지도#OpenStreetMap#위치

왜 배우는가

구글맵 API는 유료 + 복잡하다. Leaflet은 무료 구글맵 대안으로, OpenStreetMap 타일과 결합하면 비용 0원으로 지도 기능을 구현할 수 있다.

Leaflet은 무료 구글맵 대안이다. 지도를 표시하고, 마커를 찍고, 팝업을 띄우고, 경로를 그리는 모든 작업을 경량 라이브러리 하나로 처리한다. OpenStreetMap 타일을 기본으로 사용하면 API 키도 필요 없다.

용도	설명
매장 위치 표시	프랜차이즈 매장 지도
배달 추적	실시간 위치 마커 갱신
부동산	매물 위치를 지도에 표시
여행 기록	방문 장소를 선으로 연결

javascript

// npm install leaflet
import L from "leaflet";
import "leaflet/dist/leaflet.css";

const map = L.map("map").setView([37.5665, 126.978], 13); // 서울 시청

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: "&copy; OpenStreetMap",
}).addTo(map);

L.marker([37.5665, 126.978])
  .addTo(map)
  .bindPopup("서울 시청")
  .openPopup();

`L.map()`으로 지도를 생성하고, `L.tileLayer()`로 배경 타일을, `L.marker()`로 핀을 추가한다. 좌표는 [위도, 경도] 순서.

Claude Code 팁: "Leaflet으로 서울 카페 10곳을 마커로 표시해줘"라고 하면 좌표 데이터, 커스텀 아이콘, 팝업 내용까지 포함된 코드를 생성한다.