Flutter로 간단한 날씨 앱 만들기: OpenWeatherMap API 연동

안녕하세요! 이번에는 Flutter로 날씨 앱을 만들어볼 거예요. OpenWeatherMap API를 사용하여 현재 날씨 정보를 가져오고, 이를 앱에서 표시해보겠습니다. 이 프로젝트를 통해 API 연동, 비동기 데이터 처리, 그리고 위젯을 활용한 UI 구성을 배워볼 수 있습니다.

 

 

목차

1. 날씨 앱 개요
2. OpenWeatherMap API 설정하기
3. Flutter에서 날씨 데이터 가져오기
4. 날씨 앱 UI 구현하기
5. Flutter 초보자의 시행착오
6. 다음 단계: 고급 날씨 앱으로 발전시키기

 

 

1. 날씨 앱 개요

목표 기능

• 현재 위치의 날씨 정보를 API로 가져와 표시.
• 온도, 날씨 상태, 아이콘 등을 UI에 표시.
• 간단한 버튼으로 데이터를 새로고침.

최종 결과

• 앱 실행 시 기본 위치의 날씨 정보를 표시.
• 버튼 클릭으로 최신 데이터 가져오기.

 

 

2. OpenWeatherMap API 설정하기

1. OpenWeatherMap 가입 및 API 키 발급
   • OpenWeatherMap에 가입하고, API 키를 발급받습니다.
     • Sign in > Create an Account.
     • 계정을 생성했다면 로그인된 닉네임 클릭 > My API keys 에서 API 키 확인
2. API 요청 URL
   • 기본 API URL:
   • <https://api.openweathermap.org/data/2.5/weather?q={CITY_NAME}&appid={API_KEY}&units=metric>
   • {CITY_NAME}: 도시 이름(예: Seoul).
   • {API_KEY}: 발급받은 API 키.
   • units=metric: 섭씨 온도로 표시.

 

 

3. Flutter에서 날씨 데이터 가져오기

실행 가능한 코드: 날씨 데이터 가져오기

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

void main() => runApp(WeatherApp());

class WeatherApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WeatherScreen(),
    );
  }
}

class WeatherScreen extends StatefulWidget {
  @override
  _WeatherScreenState createState() => _WeatherScreenState();
}

class _WeatherScreenState extends State {
  String _cityName = "Seoul";
  String _weatherDescription = "날씨 정보를 가져오는 중...";
  String _temperature = "-";
  String _icon = "";

  Future _fetchWeather() async {
    final apiKey = "YOUR_API_KEY"; // OpenWeatherMap API 키 입력
    final url = Uri.parse(
        "<https://api.openweathermap.org/data/2.5/weather?q=$_cityName&appid=$apiKey&units=metric>");
    try {
      final response = await http.get(url);
      if (response.statusCode == 200) {
        final data = json.decode(response.body);
        setState(() {
          _weatherDescription = data['weather'][0]['description'];
          _temperature = data['main']['temp'].toString();
          _icon = data['weather'][0]['icon'];
        });
      } else {
        setState(() {
          _weatherDescription = "날씨 정보를 불러올 수 없습니다.";
        });
      }
    } catch (error) {
      setState(() {
        _weatherDescription = "오류가 발생했습니다.";
      });
      print("Error: $error");
    }
  }

  @override
  void initState() {
    super.initState();
    _fetchWeather();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("날씨 앱"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              _cityName,
              style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            if (_icon.isNotEmpty)
              Image.network(
                "<https://openweathermap.org/img/wn/$_icon@2x.png>",
                scale: 1.5,
              ),
            Text(
              "$_temperature°C",
              style: TextStyle(fontSize: 24),
            ),
            Text(
              _weatherDescription,
              style: TextStyle(fontSize: 18, fontStyle: FontStyle.italic),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _fetchWeather,
              child: Text("새로고침"),
            ),
          ],
        ),
      ),
    );
  }
}

728x90

 

4. 날씨 앱 UI 구현하기

주요 UI 구성 요소

1. 도시 이름 표시
   • 기본 도시 이름을 상단에 표시.
2. 날씨 아이콘
   • OpenWeatherMap에서 제공하는 아이콘 URL을 사용해 날씨 아이콘 표시.
3. 온도 및 상태 표시
   • 섭씨 온도와 날씨 상태를 텍스트로 표시.
4. 새로고침 버튼
   • 클릭 시 최신 데이터를 가져오는 버튼 추가.

 

 

5. Flutter 초보자의 시행착오

1. API 키 누락 문제
   • API 키를 추가하지 않아 요청이 실패했습니다.
   • 해결: YOUR_API_KEY를 실제 API 키로 변경.
2. 날씨 아이콘 누락 문제
   • API 응답에서 icon 필드의 URL이 잘못된 경우가 있었습니다.
   • 해결: OpenWeatherMap 문서에서 아이콘 URL 형식을 확인 후 수정.
3. 잘못된 도시 이름 문제
   • 요청한 도시 이름이 잘못되어 응답 코드가 404로 반환되었습니다.
   • 해결: 도시 이름을 정확히 입력하거나, 예외 처리를 추가.
4. 연동 대기 문제
   • API Key 를 발급받은 후 바로 적용했을 때 날씨를 정상적으로 불러오지 못하는 경우가 있었습니다.
   • 해결: 일정 시간(저의 경우 약 30분) 대기 후 앱 호출 시 정상 호출.

 

 

6. 다음 단계: 고급 날씨 앱으로 발전시키기

• 사용자 위치 기반 날씨 정보 표시
  • 사용자의 현재 위치를 가져와 해당 위치의 날씨 정보 표시.
• 위젯 애니메이션 추가
  • 날씨 정보 로드 시 간단한 로딩 애니메이션 추가.
• 5일간의 날씨 예보 표시
  • OpenWeatherMap의 "5-day forecast" API를 사용해 날씨 예보 기능 구현.

 

 

마무리

Flutter로 간단한 날씨 앱을 만들어보며 API 연동과 UI 구성을 연습했습니다. 날씨 앱은 초보자에게 API 호출과 데이터를 다루는 방법을 익히기에 좋은 프로젝트입니다.
혹시 이 프로젝트를 진행하며 궁금한 점이나 새로운 아이디어가 있다면 댓글로 공유해주세요! 다음에는 더 흥미롭고 실용적인 프로젝트로 돌아오겠습니다. 😊