📢 핵심 30초 요약
자율학습과 블록타임제 수업, 아이들의 집중력 관리를 한 번에 끝내세요! 구글 제미나이(Gemini)에 프롬프트를 입력하면, [25분 몰입 공부 + 5분 뇌 휴식 자동 전환 + 쉬는 시간 귀여운 SVG 스트레칭 애니메이션 + Web Audio 빗소리 ASMR & 차임벨]이 탑재된 단일 HTML 풀스크린 대시보드가 완성됩니다.
선생님, 그리고 아침 자율학습 시간이나 긴 블록타임제 수업 동안 아이들의 뇌 피로도를 줄이고 차분한 교실 분위기를 만들고 싶으신 교육자 여러분 안녕하세요! 프롬프트로 배우는 바이브 코딩 블로그 에디터입니다. 😊
수업 시간에 "집중해라", "이제 쉬어라" 잔소리를 반복해도 "아이들이 언제까지 공부하고 언제 쉬어야 하는지 시간 감각을 잡기 어려워 산만해졌던 경험" 다들 있으실 텐데요.
구글 제미나이(Gemini)용 바이브 코딩 프롬프트 하나면, 교실 교탁 PC나 전자칠판에 25분 동안은 차분한 게이지와 은은한 집중 사운드를 띄우고, 5분 휴식 시간이 되면 귀여운 캐릭터가 나와 스트레칭 체조를 함께 해주는 '학급 뽀모도로 루틴 대시보드'를 단 1분 만에 구축할 수 있답니다!
📊 제미나이 뽀모도로 25+5 집중 대시보드의 3가지 핵심 기능
인지과학적 시간 관리법과 신체 이완 루틴을 결합한 스마트 학급 경영 기능입니다.
| 무엇이 바뀌었나요? (영역) | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| ⏱️ 25+5 자동 전환 게이지 (Pomodoro Cycle Engine) |
25분 집중 모드(딥 그린) ➔ 5분 휴식 모드(오렌지)가 자동으로 순환되며 대형 SVG 원형 게이지로 남은 시간을 직관적으로 보여줍니다. | 아침 자율독서 및 수학 문제 풀이 블록수업에 전체화면 적용 |
| 🤸 4단계 스트레칭 애니메이션 (In-Browser SVG Gym) |
5분 휴식이 시작되면 [기지개 켜기 ➔ 목/어깨 돌리기 ➔ 눈 피로 풀기 ➔ 심호흡] 귀여운 캐릭터 체조가 단계별로 자동 재생됩니다. | 자리에서 일어나 화면 속 캐릭터 동작을 다 함께 따라 하기 |
| 🌧️ 집중 백색소음 & 맑은 벨 (Web Audio ASMR & TTS) |
집중 시간에는 잔잔한 빗소리/장작불 ASMR을 켜둘 수 있고, 모드 전환 시 맑은 숲속 차임벨과 친절한 음성 안내가 흘러나옵니다. | 선생님 목소리 대신 부드러운 알림음으로 자연스러운 분위기 전환 |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
초보자도 에러 없이 바로 실행할 수 있도록 '에러 방지 기본 안전장치(Web Worker 타이머 오차 방지, 외부 영상 의존 없는 인라인 SVG 애니메이션, Web Audio 자동 활성화)'가 내장되고, 우리 반 시간표에 맞게 조율하는 '거꾸로 프롬프트(Reverse Prompting)'가 적용된 제미나이 전용 만능 프롬프트입니다.
🪄 제미나이 전용 '뽀모도로 집중 & 스트레칭 루틴' 만능 프롬프트
"당신은 초등 인성·학습 코칭 및 인터랙티브 타이머/애니메이션 웹앱 전문 개발자입니다.
25분 집중 공부와 5분 쉬는 시간 스트레칭 체조를 시각적으로 안내하는 '학급 뽀모도로 루틴 대시보드 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. 외부 미디어 의존 제로: 유튜브 영상이나 외부 GIF 없이 100% 인라인 SVG 벡터와 CSS 키프레임 애니메이션으로 스트레칭 캐릭터 동작을 완벽히 구현해 주세요.
2. 정밀 백그라운드 타이머: 브라우저 탭 비활성화 시에도 시간이 늘어지지 않도록 Web Worker/정밀 타임스탬프 보정 코드를 탑재해 주세요.
3. Web Audio 차임벨 & ASMR: 모드 전환 맑은 벨소리 및 집중용 빗소리 화이트 노이즈 자체 합성 재생
4. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 25+5 순환 타이머 & 대형 SVG 게이지 (풀스크린 뷰):
- [집중 모드 25분]: 차분한 딥그린 배경, 원형 프로그레스 바 감소, 은은한 집중 ASMR 토글
- [휴식 모드 5분]: 화사한 웜오렌지 배경 자동 전환, 경쾌한 휴식 차임벨 울림
2. 쉬는 시간 4단계 자동 체조 가이드:
- 1단계(1분): 🙆 하늘 높이 기지개 켜기
- 2단계(1분): 🔄 목과 어깨 천천히 돌리기
- 3단계(1분): 👀 눈 꼭 감고 깜빡이기
- 4단계(2분): 🌬️ 4초 들이마시고 4초 내쉬는 심호흡
3. 교사용 간편 커스텀 설정:
- ⚙️ 설정에서 [저학년 15+3분 / 고학년 40+10분 / 뽀모도로 25+5분] 원클릭 시간 변경 프리셋 제공
4. 디자인: 교실 맨 뒤에서도 눈이 편안한 고대비 미니멀 다크/모던 뷰 (F11 전체화면 완벽 지원)
코드를 작성하기 전, 기본 집중 시간(25분 vs 15분 vs 40분)이나 스트레칭 동작에 추가하고 싶은 체조를 나에게 2가지 질문을 먼저 물어봐줘."
25분 집중 공부와 5분 쉬는 시간 스트레칭 체조를 시각적으로 안내하는 '학급 뽀모도로 루틴 대시보드 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. 외부 미디어 의존 제로: 유튜브 영상이나 외부 GIF 없이 100% 인라인 SVG 벡터와 CSS 키프레임 애니메이션으로 스트레칭 캐릭터 동작을 완벽히 구현해 주세요.
2. 정밀 백그라운드 타이머: 브라우저 탭 비활성화 시에도 시간이 늘어지지 않도록 Web Worker/정밀 타임스탬프 보정 코드를 탑재해 주세요.
3. Web Audio 차임벨 & ASMR: 모드 전환 맑은 벨소리 및 집중용 빗소리 화이트 노이즈 자체 합성 재생
4. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 25+5 순환 타이머 & 대형 SVG 게이지 (풀스크린 뷰):
- [집중 모드 25분]: 차분한 딥그린 배경, 원형 프로그레스 바 감소, 은은한 집중 ASMR 토글
- [휴식 모드 5분]: 화사한 웜오렌지 배경 자동 전환, 경쾌한 휴식 차임벨 울림
2. 쉬는 시간 4단계 자동 체조 가이드:
- 1단계(1분): 🙆 하늘 높이 기지개 켜기
- 2단계(1분): 🔄 목과 어깨 천천히 돌리기
- 3단계(1분): 👀 눈 꼭 감고 깜빡이기
- 4단계(2분): 🌬️ 4초 들이마시고 4초 내쉬는 심호흡
3. 교사용 간편 커스텀 설정:
- ⚙️ 설정에서 [저학년 15+3분 / 고학년 40+10분 / 뽀모도로 25+5분] 원클릭 시간 변경 프리셋 제공
4. 디자인: 교실 맨 뒤에서도 눈이 편안한 고대비 미니멀 다크/모던 뷰 (F11 전체화면 완벽 지원)
코드를 작성하기 전, 기본 집중 시간(25분 vs 15분 vs 40분)이나 스트레칭 동작에 추가하고 싶은 체조를 나에게 2가지 질문을 먼저 물어봐줘."
🏃 실전 적용 3단계 순서
- 1단계 (제미나이에 프롬프트 입력): 위 프롬프트를 복사하여 구글 제미나이에 전달하고, 우리 반 학년 수업 시간에 맞춰 AI 질문에 답합니다.
- 2단계 (HTML 파일 저장): 제미나이가 완성해 준 단일 HTML 코드를 메모장에 붙여넣고
pomodoro_routine_board.html로 저장합니다. - 3단계 (전자칠판 전체화면 가동): 교탁 PC나 전자칠판에서 전체화면(F11)으로 띄워두면, 종소리 없이도 아이들이 알아서 집중하고 제시간에 스트레칭하는 평온한 교실이 완성됩니다!
🎯 에디터 한줄평
"집중력은 억지로 쥐어짜는 것이 아니라, 몰입과 휴식의 리듬이 맞물릴 때 자연스럽게 솟아납니다. 제미나이 바이브 코딩으로 아이들에게 지치지 않는 하루의 마법을 선물해 보세요!"
📌 구글 제미나이 웹 및 개발자 리소스
Google Gemini 공식 포털 바로가기 🔗
