꽃이 다 질 때까지 집중하는, 3D 벚꽃 뽀모도로 타이머.
🔗 https://ainsof.dev/cherryblossom-timer
집중과 휴식의 주기를 벚꽃나무의 생애에 투영한 웹 3D 뽀모도로 타이머입니다. 집중 45분 동안 만개한 나무에서 꽃잎이 비처럼 떨어져 바닥에 소복이 쌓이고(낙화), 휴식 15분 동안 빈 가지에 다시 꽃이 피어납니다(개화). 시간의 흐름이 화면 속 벚꽃으로 보이는, 조용하고 낭만적인 집중 도구예요.
| 모드 | 시간 | 벚꽃나무의 변화 |
|---|---|---|
| 집중 | 45분 | 만개한 나무에서 꽃잎이 흩날려 바닥에 쌓임 (낙화) |
| 휴식 | 15분 | 비어버린 가지에서 다시 꽃이 피어남 (개화) |
단순한 타이머가 아니라, 시간의 흐름을 '꽃잎이 떨어지는 양'으로 직관적으로 느끼며 집중도를 유지하고 휴식의 질을 높이는 감성 데스크테리어 도구를 지향합니다.
- 집중 45분 / 휴식 15분 기본 주기 (뽀모도로) — 인트로·설정 모달에서 1~180분 자유 설정 가능(설정은 브라우저에 저장됨)
- 시작 / 일시정지 / 리셋 컨트롤
- 한 단계가 끝나면 알람음 + 안내 메시지로 알려줌
- 집중 종료: "낙화가 끝났어요. 잠시 쉬어가세요."
- 휴식 종료: "다시 꽃이 만개했어요. 집중할 시간이에요."
- 백그라운드 알람 — 다른 탭/앱에서 작업 중이어도 종료를 인지하도록 벽시계 기반 타이머 + 시스템 알림(Notification) (브라우저가 켜져 있는 동안)
- 단계가 끝나면 자동으로 넘어가지 않고, 사용자가 **「시작」**을 눌러 다음 단계로 진행
- 실시간 3D 벚꽃나무 — 진행률에 따라 꽃의 밀도가 실시간으로 변함
- 낙화 — 꽃잎이 실제 나무 가지 위치에서 떨어져 바람에 흩날리며 하강
- 누적 — 떨어진 꽃잎이 바닥에 눈처럼 소복이 쌓이고, 휴식이 시작되면 사라짐
- 배경 나무 연동 — 원경의 벚꽃나무들도 메인 나무에 맞춰 함께 피고 짐
- 카메라 오빗(마우스로 시점 회전) · 하늘/잔디/햇살 환경 연출
| 상태 | 진행률 | 꽃 밀도 | 낙화 | 바닥 |
|---|---|---|---|---|
| 만개(Full) | 집중 0% / 휴식 100% | 100% | 없음 | 깨끗 |
| 절반(Half) | 집중 50% | ~50% | 활발히 낙하 | 부분 누적 |
| 앙상(Empty) | 집중 100% | 0% | 잔여 낙하 | 가득 누적 |
| 개화(Budding) | 휴식 진행 | 점점 회복 | 없음 | 서서히 소멸 |
| 구분 | 사용 기술 |
|---|---|
| 3D 모델링 | Blender (EEVEE / Cycles) — 벚꽃나무·꽃·꽃잎·환경 에셋 제작 |
| 모델 포맷 | glTF / GLB (Draco 압축) |
| 프레임워크 | React 19 + TypeScript + Vite |
| 3D 렌더링 | Three.js + React-Three-Fiber (R3F) |
| 3D 헬퍼 | @react-three/drei (로더 · 카메라 · 환경광) |
| 꽃잎 파티클 | InstancedMesh (GPU 인스턴싱) |
| 사운드 · 알림 | Web Audio API (알람음) · Notification API (시스템 알림) |
| 설정 영속 | localStorage (집중/휴식 시간) |
| 배포 | GitHub Actions → GitHub Pages (커스텀 도메인 ainsof.dev) |
에셋 파이프라인: Blender에서 만든 벚꽃나무를 GLB로 익스포트하고, 절차적 머티리얼(수피·잔디)과 하늘은 텍스처로 베이크해 웹으로 가져옵니다. 만개 캐노피(꽃 카드 메쉬)는 Blender 메쉬를 그대로 GLB로 추출해 렌더하고(블렌더와 동일한 밀도), 낙화 꽃잎은 꽃 위치 JSON에서 스폰해 런타임에 인스턴싱합니다.
cd web
npm install
npm run dev # http://localhost:5173npm run build # 프로덕션 빌드 (web/dist)main 브랜치에 푸시하면 GitHub Actions가 자동으로 빌드·배포합니다.
- 워크플로: .github/workflows/deploy.yml
- 호스팅: GitHub Pages → https://ainsof.dev/cherryblossom-timer
web/ # 웹 앱 (Vite + React + R3F)
src/scene/ # 3D 씬 (나무·꽃·낙화·하늘·잔디·배경나무)
src/usePomodoro.ts # 타이머 로직 (벽시계 기반, 시간 커스텀, 개화율)
src/App.tsx # HUD · 인트로/설정 모달 · 알람·시스템 알림
public/assets/ # Blender 에셋 (GLB · 하늘/수피/잔디 텍스처 · 꽃 위치 JSON)
_tools/ # Blender 제작·익스포트 스크립트 (.py)
cherry_blossom_v2.blend # 벚꽃나무 3D 원본
prd.md # 제품 기획서
CLAUDE.md # 제작 파이프라인 상세