Free Teaching Tool

수업 타이머

남은 시간을 큰 숫자와 원형 게이지로 보여 줍니다. 한 번 재는 카운트다운부터 ‘워밍업 → 말하기 → 정리’처럼 여러 구간을 이어서 도는 진행표까지 한 화면에서 쓰실 수 있습니다.

설정한 내용은 브라우저 밖으로 전송되지 않습니다.

초 칸에 90을 넣으시면 1분 30초로 받습니다. 최대 23시간 59분 59초까지 잴 수 있습니다.

05:00

카운트다운

진행 순서

    설정을 마치면 진행 순서가 여기에 나옵니다.

    시작을 기다리고 있습니다.

    휴대폰·태블릿으로 띄워 두실 때

    화면이 저절로 꺼지면 알림음이 울리지 않을 수 있습니다. 기기의 ‘화면 자동 꺼짐’ 시간을 넉넉히 잡아 두시거나 충전기를 꽂아 두세요. 화면이 꺼졌다가 다시 켜져도 남은 시간은 어긋나지 않습니다 — 이 타이머는 흘러간 프레임을 세는 것이 아니라 시작한 시각과 지금 시각의 차이를 매번 다시 계산하기 때문입니다.

    사용법

    1. 1

      종류를 고릅니다

      맨 위 네 개 탭에서 오늘 필요한 것을 고르세요. 카운트다운은 한 번만 재는 가장 단순한 타이머입니다. 구간 연속은 ‘워밍업 5분 → 말하기 활동 10분 → 정리 3분’처럼 여러 토막을 이어서 돌립니다. 스톱워치는 거꾸로 흘러간 시간을 재고, 집중·휴식 반복은 정해진 집중 시간과 쉬는 시간을 정해진 횟수만큼 되풀이합니다. 탭을 바꾸면 진행 중이던 타이머는 초기화됩니다.

    2. 2

      시간을 정합니다

      분과 초를 직접 넣으시거나 1·3·5·10·15·20분 버튼을 누르세요. 구간 연속 탭에서는 ‘구간 추가’로 줄을 늘리고, 화살표 버튼으로 순서를 바꾸고, 이름을 적어 두시면 진행 중에 지금이 어느 구간인지 화면에 그대로 나옵니다. 이름을 비워 두시면 ‘1번째 구간’처럼 번호로 부릅니다. 구간은 20개까지, 한 구간은 최대 23시간 59분 59초까지 넣을 수 있습니다.

    3. 3

      시작하고 크게 띄웁니다

      ‘시작’을 누르면 원형 게이지가 줄어들기 시작합니다. 남은 30초부터 색과 안내 문구가 바뀌고, 10초부터 한 번 더 바뀝니다. ‘전체화면’을 누르면 교실 뒤에서도 보이도록 숫자가 화면을 가득 채웁니다(빠져나올 때는 Esc). 구간이 끝날 때마다 짧은 알림음이 울리고 다음 구간이 자동으로 이어집니다.

    자주 묻는 질문

    설정한 내용이 저장되나요?

    저장되지 않습니다. 모든 처리는 브라우저 안에서만 이루어지며 서버로 전송되는 정보가 없습니다. 페이지를 새로 고치면 구간 설정도 기록도 함께 사라집니다. 한 번 열어 두셨다면 인터넷 연결이 끊겨도 그대로 쓰실 수 있습니다.

    다른 탭을 보고 있어도 시간이 맞나요?

    맞습니다. 이 타이머는 화면을 몇 번 그렸는지로 시간을 세지 않습니다. 시작한 순간의 시각을 기억해 두고 ‘지금 시각 − 시작 시각 − 멈춰 있던 시간’을 매번 처음부터 다시 계산합니다. 그래서 다른 탭을 한참 보다가 돌아오셔도 남은 시간이 정확합니다. 다만 브라우저는 보이지 않는 탭의 타이머 실행을 늦추기 때문에, 알림음이 몇 초에서 길게는 1분까지 늦게 울릴 수 있습니다. 소리로 수업을 끊으실 계획이라면 타이머 탭을 화면에 두시는 편이 안전합니다.

    휴대폰 화면이 꺼지면 어떻게 되나요?

    남은 시간은 어긋나지 않습니다. 화면을 다시 켜시면 그동안 흘러간 만큼이 이미 반영된 숫자가 나옵니다. 다만 화면이 꺼져 있는 동안에는 알림음이 울리지 않을 수 있습니다. 화면 꺼짐 방지를 지원하는 브라우저에서는 타이머가 도는 동안 화면을 잡아 두려고 시도하고, 그 결과를 안내 상자 아래에 적어 드립니다. 지원하지 않는 기기라면 ‘화면 자동 꺼짐’ 시간을 늘려 주세요.

    알림음이 나지 않습니다.

    ‘알림음 켜기’가 켜져 있는지 먼저 확인해 주세요. 브라우저는 사용자가 직접 누른 동작 안에서만 소리를 시작할 수 있어서, ‘시작’을 한 번도 누르지 않으면 아무 소리도 나지 않습니다. 소리는 파일을 내려받는 것이 아니라 브라우저의 오실레이터로 그 자리에서 만들어 내는 짧은 합성음이라, 기기가 무음 모드이거나 미디어 볼륨이 0이면 들리지 않습니다.

    구간은 몇 개까지 넣을 수 있나요?

    20개까지입니다. 그 이상은 진행 목록이 화면을 넘어가 오히려 보기 어려워집니다. 한 구간의 길이는 최대 23시간 59분 59초이고, 시간이 0인 줄은 세지 않고 조용히 건너뜁니다(몇 줄을 건너뛰었는지는 시작할 때 알려 드립니다). 20개를 넘겨 넣으시면 앞에서 20개만 진행표에 올립니다.

    ‘집중·휴식 반복’은 어떻게 도나요?

    집중 시간과 휴식 시간을 정하고 반복 횟수를 정하면, ‘집중 → 휴식 → 집중 → 휴식 → … → 집중’ 순서로 이어서 돕니다. 휴식은 회차와 회차 사이에만 들어가고 마지막 집중 뒤에는 붙지 않습니다. 끝났는데 쉬라고 시키면 종료 알림이 그만큼 늦게 오기 때문입니다. 휴식을 0분으로 두시면 집중만 연달아 반복합니다.

    색은 언제 바뀌나요?

    지금 구간의 남은 시간이 30초 이하가 되면 한 번, 10초 이하가 되면 한 번 더 바뀝니다. 색만으로 알리지 않고 숫자 아래 안내 문구도 함께 바뀌므로, 색을 구분하기 어려운 분이나 흑백 화면에서도 상태를 아실 수 있습니다.

    전체화면이 되지 않습니다.

    브라우저가 전체화면 기능을 막아 두었거나 지원하지 않는 경우에는, 페이지 안에서 타이머가 화면을 가득 채우는 방식으로 대신 커집니다. 두 경우 모두 Esc 키를 누르거나 같은 버튼을 다시 누르시면 원래 크기로 돌아옵니다. iPhone의 Safari처럼 전체화면 API를 지원하지 않는 환경에서 이 대체 방식이 쓰입니다.

    움직이는 게이지가 불편합니다.

    운영체제의 ‘동작 줄이기’(Windows는 애니메이션 표시 끄기, iOS·macOS는 동작 줄이기) 설정을 켜 두시면 게이지가 부드럽게 흐르지 않고 한 칸씩 조용히 바뀝니다. 이 도구는 prefers-reduced-motion 설정을 그대로 따르며, 시간 계산과 알림음은 완전히 같습니다.

    만든 방식과 출처

    원형 게이지는 이 페이지에서 직접 그리는 인라인 SVG이고, 색은 이 도구 전용으로 정한 네 단계(평상·30초·10초·종료)를 씁니다. 특정 제품의 외형이나 이름을 흉내 내지 않은 일반적인 원형 게이지입니다. 알림음은 소리 파일이 아니라 브라우저의 Web Audio 오실레이터로 그 자리에서 만드는 합성음입니다. 화면에 쓰인 글, 예시 구간 이름, 안내 문구는 모두 직접 작성했고 외부에서 가져온 데이터·글꼴·이미지·스크립트는 하나도 쓰지 않았습니다.