소리로 알려 주는 집중 타이머

어느새 세 시간… 대신 25분만 집중하고, 끝나면 "삑". 집중하려고 만든 타이머가 거짓말하지 않게 만드는 게 오늘의 핵심이에요.

1AI에게 세 줄로 요청하기

HTML 파일 하나로, 25분 집중 타이머 페이지를 만들어줘.
시작 버튼을 누르면 남은 시간이 mm:ss로 크게 줄어들게 해줘.
인터넷 연결이나 설치 없이 파일 하나로 동작하게 해줘.

소리, 일시정지, 휴식, 분 바꾸기, 탭 제목은 일부러 뺐어요. 파일로 확인할 때는 25분을 기다리지 말고 "분을 입력하는 칸을 넣어줘"라고 해서 1분으로 시험하세요.

2연습장에서 시간 흉내로 시험하기

연습장에는 시간 흉내가 있어요. 25분을 한 번에 빨리감기하고, 화면이 10초 멈췄다 풀린 상황도 만들 수 있어요. 소리는 가짜 스피커가 몇 번 울렸는지 세 주는데, 진짜 브라우저처럼 누르기 전에는 소리를 막아요.

3미션: 거짓말하지 않는 타이머

1. 기본: 시작하면 mm:ss로 줄어든다

   시작하고 1분이 지나면 24:00이 보여야 해요.

2. 끝나면 소리로 알려 줘 ⭐

   예시 한 줄: "시간이 다 되면 소리가 나게 해줘. 소리 파일 없이 브라우저가 직접 삑 소리를 내게 하고, 3번 울려줘." 소리가 안 나면 힌트: 브라우저는 한 번 누르기 전에는 소리를 막아요. "시작 버튼을 눌렀을 때 소리 낼 준비를 해 둬"라고 하세요.

3. 이 타이머는 시간을 어떻게 셀까 ⭐

   A. 1초마다 1씩 빼기, B. 끝나는 시각과 지금 시각의 차이로 계산. AI에게 "코드 말고 말로 설명해줘"라고 물어보세요. 자동 검사는 화면을 10초 멈췄다 풀어 보고, 시간이 정확한지 봐요. A라면 힌트: "1초마다 1씩 빼지 말고, 끝나는 시각을 기억해 두고 현재 시각과 비교해서 계산해줘."

4. 쉬는 시간도

   집중이 끝나면 5분 휴식, 휴식이 끝나면 다시 집중. 지금이 무엇인지 글자와 배경색으로. 힌트: 자동으로 바로 시작할지, 버튼을 눌러야 시작할지도 정하세요.

5. 탭 제목에 남은 시간

   다른 탭을 봐도 남은 시간이 보이게. 끝나면 제목이 깜박이면 더 좋아요.

6. 자유

   분 직접 입력, 오늘 몇 번 집중했는지, 소리 크기, 데스크톱 알림, 일시정지 후 이어서…

안 될 때 확인할 것

실험: 화면이 멈추면 타이머는?

아래 두 숫자는 같은 순간에 시작한 타이머예요. 왼쪽은 1초마다 1씩 더하고, 오른쪽은 시작 시각과 지금 시각의 차이를 계산해요. 3초 멈추기를 누르면 이 페이지가 정말로 3초 동안 멈춰요(무거운 작업 흉내).

소리는 "한 번 누른 뒤"에야 나요

시작 버튼이 곧 "소리 허락 버튼"이에요. 시작을 눌렀다면 25분 뒤 끝날 때 나는 소리는 막히지 않아요. 소리가 안 나는 타이머는 대부분 이 준비를 빼먹은 경우예요.

자주 묻는 질문