카운트다운 타이머

카운트다운 타이머는 정한 시간에서 시작해 0까지 줄어드는 시간 관리 도구입니다. 집중 작업, 요리, 운동 인터벌, 수업 활동, 회의 진행, 발표 연습처럼 정해진 시간 안에 끝내야 하는 상황에 유용합니다. 스톱워치가 0부터 지난 시간을 재는 도구라면, 카운트다운은 남은 시간과 종료 지점을 분명히 보여 줍니다. 남은 시간이 보이면 속도를 조절하고 마무리 시점을 판단하기 쉽습니다. 이 페이지는 스톱워치와 여러 개의 작은 타이머도 함께 제공하므로 랩 기록이나 병렬 작업 관리에도 사용할 수 있습니다. 중요한 알림이 필요할 때는 브라우저 탭을 열린 상태로 유지해야 합니다.

카운트다운 엔진은 권위 있는 시계로 setInterval(callback, 1000)을 사용하지 않습니다. HTML5 이벤트 루프 명세는 최소 지연만 보장할 뿐 고정 주기를 보장하지 않기 때문에, 이 접근 방식은 드리프트가 누적됩니다. 대신 페이지는 Date.now()(또는 서브밀리초 해상도를 위한 performance.now())로 startTime을 기록하고, 각 틱에서 remaining = targetDuration - (Date.now() - startTime)을 계산합니다. 표시 갱신은 requestAnimationFrame으로 구동되며, 브라우저가 디스플레이 vsync 속도(일반적으로 60Hz/16.67ms, 고주사율 노트북과 폰에서는 때때로 120Hz)로 스로틀링합니다. 이 자기 교정 설계는 JavaScript 태스크 큐가 가비지 컬렉션이나 긴 레이아웃으로 지연된 후에도 표시되는 초가 실제 시계와 정렬되도록 유지합니다. 백그라운드 스로틀링은 타이머 예상치 못한 동작의 주요 원인입니다. HTML Living Standard에 따르면 숨겨진 탭은 setInterval/setTimeout을 최소 1000ms로 제한합니다(Chrome, Firefox, Safari는 각자의 휴리스틱으로 이를 구현하며, Chrome은 배터리 사용 시 약 5분 후 비활성 탭을 추가로 동결합니다). Page Visibility API(document.visibilityState, document.hidden, visibilitychange 이벤트)는 타이머가 탭 전환을 감지하고 탭이 다시 보일 때 Date.now()에 대해 내부 시계를 조정할 수 있게 합니다. 카운트다운 종료 사운드는 Web Audio API(AudioContext + OscillatorNode 또는 사전 로드된 AudioBuffer)를 통해 재생되며, iOS Safari와 최신 Chrome에서는 자동 재생 정책을 충족하기 위해 사전 사용자 제스처 활성화가 필요합니다. 시각적 알림도 렌더링되며, 사용자가 이전에 권한을 부여한 경우 Notification API를 통해 OS 수준 토스트를 게시할 수 있습니다. 다중 타이머 모드는 각 타이머를 독립적인 startTime을 가진 자체 상태 객체로 유지하며, 단일 requestAnimationFrame 루프가 프레임마다 배열을 반복하여 타이머 수가 늘어나도 CPU 작업을 일정하게 유지합니다. 새로 고침 간 영속성은 직렬화된 endTime을 사용하는 localStorage를 사용하므로, 페이지는 마운트 시 남은 시간을 재계산할 수 있습니다. OS의 시계 보정(수동 시간 변경, NTP 스텝 또는 일광 절약 시간 전환)은 Date.now()를 즉시 이동시키고 복구된 타이머가 점프하는 것처럼 보이게 할 수 있다는 점에 유의하세요. performance.now()는 단조증가하며 단일 페이지 로드 내에서 경과 시간만 중요한 경우에 선호됩니다.

• 진실의 소스로 Date.now() 또는 performance.now()를 사용하고, 누적된 setInterval 틱을 신뢰하지 마세요.
• requestAnimationFrame은 디스플레이 vsync에서 리페인트를 제한합니다(60Hz = 약 16.67ms, 120Hz = 약 8.33ms).
• 숨겨진 탭에서는 HTML 명세에 따라 setInterval이 최소 1000ms로 스로틀링되며, Chrome은 배터리 사용 시 약 5분 후 페이지를 동결할 수 있습니다.
• Page Visibility API(visibilitychange 이벤트)는 탭이 포그라운드로 돌아올 때 타이머를 조정하기 위한 훅입니다.
• Web Audio API는 iOS Safari와 Chrome에서 자동 재생 정책을 충족하기 위해 사전 사용자 제스처 활성화가 필요합니다.
• Notification API는 Notification.requestPermission()과 보안 컨텍스트(HTTPS 또는 localhost)가 필요합니다.
• performance.now()는 NTP 스텝과 DST 점프 전반에 걸쳐 단조증가하지만, Date.now()는 그렇지 않습니다. 용도에 맞게 선택하세요.