Ch.2 JavaScript 라이브러리 15선

Leaflet — 인터랙티브 지도

article

핵심 내용

Leaflet은 웹에 인터랙티브 지도를 삽입하는 라이브러리

한 줄 요약: 구글 지도처럼 확대/축소/드래그되는 인터랙티브 지도를 웹페이지에 삽입하는 오픈소스 JS 라이브러리. 실생활 비유: 배달앱에서 라이더 위치를 실시간으로 보여주는 지도, 부동산 앱에서 매물 위치를 표시하는 지도 — 이런 지도를 직접 만들 수 있게 해주는 도구입니다. 무료이고, 42KB밖에 안 돼서 가볍습니다.

Google Maps API: 강력하지만 유료(월 200달러 무료 후 과금). API 키 필수. 커스터마이징 제한적.

Leaflet + OpenStreetMap: 완전 무료. API 키 불필요. 마커, 팝업, 경로 등 자유롭게 커스터마이징 가능.

위치 데이터를 지도 위에 표시할 때

Leaflet이 특히 좋은 이유: Google Maps는 월 28,000회 이상 호출하면 과금이 발생합니다. 개인 프로젝트나 소규모 서비스라면 Leaflet + OpenStreetMap 조합이 무료이면서도 충분히 강력해요.

HTML 파일 하나로 바로 시작합니다

<!DOCTYPE html>
<html>
<head>
  <title>내 첫 지도</title>
  <link rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9/dist/leaflet.css" />
  <script
    src="https://unpkg.com/leaflet@1.9/dist/leaflet.js">
  </script>
  <style>
    #map { width: 100%; height: 400px; }
  </style>
</head>
<body>
  <h1>우리 동네 지도</h1>
  <div id="map"></div>
  <script>
    // 서울 시청 좌표로 지도 생성
    const map = L.map("map").setView(
      [37.5665, 126.978], 15
    );

    // OpenStreetMap 타일 추가
    L.tileLayer(
      "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    ).addTo(map);

    // 마커 + 팝업
    L.marker([37.5665, 126.978])
      .addTo(map)
      .bindPopup("서울 시청입니다!")
      .openPopup();
  </script>
</body>
</html>

실행 결과: HTML 파일을 브라우저로 열면 서울 시청 중심의 인터랙티브 지도가 나타납니다. 마우스로 드래그하고, 스크롤로 확대/축소할 수 있어요. CDN 링크 두 줄이면 설치 끝!

표시할 위치와 정보를 구체적으로 알려주세요

좋은 프롬프트 예시 "Leaflet으로 우리 매장 5곳 지도에 마커+팝업 표시해줘. OpenStreetMap 사용, HTML 한 파일로 만들어줘. 각 매장 이름과 영업시간이 팝업에 나오게 해줘."

프롬프트 변형 • "마커를 클릭하면 상세 정보가 사이드바에 표시되게 해줘" • "두 지점 사이에 직선/곡선 경로를 그려줘" • "현재 위치를 자동 감지해서 지도 중심으로 설정해줘" • "마커 아이콘을 커스텀 이미지로 바꿔줘"

L.map(): 지도 컨테이너 생성 + 중심 좌표 설정

L.tileLayer(): OpenStreetMap 배경 타일 추가

L.marker(): 원하는 좌표에 마커 핀 찍기

.bindPopup(): 마커 클릭 시 팝업 정보 표시

우리 동네 맛집 지도

<!DOCTYPE html>
<html>
<head>
  <title>우리 동네 맛집 지도</title>
  <link rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9/dist/leaflet.css" />
  <script
    src="https://unpkg.com/leaflet@1.9/dist/leaflet.js">
  </script>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    #map { width: 100%; height: 500px; border-radius: 12px; }
    h1 { text-align: center; }
  </style>
</head>
<body>
  <h1>🍜 우리 동네 맛집 지도</h1>
  <div id="map"></div>
  <script>
    // 맛집 데이터 (위도, 경도, 이름, 메뉴, 평점)
    const restaurants = [
      { lat: 37.5563, lng: 126.9724,
        name: "명동교자", menu: "칼국수, 만두",
        rating: "⭐ 4.5" },
      { lat: 37.5595, lng: 126.9860,
        name: "을지면옥", menu: "냉면, 불고기",
        rating: "⭐ 4.3" },
      { lat: 37.5537, lng: 126.9706,
        name: "남산돈까스", menu: "왕돈까스",
        rating: "⭐ 4.1" },
      { lat: 37.5612, lng: 126.9830,
        name: "광장시장 빈대떡", menu: "빈대떡, 마약김밥",
        rating: "⭐ 4.6" },
      { lat: 37.5650, lng: 126.9755,
        name: "종로김밥", menu: "참치김밥, 떡볶이",
        rating: "⭐ 4.0" },
    ];

    // 지도 생성 (서울 중심)
    const map = L.map("map").setView(
      [37.5585, 126.9770], 14
    );

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

    // 맛집마다 마커 + 팝업 추가
    restaurants.forEach(r => {
      L.marker([r.lat, r.lng])
        .addTo(map)
        .bindPopup(
          `<strong>${r.name}</strong><br>` +
          `메뉴: ${r.menu}<br>` +
          `${r.rating}`
        );
    });
  </script>
</body>
</html>

실행 방법: 이 HTML 파일을 `맛집지도.html`로 저장하고 브라우저로 열면 끝! 서울 중심부에 맛집 5곳의 마커가 표시되고, 클릭하면 가게 이름, 메뉴, 평점이 팝업으로 나타납니다. 좌표와 정보만 바꾸면 내 동네 맛집 지도를 바로 만들 수 있어요.

Leaflet이 Google Maps API 대비 가장 큰 장점은?

key

핵심 용어

📍 매장 안내

우리 가게 위치를 지도에 마커로 표시하고 영업 시간 팝업

🚚 배달 경로

출발지→경유지→도착지 경로를 지도 위에 선으로 표시

🏠 부동산

매물 위치를 지도에 핀으로 찍고 가격/면적 정보 팝업

📊 데이터 시각화

지역별 인구, 매출 등을 지도 위에 색상으로 표현 (히트맵)

📱 반응형

CSS media query로 모바일에서도 꽉 차는 지도 레이아웃

🔍 검색 필터

메뉴 종류별 필터 버튼 추가 (한식/중식/일식)

📍 현재 위치

navigator.geolocation으로 내 위치 자동 표시

check_circle

핵심 정리

1Leaflet은 인터랙티브 지도를 웹에 삽입하는 오픈소스 라이브러리 (42KB, 무료)
2CDN 링크 2줄이면 설치 완료. HTML 파일 하나로 바로 시작 가능
3L.map → L.tileLayer → L.marker → .bindPopup 4단계로 지도 완성
4OpenStreetMap과 함께 쓰면 Google Maps와 달리 완전 무료
5AI 프롬프트에 좌표, 표시할 정보, 인터랙션 방식을 구체적으로 명시하면 정확한 코드 생성

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작