[Flutter] AI 턴제 내러티브 게임 '힘내라 권대리' 개발기

티스토리 뷰

Flutter Project/힘내라 권대리

[Flutter] AI 턴제 내러티브 게임 '힘내라 권대리' 개발기 - GPT 스토리 생성 + 오디오 시스템

권퓨터: Kwonputer 2026. 2. 2. 15:09

DOWNLOAD

힘내라 권대리 다운로드

Android iOS

SUMMARY

힘내라 권대리 - Flutter AI 턴제 내러티브 게임

한국 직장인의 삶을 시뮬레이션하는 AI 기반 턴제 내러티브 게임 모바일 앱 개발기입니다.

3개 스탯(체력/정신/체면)과 3가지 사망 엔딩(과로사/번아웃/실직)을 갖춘,

GPT-4o-mini 기반 매 턴 에피소드와 선택지를 생성하는 게임입니다.

주요 기술적 도전: AI 응답 대기 UX 최적화, 오디오 라이프사이클 동기화, Clean Architecture + MVVM + Riverpod

TABLE OF CONTENTS

왜 이 앱을 만들었나? 주요 기능 소개 기술적 도전과 해결 아키텍처 결론

WHY

왜 이 앱을 만들었나?

"오늘도 야근이다, 권대리" - 한국 직장인이라면 누구나 공감할 수 있는 이야기를 게임으로 만들고 싶었습니다.

GPT의 창작 능력을 활용하면 매번 다른 스토리가 펼쳐지는 무한 리플레이 게임을 만들 수 있겠다는 생각이 들었습니다.

단순히 텍스트를 생성하는 것을 넘어서, 캐릭터 감정, 스탯 변화, 사망 엔딩까지 게임적 요소를 갖춘 완성도 높은 앱을 목표로 했습니다.

Flutter로 Android/iOS 동시 지원, Clean Architecture로 유지보수성 확보, Riverpod으로 반응형 상태관리를 구현했습니다.

FEATURES

주요 기능 소개

AI 턴제 내러티브 게임 UI

에피소드 표시 — GPT가 생성한 150-250자 분량의 에피소드를 flutter_html로 렌더링합니다.

선택지 인터랙션 — 2-3개의 선택지 중 하나를 선택하면 다음 턴이 진행됩니다.

스탯 바 애니메이션 — 체력/정신/체면 3개 스탯이 0-100 범위에서 실시간으로 시각화됩니다.

3개 스탯 + 3가지 사망 엔딩

체력(HP) <= 0 — 과로사: "결국 쓰러졌다. 누군가 119를 불렀다."

정신(Stress) >= 100 — 번아웃: "더는 무리였다. 사직서를 던졌다."

체면(Fatigue) >= 100 — 실직: "책상이 마지막 침대가 되었다."

AudioManager BGM/SFX 시스템

just_audio 기반 — 배경음악(BGM)과 효과음(SFX)을 싱글톤 매니저로 전역 관리합니다.

라이프사이클 연동 — 앱 백그라운드 전환 시 자동 일시정지, 포그라운드 복귀 시 자동 재개됩니다.

설정 영구 저장 — 사운드 ON/OFF 설정이 UserSettingsDatabase(Hive)에 저장됩니다.

7명 캐릭터 + 감정 이미지 시스템

메인 캐릭터 권대리와 6명의 서브 캐릭터가 각각 5가지 감정별 이미지를 가집니다.

권대리 강 전무 한 이사 정 과장

오 부장 임 선임 이 대리

3중 로그인 + AbusePrevention

Kakao/Apple/Guest — 3가지 로그인 방식을 지원하여 사용자 접근성을 높였습니다.

TokenManagerService — 24시간 전 자동 갱신, 30분 주기 검증으로 인증 상태를 관리합니다.

AbusePrevention DB — 가입 보너스/출석 기록을 영구 저장하여 로그아웃/탈퇴 후 재가입 시 악용을 방지합니다.

TROUBLESHOOTING

기술적 도전과 해결

PROBLEM 01

AI 응답 대기 시간과 사용자 경험

GPT API 응답 시간이 5-30초로 불확실하고, Lambda Cold Start가 결합되면 최대 35초까지 대기가 발생했습니다.

