📌 Leaflet + Daum 지도 + OpenWeatherMap 연동 프로젝트

📅 2025-05-12

---

🧭 개요 및 학습 목적

🔍 무엇을 구현했나?

• 웹 브라우저에서 Daum 기반 인터랙티브 지도를 띄우고,
• 사용자가 클릭한 위치의 실시간 날씨 정보를 OpenWeatherMap API로 받아,
• 지도 위에 마커와 팝업 형태로 시각화하는 프로젝트를 구현함.

---

🧠 사용한 기술 스택

분류	사용 기술
지도 라이브러리	Leaflet.js
좌표계 변환	proj4.js + proj4leaflet.js
한국형 타일 소스	Leaflet.KoreanTmsProviders.js
백엔드 프레임워크	Spring Boot (Java)
HTTP 통신	Axios (프론트), RestTemplate (백엔드)
외부 API	OpenWeatherMap (날씨 정보)

---

📂 전체 흐름 요약

1. 사용자가 지도 클릭
2. 클릭한 위도/경도를 서버로 전송
3. 서버는 OpenWeatherMap API에 날씨 정보 요청
4. 받은 JSON 응답을 필요한 데이터만 추출해 클라이언트로 반환
5. 프론트는 팝업 + 마커로 날씨 시각화

---

🗺️ index.html 구성

1️⃣ Head – 라이브러리 로딩

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="/js/KoreanTmsProviders/lib/proj4.js"></script>
<script src="/js/KoreanTmsProviders/lib/proj4leaflet.js"></script>
<script src="/js/KoreanTmsProviders/src/Leaflet.KoreanTmsProviders.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.9.0/axios.min.js"></script>

---

2️⃣ Body – 지도 및 로딩 메시지

<div id="loading" style="display:none;position:absolute;top:20px;left:20px;background:#fff;padding:5px;z-index:9999;">
  🌤️ 날씨 정보를 불러오는 중...
</div>
<div id="map" style="height:100vh;width:100%;"></div>

---

3️⃣ Script – 지도 생성 및 날씨 팝업 처리

let currentMarker = null; // 기존 마커 제거용

const map = new L.Map('map', {
  center: new L.LatLng(35.829890, 128.532719),
  zoom: 8,
  crs: L.Proj.CRS.Daum // DaumMap 좌표계 (EPSG:5181)
});
L.tileLayer.koreaProvider('DaumMap.Street').addTo(map);

const centerMarker = L.marker([35.829890, 128.532719]).addTo(map);
centerMarker.bindTooltip("대구").openTooltip();
centerMarker.bindPopup("<div>중심 지점</div>");

// 지도 클릭 시 동작
map.on('click', function(e) {
  const lat = e.latlng.lat;
  const lon = e.latlng.lng;

  if (currentMarker) map.removeLayer(currentMarker); // 이전 마커 제거
  currentMarker = L.marker([lat, lon]).addTo(map);
  document.getElementById("loading").style.display = "block";

  axios.get(`/open/weather/get/${lat}/${lon}`)
    .then(resp => {
      const data = resp.data;

      // OpenWeatherMap API는 Kelvin 단위를 사용 → 섭씨로 변환
      const temp = Math.round(data.temp - 273.15);
      const feels = Math.round(data.feelsLike - 273.15);

      const content = `
        <div style="text-align:center;">
          <img src="https://openweathermap.org/img/wn/${data.icon}@2x.png" /><br/>
          <strong>${data.name}</strong><br/>
          ${data.description} / ${temp}°C<br/>
          체감온도: ${feels}°C<br/>
          습도: ${data.humidity}% | 바람: ${data.windSpeed} m/s
        </div>`;
      currentMarker.bindPopup(content).openPopup();
    })
    .catch(err => {
      alert("날씨 정보를 불러오지 못했습니다.");
      console.error(err);
    })
    .finally(() => {
      document.getElementById("loading").style.display = "none";
    });
});

---

☁️ OpenWeatherController.java

@RestController
@RequestMapping("/open/weather")
public class OpenWeatherController {

    // ⚠️ 반드시 본인의 OpenWeatherMap API 키로 교체해야 합니다
    private final String serviceKey = "YOUR_API_KEY_HERE";

    @GetMapping("/get/{lat}/{lon}")
    public ResponseEntity<WeatherDto> get(@PathVariable String lat, @PathVariable String lon) throws UnsupportedEncodingException {
        URI uri = UriComponentsBuilder.fromHttpUrl("https://api.openweathermap.org/data/2.5/weather")
            .queryParam("appid", URLEncoder.encode(serviceKey, "UTF-8"))
            .queryParam("lat", lat)
            .queryParam("lon", lon)
            .build(true).toUri();

        RestTemplate rt = new RestTemplate();
        ResponseEntity<Map> response = rt.exchange(uri, HttpMethod.GET, null, Map.class);
        Map body = response.getBody();

        Map main = (Map) body.get("main");
        List<Map> weatherList = (List<Map>) body.get("weather");
        Map wind = (Map) body.get("wind");

        WeatherDto dto = WeatherDto.builder()
            .name((String) body.get("name"))
            .description((String) weatherList.get(0).get("description"))
            .icon((String) weatherList.get(0).get("icon"))
            .temp(((Number) main.get("temp")).doubleValue())
            .feelsLike(((Number) main.get("feels_like")).doubleValue())
            .humidity(((Number) main.get("humidity")).intValue())
            .windSpeed(((Number) wind.get("speed")).doubleValue())
            .build();

        return ResponseEntity.ok(dto);
    }
}

---

✅ WeatherDto.java

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class WeatherDto {
    private String name;
    private String description;
    private String icon;
    private double temp;
    private double feelsLike;
    private int humidity;
    private double windSpeed;
}

---

🔥 핵심 정리

항목	설명
좌표계	EPSG:5181 (Daum용)
지도 API	Leaflet + KoreanTmsProviders
날씨 API	OpenWeatherMap
시각화	마커 + 툴팁 + 팝업
기능 개선	온도 K → ℃, 아이콘 표시, 마커 중복 제거, 로딩 메시지 표시
구조	Axios → Spring REST → OpenWeather → DTO → 팝업 표시

---

🤔 느낀 점

• 좌표계 정의부터 API 호출, 응답 파싱까지 프론트와 백엔드가 협력하는 전체 흐름을 체험할 수 있었다.
• RestTemplate로 외부 API를 연동하고, 필요한 JSON 필드만 추출해 DTO로 정리하는 경험이 유익했다.
• Leaflet에서 커스텀 좌표계를 사용할 때 주의할 점과 실제 타일 소스를 연결하는 방법을 배울 수 있었다.

---

💡 다음에 도전해볼 것들

• 사용자의 현재 위치 자동 마커 표시
• 클릭 위치의 과거 또는 주간 날씨 정보도 함께 보여주기
• 날씨에 따라 마커 색상을 동적으로 변경
• 날씨 종류에 따라 아이콘/배경색 바꾸는 UI 개선

---