플러스프로젝트 배경
▶ 1) 문제점 기존 웹 뽀모도로 타이머는 브라우저 탭 비활성 시 setInterval이 최대 60초까지 쓰로틀링되어 타이머가 부정확해지는 구조적 한계가 있었습니다. 또한 단순 카운트다운만 제공해 장기적 사용 동기가 부족하고, Forest처럼 게이미피케이션을 지원하는 앱은 모바일 전용·유료 구조로 접근성이 낮았습니다. ▶ 2) 프로젝트 목표 Web Worker 기반으로 탭 전환 시에도 정확한 타
프로젝트 성과
프로덕션급 풀스택 PWA 완성
85개 이상의 소스 파일(컴포넌트 30+, 훅 27개, 유틸 21+)을
기획부터 배포까지 10일 내 1인 완성. PWA 설치 및 오프라인 동작 검증.
기획부터 배포까지 10일 내 1인 완성. PWA 설치 및 오프라인 동작 검증.
타이머 정확도 문제 근본 해결
기존 웹 타이머의 최대 60초 지연 문제를 Web Worker + Page Visibility API
이중 보정 아키텍처로 완전 해소. 탭 전환·백그라운드 전환 환경에서도 유지
이중 보정 아키텍처로 완전 해소. 탭 전환·백그라운드 전환 환경에서도 유지
60종 픽셀 아트 에셋 + 3단계 해금 시스템
10종 식물 × 6단계 성장 SVG 에셋과 스트릭(일간)/딥포커스(세션 연속)/
마일스톤(누적) 3층 보상 주기로 장기 사용 지속성 설계.
마일스톤(누적) 3층 보상 주기로 장기 사용 지속성 설계.
다국어·접근성 완비
380개 번역 키 기반 한/영/일 3개 국어 지원 + WCAG 접근성 기준 준수 (focus-visible, 대비 비율, 모션 감소). Playwright E2E + Vitest 단위 테스트 자동화
핵심 기능
정확한 뽀모도로 타이머
탭을 전환하거나 화면을 꺼도 1초 오차 없이 작동합니다.
브라우저의 구조적 한계를 Web Worker 분리 실행으로 해결해,
어떤 환경에서도 타이머 신뢰도를 보장합니다.
브라우저의 구조적 한계를 Web Worker 분리 실행으로 해결해,
어떤 환경에서도 타이머 신뢰도를 보장합니다.
진행 단계
기획 및 설계
2026.02.
요구사항 정의, 경쟁 서비스 분석, 로컬 우선 아키텍처·상태 설계,
픽셀 아트 에셋 종류 및 성장 단계 기획.
픽셀 아트 에셋 종류 및 성장 단계 기획.
프로젝트 상세
▶ 1) 포트폴리오 소개 생산성 웹앱 카테고리의 게이미피케이션 뽀모도로 타이머입니다. 집중할 때마다 픽셀 아트 식물이 자라는 시각적 보상 시스템을 통해, 단순 카운트다운에 그쳤던 기존 타이머 앱의 장기 동기부여 한계를 해결했습니다. 85개 이상의 소스 파일, 60종 SVG 에셋, 3개 국어(한/영/일) 지원, E2E·단위 테스트 자동화를 갖춘 프로덕션급 PWA로 완성했습니다. ▶ 2) 작업 범위
