안녕하세요, 느종입니다.
자바스크립트로 프로젝트를 하다 보면 누구나 한 번쯤은 시간 측정 기능을 구현하게 됩니다. 하지만 막상 자바스크립트 스톱워치를 만들어보면 예상치 못한 문제에 부딪히곤 합니다. 분명 setInterval을 10ms(0.01초)로 설정했는데, 시간이 지날수록 실제 시계와 미세하게 오차가 발생하는 현상이죠.
저 또한 처음에는 단순 카운팅 방식으로 접근했다가 시간이 뒤처지는 것을 경험했습니다. 이번 포스팅에서는 이러한 자바스크립트 스톱워치 오차 해결을 위해 Date.now() 기반의 정밀 로직을 공유하려 합니다. 단순히 코드만 복사하는 것이 아니라, 왜 이 방식이 필요한지 기술적 배경을 통해 자바스크립트 스톱워치 오차 해결의 핵심 원리를 살펴보겠습니다.
1. 자바스크립트 스톱워치 오차 해결을 위한 로직 설계
스톱워치를 구현할 때는 크게 세 가지 상태(Running, Stopped, Reset)를 정의해야 합니다.
- Running (실행 중): 시간이 계속 흐르며 화면이 0.01초 단위로 갱신됩니다.
- Stopped (정지): 흐르던 시간이 멈추고, 그 시점의 기록이 화면에 고정됩니다.
- Reset (초기화): 모든 기록을 00:00:00으로 되돌립니다.
여기서 가장 중요한 포인트는 “정지했다가 다시 시작했을 때, 이전 기록에 이어서 시간이 흘러야 한다”는 점입니다. 이를 위해 우리는 ‘시작 시간’과 ‘누적 시간’이라는 두 개의 변수를 활용해 자바스크립트 스톱워치 오차 해결의 발판을 마련할 것입니다.
시간 데이터를 다루는 시각적인 방법은 [자바스크립트 아날로그 시계 제작] 포스팅에서 더 자세히 배우실 수 있습니다.
2. 자바스크립트 스톱워치 코드
① 밀리초 단위의 정밀도 확보
일반적인 setInterval은 시스템 부하에 따라 오차가 발생할 수 있습니다. 그래서 이번 자바스크립트 스톱워치 오차 해결 프로젝트에서도 Date.now()를 활용해 절대적인 시간 차이를 계산합니다.
function updateTime() {
const now = Date.now();
elapsedTime = now - startTime + savedTime;
display.textContent = formatTime(elapsedTime);
}여기서 savedTime은 일시정지 시점의 시간을 저장하여, 다시 시작할 때 자바스크립트 스톱워치 오차 해결이 가능하도록 돕는 핵심 변수입니다.
스톱워치에서 구현한 정밀한 시간 연산 로직은 다른 멀티미디어 프로젝트에도 활용될 수 있습니다. 특히 영상의 재생 시간을 제어하고 배속 기능을 구현하는 원리가 궁금하시다면 [자바스크립트 커스텀 비디오 플레이어 만들기] 포스팅을 함께 확인해 보세요. 시간 데이터를 다루는 감각을 한층 더 키울 수 있습니다.
② 숫자 포맷팅: padStart()의 마법
시간이 1일 때 01로 보이게 하는 것은 가독성 측면에서 매우 중요합니다. 과거에는 조건문을 복잡하게 썼지만, 최신 자바스크립트에서는 padStart(2, ‘0’) 함수 하나로 아주 깔끔하게 처리할 수 있습니다. 이 부분은 코딩 테스트에서도 자주 활용되니 꼭 기억해 두세요!
function timeToString(time) {
let diffInMin = time / (1000 * 60);
let mm = Math.floor(diffInMin);
let diffInSec = (diffInMin - mm) * 60;
let ss = Math.floor(diffInSec);
let diffInMs = (diffInSec - ss) * 100;
let ms = Math.floor(diffInMs);
let formattedMM = mm.toString().padStart(2, "0");
let formattedSS = ss.toString().padStart(2, "0");
let formattedMS = ms.toString().padStart(2, "0");
return `${formattedMM}:${formattedSS}.${formattedMS}`;
}3. 버튼 비활성화
초보자와 숙련자의 차이는 ‘예외 처리’에서 옵니다. 스톱워치가 이미 실행 중인데 ‘Start’ 버튼을 또 누르면 어떻게 될까요? 타이머가 중첩되어 시간이 제멋대로 흐르게 됩니다.
이를 방지하기 위해 button.disabled = true; 속성을 활용하여 각각의 상황에 맞는 버튼만 활성화되도록 제어했습니다.
function showButton(state) {
if (state === "RUNNING") {
startBtn.disabled = true;
stopBtn.disabled = false;
} else if (state === "STOPPED") {
startBtn.disabled = false;
stopBtn.disabled = true;
} else {
startBtn.disabled = false;
stopBtn.disabled = true;
}
}4. requestAnimationFrame vs setInterval
자바스크립트의 requestAnimationFrame과 setInterval 중 무엇을 써야 할까요? 보통 0.01초 단위의 정밀한 그래픽 갱신이 필요하다면 브라우저의 주사율에 맞춘 requestAnimationFrame이 유리합니다. 하지만 학습용 스톱워치에서는 setInterval로도 충분히 훌륭한 결과물을 낼 수 있습니다. 다만, 브라우저 탭이 백그라운드로 이동할 때 타이머가 느려지는 현상을 방지하려면 앞서 언급한 Date.now() 기반의 시간 계산 방식이 필수적입니다.
5. 실행 영상
6. 더하기
① 랩 타임(Lap Time) 기능 추가
자바스크립트 스톱워치에서 가장 유용한 기능 중 하나는 특정 시점의 기록을 남기는 ‘랩 타임’입니다.
버튼을 누를 때마다 현재 시간을 리스트 형태로 표시해주는 기능을 추가하면 조금 더 완성도 있는 프로젝트를 만들 수 있을 것입니다.
② 로컬 스토리지(LocalStorage)로 데이터 보존
현재 코드는 페이지를 새로고침하면 측정 중이던 기록이 모두 사라집니다.
localStorage에 저장하고, 다시 접속했을 때 그 기록을 불러오는 기능을 추가해 보세요.
오늘 우리는 자바스크립트를 활용해 단순히 숫자가 올라가는 타이머를 넘어, Date.now()를 이용한 정밀한 시간 측정 원리와 UX를 고려한 버튼 제어까지 함께 살펴보았습니다.
자바스크립트 스톱워치 프로젝트는 자바스크립트의 비동기 처리(Asynchronous)와 이벤트 루프(Event Loop)를 이해하는 첫 단추와 같습니다. 브라우저가 화면을 그리는 찰나의 순간에도 우리가 짠 코드가 어떻게 시간을 계산하고 화면에 반영하는지 배울 수 있는 좋은 예제입니다.
처음에는 setInterval을 10ms 단위로 실행하면 정확할 거라 생각했지만, 브라우저의 부하에 따라 조금씩 오차가 발생하는 것을 발견했습니다. 이를 해결하기 위해 단순 카운팅 방식이 아닌, 시작 시점의 Date.now()와 현재 시점의 차이를 계산하는 방식으로 로직을 개선하여 정밀도를 높였습니다. 시간 데이터를 포맷팅(00:00:00)하여 화면에 뿌려주는 문자열 처리 기법도 함께 익힐 수 있었습니다.
코딩 공부를 하다 보면 가끔 “이런 간단한 도구를 만드는 게 정말 도움이 될까?”라는 의문이 들 때가 있습니다. 하지만 오늘 우리가 구현한 ‘숫자 포맷팅’이나 ‘상태 제어’ 로직은 나중에 거대한 웹 애플리케이션을 만들 때도 변함없이 사용되는 핵심 기술입니다. 이처럼 작은 기능을 구현하는 경험들이 쌓여 실생활에 유용한 도구를 만드는 밑거름이 됩니다. 최신 세금 요율을 반영하여 복잡한 급여 산출 로직을 풀어낸 [2026 연봉 실수령액 계산기 제작기]를 통해 자바스크립트로 실질적인 가치를 만드는 방법을 확인해 보시기 바랍니다.
다음 포스팅에서는 이어서 ‘데이터를 기억하는 법’에 대해 다뤄보려 합니다. 우리가 만든 스톱워치나 할 일 목록(To-do List)이 새로고침 후에도 유지되려면 브라우저 저장소를 어떻게 활용해야 하는지, 실무에서 필수적인 Web Storage API를 주제로 찾아오겠습니다.