GrowBit — 습관 부화 트래커 상세 설계서
상태: CURATED · ACTIVE 기술 스택: React 19, Vite, vite-plugin-pwa, 순수 CSS, localStorage, Vitest 카테고리: PWA / Web App
1. 문제와 대상 사용자
습관 앱은 대부분 체크리스트를 채우는 일 자체가 목적이 되어, 며칠 지나면 열어볼 이유가 사라집니다. GrowBit은 습관 실천을 캐릭터의 성장으로 환산해, "오늘 안 하면 내 알이 자라지 않는다"는 눈에 보이는 이유를 만듭니다. 대상은 짧은 주기로 동기를 잃는 습관 형성 초심자입니다.
2. 핵심 기능
| 기능 | 설명 |
|---|---|
| 부화 시스템 | 알 → 아기 공룡 → 드래곤의 3단계 진화 |
| XP · 스트릭 | 습관 실천 시 XP 획득, 미접속일에는 XP 감소(손실 회피) |
| 자동 저장 | 브라우저를 닫아도 진행 상태가 유지되는 로컬 저장 |
| 일일 퀘스트 | 템플릿 8종 중 매일 3개를 무작위 배정하고 달성 시 보상 XP 수령 |
| 주간 보스 레이드 | 일요일에 보스 4종 중 1종 소환, 1일 5회 공격 제한, 처치 시 +200 XP |
| 업적 18종 | 조건 충족 시 자동 판정 및 보상 XP 지급 |
| PWA 설치 | vite-plugin-pwa로 홈 화면 설치(standalone) 지원 |
3. 기술 선택 이유
- React + 순수 CSS: 상태에 따라 캐릭터·게이지가 바뀌는 화면을 다루되, 픽셀 아트 연출에 맞춰 컴포넌트별 CSS와 키프레임 애니메이션을 직접 작성했습니다.
- localStorage 전용: 계정과 서버를 두지 않아 개인정보를 수집하지 않고, 운영 비용도 발생하지 않습니다.
- Vite / Vitest: 성장 로직(XP 증감, 스트릭 판정)을 단위 테스트로 고정합니다.
4. 현재 범위
- 부화 3단계, 습관 3종(클릭당 +10 XP, 습관별 1일 3회 제한), 스트릭, localStorage 자동 저장이 동작합니다.
- 마지막 접속일로부터 2일 이상 지나면(= 하루라도 건너뛰면) 보유 XP의 10%를 차감하고 스트릭을 0으로 되돌립니다.
- 일일 퀘스트, 주간 보스 레이드, 업적 18종, 레벨업 연출, Web Audio 효과음, 다크모드, PWA 설치까지 v1.0 범위로 구현되어 있습니다.
- 상점 화면은 있으나 결제는 안내 팝업(alert)까지만 구현했고 Stripe/PayPal 연동은 하지 않았습니다.
- 친구는 6자리 코드를 입력하면 로컬 상태에 추가되지만 상대 계정이 실재하지 않고, 주간 랭킹은 하드코딩된 더미 목록입니다.
5. 알려진 한계
- 데이터가 브라우저에 저장되므로 기기 간 동기화가 되지 않고, 시크릿 모드나 사이트 데이터 삭제 시 진행 상태가 사라집니다.
- 접속 여부로 XP를 깎는 구조라, 장기 미접속 후 복귀 시 진입 장벽이 생길 수 있습니다.
- 친구·주간 랭킹은 서버가 없어 실제 다른 사용자와 연결되지 않습니다(랭킹은 고정된 더미 목록입니다).
- 캘린더·헬스 연동 화면은 자리표시자이며 실제 OAuth 연동이 없습니다.
- 상점 결제는 안내 팝업까지만 동작합니다.
- 습관 시간 알림은 스케줄러만 구현되어 있고 전송 경로에 결함이 있어 현재 알림이 표시되지 않습니다.
- 배포된 공개 URL이 없어 로컬 실행(npm run dev / npm run build)으로만 확인할 수 있습니다.
6. 다음 검증
- 합성 데이터 기반 브라우저 시연과 저장 정책 고지 문안 확정
- 저장 손실 시나리오(시크릿 모드, 데이터 삭제)의 안내 화면 검증