# 계획이 습관이 되도록 동기부여 해주는 앱

- 작성자: [다정한 바리스타](https://community.clauders.ai/member/imported-member-Dur70lv6jv)
- 공간: [Claude Code MVP 공장](https://community.clauders.ai/cto)
- 게시: 2026-01-18
- 연재: [Claude Code MVP 공장 시즌 6](https://community.clauders.ai/series/cto-season-6) 3/4편
- 태그: #CTO #OT과제 #안드로이드앱
- 주소: https://community.clauders.ai/cto/post/%EA%B3%84%ED%9A%8D%EC%9D%B4-%EC%8A%B5%EA%B4%80%EC%9D%B4-%EB%90%98%EB%8F%84%EB%A1%9D-%EB%8F%99%EA%B8%B0%EB%B6%80%EC%97%AC-%ED%95%B4%EC%A3%BC%EB%8A%94-%EC%95%B1-30ca3dd2-b7df-8f70-966e-4cb87c794092

---

## 소개

매일 계획한 일들을 해내도록 응원해 주는 앱을 구현해 보았어요.

## 진행 방법

구글 Stitch로 디자인했고, Claude가 개발해 주었어요.

# FocusUp Flutter 앱 구현 계획

## 프로젝트 개요

동기부여 및 할 일 관리 앱 "FocusUp"을 Flutter로 구현

## 사용자 확인 사항

- **프로젝트**: `code/` 폴더에 새 Flutter 프로젝트 생성

- **이미지**: 네트워크 이미지 사용 (디자인의 URL 활용)

- **기능**: UI + 기본 상태관리 (체크박스 토글, 모달 표시 등)

## 디자인 분석

### 화면 구성

1. **홈/웰컴 화면** (screen0) - 앱 메인 화면

2. **오늘의 계획 화면** (screen1) - 할 일 목록 및 진행률

3. **축하 모달** (screen2) - 할 일 완료 시 표시되는 팝업

### 디자인 시스템

- **Primary Color**: `#2BEE2B` (밝은 초록색)

- **Background Light**: `#F6F8F6`

- **Background Dark**: `#102210`

- **Font**: Plus Jakarta Sans (한글은 기본 폰트 사용)

- **아이콘**: Material Symbols

## 프로젝트 구조

```

code/

├── lib/

│ ├── main.dart

│ ├── theme/

│ │ └── app_theme.dart # 테마 및 색상 정의

│ ├── screens/

│ │ ├── home_screen.dart # 웰컴 화면

│ │ └── daily_plan_screen.dart # 오늘의 계획 화면

│ ├── widgets/

│ │ ├── glass_nav_bar.dart # 하단 네비게이션 바

│ │ ├── progress_card.dart # 진행률 카드

│ │ ├── motivational_banner.dart # 동기부여 배너

│ │ ├── task_item.dart # 할 일 아이템

│ │ └── celebration_modal.dart # 축하 모달

│ └── models/

│ └── task.dart # 할 일 데이터 모델

├── pubspec.yaml

└── assets/

└── images/

└── mountain_bg.jpg # 배경 이미지

```

## 구현 단계

### 1단계: Flutter 프로젝트 생성 및 설정

- `flutter create` 명령으로 프로젝트 생성

- `pubspec.yaml`에 필요한 의존성 추가

- `google_fonts` (폰트)

- `flutter_blur` 또는 `BackdropFilter` 사용

### 2단계: 테마 및 색상 설정 (`app_theme.dart`)

- Primary, background 색상 정의

- 텍스트 스타일 정의

- 버튼, 카드 스타일 정의

### 3단계: 홈 화면 구현 (`home_screen.dart`)

- 전체 화면 배경 이미지 (Stack + Positioned)

- 그라데이션 오버레이

- 상단 "FocusUp" 로고 + 알림 아이콘

- 중앙 동기부여 문구

- "Start Today" 버튼

- 하단 글래스 네비게이션 바

### 4단계: 오늘의 계획 화면 구현 (`daily_plan_screen.dart`)

- 상단 앱바 (날짜 아이콘, 검색, 알림)

- 날짜 표시

- 진행률 카드

- 동기부여 배너

- 할 일 목록 (ListView)

- 하단 인용구 이미지

- FAB (추가 버튼)

- 하단 탭 바

### 5단계: 축하 모달 구현 (`celebration_modal.dart`)

- 반투명 배경 오버레이

- 컨페티 효과 (선택적)

- 트로피 아이콘 (원형 그라데이션 배경)

- 축하 메시지

- "계속하기" 버튼

### 6단계: 네비게이션 및 상태 관리

- 화면 간 네비게이션 설정

- 할 일 체크 시 모달 표시 로직

## 주요 위젯 상세

### GlassNavBar

- `ClipRRect` + `BackdropFilter`로 블러 효과

- 4개 탭: 홈, 분석, 업적, 프로필

### TaskItem

- `Checkbox` + 텍스트 + 시간

- 체크 시 취소선 및 투명도 변경

- 애니메이션 효과

### CelebrationModal

- `showDialog` 또는 `Overlay` 사용

- 트로피 아이콘에 그라데이션 적용

## 검증 방법

1. `flutter run` 명령으로 앱 실행

2. 각 화면이 디자인과 일치하는지 확인

3. 할 일 체크 시 모달이 정상 표시되는지 확인

4. 네비게이션이 정상 작동하는지 확인

## 생성할 파일 목록

├── lib/

│ ├── main.dart # 앱 진입점

│ ├── theme/

│ │ └── app_theme.dart # 테마 정의

│ ├── models/

│ │ └── task.dart # Task 모델

│ ├── screens/

│ │ ├── home_screen.dart # 웰컴 화면

│ │ └── daily_plan_screen.dart # 오늘의 계획 화면

│ └── widgets/

│ ├── glass_container.dart # 글래스 효과 컨테이너

│ ├── bottom_nav_bar.dart # 하단 네비게이션

│ ├── progress_card.dart # 진행률 카드

│ ├── motivational_banner.dart # 동기부여 배너

│ ├── task_item.dart # 할 일 아이템

│ └── celebration_dialog.dart # 축하 다이얼로그

└── pubspec.yaml # 의존성 설정

```

## 의존성 (pubspec.yaml)

```yaml

dependencies:

flutter:

sdk: flutter

google_fonts: ^6.1.0

cached_network_image: ^3.3.0

## 결과와 배운 점

-> 음....하면 된다?

-> 환경설정 하는게 너무 오래 걸렸어요. ㅠ.ㅜ

-> 도움이 될만한 사례글을 쓰고 싶어요. ^^

## 도움 받은 글

-> 클로드 셋팅관련한 클로더즈 글들이 도움이 되었어요.