# Flutter 앱 성능을 한 단계 끌어올리는 방법 – Hive 캐시, 재생성 흐름, 에러 카드, GitHub Actions 적용 가이드

---

# # 서론: “앱이 느려서 사용자가 떠난다?”

Flutter로 만든 **Daily‑Recap** 같은 일일 요약 앱은 사용자에게 매일 새로운 정보를 제공해야 하기에 **빠른 로딩**과 **안정적인 동작**이 필수입니다. 하지만 네트워크 호출이 빈번하거나 오류 처리 로직이 부족하면 사용자는 금방 이탈하게 됩니다. 이번 포스팅에서는 **Hive 캐시**, **재생성 흐름(regenerate flow)**, **에러 카드**, 그리고 **GitHub Actions**를 활용해 Flutter 앱을 **성능·안정성·자동화** 측면에서 개선하는 실전 방법을 초보자도 이해하기 쉽게 정리합니다.

> **핵심 키워드**: Flutter, Hive 캐시, GitHub Actions

---

# # 1️⃣ Hive 캐시로 데이터 로딩 속도 2배 올리기

## # 1-1. Hive란?

Hive는 **경량 NoSQL 로컬 데이터베이스**로, 파일 기반 저장소이며 **플러터에서 가장 빠른 키‑값 저장소** 중 하나입니다. SharedPreferences보다 큰 데이터를 다루기에 적합하고, 비동기 API를 제공해 UI 스레드 차단을 방지합니다.

## # 1-2. 프로젝트에 Hive 도입하기

```
yaml

# pubspec.yaml

dependencies:

  hive: ^2.2.3

  hive_flutter: ^1.1.0

  path_provider: ^2.0.15

```

```
dart

// main.dart

await Hive.initFlutter();               // 초기화

await Hive.openBox('dailyRecapBox');    // 박스 열기

```

## # 1-3. API 응답을 캐시하는 흐름

1. **앱 시작** → 로컬 `dailyRecapBox`에서 최신 요약 조회

2. **캐시 존재** → UI에 바로 표시 (네트워크 대기 없음)

3. **동시 백그라운드** → 최신 데이터 fetch → 성공 시 캐시 업데이트

4. **오류 발생** → 기존 캐시 유지 + 에러 카드 표시

이렇게 하면 **첫 화면 로딩이 0.5초 이하**로 단축되고, 네트워크가 불안정해도 사용자에게 빈 화면을 보여주지 않게 됩니다.

---

# # 2️⃣ 재생성 흐름(regenerate flow)으로 최신 데이터 보장

## # 2-1. 왜 재생성 흐름이 필요한가?

일일 요약은 **매일 새롭게 생성**돼야 합니다. 사용자가 앱을 오래 열어두면 오래된 데이터가 표시될 위험이 있습니다. 따라서 일정 주기(예: 24 시간)마다 데이터를 **자동 재생성**하고 캐시를 갱신해야 합니다.

## # 2-2. 구현 방법

### # (1) 타이머 기반 자동 재생성

```
dart

Timer.periodic(Duration(hours: 24), (_) async {

  await _fetchAndCacheDailyRecap();

});

```

### # (2) 사용자가 직접 강제 재생성

```
dart

ElevatedButton(

  onPressed: () => _fetchAndCacheDailyRecap(),

  child: Text('오늘 요약 새로고침')

);

```

### # (3) 재생성 로직

```
dart

Future<void> _fetchAndCacheDailyRecap() async {

  try {

    final response = await http.get(Uri.parse('https://api.example.com/recap'));

    if (response.statusCode == 200) {

      final box = Hive.box('dailyRecapBox');

      await box.put('latest', response.body);

    } else {

      throw Exception('API 오류');

    }

  } catch (e) {

    // 에러는 에러 카드에 위임

    _showErrorCard(e.toString());

  }

}

```

이 흐름을 적용하면 **데이터 최신성**을 보장하면서도 **네트워크 비용**을 최소화할 수 있습니다.

---

# # 3️⃣ 에러 카드로 사용자 경험(UX) 향상

## # 3-1. 에러를 숨기지 말고 시각화하라

네트워크 오류, 파싱 실패 등은 **빈 화면** 대신 **에러 카드**를 띄워 사용자에게 상황을 명확히 알려야 합니다.

