블로그 보러 가기Flutter 앱 만들기 시리즈5
  1. 01. Flutter로 앱을 만들어 보는 결심
  2. 02. 앱 아이디어 자동 추천 시스템
  3. 03. 앱 주제 선정 및 리서치 - Min Habit
  4. 04. 서비스 방향성 및 MVP 기능 정의하기
  5. 05. 플러터 앱 만들기 - 점심 메뉴 및 커피 룰렛

프로젝트 개요

일본의 미니멀 습관 앱 Min Habit을 벤치마킹하여 만든 습관 관리 앱입니다. 기존 습관 앱의 가장 큰 문제인 "기록이 귀찮아서 포기"를 해결하기 위해 자동 기록 기능을 핵심 차별화 포인트로 설정했습니다.

웹에서 네이버 블로그 발행 시 자동 기록, 모바일에서 활동량 자동 추적 등 앱 외부에서도 습관을 기록할 수 있는 원격 기록 API를 제공합니다. Flutter 학습을 위한 실전 프로젝트로, 에이전트 기반 개발 파이프라인을 적용했습니다.

FlutterDartFirebaseFirestoreRiverpodGoRouterNext.jsVercel

프로젝트 구조

min-habit-project/          # 모노레포
├── min_habit/              # Flutter 앱 (모바일)
│   ├── lib/
│   │   ├── main.dart
│   │   ├── core/           # 공통 모듈 (theme, utils, widgets)
│   │   ├── features/
│   │   │   ├── cloud_sync/          # 클라우드 동기화
│   │   │   ├── gnb/                 # 글로벌 네비게이션
│   │   │   ├── mobile_auto_record/  # 모바일 자동 기록
│   │   │   ├── web_auto_record/     # 웹 자동 기록
│   │   │   ├── stats/               # 통계
│   │   │   └── subscription_plan/   # 구독 플랜
│   │   └── routing/        # GoRouter 설정
│   └── docs/               # PRD, 설계서, 리뷰
│
├── min-habit-admin/        # Next.js 백엔드 (Vercel)
│   ├── app/
│   │   ├── h/[token]/route.ts     # 원격 기록 API
│   │   ├── api/stats/             # 통계 API
│   │   └── dashboard/             # 웹 대시보드
│   └── lib/
│       ├── firebase/admin.ts      # Firebase Admin 싱글톤
│       └── services/              # FCM, 토큰 검증
│
├── firebase/               # Firestore 규칙, Functions
└── shared/                 # 공통 문서

Flutter 앱 (min_habit)

Feature-Based Architecture로 기능별 모듈 분리. Riverpod 상태 관리, GoRouter 라우팅, Freezed 모델로 체계적인 Flutter 앱 구조를 갖춥니다.

Next.js 어드민 (min-habit-admin)

원격 습관 기록 API와 웹 대시보드를 제공하는 백엔드. Vercel에 배포되며, Firebase Admin SDK로 Firestore와 FCM을 처리합니다.

주요 기능

자동 기록 시스템

웹에서 블로그 발행 시, 모바일에서 활동량 감지 시 자동으로 습관이 기록됩니다. 원격 기록 API(/h/[token])로 앱 외부에서도 이벤트를 전송할 수 있습니다.

비처벌적 설계

연속 기록이 깨져도 자책하지 않는 디자인 철학을 적용했습니다. 실패에 대한 압박 대신 작은 성공의 축적을 강조하는 미니멀 UX입니다.

통계 대시보드

주간/월간 습관 달성률을 캘린더 형태로 시각화합니다. Next.js 웹 대시보드에서 상세 통계를 확인할 수 있습니다.

에이전트 기반 개발 파이프라인

PRD → 설계 → 리뷰 → 구현 → 코드 리뷰의 4단계 자동화 파이프라인. /build-feature 원커맨드로 전체 개발 프로세스를 실행합니다.

사용 흐름

01
습관 등록

추적할 습관과 아이콘을 설정, 미니멀한 원터치 UI로 구성

02
자동/수동 기록

원격 API로 자동 기록되거나, 앱에서 한 번 탭으로 수동 기록

03
FCM 알림

설정한 시간에 푸시 알림으로 습관 리마인드

04
통계 확인

캘린더와 차트로 주간/월간 달성률 시각화

05
클라우드 동기화

Firebase 기반 멀티 디바이스 데이터 동기화

프로젝트 규모

3Repositories (Monorepo)
10Feature Modules
4-PhaseAgent Pipeline
Full-StackFlutter + Next.js + Firebase

댓글

불러오는 중...