온라인 스톱워치

온라인 스톱워치는 0부터 경과 시간을 측정하는 정밀 타이밍 도구로, 일반적으로 밀리초 정밀도로 제공합니다. 카운트다운 타이머와 달리 스톱워치는 "그 작업에 얼마나 걸렸는가?"에 답합니다. 스포츠 훈련, 실험실 실험, 프레젠테이션, 요리, 코딩 스프린트 등 고정된 종료 시점보다 소요 시간을 측정해야 하는 모든 활동에 이상적입니다. 이 도구는 브라우저에서 완전히 실행되며, requestAnimationFrame으로 부드러운 화면 업데이트를, performance.now()로 단조 시간 측정을 사용하여 시스템 시계가 조정되어도 정확성을 유지합니다. 랩 기록 기능으로 최고/가장 느린 랩이 하이라이트된 스플릿 타임을 캡처할 수 있으며, 모든 데이터는 로컬에만 저장되고 업로드되지 않습니다.

스톱워치 엔진은 드리프트가 발생하기 쉬운 setInterval 패턴을 완전히 피합니다. 대신, 화면 업데이트에는 requestAnimationFrame(rAF)을, 기준 시간 소스로는 performance.now()를 사용합니다. 사용자가 시작을 클릭하면, 엔진은 현재 performance.now() 타임스탬프를 startTime으로 기록합니다. 각 애니메이션 프레임에서 elapsed = accumulated + (performance.now() - startTime)을 계산하며, 여기서 accumulated는 가장 최근 일시정지 이전의 총 경과 시간을 보관합니다. 이 2-변수 모델(누적 시간 + 런타임 델타)은 밀리초 미만의 정밀도 손실 없이 일시정지/재개 사이클을 올바르게 처리합니다. performance.now()가 Date.now()보다 선호되는 이유는 단조롭기 때문입니다 — NTP 보정, 수동 시계 변경, 일광 절약 시간 전환으로 인해 뒤로 점프하지 않습니다. 또한 밀리초 미만의 해상도(최신 브라우저에서 일반적으로 5마이크로초 세분성)를 제공하여, 짧은 시간의 고정밀 타이밍에 적합한 시계입니다. rAF 콜백은 디스플레이 재생률(일반적으로 60Hz = ~16.67ms, 고재생률 디스플레이에서 최대 120Hz)로 제한되므로, 시각적 업데이트는 부드럽지만 기준값은 아닙니다 — 실제 경과 시간은 지속적으로 정확한 performance.now() 계산에서 비롯됩니다. 랩 기록은 랩 버튼이 클릭된 순간의 현재 elapsedMs를 캡처하여, 이전 랩의 총계와의 스플릿 차이를 계산합니다. 가장 빠른 랩과 가장 느린 랩은 모든 랩 차이를 Math.min/Math.max로 비교하여 결정되며, 디스플레이는 각각 녹색과 빨간색 스타일로 강조 표시합니다. 모든 상태는 클라이언트 컴포넌트 내의 React useState 훅에 보관되며, 데이터는 영구 저장되거나 전송되지 않습니다 — 스톱워치는 본질적으로 일시적이며, 페이지를 닫거나 초기화 버튼을 누르면 완전히 재설정됩니다.

• performance.now()는 시스템 시계 변경에 영향을 받지 않는 단조로운 밀리초 미만의 타임스탬프를 제공합니다.
• requestAnimationFrame은 디스플레이 재생률(60–120Hz)로 화면 업데이트를 구동하여 부드러운 렌더링을 제공합니다.
• 누적 시간 + 런타임 델타 모델이 정밀도 손실 없이 일시정지/재개를 처리합니다.
• 랩 차이는 currentTotal - previousTotal로 계산되어 정확한 스플릿 타이밍을 제공합니다.
• 모든 계산은 브라우저에서 로컬로 실행되며, 서버 왕복이나 데이터 업로드가 없습니다.