소개
매일 계획한 일들을 해내도록 응원해 주는 앱을 구현해 보았어요.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
구글 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
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
-> 음....하면 된다?
과정 중에 어떤 시행착오를 겪었나요?
-> 환경설정 하는게 너무 오래 걸렸어요. ㅠ.ㅜ
앞으로의 계획이 있다면 들려주세요.
-> 도움이 될만한 사례글을 쓰고 싶어요. ^^
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
-> 클로드 셋팅관련한 지피터스 글들이 도움이 되었어요.
