[대상 및 주제]

• 대상: 이 타이머는 <만 3세 유아 / 만 5세 유아 / 초등 저학년> 아이들이 사용할 거야.

• 활동 주제: <정리시간 / 놀이시간 / 양치시간 / 독서시간 / 휴식시간>에 활용할 예정이야.

• 타이머 주제를 상단에 크게 띄워줘

[컨셉 및 시각적 애니메이션 (핵심)]

• 타이머 컨셉: 남은 시간을 시각적으로 보여주기 위해 <아이스크림이 서서히 녹는 타이머 / 무지개 색깔이 한줄씩 없어지는 타이머 / 눈사람이 천천히 녹아내리는 타이머 / 일반적인 커다란 원형 게이지 타이머> 컨셉을 적용해 줘.

• 애니메이션 상세: 남은 시간의 비율(%)에 맞춰 설정한 컨셉이 서서히 변하는 과정을 CSS 애니메이션이나 HTML5 Canvas API를 사용해 코드로 직접 부드럽게 그려서 구현해 줘. (외부 이미지 링크는 사용하지 말 것)

[타이머 기본 기능]

• 시간 설정: <1분 / 3분 / 5분 / 10분> 타이머로 기본 설정해 줘.

• 컨트롤 버튼: 화면 중앙 하단에 '시작', '일시정지', '다시하기' 버튼을 큼직한 CTA(Call to Action) 형태로 만들어 줘.

• 소리 및 효과: 종료 시 <종소리 / 박수소리 / 쾌활한 알림음>이 울리게 해줘. (브라우저 정책을 고려해, 사용자가 '시작' 버튼을 누를 때 오디오가 활성화되도록 코드 작성)

• 종료 안내: 시간이 다 끝나면 컨셉에 맞는 완료 애니메이션과 함께, 화면 중앙에 <"정리할 시간이에요!" / "놀이를 마무리해요!">라는 문구가 아주 크게 페이드인(Fade-in) 되도록 해줘.

• 컨셉과 어울리는 귀여운 음악을 넣어줘

[디자인]

• 테마 분위기: 전체적인 화면 배경과 색감은 <파스텔톤 / 공룡테마 / 우주테마 / 숲속테마> 느낌으로 예쁘게 꾸며줘.

• 시각적 직관성: 숫자를 매우 크게 보여주고, 아직 글자를 읽지 못하는 아이들도 그림이 변하는 모습만으로 남은 시간을 직관적으로 이해하고 행동을 조절할 수 있게 해줘.

[사용 환경]

• 디바이스: 교실에 있는 <전자칠판 / 태블릿 / 스마트TV>에 띄워놓고 사용할 거야.

• 레이아웃: 16:9 비율의 전체 화면으로 구성해 줘.

• 반응형: 교실 맨 뒤에 있는 아이들도 잘 볼 수 있도록 모든 요소를 큼직하게 배치하고, 어떤 디바이스에서도 화면이 깨지지 않는 반응형 레이아웃을 적용해 줘.