📢 핵심 30초 요약
아침 등교 시간, 아이들의 표정과 마음 상태를 말없이 따뜻하게 안아줄 수 있어요! 구글 제미나이(Gemini)에 프롬프트를 전달하면, 교실 앞 태블릿에서 [5가지 감정 날씨 터치 + Web Audio 힐링 사운드(빗소리/새소리) + 3초 마음 진정 호흡 가이드 + 교사용 감정 요약 차트]가 작동하는 단일 HTML 학급 경영 웹앱이 단번에 완성됩니다.
선생님, 그리고 아이들의 정서적 안정을 가장 먼저 챙기시는 따뜻한 교육자 여러분 안녕하세요! 프롬프트로 배우는 바이브 코딩 블로그 에디터입니다. 😊
아침 등교 시간에 유독 기운이 없거나 표정이 굳어 있는 아이를 볼 때, 많은 친구들 앞에서 "오늘 무슨 일 있니?"라고 직접 묻기 조심스러웠던 적 많으시죠? 아이들도 자신의 부정적인 감정을 말로 털어놓기 쑥스러워할 때가 많은데요.
캔바(Canva)의 단순 클릭 템플릿을 구글 제미나이(Gemini)용 바이브 코딩 프롬프트로 한 단계 발전시키면, 교실 입구 태블릿에 전체화면으로 띄워두고 아이들이 등교하자마자 비언어적으로 마음을 표현하고 위로받는 '아침 마음 날씨 체크인 키오스크'를 손쉽게 구축할 수 있답니다!
📊 제미나이 학급 경영 웹앱으로 달라지는 3가지 핵심 기능
기본 캔바 템플릿 대비 제미나이 단일 HTML 웹앱이 제공하는 정서 케어 기능입니다.
| 무엇이 바뀌었나요? (영역) | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 🌿 힐링 ASMR 사운드 (Ambient Web Audio) |
'비'를 누르면 토닥토닥 빗소리가, '맑음'을 누르면 맑은 새소리와 차임벨이 외부 파일 없이 자체 합성되어 울려 퍼집니다. | 마음이 복잡한 학생이 헤드셋을 끼고 1분간 조용히 소리를 들으며 마음 가라앉히기 |
| 🫁 3초 마음 호흡 버블 (Breathing Animation) |
화가 나거나(천둥) 불안한(안개) 감정을 선택하면, 화면 속 원이 커졌다 작아지며 '들숨-날숨'을 유도하는 릴랙스 애니메이션이 실행됩니다. | 1교시 수업 시작 전 차분하게 호흡을 가다듬는 루틴으로 정착 |
| 📊 교사용 익명 통계 뷰 (Class Mood Summary) |
선생님만 볼 수 있는 비밀 버튼을 누르면, 오늘 우리 반 아이들이 선택한 감정 분포(맑음 15명, 비 4명 등)가 도넛 차트로 한눈에 정리됩니다. | 비·천둥 비율이 높은 날은 수업 난이도를 조절하거나 조용히 개별 상담 챙기기 |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
사회정서학습(SEL)과 TPACK(기술-교수법-내용 지식) 모델을 융합한 제미나이 전용 완성형 바이브 코딩 프롬프트입니다. AI가 학급 상황(학년, 특별 지원 문구 등)을 먼저 점검하도록 '거꾸로 프롬프트(Reverse Prompting)' 구조가 적용되어 있습니다.
🪄 제미나이 전용 '마음 날씨 체크인' 만능 프롬프트
"당신은 초등 정서 지원 및 학급 경영 인터랙티브 에듀테크 전문 개발자입니다.
등교 직후 교실 앞 태블릿에서 학생들이 자신의 감정을 체크인하는 '오늘의 마음 날씨 터치 키오스크 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 5가지 감정 날씨 카드:
- ☀️ 맑음 (활기차고 기분 좋아요)
- ⛅ 햇살구름 (편안하고 차분해요)
- 🌧️ 비 (조금 지치거나 속상해요)
- ⛈️ 천둥번개 (답답하거나 화가 나요)
- 🌫️ 안개 (걱정되거나 멍해요)
2. 터치 인터랙션 & 맞춤 위로 모달:
- 카드를 터치하면 부드러운 팝업창이 열리며 "오늘 네 마음이 흐리구나, 선생님이 언제나 네 편이 되어줄게" 같은 다정한 공감 문구 노출
- 🌧️/⛈️/🌫️ 선택 시 '3초 마음 챙김 호흡 버블(들숨-날숨 애니메이션)' 함께 작동
3. Web Audio API 앰비언트 사운드: 외부 MP3 없이 맑음(청아한 차임벨), 비(부드러운 핑크노이즈 빗소리), 천둥(차분한 공 사운드) 자체 합성 재생
4. 선생님 전용 비밀 대시보드: 우측 하단 🔒 아이콘을 누르면 오늘 누적된 학급 감정 비율(도넛 차트 및 총 인원수) 실시간 집계 팝업 표시
5. 디자인: 눈이 편안한 파스텔톤 그라데이션 배경, 태블릿 전체화면(Kiosk) 맞춤형 터치 최적화 레이아웃
코드를 작성하기 전, 위로 메시지를 저학년/고학년 맞춤형으로 조정하거나 추가하고 싶은 특별 감정(예: 설렘 등)이 있는지 나에게 2가지 질문을 먼저 물어봐줘."
등교 직후 교실 앞 태블릿에서 학생들이 자신의 감정을 체크인하는 '오늘의 마음 날씨 터치 키오스크 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 5가지 감정 날씨 카드:
- ☀️ 맑음 (활기차고 기분 좋아요)
- ⛅ 햇살구름 (편안하고 차분해요)
- 🌧️ 비 (조금 지치거나 속상해요)
- ⛈️ 천둥번개 (답답하거나 화가 나요)
- 🌫️ 안개 (걱정되거나 멍해요)
2. 터치 인터랙션 & 맞춤 위로 모달:
- 카드를 터치하면 부드러운 팝업창이 열리며 "오늘 네 마음이 흐리구나, 선생님이 언제나 네 편이 되어줄게" 같은 다정한 공감 문구 노출
- 🌧️/⛈️/🌫️ 선택 시 '3초 마음 챙김 호흡 버블(들숨-날숨 애니메이션)' 함께 작동
3. Web Audio API 앰비언트 사운드: 외부 MP3 없이 맑음(청아한 차임벨), 비(부드러운 핑크노이즈 빗소리), 천둥(차분한 공 사운드) 자체 합성 재생
4. 선생님 전용 비밀 대시보드: 우측 하단 🔒 아이콘을 누르면 오늘 누적된 학급 감정 비율(도넛 차트 및 총 인원수) 실시간 집계 팝업 표시
5. 디자인: 눈이 편안한 파스텔톤 그라데이션 배경, 태블릿 전체화면(Kiosk) 맞춤형 터치 최적화 레이아웃
코드를 작성하기 전, 위로 메시지를 저학년/고학년 맞춤형으로 조정하거나 추가하고 싶은 특별 감정(예: 설렘 등)이 있는지 나에게 2가지 질문을 먼저 물어봐줘."
🏃 실전 적용 3단계 순서
- 1단계 (제미나이에 프롬프트 전달): 위 프롬프트를 복사하여 구글 제미나이에 전달하고, 학년 수준에 맞춘 AI의 질문에 간단히 답합니다.
- 2단계 (HTML 파일 저장): 제미나이가 출력한 단일 HTML 코드를 메모장에 붙여넣고,
mind_weather.html로 저장합니다. - 3단계 (교실 키오스크 세팅): 교실 입구 태블릿에서 해당 파일을 열고 브라우저 '전체화면'을 켜두면, 아이들이 매일 아침 스스로 마음을 돌보는 따뜻한 정서 체크인 교실이 완성됩니다!
🎯 에디터 한줄평
"아이들의 감정을 알아채고 보듬어주는 일이야말로 가장 훌륭한 학급 경영의 출발점입니다. 제미나이 바이브 코딩으로 교실 한구석에 아이들의 마음 쉼터를 선물해 보세요!"
📌 구글 제미나이 웹 및 개발자 리소스
Google Gemini 공식 포털 바로가기 🔗
