AI랑 같이하는 코딩

11일차에서는 집중 타이머를 추가해 생산성 기능을 강화합니다. 할 일과 메모를 정리하는 것에서 한 걸음 더 나아가, 집중 시간을 직접 측정하고 관리하는 흐름을 웹앱에 붙이는 단계입니다.

오늘은 25분 타이머 기준으로 시작, 정지, 초기화 버튼을 구현합니다. 초보자에게도 적합한 `setInterval` 패턴을 익히면 이후 카운트다운/알림 기능 확장도 쉬워집니다.

1. 오늘 만들 기능 소개

오늘의 핵심 기능은 카운트다운 타이머입니다. 25:00에서 시작해 1초마다 시간이 줄어들고, 00:00이 되면 자동으로 멈추게 만듭니다. 버튼은 `시작`, `정지`, `초기화` 3개를 두어 조작 흐름을 단순하게 유지합니다.

2. AI에게 요청할 프롬프트

타이머는 상태 관리가 중요해서 변수 구조를 명확히 요청하는 것이 좋습니다.

하루 관리 웹앱 11일차 작업이야.
25분 집중 타이머를 JavaScript로 구현해줘.
시작/정지/초기화 버튼이 있고, 남은 시간을 mm:ss 형식으로 표시해줘.
setInterval 중복 실행 방지와 0초 도달 시 자동 정지도 포함해줘.

3. 코드 작성과 실행 과정

먼저 타이머 표시 영역과 3개 버튼을 HTML에 추가합니다. JavaScript에서는 `remainingSeconds`, `timerId` 변수를 두고, 시작 시 interval 생성, 정지 시 clearInterval, 초기화 시 기본값(1500초) 복원 흐름으로 구현합니다.

4. 코드 이해하기

오늘 핵심은 "interval 수명 관리"입니다. 시작 버튼을 여러 번 눌렀을 때 interval이 중첩되면 시간이 비정상적으로 빨라지므로, `timerId`가 이미 있으면 새 interval을 만들지 않도록 막아야 합니다.

그리고 화면 표시는 `mm:ss` 포맷팅이 중요합니다. 한 자리 수 초를 `09`처럼 보이게 처리하면 사용자 경험이 훨씬 좋아집니다. 기능 동작 + 표시 품질을 함께 챙기는 습관이 이 단계에서 중요합니다.

5. 오늘 만든 내용 정리

오늘은 25분 집중 타이머를 만들고 시작/정지/초기화 동작을 완성했습니다. 이제 하루 관리 웹앱이 기록 중심에서 생산성 실행 도구까지 확장됐습니다. 다음 회차에서는 습관 체크리스트를 추가해 일상 루틴 관리 기능을 강화하겠습니다.

6. 자주 묻는 질문

7. 다음 단계로 이어가기