카운트다운 타이머

목표 시간까지 남은 시간을 표시합니다

00:00:00
시 : 분 : 초

시간

:

분

:

초

카운트다운 타이머란?

카운트다운 타이머는 설정한 시간부터 0까지 거꾸로 세어주는 온라인 도구입니다. 요리, 운동, 공부, 프레젠테이션 등 정해진 시간을 관리해야 할 때 별도 앱 설치 없이 브라우저에서 바로 사용할 수 있습니다.

원형 프로그레스 바로 남은 시간을 시각적으로 확인할 수 있고, 타이머 완료 시 알림 소리가 울려 다른 작업을 하면서도 시간을 놓치지 않습니다.

탭을 옮겨도 시간이 어긋나지 않습니다

브라우저 타이머의 고질적인 문제가 하나 있습니다. 배경 탭으로 넘어가면 브라우저가 전력을 아끼려고 타이머 실행을 늦추기 때문에, 1초마다 남은 시간을 하나씩 빼는 방식으로 만들면 다른 탭에 있는 동안 시간이 느리게 갑니다. 10분 타이머가 12분 만에 울리는 식입니다.

이 타이머는 그렇게 만들지 않았습니다. 시작할 때 끝나는 시각을 정해두고, 화면을 갱신할 때마다 그 시각과 현재 시각의 차이를 다시 계산합니다. 그래서 다른 탭에 갔다 오든 화면이 꺼졌다 켜지든 남은 시간이 정확합니다. 돌아오는 순간 올바른 값으로 맞춰집니다.

다만 탭을 완전히 닫으면 타이머도 사라집니다. 최소화하거나 다른 탭으로 옮기는 것은 괜찮지만 창을 닫으면 안 됩니다.

알림이 안 뜬다면

시간이 다 되면 소리와 함께 브라우저 알림이 뜹니다. 알림이 보이지 않는다면 대개 두 가지 중 하나입니다.

  • 알림 권한을 허용하지 않은 경우 — 주소창 왼쪽 자물쇠 아이콘을 눌러 알림을 허용으로 바꾸면 됩니다. 처음 뜬 권한 요청을 무심코 닫았다면 이 경로로 다시 켜야 합니다.
  • 운영체제의 집중 모드 — 윈도우의 집중 지원이나 맥의 방해 금지 모드가 켜져 있으면 브라우저 알림이 표시되지 않습니다. 소리는 나므로 볼륨을 켜두세요.

소리 역시 브라우저 정책의 영향을 받습니다. 페이지를 연 뒤 아무것도 누르지 않은 상태에서는 자동 재생이 차단될 수 있는데, 시작 버튼을 누르는 행위 자체가 사용자 상호작용으로 인정되므로 실사용에서는 문제가 없습니다.

언제 이걸 쓰고 언제 다른 걸 쓰나

카운트다운은 끝나는 시점을 알아야 할 때 씁니다. 면 삶기, 스팀 다리미 예열, 발표 시간 지키기, 아이 스크린 타임처럼 정해진 시간이 지나면 알려주면 되는 경우입니다.

반대로 얼마나 걸렸는지를 재는 것이 목적이면 스톱워치가 맞습니다. 집중과 휴식을 정해진 비율로 반복하는 것이 목적이면 뽀모도로 타이머가 세션 관리까지 해주므로 편합니다.

자주 묻는 질문

화면이 꺼져도 울리나요?

PC에서 모니터만 꺼진 상태라면 울립니다. 다만 기기가 절전이나 최대 절전 모드로 들어가면 브라우저 자체가 멈추므로 알림이 오지 않습니다. 모바일에서도 화면을 끄면 브라우저가 중단될 수 있으니, 자리를 비울 예정이라면 기기 기본 알람 앱을 쓰는 편이 확실합니다.

여러 개를 동시에 돌릴 수 있나요?

한 탭에서는 하나입니다. 여러 개가 필요하면 탭을 여러 개 열어 각각 설정하세요. 다만 탭마다 알림이 따로 뜨므로 어느 것이 울렸는지 헷갈릴 수 있습니다.

설정한 시간이 기억되나요?

기억되지 않습니다. 새로고침하거나 탭을 닫으면 초기화되며 매번 다시 설정해야 합니다.

작동 원리

카운트다운 타이머는 목표 시각과 현재 시각의 차이를 밀리초 단위로 계산하고, 이를 일/시/분/초로 변환하여 표시합니다. setInterval로 표시를 주기적으로 갱신합니다. 남은 시간을 매번 빼는 것이 아니라 목표 시각과 현재 시각의 차이를 다시 계산하는 방식이라, 다른 탭에 갔다 와도 값이 어긋나지 않습니다. 시간이 다 되면 브라우저 알림으로 알려줍니다.

같이 보면 좋은 도구

함께 보면 도움되는 글