날씨 앱 UI 디자인 — 깔끔하고 직관적인 레이아웃

Flutter로 날씨 앱을 만든다면 가장 먼저 고민할 것은 정보를 어떻게 보여줄까다.
기온, 날씨 상태, 지역 정보, 시간, 아이콘… 많은 요소를 간결하게 배치해야 보는 사람이 편안하다.

이번 글에서는 날씨 앱의 기본 UI 구조부터 디자인 감성까지 고려한 Flutter 레이아웃을 설계해본다.

---

🌤️ 핵심 요소 정리

기본적으로 날씨 앱은 다음과 같은 요소를 포함한다:

• 지역 이름 (ex. Seoul)
• 현재 온도 및 날씨 상태 (ex. 23°C, 맑음)
• 아이콘 또는 일러스트 (ex. 해, 구름)
• 습도, 풍속, 체감온도 등의 부가 정보
• 시간대별 or 주간 날씨

이 요소들을 얼마나 조화롭게 배치하느냐에 따라 앱의 완성도가 달라진다.

---

📐 기본 레이아웃 구조 잡기

Column을 기반으로 전체 화면을 세 부분으로 나눈다:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    _buildTopSection(),
    _buildMiddleSection(),
    _buildBottomSection(),
  ],
)

- 상단: 지역 + 시간 + 아이콘 - 중단: 현재 온도, 날씨 설명 - 하단: 시간대별 예보 or 주간 예보

---

🎨 디자인 감성을 입히기

✅ 상단: 지역 및 아이콘

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text("Seoul", style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
        Text("2025.06.06 14:00", style: TextStyle(fontSize: 16, color: Colors.grey)),
      ],
    ),
    Image.asset('assets/sun.png', width: 80),
  ],
)

✅ 중단: 현재 온도 및 상태

Column(
  children: [
    Text("23°C", style: TextStyle(fontSize: 72, fontWeight: FontWeight.w300)),
    Text("맑음", style: TextStyle(fontSize: 24)),
  ],
)

✅ 하단: 시간대별 예보

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    _buildHourlyCard("15:00", "25°C", "sun.png"),
    _buildHourlyCard("16:00", "26°C", "cloud.png"),
    _buildHourlyCard("17:00", "24°C", "rain.png"),
  ],
)

카드를 가로로 스크롤하게 만들면 날씨 흐름이 한눈에 들어온다.

---

🌈 색상과 폰트로 감성 더하기

• 배경은 그라데이션으로 부드럽게
• 폰트는 Google Fonts 활용해 날씨 앱에 어울리는 감성 서체 사용
• 날씨 상태에 따라 배경/아이콘 자동 전환

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue.shade200, Colors.white],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    ),
  ),
)

---

🧘 마무리하며

Flutter로 만드는 날씨 앱은 단순한 정보 앱이 아니다.
그건 하루의 분위기를 전달하는 감성 도구다.

정확한 정보 + 감성 있는 디자인 그게 바로 좋은 날씨 앱의 기준이다.

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