"30일의 꾸준함이 모여 빛나는 나만의 습관 트로피로 탄생합니다."
HabitTrophy는 오로라 글래스모피즘(Aurora Glassmorphism) 테마 기반의 반응형 **30일 습관 도전 PWA(Progressive Web App)**입니다.
매일 습관을 실천하고 정직하게 기록하며, 달성률에 따라 골드, 실버, 브론즈 등급의 입체 3D 트로피를 수집하여 성취감을 극대화할 수 있도록 돕습니다.
30일간의 도전이 끝나면 최종 달성률(%)을 판정하여 트로피를 수여하며, 트로피 룸에 영구히 보관됩니다.
- 골드 트로피 (Gold Trophy): 달성률 100% (30일 완전 성공)
- 실버 트로피 (Silver Trophy): 달성률 80% 이상 100% 미만 (24~29일 성공)
- 브론즈 트로피 (Bronze Trophy): 달성률 70% 이상 80% 미만 (21~23일 성공)
- 도전 완료 배지 (Failure Badge): 달성률 70% 미만 (20일 이하 성공 시 재도전을 응원하는 격려상 수여)
- 전체화면 standalone 구동: iOS 사파리의 '홈 화면에 추가' 또는 크롬의 '앱 설치'를 클릭하면 완전히 독립된 네이티브 앱처럼 실행됩니다.
- 오프라인 지원: 서비스 워커(Service Worker) 캐싱을 탑재해 인터넷 연결이 끊긴 상태에서도 완벽하게 동작합니다.
- 각 도전과제마다 원하는 알림 시간을 설정하면, 지정한 시간에 맞춰 브라우저Notification API를 통한 실시간 알림이 발송되어 꾸준한 실천을 돕습니다.
- 움직이는 오로라 배경: 부드럽게 살아 움직이는 백그라운드 그라데이션 광원 효과.
- 30일 캘린더 그리드: 오늘 체크해야 할 날짜는 숨 쉬는 듯한(pulsing) 네온 블루 보더 효과가 동작합니다.
- 폭죽(Confetti) 파티클 효과: 실천 체크 성공 시, 클릭/터치 좌표를 기준으로 수십 개의 축하 파티클이 터지는 기분 좋은 연출을 제공합니다.
- 3D 트로피 카드: 트로피 룸의 선반 위에 놓인 트로피 카드들은 터치 및 드래그 시 입체각(CSS 3D preserve-3d)을 가지며 회전하며 빛납니다.
- 실천 기록장: 획득한 트로피를 터치하면 30일 동안 남겼던 한 줄 일기가 타임라인 형태로 영구 복원됩니다.
/Users/joo.yoon/workspace/joostory/habit-trophy/
├── index.html # 싱글 페이지 웹 마크업 (SPA)
├── style.css # 오로라 글래스모피즘 테마 및 CSS 3D 스타일 정의
├── app.js # 핵심 상태 관리, 30일 달력 물리 수학 계산, 폭죽 파티클 로직
├── manifest.json # PWA 설치 정보 설정 명세서
├── sw.js # 오프라인 캐싱 및 알림 처리 서비스 워커
├── README.md # 프로젝트 안내 설명서
└── .github/
└── workflows/
└── deploy.yml # GitHub Actions - GitHub Pages 자동 배포 워크플로우
보안 상의 이유로 브라우저의 Notification API와 Service Worker(PWA)는 일반 로컬 파일 경로(file://)에서는 차단되며, **로컬 서버 환경(http://localhost)**에서 정상 작동합니다.
# 1. 프로젝트 폴더로 이동
cd ~/workspace/joostory/habit-trophy
# 2. 초경량 웹 서버를 통해 기동 (Node.js 환경)
npx -y http-server -p 8080기동 후 주소창에 http://localhost:8080을 입력하여 접속합니다.
- 첫 습관 도전을 생성합니다.
- 생성된 습관을 클릭해 상세 달력 화면으로 진입합니다.
- 우측 하단의 분홍색 점선으로 된 🧪 테스트 도구 패널에서 [29일 완료 (승격 대기)] 치트키 버튼을 누릅니다.
- 즉시 29일치 과거 일지와 성공 블록이 생성되며 마지막 30일 차(오늘)만 대기 상태가 됩니다.
- 오늘 날짜의 30번 그리드를 터치해 완료하면 화려한 폭죽 애니메이션과 함께 트로피 획득 연출 및 정산이 진행됩니다.