날씨 API 연동하는 법
내 사이트에 실시간 날씨 표시하기

☁️ 홈페이지에 현재 날씨가 뜨면 어떨까?

사이트를 열었을 때 "서울 · 맑음 · 24°C" 같은 정보가 보이면 어떨까. 실시간 데이터가 있는 사이트는 살아있는 느낌이 난다. 방문자 입장에서도 괜히 더 신뢰가 간다.

OpenWeatherMap 무료 API로 직접 연동해봤다. API 키 발급부터 위치 자동 감지까지, 예상보다 훨씬 간단했다.

🌍 OpenWeatherMap이 뭔가요?

전 세계 20만 개 이상 도시의 날씨 데이터를 제공하는 API 서비스다. 현재 날씨, 시간별 예보, 주간 예보까지 다양한 데이터를 제공한다.

무료 플랜으로도 분당 60회 호출이 가능하다. 개인 블로그나 포트폴리오 사이트에서 날씨를 표시하는 용도라면 평생 무료 플랜으로 충분하다.

• 무료 플랜 · 신용카드 불필요
• 분당 60회 · 월 100만 회 호출
• 현재 날씨, 48시간 예보, 8일 예보 모두 지원
• 위경도 또는 도시명으로 조회 가능

📦 준비물

딱 두 가지다. 둘 다 무료고 5분이면 끝난다.

• OpenWeatherMap 계정 — openweathermap.org에서 이메일로 무료 가입
• API 키 — 가입 후 My API Keys 메뉴에서 발급. 가입하면 기본 키가 자동 생성돼 있다

🔑 API 키 발급 방법

네 번의 클릭이면 된다.

🪜 만드는 순서

API 키가 준비됐으면 이제 코드를 붙이면 된다. AI한테 한 번에 시키는 게 제일 빠르다.

API 호출 코드 구조

const API_KEY = '여기에_발급받은_키_입력';
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

function getWeather(lat, lon) {
  const url = `${BASE_URL}?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric&lang=kr`;

  fetch(url)
    .then(res => res.json())
    .then(data => {
      document.getElementById('weather-temp').textContent = Math.round(data.main.temp) + '°C';
      document.getElementById('weather-city').textContent = data.name;
      document.getElementById('weather-desc').textContent = data.weather[0].description;
      document.getElementById('weather-icon').src =
        `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
    })
    .catch(err => console.warn('날씨 로드 실패:', err));
}

units=metric으로 설정하면 섭씨 온도가 반환된다. lang=kr을 붙이면 날씨 설명이 한국어로 나온다.

📍 위치 자동 감지

방문자의 현재 위치를 기반으로 날씨를 보여주면 훨씬 유용하다. navigator.geolocation을 쓰면 브라우저가 위치 권한을 물어보고, 허용하면 위경도를 넘겨준다.

const DEFAULT_LAT = 37.5665; // 서울
const DEFAULT_LON = 126.9780;

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    function (pos) {
      // 위치 허용 시: 실제 위치로 날씨 조회
      getWeather(pos.coords.latitude, pos.coords.longitude);
    },
    function () {
      // 위치 거부 시: 서울 기본값으로 폴백
      getWeather(DEFAULT_LAT, DEFAULT_LON);
    }
  );
} else {
  getWeather(DEFAULT_LAT, DEFAULT_LON);
}

위치 권한을 거부하더라도 서울(기본값)의 날씨가 표시된다. 오류 화면이 뜨지 않고 자연스럽게 대체값이 보이는 게 포인트다. 직접 써보니 이 폴백 처리가 있어야 모바일에서도 깔끔하게 동작했다.

⚠️ 주의할 점

✅ 마무리 — 날씨 하나로 달라지는 사이트 분위기

날씨 위젯 하나로 사이트가 살아있는 느낌이 확 달라진다. 정적인 HTML 페이지가 실시간 데이터를 받아오는 서비스처럼 보인다.

API 키 발급에 5분, 코드 붙이는 데 AI 도움 받으면 10분이면 끝난다. 한 번 해두면 매일 자동으로 업데이트된다. 손댈 것도 없다.