Leaflet은 상용 서비스에도 사용해도 되나요?

Leaflet은 BSD 2-Clause 등 관대한 라이선스의 오픈소스이며, 앱이나 사이트에 포함해 배포·상용으로 사용할 수 있습니다. 다만 배경에 깔리는 지도 타일(예: OpenStreetMap 기반)의 이용·표기(attribution) 조건은 타일 공급자마다 다르므로 서비스 약관을 따로 확인해야 합니다.

Google Maps API 대신 Leaflet을 쓰면 뭐가 달라지나요?

Leaflet은 지도 표시·레이어·이벤트를 다루는 프런트엔드 라이브러리이며, 지도 타일·지오코딩·경로 안내는 별도 서비스나 자체 백엔드와 연동해야 합니다. Google Maps는 한 패키지로 많은 백엔드 기능이 포함돼 있어, Leaflet은 비용·커스터마이징·의존성 측면에서 유리할 수 있으나 백엔드 설계 부담이 늘 수 있습니다.

React나 Vue에서 Leaflet을 쓸 때 흔한 주의사항은 무엇인가요?

지도는 DOM이 마운트된 뒤에 L.map을 초기화하고, 언마운트 시 map.remove()로 인스턴스를 정리하는 것이 중요합니다. React/상태와 연동할 때는 컨테이너 ref와 useEffect로 생명주기를 맞추고, 리렌더마다 setView 등을 남용하지 않도록 구조를 나누는 것이 좋습니다.

OpenStreetMap 타일 외에 다른 지도를 써도 되나요?

가능합니다. L.tileLayer의 URL을 해당 타일 서버의 템플릿({s}, {z}, {x}, {y})에 맞게 바꾸면 됩니다. 각 벤더의 API 키·이용제한·저작권·표기 요구를 반드시 지켜야 하며, 무료 OSM은 트래픽이 클 때 정책·속도 측면에서 자체 캐시나 유료 타일이 필요할 수 있습니다.

Leaflet 완벽 가이드 | 오픈소스 지도·마커·GeoJSON·인터랙션·실전 활용

2026년 4월 7일 · 4분 읽기 · 수정 2026년 4월 18일 중급

이 글의 핵심

Leaflet으로 인터랙티브 지도를 구현하는 완벽 가이드. 마커, 팝업, GeoJSON, 레이어, React/Vue 통합까지 실전 예제로 정리. Leaflet·Maps·GeoJSON 중심으로 설명합니다. Start now.

이 글의 핵심

Leaflet으로 인터랙티브 지도를 구현하는 완벽 가이드입니다. 마커, 팝업, GeoJSON, 레이어, React/Vue 통합까지 실전 예제로 정리했습니다.

실무 경험 공유: Google Maps API를 Leaflet으로 전환하면서, 비용이 100% 절감되고 커스터마이징이 자유로워진 경험을 공유합니다.

들어가며: “지도 API가 비싸요”

실무 문제 시나리오

시나리오 1: Google Maps 비용이 높아요

API 호출마다 비용이 듭니다. Leaflet은 무료 오픈소스입니다. 시나리오 2: 커스터마이징이 제한적이에요

Google Maps는 제한적입니다. Leaflet은 완전히 자유롭습니다. 시나리오 3: 오프라인 지도가 필요해요

클라우드 의존적입니다. Leaflet은 로컬 타일을 사용할 수 있습니다.

1. Leaflet이란?

핵심 특징

Leaflet은 오픈소스 JavaScript 지도 라이브러리입니다. 주요 장점:

무료: 오픈소스
가벼움: 42KB
모바일 친화적: 터치 제스처
플러그인: 수백 개의 플러그인
커스터마이징: 완전한 제어

2. 설치 및 기본 사용

설치

npm install leaflet
npm install -D @types/leaflet

기본 지도

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <style>
      #map { height: 400px; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script>
      const map = L.map('map').setView([37.5665, 126.9780], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
      }).addTo(map);
    </script>
  </body>
</html>

3. 마커

기본 마커

