00004. 📌 [APP-00001] 실시간 미세먼지 & 날씨 알림 앱 #3 – Flutter로 기본 UI 구성 & 화면 설계

안녕하세요! 이번 포스팅은 실시간 미세먼지 & 날씨 알림 앱 개발 시리즈의 세 번째 글입니다.
이전 글에서는 Android 개발 환경을 세팅하고 Flutter 프로젝트를 생성했는데요,
이번 글에서는 Flutter로 기본 UI를 어떻게 구성할지 그리고 앞으로 앱의 전체 화면을 어떻게 설계할지를 소개하려고 합니다.

---

🛠️ 1. Flutter 프로젝트 구조 살펴보기

Flutter 프로젝트를 생성하면 다음과 같은 디렉토리 구조가 만들어집니다:

my_app/
├── android/         // Android 관련 파일
├── ios/             // iOS 관련 파일
├── lib/             // Flutter 앱 소스코드 (💡 대부분 이 폴더를 수정합니다)
│   └── main.dart    // 앱 시작점
├── pubspec.yaml     // 패키지 설정 파일
└── ...

이 중 우리는 lib/ 폴더와 pubspec.yaml 파일을 주로 다루게 됩니다.

---

📦 2. 필요한 패키지 설치

API 연동과 상태 관리를 위해 자주 사용하는 패키지를 미리 설치해두는 것이 좋습니다.

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  http: ^0.14.0           # HTTP 요청용
  flutter_dotenv: ^5.1.0  # 환경변수(API 키 등) 관리용
  provider: ^6.1.0        # 상태 관리용

설정 후에는 아래 명령어를 실행해 패키지를 적용해주세요:

flutter pub get

---

🧱 3. 앱 기본 구조 만들기

이제 lib/main.dart 파일을 열고, 아래와 같이 기본 구조를 작성해봅니다:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '미세먼지 & 날씨 알림 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('실시간 미세먼지 & 날씨'),
        centerTitle: true,
      ),
      body: const Center(
        child: Text('데이터 로딩 중...'),
      ),
    );
  }
}

위 코드를 실행하면 기본적인 앱 화면이 뜨고, “데이터 로딩 중...”이라는 텍스트가 표시됩니다.

---

🎨 4. 앞으로 만들 UI 구상해보기

이제 어떤 화면을 만들지 상상해보며 간단한 UI 설계를 해볼게요.
앱이 실행되면 아래와 같은 정보가 화면에 표시될 예정입니다:

📍 위치: 서울시 강남구
🌤️ 날씨: 맑음, 15°C

🟡 미세먼지(PM10): 보통 (45㎍/m³)
🟠 초미세먼지(PM2.5): 나쁨 (61㎍/m³)

🔄 새로고침 버튼

이러한 화면 구성을 위해 다음과 같은 위젯들을 사용할 예정입니다:

• Column, Row: 정보 정렬용
• Card: 미세먼지 정보를 카드 형태로 표현
• ElevatedButton: 새로고침 버튼
• Icon: 날씨, 위치 등을 시각적으로 표현

---

🧭 5. 앞으로의 개발 순서

지금까지는 Flutter UI 구성의 기초를 다졌습니다.
다음 단계에서는 실제 데이터를 불러오고 화면에 표시하는 기능을 구현할 예정입니다.

다음 포스팅 예고:

📌 #4 – 위치 권한 요청 & 현재 위치 가져오기
또는
📌 #4 – OpenWeatherMap & AirKorea API 연동 (날씨 & 미세먼지 데이터 가져오기)

---

✨ 마무리

지금은 단순한 “데이터 로딩 중...” 화면만 보이지만,
곧 실제로 날씨와 미세먼지 정보를 실시간으로 보여주는 알림 앱으로 발전할 예정입니다! 😎

Flutter가 낯설거나 초보자여도,
이 시리즈를 통해 완성까지 차근차근 따라갈 수 있도록 도와드릴게요!

그럼 다음 포스팅에서 뵙겠습니다 🚀