온도, 습도, 바람 정보 시각화하기

기온, 습도, 풍속… 날씨 정보를 숫자로만 보여주면 사용자에게 큰 인상을 주기 어렵다.
이번 글에서는 Flutter에서 온도, 습도, 바람을 감각적으로 시각화하는 UI를 구현해본다.

---

🌡️ 온도 게이지 UI 만들기

현재 기온을 수은주 형태로 표현하면 사용자에게 체감도를 전달할 수 있다.

// flutter_gauge 패키지 추천
dependencies:
  flutter_gauge: ^1.0.4

FlutterGauge(
  handSize: 30,
  width: 200,
  index: temperature,
  fontFamily: "Roboto",
  end: 50,
  number: Number.endAndCenter,
  secondsMarker: SecondsMarker.secondsAndMinute,
  isCircle: false,
  counterAlign: CounterAlign.center,
  counterStyle: TextStyle(fontSize: 32),
)

혹은 LinearProgressIndicator로 간단한 수평 게이지를 구현할 수도 있다.

---

💧 습도 시각화 — 원형 게이지

percent_indicator 패키지를 사용하면 원형 게이지 형태로 습도를 표현할 수 있다.

// pubspec.yaml
dependencies:
  percent_indicator: ^4.2.2

CircularPercentIndicator(
  radius: 60.0,
  lineWidth: 10.0,
  percent: humidity / 100,
  center: Text("$humidity%", style: TextStyle(fontSize: 20)),
  progressColor: Colors.blue,
  backgroundColor: Colors.grey[300],
  circularStrokeCap: CircularStrokeCap.round,
)

습도 수치만 보여주는 대신, 시각적으로 얼마나 ‘높은지’ 직관적으로 보여줄 수 있다.

---

🌬️ 바람 정보 — 방향 + 속도 표현

✅ 풍속 (m/s) 표시

Row(
  children: [
    Icon(Icons.air, color: Colors.blueGrey),
    SizedBox(width: 8),
    Text("풍속: ${windSpeed}m/s", style: TextStyle(fontSize: 16)),
  ],
)

✅ 풍향 (deg → 방향) 변환

String windDirection(int deg) {
  const directions = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
  return directions[((deg % 360) / 45).round() % 8];
}

✅ 나침반 아이콘 + 회전 애니메이션

Transform.rotate(
  angle: windDegree * pi / 180,
  child: Icon(Icons.navigation, size: 40, color: Colors.grey),
)

아이콘을 회전시켜 바람 방향을 실제 나침반처럼 표현할 수 있다.

---

📊 전체 구성 예시 UI

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    _buildTempGauge(),
    _buildHumidityIndicator(),
    _buildWindInfo(),
  ],
)

세 가지 주요 날씨 요소를 한눈에 보여주는 카드 형태 또는 Row 구성이 UX에 효과적이다.

---

🧘 마무리하며

날씨 앱은 숫자를 보여주는 앱이 아니다.
기온의 따뜻함, 습도의 무거움, 바람의 방향을 직관적인 시각화로 표현할 수 있어야 진짜 앱이 된다.

Flutter로 당신만의 감각적인 날씨 UI를 완성해보자.

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