import L from 'leaflet';
const map = L.map('map').setView([37.5665, 126.9780], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// 마커 추가
const marker = L.marker([37.5665, 126.9780]).addTo(map);
// 팝업
marker.bindPopup('서울특별시').openPopup();
// 커스텀 아이콘
const customIcon = L.icon({
  iconUrl: '/marker.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32],
  popupAnchor: [0, -32],
});
L.marker([37.5665, 126.9780], { icon: customIcon }).addTo(map);

4. GeoJSON

const geojsonData = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        name: 'Location 1',
        category: 'restaurant',
      },
      geometry: {
        type: 'Point',
        coordinates: [126.9780, 37.5665],
      },
    },
  ],
};
L.geoJSON(geojsonData, {
  onEachFeature: (feature, layer) => {
    layer.bindPopup(feature.properties.name);
  },
  pointToLayer: (feature, latlng) => {
    return L.circleMarker(latlng, {
      radius: 8,
      fillColor: '#ff7800',
      color: '#000',
      weight: 1,
      opacity: 1,
      fillOpacity: 0.8,
    });
  },
}).addTo(map);

5. React 통합

React Leaflet

npm install react-leaflet

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
export default function Map() {
  return (
    <MapContainer
      center={[37.5665, 126.9780]}
      zoom={13}
      style={{ height: '400px', width: '100%' }}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='© OpenStreetMap contributors'
      />
      <Marker position={[37.5665, 126.9780]}>
        <Popup>서울특별시</Popup>
      </Marker>
    </MapContainer>
  );
}

