00005. 📌 [APP-00001] 실시간 미세먼지 & 날씨 알림 앱 #4 – 날씨 & 미세먼지 API 연동해서 데이터 받아오기

안녕하세요! 이번 글은 실시간 미세먼지 & 날씨 알림 앱 개발 시리즈의 네 번째 글입니다.

지금까지는 Flutter 프로젝트를 생성하고 기본 UI를 구성해봤는데요, 이제 본격적으로 데이터를 받아와 앱에 표시하는 작업을 시작해봅니다.

이번 포스팅의 목표는 다음과 같습니다:

• OpenWeatherMap API로 날씨 데이터 받아오기
• AirKorea API로 미세먼지(PM10, PM2.5) 정보 가져오기
• 받아온 데이터를 간단한 UI에 표시하기

---

🌤️ 1. OpenWeatherMap API 연동하기

🔹 회원가입 및 API 키 발급

1. https://openweathermap.org/ 에 가입합니다.
2. 로그인 후 My API Keys 페이지로 이동합니다.
3. 새 키를 생성하거나 기본 키를 사용합니다.

🔹 API 호출 URL 예시

우선 테스트용으로 서울의 날씨를 가져오는 예시입니다:

https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=YOUR_API_KEY&units=metric&lang=kr

• q=Seoul → 도시 이름
• appid=YOUR_API_KEY → 본인의 API 키
• units=metric → 섭씨 온도
• lang=kr → 한국어로 응답 받기

🔹 Flutter 코드 예시

import 'dart:convert';
import 'package:http/http.dart' as http;

Future fetchWeather() async {
  final apiKey = 'YOUR_API_KEY';
  final url = 'https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=$apiKey&units=metric&lang=kr';

  final response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    print("날씨: ${data['weather'][0]['description']}, 온도: ${data['main']['temp']}°C");
  } else {
    print('날씨 정보를 불러오는 데 실패했습니다.');
  }
}

---

🌫️ 2. AirKorea API 연동하기 (미세먼지)

🔹 회원가입 및 인증키 발급

1. 에어코리아 OpenAPI 페이지에서 신청합니다.
2. 승인되면 인증키를 확인할 수 있습니다.

🔹 API 호출 URL 예시 (측정소 기준 실시간 측정정보)

http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/
getMsrstnAcctoRltmMesureDnsty?serviceKey=인증키&type=json&numOfRows=1&pageNo=1&stationName=강남구&dataTerm=DAILY&ver=1.3

• stationName=강남구 → 측정소 이름 (정확히 입력해야 함)

🔹 Flutter 코드 예시

Future fetchDust() async {
  final apiKey = '인증키';
  final url = 'http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getMsrstnAcctoRltmMesureDnsty'
      '?serviceKey=$apiKey&type=json&numOfRows=1&pageNo=1&stationName=강남구&dataTerm=DAILY&ver=1.3';

  final response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    final item = data['response']['body']['items'][0];
    print("미세먼지(PM10): ${item['pm10Value']}, 초미세먼지(PM2.5): ${item['pm25Value']}");
  } else {
    print('미세먼지 정보를 불러오는 데 실패했습니다.');
  }
}

---

🧪 3. 테스트 및 데이터 출력 (간단한 UI)

우선은 콘솔 출력만 해도 충분합니다. 이후 UI에 연동할 때는 FutureBuilder 또는 Provider를 이용해서 데이터를 화면에 띄우면 됩니다.

// 예시 출력 형태 (Console)
날씨: 맑음, 온도: 17.3°C
미세먼지(PM10): 41, 초미세먼지(PM2.5): 29

---

✅ 마무리 및 다음 글 예고

오늘은 두 가지 API(OpenWeatherMap & AirKorea)를 연동하여 날씨와 미세먼지 데이터를 받아오는 것까지 완료했습니다! 🎉

다음 글에서는 이 데이터를 Flutter UI와 연결해서 실제 화면에 표시해볼 예정입니다. 또한, 디자인적인 부분도 조금씩 다듬어볼게요.

다음 주제 예고:

📌 #5 – 날씨 & 미세먼지 정보를 UI에 예쁘게 보여주기

그럼 다음 포스팅에서 뵙겠습니다! ☁️