"HTML에 생기를 불어넣는 법: 날씨 API 연동하고 멋진 대시보드 만들기"

API 연동의 꽃, '날씨 정보' 불러오기

여러분, 안녕하세요! 지난 포스팅에서 API의 개념을 가볍게 훑어봤다면, 오늘은 실제로 **'날씨 데이터'**를 내 홈페이지에 가져와서 보여주는 실습을 해볼 거예요.

웹사이트 메인 화면에 "오늘 서울의 기온은 25도입니다"라는 문구가 실시간으로 뜬다면 정말 멋지겠죠? 개발 공부를 시작할 때 가장 성취감이 큰 프로젝트 중 하나가 바로 이 날씨 앱 만들기랍니다. 어렵게 생각하지 마세요! 제가 드리는 코드만 차근차근 따라오시면 누구나 완성할 수 있어요. 🌈

---

시작 전 준비물 - API Key 발급받기

API는 무분별한 사용을 막기 위해 일종의 '출입증'인 API Key를 요구합니다.

1. OpenWeatherMap 사이트에 접속해서 회원가입을 해주세요.
2. 메일 인증 후 로그인하면 'My API Keys' 메뉴에서 본인만의 고유 키를 확인할 수 있습니다.
3. 이 키는 마치 비밀번호와 같으니 외부에 노출되지 않게 주의해 주세요! (오늘 예시 코드에서는 'YOUR_API_KEY' 부분에 넣어주시면 됩니다.)

---

HTML과 JavaScript 실전 코드 구성

자, 이제 본격적으로 코드를 짜볼까요? 구조는 아주 간단합니다. 데이터를 담을 그릇인 HTML과, 데이터를 가져와서 요리할 JavaScript만 있으면 돼요.

1) 데이터를 담을 HTML 구조

먼저 화면에 날씨가 나타날 자리를 만들어 줍니다.

HTML

 

<div id="weather-card">
  <h2 id="city">도시 이름</h2>
  <div id="icon"></div>
  <p id="temp">00°C</p>
  <p id="description">날씨 상태</p>
</div>

 

2) 데이터를 호출하는 JavaScript (Fetch 사용)

이제 핵심 엔진을 달아줄 차례예요. 자바스크립트의 fetch 함수를 이용해 서버에 데이터를 요청합니다.

JavaScript

 

const API_KEY = 'YOUR_API_KEY_HERE'; // 발급받은 키를 여기에 넣으세요
const city = 'Seoul'; // 확인하고 싶은 도시
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=kr`;

async function getWeather() {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error("데이터를 가져올 수 없어요!");
    
    const data = await response.json();
    
    // HTML 요소에 데이터 매핑하기
    document.getElementById('city').innerText = data.name;
    document.getElementById('temp').innerText = `${Math.round(data.main.temp)}°C`;
    document.getElementById('description').innerText = data.weather[0].description;
    
    // 아이콘 추가 (보너스!)
    const iconCode = data.weather[0].icon;
    const iconUrl = `http://openweathermap.org/img/wn/${iconCode}@2x.png`;
    document.getElementById('icon').innerHTML = `<img src="${iconUrl}" alt="날씨 아이콘">`;

  } catch (error) {
    console.error("에러 발생:", error);
    alert("날씨 정보를 불러오는 데 실패했습니다. 키를 확인해 주세요!");
  }
}

getWeather();

---

코드 설명과 주의할 점

위 코드에서 눈여겨볼 포인트는 세 가지예요!

1. units=metric: 이 옵션을 넣지 않으면 온도가 '화씨(F)'로 나와서 당황하실 수 있어요. 우리가 익숙한 '섭씨(C)'로 보려면 꼭 추가해야 합니다.
2. lang=kr: 날씨 설명(맑음, 흐림 등)을 한국어로 받아오게 해주는 마법의 옵션이에요.
3. 비동기 처리(async/await): 서버에서 데이터를 받아오는 시간 동안 브라우저가 멈추지 않도록 기다려주는 아주 중요한 문법이랍니다. 처음엔 생소해도 자주 쓰다 보면 익숙해지실 거예요! ✨

---

더 멋지게 꾸미기 (CSS 가이드)

데이터만 띡 나오면 조금 심심하죠? CSS를 활용해 배경에 그라데이션을 넣거나, 날씨 상태에 따라 배경색이 바뀌도록 자바스크립트 조건을 추가해 보세요. 예를 들어 data.weather[0].main 값이 'Rain'이라면 배경을 푸르스름하게 바꾸는 식으로요! 이런 작은 디테일이 웹사이트의 퀄리티를 결정한답니다.

---

나만의 날씨 대시보드 완성!

어때요? 생각보다 API 연동이 어렵지 않죠? HTML 문서 하나와 자바스크립트 몇 줄로 전 세계의 실시간 날씨를 내 손안에 넣었습니다. 👏

이 원리를 응용하면 미세먼지 정보, 주식 시세, 환율 정보까지 모두 가져올 수 있어요. API는 현대 웹 개발의 핵심이자 꽃이라고 할 수 있습니다. 오늘 성공하셨다면 여러분은 이제 단순한 퍼블리셔를 넘어 데이터와 대화하는 '진짜 개발자'로 한 걸음 더 나아가신 거예요!

공부하시다가 API 키가 작동하지 않거나, 화면에 데이터가 안 뜬다면 언제든 댓글 남겨주세요. 제가 꼼꼼하게 봐드릴게요. 오늘도 즐거운 코딩 하세요! 🔥

도시 이름

 

00°C

날씨 상태

---------------------------------------------------

Loading...

 

주의사항 및 팁

• API 키 보안: 티스토리는 소스코드가 공개되므로, 유료 API를 사용하신다면 키가 노출되지 않도록 주의해야 해요. (연습용 무료 키는 괜찮습니다!)
• HTTPS 확인: 티스토리는 보안 연결(HTTPS)을 사용하므로 API 주소도 반드시 https://로 시작해야 데이터가 정상적으로 불러와집니다.
• 캐시 문제: 코드를 고쳤는데 반영이 안 된다면 브라우저 캐시를 삭제하거나 '강력 새로고침(Ctrl + F5)'을 해보세요!