📢 핵심 30초 요약
체육대회 반티나 동아리 굿즈 구매 후 "실물이 생각과 다르다"는 불만은 이제 그만! 구글 제미나이(Gemini)에 프롬프트를 입력하면, [시안 컬러·문구 실시간 가상 피팅 + 모바일 1인 1표 실시간 선호도 투표 + 개표 차트 + A4 단체 주문서 자동 생성]이 지원되는 단일 HTML 자치 웹앱이 완성됩니다.
선생님, 그리고 봄·가을 학교 체육대회와 축제 시즌마다 반티(반별 단체 티셔츠)나 동아리 굿즈 선정으로 분주하신 교육 가족 여러분 안녕하세요! 프롬프트로 배우는 바이브 코딩 블로그 에디터입니다. 😊
학급 회의 시간에 수십 개 쇼핑몰 캡처 사진만 보고 반티를 고르다 보면, "실제 옷 색감이 화면과 달라 아이들이 실망하거나, 의견이 나뉘어 다수결 투표 과정에서 갈등이 생겼던 경험" 다들 있으실 텐데요.
구글 제미나이(Gemini)용 바이브 코딩 프롬프트 하나면, 학생들이 제안한 디자인 시안을 학생 모델 사진에 가상 피팅하여 실물 착용감을 미리 확인하고, 모바일이나 전자칠판에서 공정하게 실시간 투표하여 최종 주문서까지 뽑아내는 '반티 가상 피팅 & 스마트 투표 시스템'을 단 1분 만에 구축할 수 있답니다!
📊 제미나이 반티 가상 피팅 & 투표 시스템의 3가지 핵심 기능
민주적인 학생 자치 의사결정과 완벽한 구매 실패 방지를 돕는 스마트 자치 기능입니다.
| 무엇이 바뀌었나요? (영역) | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 👕 반티 실시간 가상 피팅 (T-Shirt Customizer) |
티셔츠 색상을 자유롭게 바꾸고 우리 반 로고나 등번호 문구를 넣으면, 학생 모델 사진 위에 실물 느낌으로 즉시 합성됩니다. | 후보 1안(쿨 네이비), 2안(파스텔 옐로우) 등 3가지 시안을 나란히 비교 |
| 🗳️ 실시간 비밀 투표 차트 (Live Voting & Chart.js) |
학생들이 마음에 드는 시안에 터치 투표하면, 실시간 득표율 도넛 그래프가 올라가며 1위 선정 시 화면 가득 축하 폭죽이 터집니다. | 학급 다모임이나 학생 자치회 대의원 회의에서 민주적 의사결정 |
| 📋 단체 주문서 자동 조판 (Order Summary Sheet) |
1위로 뽑힌 디자인과 함께 학생별 희망 사이즈(S, M, L, XL) 수량이 자동 집계된 A4 1장 인쇄용 주문서가 완성됩니다. | 쇼핑몰 주문 시 수량 착오 없이 깔끔하게 주문 완료 |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
초보자도 에러 없이 바로 실행할 수 있도록 '에러 방지 기본 안전장치(Canvas CORS 방지 SVG 템플릿, 로컬스토리지 중복투표 방지, 반응형 터치 슬라이더)'가 내장되고, 우리 반 상황에 맞게 조율하는 '거꾸로 프롬프트(Reverse Prompting)'가 적용된 제미나이 전용 만능 프롬프트입니다.
🪄 제미나이 전용 '체육대회 반티 가상 피팅 & 투표 시스템' 만능 프롬프트
"당신은 초등 학생자치 행정 및 HTML5 Canvas/인터랙티브 투표 웹앱 전문 개발자입니다.
체육대회 반티 시안을 가상 피팅하여 비교하고 실시간 투표로 1위를 선정하는 '체육대회 반티 가상 피팅 & 선호도 투표 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장, Chart.js CDN 포함)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. Canvas CORS 에러 방지: 티셔츠 목업(Mockup) 프레임은 인라인 SVG 벡터로 렌더링하고, CSS `mix-blend-mode: multiply`를 적용해 어떤 색상이든 실물 옷감 질감처럼 자연스럽게 색상이 변경되도록 구현해 주세요.
2. 로컬스토리지 중복 투표 방지: 브라우저당 1회 투표 제한 및 관리자 비밀번호(1234)로 투표 초기화 기능 제공
3. Web Audio 도장 날인음 & 팡파르: 투표 클릭 시 찰칵 도장음, 최종 개표 시 승리 축하 팡파르 자체 합성
4. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 반티 커스터마이징 & 피팅 뷰어 (후보 1~3안 등록):
- 티셔츠 색상(컬러 피커), 등번호/학급 문구 입력, 로고 이미지 업로드 실시간 반영
2. 반응형 실시간 선호도 투표 & Chart.js 대시보드:
- 후보 시안 카드 하단의 '🗳️ 이 디자인에 투표하기' 버튼 클릭 시 실시간 득표율 도넛 차트 업데이트
- '🏆 최종 1위 확정' 버튼 클릭 시 Canvas 축하 색종이 폭죽(Confetti) 실행
3. 학생 사이즈 집계 & 단체 주문서 출력:
- 학생별 희망 사이즈(85~110) 간이 입력표 및 A4 1장 인쇄용 '최종 단체 구매 주문서(Print CSS)' 렌더링
5. 디자인: 활기찬 스포츠 페스티벌 테마 UI (크롬북, 스마트폰 모바일 뷰, 전자칠판 완벽 호환)
코드를 작성하기 전, 비교할 후보 시안 개수(예: 3개 vs 4개)나 기본 학급 인원수를 나에게 2가지 질문을 먼저 물어봐줘."
체육대회 반티 시안을 가상 피팅하여 비교하고 실시간 투표로 1위를 선정하는 '체육대회 반티 가상 피팅 & 선호도 투표 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장, Chart.js CDN 포함)로 제작해 주세요.
[에러 방지 기본 환경 세팅 (Zero-Error Baseline)]
1. Canvas CORS 에러 방지: 티셔츠 목업(Mockup) 프레임은 인라인 SVG 벡터로 렌더링하고, CSS `mix-blend-mode: multiply`를 적용해 어떤 색상이든 실물 옷감 질감처럼 자연스럽게 색상이 변경되도록 구현해 주세요.
2. 로컬스토리지 중복 투표 방지: 브라우저당 1회 투표 제한 및 관리자 비밀번호(1234)로 투표 초기화 기능 제공
3. Web Audio 도장 날인음 & 팡파르: 투표 클릭 시 찰칵 도장음, 최종 개표 시 승리 축하 팡파르 자체 합성
4. 코드 생략 금지: 주석 생략 없이 복사하여 즉시 브라우저에서 실행 가능한 100% 완전한 단일 HTML 코드로 출력해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 반티 커스터마이징 & 피팅 뷰어 (후보 1~3안 등록):
- 티셔츠 색상(컬러 피커), 등번호/학급 문구 입력, 로고 이미지 업로드 실시간 반영
2. 반응형 실시간 선호도 투표 & Chart.js 대시보드:
- 후보 시안 카드 하단의 '🗳️ 이 디자인에 투표하기' 버튼 클릭 시 실시간 득표율 도넛 차트 업데이트
- '🏆 최종 1위 확정' 버튼 클릭 시 Canvas 축하 색종이 폭죽(Confetti) 실행
3. 학생 사이즈 집계 & 단체 주문서 출력:
- 학생별 희망 사이즈(85~110) 간이 입력표 및 A4 1장 인쇄용 '최종 단체 구매 주문서(Print CSS)' 렌더링
5. 디자인: 활기찬 스포츠 페스티벌 테마 UI (크롬북, 스마트폰 모바일 뷰, 전자칠판 완벽 호환)
코드를 작성하기 전, 비교할 후보 시안 개수(예: 3개 vs 4개)나 기본 학급 인원수를 나에게 2가지 질문을 먼저 물어봐줘."
🏃 실전 적용 3단계 순서
- 1단계 (제미나이에 프롬프트 입력): 위 프롬프트를 복사하여 구글 제미나이에 전달하고, 우리 반 후보 시안 개수에 맞춰 AI 질문에 답합니다.
- 2단계 (HTML 파일 저장): 제미나이가 완성해 준 단일 HTML 코드를 메모장에 붙여넣고
class_tshirt_vote.html로 저장합니다. - 3단계 (전자칠판 투표 & 주문): 교실 TV에 화면을 띄워 아이들이 직접 옷 색상과 문구를 비교해 보고 투표하여, 모두가 만족하는 멋진 반티를 주문합니다!
🎯 에디터 한줄평
"진정한 민주주의는 작은 단체 티셔츠 하나를 정하는 과정에서도 서로의 취향을 존중하고 눈으로 확인하며 투표할 때 피어납니다. 제미나이 바이브 코딩으로 갈등 없는 즐거운 축제를 준비해 보세요!"
📌 구글 제미나이 웹 및 개발자 리소스
Google Gemini 공식 포털 바로가기 🔗
