📢 핵심 30초 요약
어수선한 아침 등교 시간, 스스로 하루를 준비하는 활기찬 교실 루틴을 만들어보세요! 구글 제미나이(Gemini)에 프롬프트를 입력하면, [Stepperize 4단계 인터랙티브 스텝 폼 + 마음 날씨·다짐 체크 + 비밀 칭찬 미션 뽑기 + 전자칠판 실시간 현황판]이 지원되는 단일 HTML 아침 키오스크 웹앱이 완성됩니다.
선생님, 그리고 아이들이 등교하자마자 스스로 하루 일과를 차분하게 준비하고 서로를 배려하는 따뜻한 아침 교실을 가꾸고 계신 교육자 여러분 안녕하세요! 프롬프트로 배우는 바이브 코딩 블로그 에디터입니다. 😊
아침 등교 시간마다 "가방 정리했니?", "알림장 확인했니?", "오늘 컨디션은 어떠니?"라며 선생님 혼자 20명이 넘는 아이들에게 일일이 지시하고 챙기느라 아침부터 진이 빠지셨던 경험 다들 있으실 텐데요.
구글 제미나이(Gemini)용 바이브 코딩 프롬프트 하나면, 교실 앞 태블릿 키오스크에 [1단계 건강 체크 ➔ 2단계 알림장 확인 ➔ 3단계 오늘의 다짐 ➔ 4단계 비밀 칭찬 미션 뽑기]로 이어지는 매끄러운 4단계 스텝 애니메이션(Stepperize) 웹앱을 띄워 스마트한 자기주도 아침 등교 루틴을 단 1분 만에 구축할 수 있답니다!
📊 Stepperize 4단계 아침 루틴 웹앱의 3가지 핵심 기능
교사의 지시 없이도 학생의 자율성과 교실 공동체의 온도를 높여주는 스마트 키오스크 기능입니다.
| 무엇이 바뀌었나요? (영역) | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 🚀 4단계 Stepperize 마법 (Multi-Step Wizard UI) |
부드러운 프로그레스 바와 함께 [마음 날씨 ➔ 일정 확인 ➔ 다짐 선택 ➔ 칭찬 뽑기]가 카드 애니메이션으로 전환됩니다. | 등교 즉시 교실 앞 태블릿을 15초 터치하며 등교 미션 완수 |
| 🎁 비밀 칭찬 미션 포춘쿠키 (Secret Praise Card) |
4단계에서 카드를 터치하면 "오늘 짝꿍에게 고마워 3번 말하기", "선생님께 밝게 눈인사하기" 등 랜덤 미션이 팝업됩니다. | 하루 동안 몰래 실천하는 게이미피케이션 인성 교육으로 연계 |
| 📺 전자칠판 실시간 대시보드 (Class Live Overview) |
교실 TV에 우리 반 등교 완료 인원수와 오늘의 평균 마음 날씨(맑음 85%), 다짐 키워드 구름이 실시간 갱신됩니다. | 아침 조회 시 아이들의 마음 상태를 한눈에 살피며 맞춤 상담 |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
초보자도 에러 없이 바로 실행할 수 있도록 '에러 방지 기본 안전장치(로컬스토리지 일일 데이터 보관, 단계별 유효성 검사, 팡파르 사운드)'가 내장되고, 우리 반 상황에 맞게 조율하는 '거꾸로 프롬프트(Reverse Prompting)'가 적용된 제미나이 전용 만능 프롬프트입니다.
🪄 제미나이 전용 'Stepperize 4단계 아침 등교 루틴' 만능 프롬프트
"당신은 초등 학급 경영 및 인터랙티브 멀티스텝 위저드(Stepperize UI) 전문 개발자입니다.
학생들이 등교 즉시 4단계 미션을 수행하고 교실 대시보드를 갱신하는 '아침 등교 미션 & 칭찬 대시보드 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. 완전한 독립형 단일 파일: 외부 프레임워크 설치 없이 바닐라 자바스크립트와 CSS 트랜지션으로 4단계 스텝 전환 애니메이션을 100% 자립 구현해 주세요.
2. 로컬스토리지 영구 보관: 당일 학생별 체크인 데이터 및 마음 날씨 통계가 브라우저 새로고침 후에도 안전하게 유지되도록 처리해 주세요.
3. Web Audio 단계 전환음 & 완주 팡파르: 스텝 이동 시 톡톡 경쾌한 사운드, 4단계 완주 시 축하 팡파르 및 폭죽(Confetti) 실행
4. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 4단계 Stepperize 미션 위저드 (모달/키오스크 뷰):
- [1단계: 🌡️ 마음 날씨 체크]: ☀️ 맑음, ⛅ 구름, 🌧️ 비, ⚡ 번개 4가지 기분 이모지 선택
- [2단계: 📝 준비물 & 알림장 확인]: 1교시 수업 준비 완료 체크박스 확인
- [3단계: 🎯 오늘의 나만의 다짐]: '수업에 적극적으로 참여하기', '친구 돕기' 등 목표 카드 선택
- [4단계: 🎁 비밀 칭찬 미션 뽑기]: 포춘쿠키 개봉 모션으로 오늘의 비밀 친절 미션 수여
2. 전자칠판 교실 전체 대시보드 뷰:
- 오늘 등교 완료 현황 (18명/25명 체크인 완료 게이지)
- 우리 반 오늘의 평균 마음 날씨 비율 차트 및 실시간 다짐 키워드 전광판
3. 교사용 관리자 모드:
- 🔒 설정(비밀번호 1234): 학생 명단 수정, 일일 데이터 초기화(새로운 아침 시작) 기능 제공
4. 디자인: 활기차고 따뜻한 모닝 옐로우/스카이블루 톤의 모던 플랫 UI (태블릿 키오스크 및 전자칠판 완벽 호환)
코드를 작성하기 전, 학급 총 인원수(예: 25명)나 4단계 칭찬 미션 문구 예시를 수정할지 나에게 2가지 질문을 먼저 물어봐줘."
학생들이 등교 즉시 4단계 미션을 수행하고 교실 대시보드를 갱신하는 '아침 등교 미션 & 칭찬 대시보드 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. 완전한 독립형 단일 파일: 외부 프레임워크 설치 없이 바닐라 자바스크립트와 CSS 트랜지션으로 4단계 스텝 전환 애니메이션을 100% 자립 구현해 주세요.
2. 로컬스토리지 영구 보관: 당일 학생별 체크인 데이터 및 마음 날씨 통계가 브라우저 새로고침 후에도 안전하게 유지되도록 처리해 주세요.
3. Web Audio 단계 전환음 & 완주 팡파르: 스텝 이동 시 톡톡 경쾌한 사운드, 4단계 완주 시 축하 팡파르 및 폭죽(Confetti) 실행
4. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 4단계 Stepperize 미션 위저드 (모달/키오스크 뷰):
- [1단계: 🌡️ 마음 날씨 체크]: ☀️ 맑음, ⛅ 구름, 🌧️ 비, ⚡ 번개 4가지 기분 이모지 선택
- [2단계: 📝 준비물 & 알림장 확인]: 1교시 수업 준비 완료 체크박스 확인
- [3단계: 🎯 오늘의 나만의 다짐]: '수업에 적극적으로 참여하기', '친구 돕기' 등 목표 카드 선택
- [4단계: 🎁 비밀 칭찬 미션 뽑기]: 포춘쿠키 개봉 모션으로 오늘의 비밀 친절 미션 수여
2. 전자칠판 교실 전체 대시보드 뷰:
- 오늘 등교 완료 현황 (18명/25명 체크인 완료 게이지)
- 우리 반 오늘의 평균 마음 날씨 비율 차트 및 실시간 다짐 키워드 전광판
3. 교사용 관리자 모드:
- 🔒 설정(비밀번호 1234): 학생 명단 수정, 일일 데이터 초기화(새로운 아침 시작) 기능 제공
4. 디자인: 활기차고 따뜻한 모닝 옐로우/스카이블루 톤의 모던 플랫 UI (태블릿 키오스크 및 전자칠판 완벽 호환)
코드를 작성하기 전, 학급 총 인원수(예: 25명)나 4단계 칭찬 미션 문구 예시를 수정할지 나에게 2가지 질문을 먼저 물어봐줘."
🏃 실전 적용 3단계 순서
- 1단계 (제미나이에 프롬프트 입력): 위 프롬프트를 복사하여 구글 제미나이에 전달하고, 우리 반 학생 수와 아침 미션 종류에 맞춰 AI 질문에 답합니다.
- 2단계 (HTML 파일 저장): 제미나이가 완성해 준 단일 HTML 코드를 메모장에 붙여넣고
morning_routine_stepper.html로 저장합니다. - 3단계 (아침 교실 키오스크 가동): 교실 앞 태블릿이나 전자칠판에 화면을 띄워두면, 등교하자마자 스스로 하루를 열어가는 주도적인 아침 교실이 시작됩니다!
🎯 에디터 한줄평
"좋은 하루는 따뜻한 아침 루틴에서 시작됩니다. 제미나이 바이브 코딩으로 아이들에게 매일 아침 설레는 4단계 미션과 작은 친절의 씨앗을 선물해 보세요!"
📌 구글 제미나이 웹 및 개발자 리소스
Google Gemini 공식 포털 바로가기 🔗
