멀티 타이머

멀티 타이머는 한 화면에서 여러 개의 카운트다운을 나란히 실행할 수 있게 해주는 도구로, 각 타이머마다 독립된 시간과 컨트롤을 가집니다. 로스트용 타이머 하나, 밥용 타이머 하나, 디저트용 타이머 하나 - 같이 시작해도 되고 하나씩 시작해도 되며, 어느 것이든 언제든 일시정지할 수 있고, 각각 끝나는 순간 서로 다른 알림음이 울립니다. 달걀 타이머 하나를 요리조리 옮기는 것과 가열판 전체를 한눈에 보는 것의 차이죠. 설치할 앱도, 만들 계정도 없습니다. 모든 동작은 브라우저 탭 안에서만 이뤄지고, 타이머 데이터는 기기를 벗어나지 않습니다.

각 타이머는 총 시간, 남은 시간, 실행 플래그를 담은 독립적인 상태 객체로 저장됩니다. 타이머를 시작하면 페이지는 그 순간을 Date.now()로 기록하고 시작 시점의 남은 시간을 보관하며, 이후 매 틱마다 남은 시간 = 시작 시 남은 시간 − (Date.now() − 시작 시각)으로 다시 계산합니다. 이 자기 보정 방식 덕분에 브라우저가 잠시 스로틀링하거나 JavaScript 스레드가 바빠도 표시 시간은 정확하게 유지됩니다. 계산이 틱을 세는 게 아니라 항상 실제 시스템 시계를 읽기 때문입니다. 하나의 공유 루프가 실행 중인 모든 타이머를 구동하므로, 타이머를 추가한다고 CPU 작업이 배로 늘지 않습니다 - 한 번의 갱신으로 전부 다시 계산합니다. 탭이 백그라운드로 가면 브라우저는 타이머를 공격적으로 제한하고 배터리 사용 시에는 동결시킬 수도 있습니다. 탭이 다시 보이는 순간, 각 타이머는 시스템 시계를 기준으로 보정해 정확한 남은 시간으로 즉시 맞춰집니다. 종료 알림은 Web Audio API로 짧은 음을 재생합니다. 브라우저는 오디오 재생 전에 일회성 사용자 동작(시작 클릭 등)을 요구합니다. 이는 원치 않는 소리를 막는 자동재생 정책입니다. 타이머가 끝날 때 탭이 숨겨져 있거나 시스템이 절전 상태면 알람은 울리지 않지만, 돌아오면 표시가 정확합니다. 이 모든 것은 로컬에서 처리되며, 타이머 데이터는 어디로도 전송되지 않습니다.

• 각 타이머는 자신만의 시작 시각과 남은 시간을 가진 독립적인 상태 객체입니다.
• Date.now()로 벽시계 수준의 정확도를 구현 - setInterval 틱을 세는 대신 매 틱마다 남은 시간을 재계산합니다.
• 하나의 공유 루프가 실행 중인 모든 타이머를 구동하므로, 타이머를 추가해도 CPU 작업이 배로 늘지 않습니다.
• 백그라운드 탭은 브라우저에 의해 스로틀링되며, 돌아오면 시스템 시계로 표시를 보정합니다.
• Web Audio API로 각 알람을 재생하며, 오디오 허용 전에 사용자 동작(시작 클릭 등)이 필요합니다.
• 모든 연산은 브라우저에서 로컬로 처리되며 어떤 데이터도 외부로 전송되지 않습니다.