아이콘과 애니메이션으로 날씨 표현 개선

기온, 상태, 습도 같은 날씨 데이터는 숫자로도 표현할 수 있지만, 아이콘과 애니메이션이 함께할 때 훨씬 직관적이고 감성적이다.

이번 글에서는 Flutter에서 날씨 상태별 아이콘과 Lottie 애니메이션을 적용해 UI를 생동감 있게 만드는 방법을 알아보자.

---

🌤️ OpenWeather 날씨 코드 이해하기

OpenWeather API는 상태에 따라 icon 또는 main 값을 반환한다:

"weather": [
  {
    "main": "Rain",
    "description": "light rain",
    "icon": "10d"
  }
]

이 값을 기반으로 이미지 또는 애니메이션 리소스를 연결한다.

---

📌 날씨 상태별 아이콘 매핑

String getWeatherIcon(String main) {
  switch (main) {
    case 'Clear':
      return 'assets/icons/sun.png';
    case 'Clouds':
      return 'assets/icons/cloud.png';
    case 'Rain':
      return 'assets/icons/rain.png';
    case 'Snow':
      return 'assets/icons/snow.png';
    case 'Thunderstorm':
      return 'assets/icons/thunder.png';
    default:
      return 'assets/icons/default.png';
  }
}

간단한 Image.asset()으로 날씨 상태에 따라 알맞은 아이콘을 노출시킬 수 있다.

---

🎞️ Lottie 애니메이션 활용

정적인 이미지보다 더 생생한 날씨 표현이 필요하다면 Lottie 애니메이션을 사용해보자.

// pubspec.yaml
dependencies:
  lottie: ^2.6.0

String getLottieAsset(String main) {
  switch (main) {
    case 'Clear':
      return 'assets/lottie/sunny.json';
    case 'Clouds':
      return 'assets/lottie/cloudy.json';
    case 'Rain':
      return 'assets/lottie/rain.json';
    case 'Snow':
      return 'assets/lottie/snow.json';
    default:
      return 'assets/lottie/default.json';
  }
}

Lottie.asset(
  getLottieAsset(weatherMain),
  width: 150,
  repeat: true,
  animate: true,
)

Lottie JSON 파일은 LottieFiles에서 쉽게 구할 수 있다.

---

🎨 감성 디자인 팁

• 맑음 → 햇살이 퍼지는 애니메이션
• 비 → 물방울 떨어지는 효과
• 눈 → 하늘에서 눈이 흩날리는 모션
• 아이콘/애니메이션 색상은 배경과 조화롭게

UI 배경과 어울리는 밝기나 애니메이션 색상 조정도 중요하다.

---

🧘 마무리하며

Flutter로 만드는 날씨 앱이 더 사람다운 이유는 데이터에 감정을 입힐 수 있기 때문이다.

정적인 숫자 대신 움직이는 구름, 따뜻한 햇살, 촉촉한 비로 표현해보자.
보는 순간 느껴지는 날씨가 진짜 앱의 매력이다.

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