소개
시도하고자 했던 것과 그 이유
연쇄타이머 (Serial Timer) 앱을 Flutter로 직접 개발하며,
AI를 실제 개발 전 과정에 어떻게 활용할 수 있는지를 실험하고자 했습니다.
기존 타이머 앱들은 단일 타이머 중심이어서, 요리·실험·운동처럼 여러 단계를 연속으로 관리하면서 손으로는 작업을 해야하는 상황에서는 불편함이 컸습니다.
그래서 아래와 같은 목표를 세웠습니다.
여러 타이머를 하나의 프로토콜처럼 순차 실행
손으로 터치하지 않아도 입모양이나 손동작만으로도 제어가 가능
사용 중 화면 조작을 최소화한 UI
실제 배포까지 고려한 앱 구조
앱 활용 예시
🍳 요리할 때 - 재료 볶기 5분 → 끓이기 20분 → 완성!
💪 운동할 때 - 스트레칭 3분 → 런닝 20분 → 쿨다운 5분
🧪 실험할 때 - 각 단계마다 정확한 시간 측정
📚 루틴 실행시 - 집중 25분 → 휴식 5분, 포모도로 자동화
행 방법
사용 도구와 활용 방식
Claude AI (claude.ai) -전체적인 도우미
앱 아이디어 구체화
UI/UX 디자인 컨셉 정리
기능 우선순위 결정
Claude Code -코드 작성 업무
Flutter 위젯 구조 설계
상태 관리 및 타이머 로직 구현 보조
Flutter + Dart
실제 Android 앱 개발
1️⃣ 디자인 컨셉 기획
Google Stitch 스타일의 입체적인 3D UI
📸 이 단계에서 참고한 디자인 샘플 이미지를 함께 업로드하여 피드백을 받았습니다.
2️⃣ UI 프로토타입 검증 (React)
Flutter 구현 전에 React로 웹 프로토타입을 제작해 UI를 빠르게 검증했습니다.
이 과정을 통해 디자인 문제를 사전에 발견하고 수정할 수 있었습니다.
3️⃣ Flutter 앱 구현
프로젝트 경로:
C:\Flutter_study\Serial_timer_app
구현한 핵심 기능:
연쇄타이머 생성 / 편집 / 삭제 / 히스토리 기능
타이머 실행 화면
알람 재생 및 알람 끄기를 터치없이 손동작, 입모양으로 제어하도록 함
백그라운드에서도 알람이 울리도록 설정 추가
화면 켜짐 유지 기능 추가
배터리 절약 모드 추가
음성안내 / 다음 스텝으로 자동전환 기능 추가
데이터 내보내기/ 가져오기 기능 추가
⚠️ 초기에는 손동작/카메라 인식 코드가 섞여 있어 구조가 복잡해 제대로 작동하지 않아 동작이 단순한 입모양으로 고쳤습니다.
결과와 배운 점
배운 점과 꿀팁
AI는 아이디어 확장용, 구조 설계용으로 매우 강력
하지만 기능이 많아질수록 사람이 우선순위를 잡아줘야 함
사람들의 아이디어를 듣고 서로 나누는 과정이 매우 큰 도움이 됨
시행착오
Protocol_timer_app과Serial_timer_app프로젝트 혼재 → 앱 기능 꼬일까봐 걱정손동작 인식 기능 → 복잡도 급상승으로 인식이 안되는 오류
릴리즈 빌드로 계속 테스트 → 빌드 시간 낭비
Android 에뮬레이터 + 실제 기기 테스트
릴리즈 빌드 vs 디버그 빌드 차이 학습
➡️ 해결 방법
하나의 프로젝트만 유지
고급 기능은 다음 버전으로 이연
개발 중에는 디버그 빌드 적극 활용
도움 요청 / 고민 중인 부분
앱 화면 디자인 개선
성능 저하를 줄이면서 임팩트있게 디자인
Claude code 주기적 정지 → 시간 낭비 없이 코딩하는 스킬을 더 쌓아야겠다는 생각
앞으로의 계획
앱 아이콘 변경 (FlowCue icon)
UI 레이아웃 세련되게 디자인
다국어 지원
각 프로토콜에 알람기능 추가해서 사용자가 원하는 시간에 실행할 수 있게 하기
마스크를 쓰고 작업하는 사람들을 위해 손동작 제어 기능도 가능하면 선택할 수 있게 옵션으로 넣기
주변사람들에게 APK 배포해서 테스트 / Google Play Store 배포
도움 받은 내용
스터디원들의 발표내용에서 여러 아이디어 (손동작 등을 통한 핸즈프리 기능, 보완기능을 AI에게 묻기 등) 얻었습니다👍
