📢 핵심 30초 요약
체육시간 호루라기 불고, 과학실험에서 "지금 기록해!" 외치느라 지치셨나요? 구글 제미나이(Gemini)에 프롬프트를 입력하면, [체육 30초 운동/10초 휴식 순환 세트 + 과학 1분 간격 데이터 기록 알림 + 대화면 시각 게이지 & TTS 음성 안내 + 탭 백그라운드 무지연 타이머]가 지원되는 단일 HTML 스마트 타이머 웹앱이 완성됩니다.
선생님, 그리고 체육관, 과학실, 음악실 등 교과별 시간 제약 활동을 효율적으로 통제하고 싶으신 교육자 여러분 안녕하세요! 프롬프트로 배우는 바이브 코딩 블로그 에디터입니다. 😊
체육 순환운동(서킷 트레이닝)이나 과학 '물의 상태 변화' 관찰 수업을 진행할 때, "선생님이 수기 스톱워치를 보며 호루라기를 불거나 매 분마다 기록하라고 소리치느라 정작 학생들의 개별 피드백에 집중하기 어려웠던 경험" 다들 있으실 텐데요.
구글 제미나이(Gemini)용 바이브 코딩 프롬프트 하나면, 교실 전자칠판이나 태블릿에 [체육 순환운동 모드 / 과학 1분 실험 모드 / 음악 파트 연습 모드] 프리셋을 띄워두고 정확한 비프음과 음성 안내로 아이들이 스스로 시간을 관리하며 몰입하는 '교과 맞춤형 인터벌 타이머'를 단 1분 만에 구축할 수 있답니다!
📊 제미나이 교과 맞춤 인터벌 타이머의 3가지 핵심 기능
교사의 진행 부담을 덜고 학생들의 자기주도적 활동 몰입을 극대화하는 수업 교구 기능입니다.
| 무엇이 바뀌었나요? (영역) | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 🏃 체육·과학·음악 프리셋 (Subject Preset Engine) |
버튼 하나로 [체육 30초 운동/10초 휴식 5세트], [과학 1분 간격 10회 관찰], [음악 3분 합주] 모드로 즉시 전환됩니다. | 수업 상황에 맞춰 원클릭으로 세트 및 인터벌 자동 전환 |
| 🔊 카운트다운 비프 & TTS (Web Audio & Speech API) |
전환 3초 전 '삐-삐-삐-삐익!' 실감 나는 호루라기 비프음과 함께 "휴식 시작!", "지금 온도를 기록하세요!" 음성 낭독을 지원합니다. | 넓은 체육관이나 과학실에서도 음성 안내로 명확한 활동 통제 |
| ⏱️ 백그라운드 무지연 타이머 (Web Worker Precision) |
브라우저 탭을 내리거나 다른 화면을 띄워도 타이머가 느려지거나 멈추지 않는 초정밀 백그라운드 타이머 엔진이 내장되어 있습니다. | 전자칠판에 PPT를 띄우면서도 백그라운드 알림음 100% 유지 |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
초보자도 에러 없이 바로 실행할 수 있도록 '에러 방지 기본 안전장치(Web Worker 타이머 지연 방지, Web Audio 사운드 자동 활성화, 전체화면 UI)'가 내장되고, 우리 반 수업 종목에 맞게 조율하는 '거꾸로 프롬프트(Reverse Prompting)'가 적용된 제미나이 전용 만능 프롬프트입니다.
🪄 제미나이 전용 '교과 맞춤 인터벌 타이머' 만능 프롬프트
"당신은 초등 체육·과학 융합 교육 및 정밀 타이머/Web Audio 웹앱 전문 개발자입니다.
체육 순환운동 세트와 과학 실험 관찰 주기를 자동 안내해 주는 '교과 맞춤 인터벌 타이머 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. 백그라운드 탭 시간 지연 방지: 브라우저 탭 비활성화 시 `setInterval`이 느려지는 현상을 방지하도록 `requestAnimationFrame` 또는 Web Worker 기반 정밀 시간 보정 알고리즘을 내장해 주세요.
2. Web Audio 자동 재생 대응: 사용자 첫 클릭(시작 버튼) 시 AudioContext를 초기화하여 끊김 없는 비프음(3초 카운트다운 톤)과 호루라기음을 합성해 주세요.
3. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 교과별 3대 원클릭 프리셋 모드:
- 🏃 [체육 순환운동]: 30초 활동(그린 화면) ➔ 10초 휴식(옐로우 화면) ➔ 5세트 반복 ➔ 세트 완료 시 폭죽(Confetti)
- 🧪 [과학 관찰실험]: 1분 간격 10회 반복 비프음 + "지금 관찰 데이터를 기록하세요!" TTS 음성 안내
- 🎵 [음악 기악연습]: 3분 파트 연습 ➔ 30초 파트 교대 알림
2. 대화면 시각 프로그레스 게이지:
- 교실 맨 뒤에서도 선명하게 보이는 대형 SVG 원형 카운트다운 게이지 및 현재 세트(예: 3 / 5 세트) 표시
3. 사용자 정의 커스텀 타이머 빌더:
- 슬라이더로 활동 시간(초), 휴식 시간(초), 세트 수를 조절하여 나만의 프리셋 저장
4. 디자인: 활동 시 초록, 휴식 시 주황/노랑으로 배경이 전환되는 직관적인 풀스크린 UI (전자칠판 및 태블릿 완벽 호환)
코드를 작성하기 전, 추가하고 싶은 전용 교과 모드(예: 5분 독서 뽀모도로, 3분 미술 크로키 등)나 기본 세트 설정을 나에게 2가지 질문을 먼저 물어봐줘."
체육 순환운동 세트와 과학 실험 관찰 주기를 자동 안내해 주는 '교과 맞춤 인터벌 타이머 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. 백그라운드 탭 시간 지연 방지: 브라우저 탭 비활성화 시 `setInterval`이 느려지는 현상을 방지하도록 `requestAnimationFrame` 또는 Web Worker 기반 정밀 시간 보정 알고리즘을 내장해 주세요.
2. Web Audio 자동 재생 대응: 사용자 첫 클릭(시작 버튼) 시 AudioContext를 초기화하여 끊김 없는 비프음(3초 카운트다운 톤)과 호루라기음을 합성해 주세요.
3. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 교과별 3대 원클릭 프리셋 모드:
- 🏃 [체육 순환운동]: 30초 활동(그린 화면) ➔ 10초 휴식(옐로우 화면) ➔ 5세트 반복 ➔ 세트 완료 시 폭죽(Confetti)
- 🧪 [과학 관찰실험]: 1분 간격 10회 반복 비프음 + "지금 관찰 데이터를 기록하세요!" TTS 음성 안내
- 🎵 [음악 기악연습]: 3분 파트 연습 ➔ 30초 파트 교대 알림
2. 대화면 시각 프로그레스 게이지:
- 교실 맨 뒤에서도 선명하게 보이는 대형 SVG 원형 카운트다운 게이지 및 현재 세트(예: 3 / 5 세트) 표시
3. 사용자 정의 커스텀 타이머 빌더:
- 슬라이더로 활동 시간(초), 휴식 시간(초), 세트 수를 조절하여 나만의 프리셋 저장
4. 디자인: 활동 시 초록, 휴식 시 주황/노랑으로 배경이 전환되는 직관적인 풀스크린 UI (전자칠판 및 태블릿 완벽 호환)
코드를 작성하기 전, 추가하고 싶은 전용 교과 모드(예: 5분 독서 뽀모도로, 3분 미술 크로키 등)나 기본 세트 설정을 나에게 2가지 질문을 먼저 물어봐줘."
🏃 실전 적용 3단계 순서
- 1단계 (제미나이에 프롬프트 입력): 위 프롬프트를 복사하여 구글 제미나이에 전달하고, 수업 교과 활동 시간에 맞춰 AI 질문에 답합니다.
- 2단계 (HTML 파일 저장): 제미나이가 완성해 준 단일 HTML 코드를 메모장에 붙여넣고
smart_interval_timer.html로 저장합니다. - 3단계 (전자칠판 전체화면 가동): 교실이나 체육관 화면에 전체화면(F11)으로 띄워두면, 호루라기 없이도 아이들이 소리와 색상에 맞춰 척척 움직이는 주도적인 수업이 완성됩니다!
🎯 에디터 한줄평
"선생님이 시간 확인의 굴레에서 벗어날 때, 비로소 아이들의 움직임과 배움의 과정을 더 깊이 관찰할 수 있습니다. 제미나이 바이브 코딩으로 완벽한 시간 통제와 수업의 여유를 모두 잡아보세요!"
📌 구글 제미나이 웹 및 개발자 리소스
Google Gemini 공식 포털 바로가기 🔗
