소개
시도하고자 했던 것과 그 이유를 알려주세요.
이번에 시도한 것은 Claude와 함께 앱 개발 계획을 세우고, Claude Code를 활용해 실제 Flutter 앱을 제작하는 것이었습니다.
제가 만들고 싶었던 앱은 POP! 할일 앱입니다. 일반적인 할일 앱처럼 체크박스를 누르는 방식이 아니라, 할일을 둥근 카드로 보여주고 완료하면 카드가 “팡!” 하고 터지는 느낌의 앱을 만들고 싶었습니다.
처음 아이디어는 스마트폰 홈화면 위젯에서 할일을 풍선처럼 보여주고, 완료하면 터뜨리는 방식이었습니다. 하지만 기획 과정에서 Android 홈화면 위젯은 드래그나 복잡한 애니메이션에 제약이 있다는 것을 알게 되었고, 구조를 다시 정리했습니다.
그래서 최종적으로는 다음과 같이 역할을 나누었습니다.
앱 안에서는 할일 추가, 완료 애니메이션, 완료 목록, 복원 기능을 구현한다.
홈화면 위젯은 현재 할일을 보여주는 용도로 사용한다.
할일은 서버 없이 로컬 저장 방식으로 관 리한다.
이 프로젝트를 시도한 이유는 단순히 앱 하나를 만드는 것보다, AI와 대화하면서 아이디어를 구체화하고, PRD와 개발 계획을 만든 뒤, Claude Code로 실제 구현까지 이어지는 흐름을 경험해보고 싶었기 때문입니다.
특히 교육 현장에서 학생들에게 “AI로 앱을 만든다”는 말을 설명할 때, 단순한 예시보다 제가 직접 만든 사례가 있으면 훨씬 설득력 있게 전달할 수 있을 것 같았습니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
사용한 도구는 크게 세 가지입니다.
첫째, Claude를 사용해 앱 아이디어를 정리했습니다.
처음에는 “홈화면에서 풍선처럼 움직이는 할일 위젯”이라는 아이디어가 있었는데, Claude와 대화하면서 실제 Android 위젯의 한계, 앱과 위젯의 역할 분리, MVP 범위 등을 정리했습니다.
둘째, Claude Code를 사용해 실제 Flutter 앱을 제작했습니다.
프로젝트계획용 MD 문서를 Claude Code에 전달하고, Phase별로 개발을 진행했습니다. 한 번에 모든 기능을 만들기보다는 Phase 1부터 Phase 4까지 나누어 기본 구조, 핵심 기능, 홈화면 위젯, 빌드 검증 순서로 진행했습니다.
셋째, Flutter / Dart / Hive / home_widget을 사용했습니다.
Flutter로 Android 앱을 만들고, Hive로 로컬 저장을 처리했습니다. home_widget 패키지를 활용해 앱의 할일 데이터를 Android 홈화면 위젯과 연동했습니다.
전체 개발 흐름
1단계: 앱 기획 정리
처음에는 Claude와 대화하면서 다음 내용을 정리했습니다.
앱 이름: POP!
핵심 컨셉: 할일을 카드로 보여주고 완료하면 터뜨리는 앱
플랫폼: Android
저장 방식: 로컬 저장
주요 기능: 할일 추가, 우선순위 색상, 완료 애니메이션, 완료 목록, 복원, 홈화면 위젯
디자인: 다크 테마, 둥근 카드, 우선순위별 색상
이 내용을 바탕으로 프로젝트계획용_POP_project.md 문서를 만들었습니다. 이 문서는 Claude Code에서 바로 개발을 시작할 수 있도록 만든 앱 개발 계획서 역할을 했습니다.
2단계: Phase 1 — 기본 구조 만들기
Phase 1에서는 앱의 기본 구조를 먼저 만들었습니다.
구현한 내용은 다음과 같습니다.
Flutter 프로젝트 생성
Hive 로컬 저장소 설정
Todo 데이터 모델 작성
우선순위 enum 작성
다크 테마 설정
할일 카드 UI 구현
2열 그리드 형태의 메인 화면 구현
이 단계에서는 아직 할일 추가나 완료 기능은 넣지 않고, 앱의 뼈대와 화면 구조를 만드는 데 집중했습니다.
3단계: Phase 2 — 핵심 기능 구현
Phase 2에서는 실제 할일 앱으로 사용할 수 있는 기능을 구현했습니다.
구현한 기능은 다음과 같습니다.
할일 추가 바텀시트
우선순위 선택 버튼
완료 시 카드가 커졌다가 사라지는 애니메이션
12개의 파티클이 사방으로 퍼지는 터뜨리기 효과
완료 목록 화면
완료한 할일 복원 기능
이 단계에서 가장 재미있었던 부분은 “완료”를 단순한 체크가 아니라 시각적인 보상 경험으로 바꾼 점이었습니다. 할일을 끝냈을 때 카드가 사라지고 파티클이 퍼지니, 앱의 개성이 확실히 살아났습니다.
[캡처 이미지 삽입 추천 3: 할일 카드 화면]
[캡처 이미지 삽입 추천 4: 할일 추가 바텀시트 화면]
[캡처 이미지 삽입 추천 5: 완료 애니메이션 장면]
4단계: Phase 3 — Android 홈화면 위젯 연동
Phase 3에서는 앱과 Android 홈화면 위젯을 연동했습니다.
처음 아이디어는 홈화면 위젯에서도 풍선을 직접 움직이고 터뜨리는 것이었지만, Android 위젯은 RemoteViews 기반이라 복잡한 애니메이션이나 드래그 상호작용이 어렵다는 것을 알게 되었습니다.
그래서 홈화면 위젯은 다음 역할로 정리했습니다.
현재 할일을 최대 6개까지 보여주기
3열 2행 그리드로 표시하기
우선순위 색상 점과 할일 텍스트 보여주기
앱에서 할일을 추가, 완료, 복원하면 위젯 자동 업데이트하기
이 부분에서 앱과 위젯의 역할을 분리한 것이 중요했습니다. 처음 아이디어를 그대로 밀어붙이기보다, 기술적 제약을 확인하고 가능한 구조로 바꾼 점이 실제 개발 과정처럼 느껴졌습니다.
[캡처 이미지 삽입 추천 6: Android 홈화면 위젯 화면]
[캡처 이미지 삽입 추천 7: 앱과 위젯이 함께 보이는 화면]
5단계: Phase 4 — 검증과 빌드
마지막 Phase에서는 코드 품질과 빌드 과정을 확인했습니다.
진행한 작업은 다음과 같습니다.
flutter analyze실행빌드 오류 확인
Android XML 리소스 오류 수정
flutter clean후 재빌드APK 생성 확인
다크 테마 와 빈 상태 UI 확인
개발 중 @string/app_name 리소스 참조 오류가 발생했습니다. 처음에는 문자열을 직접 넣어 해결하려고 했지만, Android XML의 일부 속성은 직접 문자열이 아니라 리소스 참조만 허용한다는 점을 알게 되었습니다. 최종적으로는 선택사항이었던 description 속성을 제거해 문제를 해결했습니다.
또한 Kotlin 빌드 캐시 오류가 있었는데, flutter clean 후 다시 빌드하면서 해결했습니다.
결과적으로 debug APK 생성까지 성공했습니다.
사용한 프롬프트 전문
아래는 Claude Code에서 개발을 시작할 때 사용한 핵심 프롬프트입니다.
Flutter로 'POP! 할일 앱'을 만들어줘.
요구사항:
1) 할일을 둥근 사각형 카드로 표시 (BorderRadius 20)
2) 우선순위 4단계 색상: 긴급 #ff4d6d / 높음 #ff9f1c / 보통 #2ec4b6 / 낮음 #6c757d
3) 완료 시 파티클 애니메이션 (터뜨리기)
4) Hive로 로컬 저장
5) home_widget 패키지로 홈화면 위젯 연동
6) 완료 목록 조회 및 복원 기능
7) 생성일/완료일 자동 기록
8) 다크 테마 (#0f0f1a 배경, Nunito 폰트)
Phase 1부터 시작해서 기본 구조와 카드 UI를 먼저 만들어줘.UI 재현을 위해서는 다음과 같은 프롬프트도 사용했습니다.
첨부한 bubble-todo.html 파일이 이 앱의 웹 프로토타입이야.
이 디자인과 동일한 느낌으로 Flutter UI를 만들어줘.
색상, 카드 스타일, 레이아웃을 최대한 똑같이 구현해줘.애니메이션 구현을 위해서는 이런 식으로 구체적으로 요청했습니다.
할일 카드를 완료할 때 그냥 사라지지 말고,
먼저 살짝 커졌다가 작아지면서 사라지게 만들어줘.
동시에 카드 중앙에서 파티클이 사방으로 퍼지는 효과를 넣어줘.
파티클 색상은 해당 할일의 우선순위 색상을 사용해줘.홈화면 위젯 연동을 위해서는 다음처럼 요청했습니다.
home_widget 패키지를 사용해서 Android 홈화면 위젯을 만들어줘.
위젯에는 완료되지 않은 할일을 최대 6개까지 보여주고,
3열 2행 그리드 형태로 배치해줘.
각 항목에는 우선순위 색상 점과 할일 텍스트를 표시해줘.
앱에서 할일을 추가하거나 완료하거나 복원하면 위젯도 자동으로 업데이트되게 해줘.
휴대전화의 팝 앱 스크린샷
결과와 배운 점
결과
이번 프로젝트를 통해 POP! 할일 앱의 MVP를 완성했습니다.
완성된 기능은 다음과 같습니다.
Flutter 기반 Android 앱
Hive 로컬 저장
우선순위별 색상 카드
할일 추가 기능
완료 시 터뜨리기 애니메이션
파티클 이펙트
완료 목록 조회
복원 기능
Android 홈화면 위젯
앱 데이터 변경 시 위젯 자동 업데이트
APK 빌드 성공
단순히 화면만 만든 것이 아니라, 실제로 데이터를 저장하고, 완료 상태를 관리하고, 홈화면 위젯까지 연동했다는 점에서 의미가 있었습니다.
배운 점과 나만의 꿀팁
가장 크게 배운 점은 AI에게 바로 코드를 요청하기보다, 먼저 개발 계획을 충분히 정리하는 것이 훨씬 중요하다는 점입니다.
처음부터 “할일 앱 만들어줘”라고만 했다면 결과물이 평범했을 것 같습니다. 하지만 앱의 컨셉, 색상, 화면 구성, 데이터 모델, 개발 Phase, 위젯 제약까지 정리한 뒤 Claude Code에 전달하니 훨씬 안정적으로 개발이 진행되었습니다.
이번 프로젝트를 하면서 느낀 꿀팁은 다음과 같습니다.
AI에게 개발을 맡기기 전에 기획 문서를 먼저 만든다.
한 번에 완성하려 하지 말고 Phase를 나눈다.
“무엇을 만들지”뿐만 아니라 “이번 Phase에서는 무엇을 만들지 않을지”도 정한다.
오류가 생기면 에러 메시지를 그대로 보여주고 원인 분석을 요청한다.
개발 로그를 남기면 나중에 사례글, 수업자료, 포트폴리오로 다시 활용할 수 있다.
특히 Phase별 개발 로그를 남긴 것이 좋았습니다. 나중에 “내가 뭘 만들었지?”가 아니라, 어떤 문제를 만났고 어떻게 해결했는지까지 다시 정리할 수 있었습니다.
과정 중 시행착오
가장 큰 시행착오는 홈화면 위젯에 대한 기대와 실제 구현 가능 범위가 달랐던 점입니다.
처음에는 홈화면 위젯에서 풍선처럼 자유롭게 움직이고, 터뜨리는 애니메이션까지 가능할 것이라고 생각했습니다. 하지만 Android 홈화면 위젯은 구조적으로 복잡한 애니메이션이나 드래그 상호작용에 한계가 있었습니다.
그래서 방향을 바꾸었습니다.
앱 내부에서는 풍부한 애니메이션과 상호작용을 구현하고, 홈화면 위젯은 현재 할일을 빠르게 확인하는 읽기 전용 화면으로 만들었습니다. 결과적으로 이 선택이 더 현실적인 MVP를 만드는 데 도움이 되었습니다.
또 다른 시행착오는 Android 빌드 과정에서 발생했습니다.@string/app_name 리소스를 찾을 수 없다는 오류가 발생했고, 직접 문자열을 넣어 해결하려 했지만 또 다른 오류가 발생했습니다. 이 과정을 통해 Android XML 리소스 시스템에서는 어떤 속성이 문자열 리소스 참조만 허용한다는 점을 알게 되었습니다.
마지막으로 Kotlin 빌드 캐시 문제도 있었습니다. 이때는 flutter clean으로 캐시를 정리한 뒤 다시 빌드해 해결했습니다.
도움 필요한 부분
앞으로 더 개선하고 싶은 부분은 다음과 같습니다.
앱 아이콘과 스플래시 화면 만들기
할일 편집 기능 추가
마감일 기능 추가
드래그로 할일 순서 바꾸기
위젯 크기별 레이아웃 다르게 만들기
release APK 빌드 및 실제 배포 과정 정리
특히 Google Play Store 배포까지 이어가려면 release 빌드, 서명 키 관리, 앱 아이콘, 개인정보 처리방침 같은 부분을 추가로 공부해야 할 것 같습니다.
앞으로의 계획
이번 프로젝트는 앱 하나를 만든 것에서 끝내지 않고, 수업 자료로도 활용해보고 싶습니다.
예를 들어 학생들에게 다음과 같은 흐름을 보여줄 수 있을 것 같습니다.
아이디어를 말로 설명한다.
AI와 함께 기능을 정리한다.
PRD 또는 프로젝트 계획 문서를 만든다.
Claude Code로 실제 앱을 만든다.
오류를 해결하며 완성도를 높인다.
결과물을 발표하거나 공유한다.
앞으로는 POP! 앱을 조금 더 다듬어서 “AI와 함께 앱 만들기” 수업 예제로 활용해보고 싶습니다. 단순히 코드를 따라 치는 수업이 아니라, 아이디어를 실제 결과물로 바꾸는 프로젝트형 수업으로 연결해볼 계획입니다.
