스톱워치

시간을 측정하고 경과 시간을 확인합니다.

시작과 정지 버튼으로 경과 시간을 밀리초 단위까지 재는 스톱워치입니다.

사용 순서

Start 버튼을 누르면 시간이 올라가기 시작합니다.
Stop 버튼을 누르면 그 시점의 값에서 멈춥니다.
Start를 다시 누르면 멈춘 값부터 이어서 잽니다.
Reset 버튼은 값을 00:00.000으로 되돌립니다.

예시

측정 시간이 3723456밀리초가 되면 화면에 01:02:03.456이 표시되고, 65000밀리초는 01:05.000으로 표시됩니다.

한계

측정값은 저장되지 않아서 페이지를 새로고침하면 0으로 돌아갑니다. Reset은 값만 0으로 바꾸며 실행 중이면 계속 흐르므로, 멈춘 뒤에 누르는 것이 맞습니다. 탭이 백그라운드에 있던 시간도 다시 보일 때 그대로 포함됩니다.

보안 주의

브라우저에서 잰 시간에는 버튼을 누르는 사람의 반응 시간과 화면 갱신 지연이 함께 들어갑니다. 성능 측정 결과를 보고하거나 비교 근거로 쓸 때는 이 값을 그대로 쓰지 말고, 코드 안에서 performance.now()로 구간을 잰 값을 사용하세요.

배경 지식

시간을 재는 방법은 벽시계 시간과 단조 시간으로 나뉩니다. Date.now()는 벽시계 시간이라서 NTP 동기화나 사용자의 시계 변경으로 뒤로 갈 수도 있습니다. performance.now()는 페이지가 열린 뒤부터 계속 증가하는 값이라 구간 측정에 더 적합합니다. 이 차이를 알면 측정 코드가 왜 performance.now를 쓰는지 이해하기 쉽습니다.

이 스톱워치는 화면을 그릴 때마다 호출되는 requestAnimationFrame 콜백에서 직전 콜백과의 Date.now 차이를 누적합니다. 표시는 화면 주사율에 맞춰 갱신되지만, 누적 값은 콜백 간격이 아니라 시계 값으로 정해집니다. 그래서 프레임이 몇 번 빠져도 누적 값은 어긋나지 않습니다.

시간 표기는 밀리초를 1000으로 나누어 초, 분, 시간으로 바꾸는 과정입니다. 1시간 이상이면 맨 앞에 시 자리가 붙고, 그보다 짧으면 분:초.밀리초 형식으로 표시합니다. 자릿수가 고정된 형식이라 값이 바뀔 때 화면이 흔들리지 않습니다. 예를 들어 3599999밀리초에서 3600000밀리초로 넘어가면 59:59.999에서 01:00:00.000으로 바뀌며 표시 길이가 늘어납니다.

자주 묻는 질문

스톱워치 값이 실제 시계와 조금씩 어긋나는 이유는 무엇인가요?

버튼을 누르는 시점과 실제 측정 대상의 시작, 끝 시점 사이에 사람의 반응 지연이 들어가기 때문입니다. 실행 중의 누적은 시계 차이로 계산하므로 프레임 지연 때문에 오차가 계속 쌓이지는 않습니다.

페이지를 떠났다가 돌아오면 기록이 남아 있나요?

남지 않습니다. 값은 메모리에만 있어서 새로고침이나 페이지 이동 시 0으로 돌아갑니다. 긴 측정을 해야 한다면 중간 값을 메모해 두거나 측정 로그를 남기는 도구를 쓰세요.

백그라운드 탭에 두고 가면 시간이 멈추나요?

화면 갱신은 멈추지만 시계는 계속 흐릅니다. 탭을 다시 열면 숨겨져 있던 시간까지 포함된 값이 나오므로, 정확한 구간 측정이 필요하면 탭을 연 상태로 재세요.