📢 핵심 30초 요약
멀리 있는 위인뿐만 아니라 내 곁의 친구도 멋진 롤모델입니다! 구글 제미나이(Gemini)에 프롬프트를 입력하면, [교실 속 6대 일상 미덕 선택 + 친구 칭찬 카드 작성 및 하트 사운드 + 교실 TV 실시간 롤링 전광판 + 개인별 칭찬 보관함]이 지원되는 단일 HTML 학급 인성 보드가 완성됩니다.
선생님, 그리고 아이들이 서로의 사소한 장점과 배려를 발견하고 서로를 따뜻하게 인정해 주는 심리적으로 안전한 교실을 가꾸고 싶으신 교육자 여러분 안녕하세요! 프롬프트로 배우는 바이브 코딩 블로그 에디터입니다. 😊
진로·인성 시간에 롤모델을 찾다 보면 "위인전 속 인물이나 유명 연예인만 떠올리느라, 정작 매일 함께 생활하는 친구들의 훌륭한 미덕(정리정돈, 바른 경청, 다정한 위로)은 무심코 지나쳤던 경험" 다들 있으실 텐데요.
구글 제미나이(Gemini)용 바이브 코딩 프롬프트 하나면, 학생들이 태블릿으로 친구를 오늘의 롤모델로 추천하고 칭찬 카드를 보내면, 교실 TV 화면에 하트 애니메이션과 함께 실시간으로 카드가 회전 상영되는 '우리 반 친구 롤모델 칭찬 릴레이 전광판'을 단 1분 만에 구축할 수 있답니다!
📊 제미나이 친구 롤모델 칭찬 릴레이 보드의 3가지 핵심 기능
상호 존중 의식과 긍정적 학급 공동체 문화를 꽃피우는 인터랙티브 자치 기능입니다.
| 무엇이 바뀌었나요? (영역) | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 🌟 6대 일상 미덕 배지 (Virtue Tag Selection) |
[정리정돈의 달인, 용기 있는 발표왕, 다정한 위로서포터, 배려천사, 창의력 톡톡, 집중력 몰입러] 중 친구의 강점을 선택합니다. | 교실 속 사소한 선행과 긍정적 습관을 구체적으로 칭찬 |
| 📺 교실 TV 롤링 전광판 (Classroom Live Rolling) |
학생들이 보낸 칭찬 카드가 교실 TV에 5초마다 부드럽게 전환되며 하트 파티클 효과와 함께 실시간으로 상영됩니다. | 쉬는 시간이나 아침 시간에 띄워두고 교실 온도를 훈훈하게 유지 |
| 💌 개인별 칭찬 보관함 (My Praise Trophy Box) |
자신의 번호를 누르면 친구들이 나에게 보내준 칭찬 카드들을 모아보고, 학기 말 A4 칭찬장으로 출력할 수 있습니다. | 자존감이 낮아진 학생에게 '내가 받은 칭찬' 읽어보게 하기 |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
초보자도 에러 없이 바로 실행할 수 있도록 '에러 방지 기본 안전장치(로컬스토리지 카드 영구 보관, 하트 차임벨 사운드 내장, 비식별 안전 체계)'가 내장되고, 우리 반 상황에 맞게 조율하는 '거꾸로 프롬프트(Reverse Prompting)'가 적용된 제미나이 전용 만능 프롬프트입니다.
🪄 제미나이 전용 '친구 롤모델 상호 칭찬 릴레이' 만능 프롬프트
"당신은 초등 창의적 체험활동(인성) 및 인터랙티브 학급 칭찬 보드 웹앱 전문 개발자입니다.
학생들이 친구를 오늘의 롤모델로 추천하고 칭찬 카드를 교실 TV에 롤링 전시하는 '우리 반 친구 롤모델 상호 칭찬 보드 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. 로컬스토리지 영구 보관: 태블릿 전원 재부팅 후에도 누적된 칭찬 카드 데이터가 안전하게 유지되도록 예외 처리 코드를 포함해 주세요.
2. Web Audio 하트 사운드 & 축하 팡파르: 칭찬 카드 발송 시 맑은 하트 차임벨, TV 전광판 상영 시 은은한 배경 톤 자체 합성 재생
3. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 친구 칭찬 카드 작성 모달 (학생 뷰):
- 칭찬할 친구 번호(1~25번) 선택 ➔ 6대 일상 미덕 배지 선택 ➔ '본받고 싶은 점(1~2줄)' 작성 ➔ '💌 칭찬 보내기' 클릭 시 하트 날아가는 애니메이션
- 6대 미덕: 🧹 정리정돈, 🗣️ 용기발표, 💖 다정위로, 🤝 양보배려, 🎨 창의아이디어, ⚡ 바른경청
2. 교실 TV 풀스크린 실시간 전광판 뷰:
- '🎬 전광판 모드' 클릭 시 풀스크린으로 전환되며, 학생들이 보낸 카드가 5초마다 카드 플립/슬라이드 전환
- 상단에 "💌 오늘 우리 반에 도착한 칭찬 카드: 총 OO통" 실시간 카운터 표시
3. 개인별 칭찬 보관함 & A4 인쇄:
- 내 번호 선택 시 내가 받은 칭찬 카드 목록 갤러리 뷰 제공 및 '🖨️ A4 칭찬장 인쇄(Print CSS)' 지원
4. 교사용 관리자 패널:
- 🔒 설정(비밀번호 1234): 장난스러운 카드 삭제, 전체 칭찬 데이터 CSV 다운로드, 학기 초기화 지원
5. 디자인: 따뜻하고 몽환적인 파스텔 코랄/퍼플 톤의 감성 카드 UI (전자칠판 및 태블릿 완벽 호환)
코드를 작성하기 전, 학급 총 학생 수(예: 25명)나 6대 미덕 카테고리 명칭을 수정할지 나에게 2가지 질문을 먼저 물어봐줘."
학생들이 친구를 오늘의 롤모델로 추천하고 칭찬 카드를 교실 TV에 롤링 전시하는 '우리 반 친구 롤모델 상호 칭찬 보드 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. 로컬스토리지 영구 보관: 태블릿 전원 재부팅 후에도 누적된 칭찬 카드 데이터가 안전하게 유지되도록 예외 처리 코드를 포함해 주세요.
2. Web Audio 하트 사운드 & 축하 팡파르: 칭찬 카드 발송 시 맑은 하트 차임벨, TV 전광판 상영 시 은은한 배경 톤 자체 합성 재생
3. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 친구 칭찬 카드 작성 모달 (학생 뷰):
- 칭찬할 친구 번호(1~25번) 선택 ➔ 6대 일상 미덕 배지 선택 ➔ '본받고 싶은 점(1~2줄)' 작성 ➔ '💌 칭찬 보내기' 클릭 시 하트 날아가는 애니메이션
- 6대 미덕: 🧹 정리정돈, 🗣️ 용기발표, 💖 다정위로, 🤝 양보배려, 🎨 창의아이디어, ⚡ 바른경청
2. 교실 TV 풀스크린 실시간 전광판 뷰:
- '🎬 전광판 모드' 클릭 시 풀스크린으로 전환되며, 학생들이 보낸 카드가 5초마다 카드 플립/슬라이드 전환
- 상단에 "💌 오늘 우리 반에 도착한 칭찬 카드: 총 OO통" 실시간 카운터 표시
3. 개인별 칭찬 보관함 & A4 인쇄:
- 내 번호 선택 시 내가 받은 칭찬 카드 목록 갤러리 뷰 제공 및 '🖨️ A4 칭찬장 인쇄(Print CSS)' 지원
4. 교사용 관리자 패널:
- 🔒 설정(비밀번호 1234): 장난스러운 카드 삭제, 전체 칭찬 데이터 CSV 다운로드, 학기 초기화 지원
5. 디자인: 따뜻하고 몽환적인 파스텔 코랄/퍼플 톤의 감성 카드 UI (전자칠판 및 태블릿 완벽 호환)
코드를 작성하기 전, 학급 총 학생 수(예: 25명)나 6대 미덕 카테고리 명칭을 수정할지 나에게 2가지 질문을 먼저 물어봐줘."
🏃 실전 적용 3단계 순서
- 1단계 (제미나이에 프롬프트 입력): 위 프롬프트를 복사하여 구글 제미나이에 전달하고, 우리 반 미덕 카테고리에 맞춰 AI 질문에 답합니다.
- 2단계 (HTML 파일 저장): 제미나이가 완성해 준 단일 HTML 코드를 메모장에 붙여넣고
peer_rolemodel_board.html로 저장합니다. - 3단계 (교실 TV 전광판 가동): 교실 TV에 화면을 띄워두고 아이들이 태블릿으로 칭찬을 보내면, 하루 종일 서로를 향한 따뜻한 하트와 인정이 넘쳐나는 행복한 교실이 완성됩니다!
🎯 에디터 한줄평
"친구가 나의 거울이 되고 내가 친구의 영감이 되는 교실, 진정한 배움은 서로의 아름다운 모습을 발견하고 칭찬할 때 피어납니다. 제미나이 바이브 코딩으로 아이들에게 따뜻한 칭찬의 전광판을 선물해 보세요!"
📌 구글 제미나이 웹 및 개발자 리소스
Google Gemini 공식 포털 바로가기 🔗
