뽀모도로 타이머

뽀모도로 기법(Pomodoro Technique)은 1980년대 프란체스코 시릴로가 창시한 시간 관리 방법입니다. 핵심 아이디어는 작업을 25분의 집중 시간('뽀모도로' 하나)으로 나누고, 각 뽀모도로 사이에는 5분 휴식을, 매 4개의 뽀모도로 후에는 15-30분 휴식을 취하는 것입니다. 이 방법은 집중력 향상, 피로 감소, 작업 리듬감 강화에 도움이 됩니다.

뽀모도로 기법은 1980년대 후반 프란체스코 시릴로가 발표한 시간 관리 방법으로, 4단계 사이클을 체계화한 것이다. 25분 집중 구간(뽀모도로 1개), 5분 짧은 휴식, 4라운드 반복 후 15~30분 긴 휴식으로 구성된다. 이 일정은 4개 상태(`work`, `shortBreak`, `longBreak`, `idle`)를 갖는 유한 상태 머신(FSM)이며, 단일 카운트다운 타이머에 의해 전환이 이루어진다. `work -> break` 전환마다 라운드 카운터가 증가하고, `round % roundsBeforeLong === 0`일 때 긴 휴식 분기가 실행된다. 50/10(깊은 작업), 52/17(Draugiem Group 생산성 연구) 같은 변형도 동일 FSM을 매개변수화하여 노출한다. 단순한 타이밍 방식은 `setInterval(tick, 1000)`을 사용하고 카운터를 감소시키지만, JavaScript 타이머 드리프트가 누적된다. 메인 스레드 경합 시 각 콜백은 1003~1020ms 늦게 실행될 수 있으며, HTML5 Page Visibility API와 브라우저 정책이 결합되어 Chrome/Firefox/Safari에서 숨겨진 탭의 타이머를 약 1Hz로 제한한다(Safari는 분당 1회까지 낮아질 수 있다). 드리프트 방지 패턴은 시작 시 `endTimestamp = performance.now() + remainingMs`를 저장한 뒤, 매 틱마다 `remainingMs = Math.max(0, endTimestamp - performance.now())`를 재계산한다. 이렇게 하면 10분간 백그라운드에 있던 탭이 복원될 때 허구의 10초를 세는 대신 즉시 따라잡는다. `performance.now()`는 NTP, 수동 시간 변경 등 벽시계 조정에 영향을 받지 않는 고해상도 단조 시계이다. `Date.now()`는 페이지 새로고침 후 마감시간을 유지할 때만 사용한다. 4가지 브라우저 API가 사용자가 다른 작업을 하는 동안 타이머를 유용하게 만든다. Web Audio API는 에셋 비용 없이 단계 완료 비프음을 생성한다: `new AudioContext()` -> 800Hz `createOscillator()` -> 200ms에 걸쳐 감쇠하는 `createGain()` -> `start()` 후 `stop(currentTime + 0.2)`. Notifications API는 `Notification.requestPermission()`으로 일회성 동의를 받은 뒤 `new Notification('집중 완료', { body, icon, tag: 'pomodoro' })`로 시스템 수준 알림을 표시한다(`tag`로 빠른 연속 발생 시 중복을 제거한다). Wake Lock API는 `navigator.wakeLock.request('screen')`으로 집중 세션 동안 화면 꺼짐을 억제하고 휴식에는 해제한다. `document.title`은 매 틱마다 `mm:ss - 집중`으로 갱신되어 탭 스트립에 시간이 계속 표시된다. 설정(시간, 자동 시작, 소리)은 `localStorage`(동기, ~5MB 오리진 할당량)로 영속화된다. 원형 진행률은 `stroke-dasharray = 2 * pi * r`인 SVG `<circle>`이며, `stroke-dashoffset = dasharray * (1 - elapsed/total)`로 캔버스 오버헤드 없이 링을 애니메이션한다. 주의력에 관한 배경 연구 - 시릴로의 25분 경계뿐만 아니라 ADHD의 시간 인식, 문맥 전환 비용에 관한 연구 - 가 왜 부드러운 '5분만 더'보다 강제 중단이 효과적인지 설명한다.

• 4개 상태(work/shortBreak/longBreak/idle) 기반 FSM. `round % roundsBeforeLong === 0`일 때 긴 휴식 실행. 기본 25/5/15분, 4라운드. 변형: 50/10/30(깊은 작업), 52/17(Draugiem 연구).
• 드리프트 방지 타이밍: `endTimestamp = performance.now() + remainingMs`를 저장하고 매 틱마다 `remainingMs = endTimestamp - performance.now()`를 재계산. `setInterval` 슬립과 숨겨진 탭 스로틀링 제한에 면역.
• `performance.now()`는 고해상도 단조 시계(NTP 또는 수동 벽시계 변경에 영향 없음). `Date.now()`는 페이지 리로드 시 마감시간 유지에만 사용.
• Web Audio API로 단계 완료 비프 생성: `new AudioContext()` -> `createOscillator()`(800Hz 사인파) -> 200ms에 걸쳐 0으로 선형 감쇠하는 `createGain()` -> `start()`/`stop()`. 오디오 에셋 전송 불필요.
• Notifications API로 시스템 알림: `Notification.requestPermission()` 일회 호출, 이후 `new Notification(title, { body, tag: 'pomodoro' })`. 탭이 숨겨진 상태에서 여러 단계가 끝나면 `tag`로 중복 제거.
• Screen Wake Lock API: 집중 중 `navigator.wakeLock.request('screen')`으로 화면 절전 억제, 휴식 시 해제. 탭 가시성 상실 시 웨이크 록은 자동 해제되며 `visibilitychange`에서 재획득 필요.
• 영속화 및 UI: `localStorage`(~5MB 할당량)로 시간/자동 시작/소리 저장. SVG 링은 `stroke-dasharray = 2*pi*r` 사용, `stroke-dashoffset` 애니메이션. `document.title`을 `mm:ss - 단계`로 갱신하여 탭 스트립 가시성 확보.