단순 로딩 스피너만으로는 사용자가 앱이 멈춘 것으로 오인하고 이탈하는 문제가 있었습니다.

SOLUTION — 로딩을 게임 경험의 일부로 전환

// EpisodeLoadingWidget 구성 요소
1. AnimatedTextKit - 타이핑 애니메이션으로 "권대리의 하루가 시작됩니다..."
2. Lottie - 캐릭터 애니메이션으로 시선 유도
3. 진행 힌트 메시지 - "AI가 다음 에피소드를 생성 중입니다"
4. Shimmer - 결과 영역 미리 표시로 기대감 형성
5. BGM 유지 - AudioManager로 로딩 중에도 음악 재생

PROBLEM 02

오디오 라이프사이클과 상태 동기화

BGM이 앱 백그라운드 전환 시 계속 재생되거나, 페이지 전환 시 중복 재생되거나, 사운드 설정이 즉시 반영되지 않는 문제가 있었습니다.

SOLUTION — AudioManager 싱글톤 + 라이프사이클 연동

// main.dart에서 라이프사이클 감지
class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.paused:
        AudioManager().pauseBGM();  // 백그라운드 -> 일시정지
        break;
      case AppLifecycleState.resumed:
        AudioManager().resumeBGM(); // 포그라운드 -> 재개
        break;
    }
  }
}

// UserSettingsDatabase(Hive)에 사운드 설정 영구 저장
// SoundButton 위젯으로 설정 변경 즉시 반영

PROBLEM 03

Hive DB 초기화 순서와 의존성 관리

5개의 Hive DB(UserSettings/AbusePrevention/Cache/AnnouncementRead/Memorial)를 사용하면서, 초기화 순서와 DI 컨테이너 등록 순서가 꼬이는 문제가 발생했습니다.

SOLUTION — Injectable @preResolve + 명시적 초기화 순서

// main.dart 초기화 순서
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 1. Hive 초기화 (가장 먼저)
  await Hive.initFlutter();

  // 2. 각 DB Box 열기
  await Future.wait([
    Hive.openBox('userSettings'),
    Hive.openBox('abusePrevention'),  // 절대 삭제 안 됨
    Hive.openBox('cache'),
    Hive.openBox('announcementRead'),
    Hive.openBox('memorial'),
  ]);

  // 3. DI 컨테이너 초기화
  await configureDependencies();

  // 4. Firebase 초기화
  await Firebase.initializeApp();
}

ARCHITECTURE

아키텍처

Clean Architecture + MVVM + Riverpod

lib/
├── presenter/           # Presentation Layer
│   ├── pages/          # 12개 UI 화면 (Login/Game/MyCharacters/Settings)
│   ├── viewmodels/     # Riverpod 기반 ViewModel (BaseViewModel 상속)
│   ├── widgets/        # 재사용 위젯 (common/dialog/card)
│   └── styles/         # KColors, Themes, TextStyles
│
├── domain/              # Domain Layer
│   ├── models/         # users/characters/games/announcements 모델
│   ├── repositories/   # Repository 인터페이스
│   └── usecases/       # 32개+ UseCase (user/character/game/point)
│
├── data/                # Data Layer
│   ├── repositories/   # Repository 구현체
│   ├── services/       # ApiService/TokenManagerService
│   ├── dbs/           # Hive 5개 DB
│   └── configs/        # ApiConfig (Dio 인터셉터)
│
└── di/                  # GetIt + Injectable DI

주요 기술 스택

Framework — Flutter 3.32.1, Dart SDK ^3.5.4

상태관리 — flutter_riverpod 2.6.1 + riverpod_annotation 2.6.1

라우팅 — GoRouter 15.1.2 + go_transitions 0.8.1

DI — GetIt 8.0.3 + Injectable 2.5.0

로컬 DB — Hive 2.2.3 (5개 DB)

네트워킹 — Dio 5.8.0 (인터셉터 기반 토큰 주입)

오디오 — just_audio 0.10.4

애니메이션 — flutter_animate 4.5.2, Lottie 3.2.0, animated_text_kit 4.2.3

코드 규모

154개 Dart 파일 — 약 30,400줄

12개 페이지 — Login, Game, MyCharacters, Settings 등