날씨에 따라 배경 바꾸기 — 애니메이션과 날씨 감성 UI

날씨 앱은 단순한 정보 앱을 넘어 하루의 분위기를 담아야 한다.
특히 날씨에 따라 배경 이미지나 애니메이션이 바뀌면 사용자에게 더 몰입감 있는 경험을 제공할 수 있다.

이번 글에서는 Flutter에서 날씨 상태에 따라 배경을 동적으로 변경하고, 애니메이션 효과까지 입히는 감성 UI를 만들어본다.

---

🌤️ 날씨 상태 기반 배경 전환

OpenWeather API에서 날씨 상태는 다음과 같이 전달된다:

"weather": [
  {
    "main": "Clear",
    "description": "clear sky",
    "icon": "01d"
  }
]

weather[0].main 값을 기준으로 배경을 매핑하면 된다.

---

🖼️ 상태별 배경 이미지 매핑

String getBackgroundAsset(String weather) {
  switch (weather) {
    case 'Clear':
      return 'assets/bg_clear.png';
    case 'Rain':
      return 'assets/bg_rain.png';
    case 'Clouds':
      return 'assets/bg_clouds.png';
    case 'Snow':
      return 'assets/bg_snow.png';
    default:
      return 'assets/bg_default.png';
  }
}

이미지는 BoxDecoration → backgroundImage 또는 Stack을 활용해 표시 가능.

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage(getBackgroundAsset(currentWeather)),
      fit: BoxFit.cover,
    ),
  ),
)

---

🎞️ 애니메이션 효과 추가

✅ 1. Fade 전환

AnimatedSwitcher(
  duration: Duration(milliseconds: 800),
  child: Image.asset(
    getBackgroundAsset(currentWeather),
    key: ValueKey(currentWeather),
    fit: BoxFit.cover,
  ),
)

✅ 2. Lottie 애니메이션

// pubspec.yaml
dependencies:
  lottie: ^2.6.0

Lottie.asset(
  'assets/animations/rain.json',
  width: double.infinity,
  fit: BoxFit.cover,
  repeat: true,
)

Lottie는 눈, 비, 구름, 번개 등 다양한 애니메이션을 추가할 때 매우 유용하다.

---

💡 감성 UI 팁

• 비 오는 날은 배경 + 흐린 텍스트 + 빗소리 조합
• 맑은 날은 밝은 그라데이션 + 햇살 애니메이션
• 애니메이션이 과하면 UX 저하 → 부드러운 전환에 집중

---

🧘 마무리하며

날씨 앱은 단순한 데이터 뷰어가 아니라 지금의 하늘을 담아내는 작은 창이다.

Flutter로 만드는 감성 날씨 앱에 애니메이션과 날씨 맞춤 배경을 더해보자.
앱을 켠 순간, 날씨가 느껴진다.

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