## # 3-2. 에러 카드 UI 예시

```
dart

class ErrorCard extends StatelessWidget {

  final String message;

  const ErrorCard({required this.message});

  @override

  Widget build(BuildContext context) {

    return Card(

      color: Colors.red.shade50,

      margin: EdgeInsets.all(16),

      child: ListTile(

        leading: Icon(Icons.error, color: Colors.red),

        title: Text('데이터를 불러오는 데 실패했어요.'),

        subtitle: Text(message),

        trailing: TextButton(

          child: Text('다시 시도'),

          onPressed: () => _fetchAndCacheDailyRecap(),

        ),

      ),

    );

  }

}

```

## # 3-3. 에러 카드 표시 로직

```
dart

if (snapshot.hasError) {

  return ErrorCard(message: snapshot.error.toString());

}

```

에러 카드는 **문제 원인**과 **재시도 버튼**을 제공해 사용자가 스스로 해결할 수 있게 돕습니다.

---

# # 4️⃣ GitHub Actions로 CI/CD 자동화

## # 4-1. 왜 GitHub Actions인가?

앱을 **빌드·테스트·배포**하는 과정을 자동화하면 **인간 실수**를 줄이고, **배포 속도**를 크게 향상시킬 수 있습니다. Flutter 프로젝트에 최적화된 워크플로우를 만들면 PR마다 자동 테스트와 린트 검사를 수행하고, 태그(tag) 기반 배포까지 자동화됩니다.

## # 4-2. 기본 워크플로우 파일 (`.github/workflows/flutter.yml`)

```
yaml

name: Flutter CI

on:

  push:

    branches: [ main ]

  pull_request:

    branches: [ main ]

jobs:

  build:

    runs-on: ubuntu-latest

    steps:

      - uses: actions/checkout@v3

      - name: Flutter 설치

        uses: subosito/flutter-action@v2

        with:

          flutter-version: '3.19.0'

      - name: 의존성 캐시

        uses: actions/cache@v3

        with:

          path: |

            ~/.pub-cache

            .dart_tool

          key: ${{ runner.os }}-pub-${{ hashFiles('pubspec.yaml') }}

      - name: 의존성 설치

        run: flutter pub get

      - name: 코드 분석

        run: flutter analyze

      - name: 테스트 실행

        run: flutter test --no-pub

      - name: APK 빌드 (Release)

        if: github.ref == 'refs/heads/main'

        run: flutter build apk --release

```

## # 4-3. 배포 자동화 (GitHub Pages 혹은 Firebase App Distribution)

- **Firebase App Distribution**: `firebase-action`을 추가해 PR마다 테스트용 앱을 자동 전송.

- **GitHub Pages**: 웹 버전(`flutter build web`)을 빌드해 `gh-pages` 브랜치에 푸시.

CI/CD가 적용되면 **코드 푸시 → 자동 테스트 → 자동 빌드 → 자동 배포**가 한 번에 이루어져 개발 효율이 크게 상승합니다.

---

# # 결론: 지금 바로 적용하고 차이를 체감하세요!

Flutter 앱의 **성능**과 **안정성**을 높이는 핵심은 **로컬 캐시(Hive)**, **데이터 재생성 흐름**, **명확한 에러 처리**, 그리고 **자동화된 CI/CD(GitHub Actions)**에 있습니다.

1️⃣ 프로젝트에 Hive를 도입해 첫 화면 로딩을 2배 빠르게 만들고,

2️⃣ 24시간 주기의 재생성 흐름으로 최신 데이터를 보장하고,

3️⃣ 에러 카드를 통해 사용자가 문제를 바로 인식·해결하게 하며,

4️⃣ GitHub Actions로 빌드·테스트·배포를 자동화하면 개발 속도가 눈에 띄게 빨라집니다.

**지금 바로** 위 네 가지 항목을 하나씩 적용해 보세요. 작은 변화가 모여 **Daily‑Recap** 같은 앱이 **사용자에게 사랑받는 서비스**로 거듭날 수 있습니다.

> **행동 유도**: 이 포스팅이 도움이 되었다면, 댓글로 여러분의 적용 경험을 공유하거나, GitHub 레포에 ⭐️를 눌러 주세요! 그리고 최신 Flutter 개발 팁을 놓치지 않으려면 구독 버튼도 잊지 마세요. 🚀