📢 핵심 30초 요약
교사의 일방적인 스티커 검사 대신 학생이 직접 실천을 체크인하는 자율적 학급을 만드세요! 구글 제미나이(Gemini)에 프롬프트를 입력하면, [PWA 오프라인 앱 설치 + 학생 이름 터치 원클릭 도장 쾅! 효과음 + 개인별 10칸 스탬프판 + 월말 학급 회의 통계 차트]가 지원되는 단일 HTML 키오스크 웹앱이 완성됩니다.
선생님, 그리고 아이들의 올바른 생활습관 형성과 자율적인 학급 자치 문화를 가꾸고 계신 교육 가족 여러분 안녕하세요! 프롬프트로 배우는 바이브 코딩 블로그 에디터입니다. 😊
1인 1역 완수, 급식 잔반 제로, 고운 말 쓰기 등 사전에 합의된 학급 생활 규칙을 매일 교사가 일일이 점검하고 수첩에 기록하다 보면 "퇴근 무렵 손목도 아프고, 아이들은 수동적으로 지시만 기다리게 되어 아쉬웠던 경험" 다들 있으실 텐데요.
구글 제미나이(Gemini)용 바이브 코딩 프롬프트 하나면, 교실 앞 태블릿에 홈 화면 앱(PWA)으로 띄워두고 학생들이 스스로 실천한 약속을 터치하여 도장을 찍고, 월말 학급 회의 때 우리 반의 공동 목표 달성률 그래프를 함께 확인하는 '학생 주도 마일리지 스탬프 키오스크'를 단 1분 만에 구축할 수 있답니다!
📊 제미나이 생활습관 스탬프 PWA의 3가지 핵심 기능
교사의 생활지도 부담을 제로로 만들고 학생의 자기조절 역량을 극대화하는 스마트 자치 기능입니다.
| 무엇이 바뀌었나요? (영역) | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 📱 PWA 오프라인 홈 화면 앱 (Standalone Kiosk PWA) |
인터넷이 불안정한 교실에서도 주소창 없이 앱처럼 깔끔하게 전체화면으로 실행되는 오프라인 퍼스트 PWA 구조입니다. | 교실 태블릿 브라우저에서 '홈 화면에 추가' 후 벽면 거치대 고정 |
| 🔊 실감 도장음 & 10칸 폭죽 (Web Audio & Confetti) |
1인 1역이나 잔반 제로를 누르면 묵직한 '쾅!' 도장 날인음이 울리고, 10칸/20칸을 완주하면 화면 가득 축하 폭죽이 터집니다. | 급식 후나 청소 시간 직후 학생들이 스스로 셀프 체크인 |
| 📈 월말 자치 통계 차트 (Monthly Class Analytics) |
개인 경쟁을 지양하고, 우리 반 전체 목표치(예: 300개) 달성률과 항목별 실천 비율을 Chart.js 도넛/막대 그래프로 보여줍니다. | 월말 학급 자치 다모임 때 목표 달성률을 보며 다 함께 보상 누리기 |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
초보자도 에러 없이 바로 실행할 수 있도록 '에러 방지 기본 안전장치(로컬스토리지 예외 처리, Web Audio 도장 사운드 자동 활성화, Chart.js CDN 안정 링크)'가 내장되고, 우리 반 규칙에 맞게 조율하는 '거꾸로 프롬프트(Reverse Prompting)'가 적용된 제미나이 전용 만능 프롬프트입니다.
🪄 제미나이 전용 '학생 주도 칭찬 스탬프 PWA 키오스크' 만능 프롬프트
"당신은 초등 학급 경영 게이미피케이션 및 PWA/인터랙티브 웹앱 전문 개발자입니다.
학생들이 스스로 생활 규칙을 실천하고 스탬프를 적립하는 '학생 주도 칭찬 마일리지 스탬프 키오스크 PWA 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장, Chart.js CDN 포함)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. PWA & 오프라인 완결성: 주소창 없는 전체화면 웹앱 메타태그(`apple-mobile-web-app-capable`, `viewport`)를 적용하고, 외부 서버 없이 로컬스토리지에 모든 누적 스탬프가 영구 보관되도록 구현해 주세요.
2. Web Audio 도장 날인음: 도장 찍을 때 묵직한 '쿵!' 타격음을 브라우저 자체 합성(AudioContext)으로 끊김 없이 재생해 주세요.
3. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 학생 타일 그리드 (1번~25번 학생 카드):
- 학생 카드 터치 시 스탬프 모달 오픈 ➔ 4대 실천 항목(🧹 1인 1역 / 🍱 잔반 제로 / 💬 고운 말 / 📖 독서·정리정돈) 원클릭 적립
2. 개인별 10칸/20칸 디지털 도장판 & 완주 축하:
- 도장 날인 애니메이션 및 10칸 완주 시 Canvas 축하 색종이 폭죽(Confetti) 실행
3. 학급 공동체 월간 목표 달성 게이지 & Chart.js 통계:
- 상단 실시간 목표 달성률 프로그레스 바(예: 이번 달 목표 200개 중 145개 완료)
- '📊 월말 학급 회의 뷰' 클릭 시 우리 반 항목별 실천 비율 도넛 차트 렌더링
4. 교사용 관리자 패널:
- 🔒 관리자(비밀번호 1234): 학생 명단 일괄 수정, 월별 데이터 엑셀(CSV) 다운로드, 월간 초기화 기능
5. 디자인: 따뜻하고 직관적인 모던 카드형 UI, 태블릿 키오스크 터치 최적화 레이아웃
코드를 작성하기 전, 학급 총 학생 수(예: 25명)나 우리 반만의 특별 실천 규칙 항목을 나에게 2가지 질문을 먼저 물어봐줘."
학생들이 스스로 생활 규칙을 실천하고 스탬프를 적립하는 '학생 주도 칭찬 마일리지 스탬프 키오스크 PWA 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장, Chart.js CDN 포함)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. PWA & 오프라인 완결성: 주소창 없는 전체화면 웹앱 메타태그(`apple-mobile-web-app-capable`, `viewport`)를 적용하고, 외부 서버 없이 로컬스토리지에 모든 누적 스탬프가 영구 보관되도록 구현해 주세요.
2. Web Audio 도장 날인음: 도장 찍을 때 묵직한 '쿵!' 타격음을 브라우저 자체 합성(AudioContext)으로 끊김 없이 재생해 주세요.
3. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 학생 타일 그리드 (1번~25번 학생 카드):
- 학생 카드 터치 시 스탬프 모달 오픈 ➔ 4대 실천 항목(🧹 1인 1역 / 🍱 잔반 제로 / 💬 고운 말 / 📖 독서·정리정돈) 원클릭 적립
2. 개인별 10칸/20칸 디지털 도장판 & 완주 축하:
- 도장 날인 애니메이션 및 10칸 완주 시 Canvas 축하 색종이 폭죽(Confetti) 실행
3. 학급 공동체 월간 목표 달성 게이지 & Chart.js 통계:
- 상단 실시간 목표 달성률 프로그레스 바(예: 이번 달 목표 200개 중 145개 완료)
- '📊 월말 학급 회의 뷰' 클릭 시 우리 반 항목별 실천 비율 도넛 차트 렌더링
4. 교사용 관리자 패널:
- 🔒 관리자(비밀번호 1234): 학생 명단 일괄 수정, 월별 데이터 엑셀(CSV) 다운로드, 월간 초기화 기능
5. 디자인: 따뜻하고 직관적인 모던 카드형 UI, 태블릿 키오스크 터치 최적화 레이아웃
코드를 작성하기 전, 학급 총 학생 수(예: 25명)나 우리 반만의 특별 실천 규칙 항목을 나에게 2가지 질문을 먼저 물어봐줘."
🏃 실전 적용 3단계 순서
- 1단계 (제미나이에 프롬프트 입력): 위 프롬프트를 복사하여 구글 제미나이에 전달하고, 우리 반 학생 수와 실천 항목에 맞춰 AI 질문에 답합니다.
- 2단계 (HTML 파일 저장 & 홈 화면 추가): 제미나이가 완성해 준 단일 HTML 코드를 메모장에 붙여넣고
stamp_kiosk.html로 저장한 뒤, 태블릿 브라우저에서 '홈 화면에 추가'를 누릅니다. - 3단계 (자율적 학급 자치 운영): 교실 입구 태블릿에 띄워두면, 선생님의 잔소리 없이도 아이들이 자발적으로 규칙을 지키고 스탬프를 채워가는 자율적 학급이 완성됩니다!
🎯 에디터 한줄평
"좋은 생활습관은 교사의 감시가 아닌, 아이들의 '작은 실천에 대한 즐거운 인정'에서 자라납니다. 제미나이 바이브 코딩으로 아이들에게 매일 성취의 기쁨을 선물해 보세요!"
📌 구글 제미나이 웹 및 개발자 리소스
Google Gemini 공식 포털 바로가기 🔗