6. Vue 통합

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
const mapContainer = ref<HTMLElement>();
onMounted(() => {
  if (!mapContainer.value) return;
  const map = L.map(mapContainer.value).setView([37.5665, 126.9780], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
  L.marker([37.5665, 126.9780])
    .addTo(map)
    .bindPopup('서울특별시')
    .openPopup();
});
</script>
<template>
  <div ref="mapContainer" style="height: 400px;"></div>
</template>

7. 이벤트

TypeScript/JavaScript 예제 코드입니다.

map.on('click', (e) => {
  console.log('Clicked at:', e.latlng);
  L.marker(e.latlng).addTo(map).bindPopup('You clicked here!').openPopup();
});
marker.on('click', () => {
  console.log('Marker clicked');
});

8. 플러그인

Leaflet.markercluster

npm install leaflet.markercluster

import L from 'leaflet';
import 'leaflet.markercluster';
const markers = L.markerClusterGroup();
locations.forEach((loc) => {
  const marker = L.marker([loc.lat, loc.lng]);
  markers.addLayer(marker);
});
map.addLayer(markers);

9. 내부 동작과 좌표계(EPSG:3857)

Leaflet은 기본적으로 Web Mercator(EPSG:3857) 타일을 가정합니다. 화면은 픽셀이지만, 지도 내부에서는 줌 레벨 z마다 세계를 2^z × 2^z 타일 격자로 나눕니다. {z}/{x}/{y} URL 패턴은 이 타일 주소를 가리킵니다. 경도·위도(WGS84)는 LatLng로 다루고, 타일 계산은 내부적으로 투영 변환을 거칩니다.

실무 함의: GeoJSON은 좌표 순서가 [경도, 위도](RFC 7946)입니다. 실수로 반대로 넣으면 마커가 엉뚱한 해상에 찍힙니다. 한국에서 네이버·카카오 타일을 쓸 때는 각 제공자의 좌표계·URL·사용 약관을 별도로 확인해야 합니다.

10. 프로덕션 패턴

10.1 타일 서버와 사용 정책

OpenStreetMap 공용 타일(tile.openstreetmap.org)은 대량 트래픽·앱 상용 배포에 부적합할 수 있습니다. 서비스 규모가 커지면 자체 타일 서버, MapTiler·Mapbox 등 상용, 또는 정부/기관 제공 WMTS를 검토합니다. CDN 앞에 두면 지연·비용을 동시에 다루기 쉽습니다.

10.2 성능: 수천 개 마커

DOM 마커는 수가 늘면 느려집니다. 클러스터(markercluster)·Canvas 레이어·서버 측 클러스터링(줌별 집계) 중 하나를 선택합니다. 뷰포트 밖 데이터는 아예 요청하지 않도록 bbox 쿼리를 API에 두는 패턴이 흔합니다.

10.3 React Leaflet과 SSR

react-leaflet은 브라우저 전용 API에 의존하므로 Next.js 등 SSR에서는 dynamic(..., { ssr: false })로 지도 컴포넌트를 감싸 하이드레이션 불일치를 피합니다. 지도 높이가 0이면 타일이 안 보이므로 부모에 명시적 height를 주는 것이 첫 트러블슈팅 단계입니다.

11. 트러블슈팅

증상	점검
회색 타일만 보임	타일 URL·CORS·API 키·줌 범위 `minZoom`/`maxZoom`
마커 아이콘이 깨짐	webpack/Vite가 `default` 아이콘 경로를 번들에서 누락 — `Icon.Default.imagePath` 보정 또는 정적 자산 경로 고정
모바일에서 더블탭 줌이 과함	`tap` 옵션·터치 핸들러와 UI 버튼 충돌 여부
GeoJSON이 한참 떨어진 곳에 표시	`[lng, lat]` 순서·CRS 불일치
메모리가 계속 증가	이벤트 리스너·레이어를 `remove()`하지 않고 라우트만 바꾸는 SPA 패턴 — `map.remove()` 또는 레이어 정리

정리 및 체크리스트

핵심 요약

Leaflet: 오픈소스 지도 라이브러리
무료: 오픈소스
가벼움: 42KB
모바일 친화적: 터치 제스처
GeoJSON: 지리 데이터
플러그인: 수백 개

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

Leaflet, Maps, GeoJSON, Location, React, Vue, Frontend

자주 묻는 질문 (FAQ)

Q. Google Maps와 비교하면 어떤가요?

A. Leaflet이 무료이고 커스터마이징이 자유롭습니다. Google Maps는 더 많은 기능을 제공하지만 비쌉니다.

Q. 한국 지도를 사용할 수 있나요?

A. 네, Kakao Map, Naver Map 타일을 사용할 수 있습니다.

Q. 모바일에서 잘 작동하나요?

A. 네, 터치 제스처에 최적화되어 있습니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 수많은 웹사이트에서 안정적으로 사용하고 있습니다.

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「Leaflet 완벽 가이드 | 오픈소스 지도·마커·GeoJSON·인터랙션·실전 활용」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「Leaflet 완벽 가이드 | 오픈소스 지도·마커·GeoJSON·인터랙션·실전 활용」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.

Keyboard Shortcuts

이 글의 핵심

이 글의 핵심

들어가며: “지도 API가 비싸요”

실무 문제 시나리오

클라우드 의존적입니다. Leaflet은 로컬 타일을 사용할 수 있습니다.

1. Leaflet이란?

핵심 특징

2. 설치 및 기본 사용

설치

기본 지도

3. 마커

기본 마커

4. GeoJSON

5. React 통합

React Leaflet

6. Vue 통합

7. 이벤트

8. 플러그인

Leaflet.markercluster

9. 내부 동작과 좌표계(EPSG:3857)

10. 프로덕션 패턴

10.1 타일 서버와 사용 정책

10.2 성능: 수천 개 마커

10.3 React Leaflet과 SSR

11. 트러블슈팅

정리 및 체크리스트

핵심 요약

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

자주 묻는 질문 (FAQ)

Q. Google Maps와 비교하면 어떤가요?

Q. 한국 지도를 사용할 수 있나요?

Q. 모바일에서 잘 작동하나요?

Q. 프로덕션에서 사용해도 되나요?

심화 부록: 구현·운영 관점

내부 동작과 핵심 메커니즘

프로덕션 운영 패턴

확장 예시: 엔드투엔드 미니 시나리오

문제 해결(Troubleshooting)

이 글이 도움이 되셨나요?