OpenWeather API 연동하기 — 실시간 날씨 받아오기

멋진 날씨 앱을 만들기 위해서는 실시간 날씨 정보를 가져오는 게 핵심이다.
이번 글에서는 Flutter에서 OpenWeather API를 연동해 기온, 상태, 아이콘 등의 데이터를 받아오는 과정을 정리해본다.

---

🌐 OpenWeatherMap API란?

https://openweathermap.org 에서 제공하는 공개 날씨 API로,
도시, 위도/경도, ZIP 코드 등 다양한 방법으로 현재 날씨, 예보, 과거 데이터까지 받아올 수 있다.

• API 형태: REST + JSON
• 요청 URL 예시: https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid={API_KEY}&units=metric

---

🔑 API Key 발급 받기

1. OpenWeatherMap 회원가입
2. API Keys 메뉴에서 새로운 키 생성
3. 이 키를 앱 내에서 사용

API 요청 횟수 제한이 있으니 테스트 시 주의!

---

📦 http 패키지로 API 요청

// pubspec.yaml
dependencies:
  http: ^0.13.5

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

Future<Map<String, dynamic>> fetchWeather(String city) async {
  final apiKey = 'YOUR_API_KEY';
  final url =
    'https://api.openweathermap.org/data/2.5/weather?q=$city&appid=$apiKey&units=metric';

  final response = await http.get(Uri.parse(url));

  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('Failed to load weather data');
  }
}

데이터는 Map 형태로 받아 JSON으로 처리한다.

---

📊 받아오는 데이터 예시

{
  "weather": [
    {
      "main": "Clear",
      "description": "clear sky",
      "icon": "01d"
    }
  ],
  "main": {
    "temp": 24.5,
    "feels_like": 25.0,
    "humidity": 40
  },
  "name": "Seoul"
}

• main.temp: 현재 기온
• weather[0].main: 날씨 상태
• weather[0].icon: 날씨 아이콘 코드
• main.humidity: 습도

---

📱 UI에 적용하기

FutureBuilder(
  future: fetchWeather("Seoul"),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text("오류 발생");
    } else {
      final data = snapshot.data!;
      return Column(
        children: [
          Text("${data['main']['temp']}°C", style: TextStyle(fontSize: 48)),
          Text("${data['weather'][0]['main']}"),
          Image.network(
            "http://openweathermap.org/img/wn/${data['weather'][0]['icon']}@2x.png"
          )
        ],
      );
    }
  },
)

날씨 상태에 따라 아이콘까지 동적으로 받아올 수 있어 감각적인 UI 구성도 가능하다.

---

🧘 마무리하며

정적 UI만으로는 날씨 앱이 아니다.
OpenWeather API와 연결하면, 지금 이 순간의 날씨를 Flutter 앱에 담아낼 수 있다.

Flutter + 실시간 날씨 → 생동감 있는 앱의 시작!

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 날씨 앱 만들기 여정입니다.