📢 핵심 30초 요약
종이 팜플렛 인쇄 없이 QR코드 하나로 끝내는 스마트 학교 축제! 구글 제미나이(Gemini)에 프롬프트를 입력하면, 스마트폰에서 [학교 층별 인터랙티브 지도 + 부스 혼잡도 신호등 + 모바일 스탬프 투어 + Web Audio 도장 사운드]까지 모두 담긴 단일 HTML 모바일 축제 가이드가 완성됩니다.
선생님, 그리고 스마트한 학교 행사 운영을 준비하시는 교육 가족 여러분 안녕하세요! 프롬프트로 배우는 바이브 코딩 블로그 에디터입니다. 😊
학교 축제나 학예회, 진로 체험의 날마다 수백 장의 종이 리플릿을 인쇄해도 금세 바닥에 버려지거나, 특정 인기 부스에만 사람들이 몰려 복도가 혼잡해지는 문제로 고민 많으셨죠?
캔바(Canva)의 정적 템플릿을 구글 제미나이(Gemini)용 바이브 코딩 프롬프트로 전환하면, 학부모와 학생들이 교문 앞에서 QR코드만 찍으면 바로 열리는 '학교 축제 실시간 인터랙티브 지도 & 모바일 스탬프 투어 웹앱'을 단 1분 만에 구축할 수 있답니다!
📊 제미나이 스마트 축제 웹앱의 3가지 핵심 혁신 기능
기존 종이 안내장 및 단순 캔바 템플릿 대비 대폭 강화된 상호작용 기능입니다.
| 무엇이 바뀌었나요? (영역) | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 🗺️ 층별 SVG 반응형 지도 (Interactive Floorplan) |
1층부터 4층까지 탭을 누르면 학교 평면도가 전환되고, 반짝이는 핀을 누르면 부스 설명과 운영 시간이 팝업됩니다. | 카테고리 필터(체험, 먹거리, 전시, 공연)로 원하는 부스만 지도에 쏙 골라보기 |
| 🚦 실시간 혼잡도 신호등 (Crowd Management) |
각 부스의 대기 인원에 따라 🟢 여유, 🟡 보통, 🔴 혼잡 배지가 표시되어 관람객들의 자발적인 분산을 유도합니다. | 복도 통행 안전사고를 예방하고 부스 회전율을 2배로 극대화 |
| 🎖️ 모바일 스탬프 투어 (Gamified Stamp Card) |
부스를 체험한 뒤 화면 속 도장을 누르면 '쿵!' 하는 경쾌한 소리와 함께 스탬프가 찍히고, 5개를 모으면 축하 쿠폰이 열립니다. | 종이 도장판 분실 걱정 없이 "기념품 교환처"에서 화면 제시로 확인 |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
친환경 페이퍼리스(Paperless) 행정과 스마트 학교 경영을 실현하는 제미나이 전용 완성형 바이브 코딩 프롬프트입니다. AI가 학교 층수와 부스 구성을 먼저 맞춤 조율하도록 '거꾸로 프롬프트(Reverse Prompting)'가 내장되어 있습니다.
🪄 제미나이 전용 '학교 축제 스마트 맵 & 스탬프' 만능 프롬프트
"당신은 학교 행사 및 스마트 캠퍼스 모바일 인터랙티브 웹앱 전문 개발자입니다.
학교 축제·학예회 당일 학부모와 학생들이 스마트폰으로 이용할 '학교 축제 인터랙티브 부스 안내 지도 & 모바일 스탬프 투어 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 층별 인터랙티브 평면도 (1층~3층 탭):
- 상단 층수 탭 전환 시 SVG 기반 깔끔한 교실 배치 평면도 노출
- 각 교실/부스 위치에 펄스(Pulsing) 애니메이션이 적용된 인터랙티브 핀 배치
2. 부스 정보 팝업 모달 & 카테고리 필터:
- 핀 클릭 시 부스명, 운영 학급, 활동 설명, 운영 시간, 혼잡도(🟢 여유 / 🟡 보통 / 🔴 혼잡) 표시
- 상단 카테고리 필터 칩(전체, 🎯 체험, 🎨 전시, 🍿 먹거리, 🎭 공연) 제공
3. 모바일 스탬프 투어 (Web Audio 도장 사운드):
- 하단에 5칸짜리 '스탬프 카드' 서랍창 탑재
- 부스 상세창에서 '스탬프 찍기' 버튼 터치 시 묵직한 도장 날인음(Web Audio 합성)과 함께 도장 적립
- 5개 완주 시 Canvas 축하 폭죽(Confetti) 및 '🎁 본부석 기념품 교환권' 모달 팝업
4. 검색창: 부스 이름이나 학급 번호(예: '5-1', '페이스페인팅') 입력 시 해당 위치 핀 자동 강조
5. 디자인: 활기찬 축제 분위기의 모바일 최적화 반응형 UI (스마트폰 화면에 딱 맞춤)
코드를 작성하기 전, 학교 층수(예: 4층 여부), 부스 예시 목록, 스탬프 완주 기준 개수를 조정할 필요가 있는지 나에게 2가지 질문을 먼저 물어봐줘."
학교 축제·학예회 당일 학부모와 학생들이 스마트폰으로 이용할 '학교 축제 인터랙티브 부스 안내 지도 & 모바일 스탬프 투어 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장)로 제작해 주세요.
[핵심 요구 기능 및 기술 사양]
1. 층별 인터랙티브 평면도 (1층~3층 탭):
- 상단 층수 탭 전환 시 SVG 기반 깔끔한 교실 배치 평면도 노출
- 각 교실/부스 위치에 펄스(Pulsing) 애니메이션이 적용된 인터랙티브 핀 배치
2. 부스 정보 팝업 모달 & 카테고리 필터:
- 핀 클릭 시 부스명, 운영 학급, 활동 설명, 운영 시간, 혼잡도(🟢 여유 / 🟡 보통 / 🔴 혼잡) 표시
- 상단 카테고리 필터 칩(전체, 🎯 체험, 🎨 전시, 🍿 먹거리, 🎭 공연) 제공
3. 모바일 스탬프 투어 (Web Audio 도장 사운드):
- 하단에 5칸짜리 '스탬프 카드' 서랍창 탑재
- 부스 상세창에서 '스탬프 찍기' 버튼 터치 시 묵직한 도장 날인음(Web Audio 합성)과 함께 도장 적립
- 5개 완주 시 Canvas 축하 폭죽(Confetti) 및 '🎁 본부석 기념품 교환권' 모달 팝업
4. 검색창: 부스 이름이나 학급 번호(예: '5-1', '페이스페인팅') 입력 시 해당 위치 핀 자동 강조
5. 디자인: 활기찬 축제 분위기의 모바일 최적화 반응형 UI (스마트폰 화면에 딱 맞춤)
코드를 작성하기 전, 학교 층수(예: 4층 여부), 부스 예시 목록, 스탬프 완주 기준 개수를 조정할 필요가 있는지 나에게 2가지 질문을 먼저 물어봐줘."
🏃 실전 적용 3단계 순서
- 1단계 (제미나이에 프롬프트 입력): 위 프롬프트를 복사하여 구글 제미나이에 전달하고, 우리 학교 축제 층수나 부스 이름에 맞춰 AI 질문에 답합니다.
- 2단계 (HTML 파일 저장 및 링크 생성): 생성된 단일 HTML 코드를 메모장에 붙여넣고
festival_map.html로 저장한 뒤, 학교 홈페이지나 깃허브 페이지/구글 드라이브에 올려 링크를 만듭니다. - 3단계 (QR코드 배포): 링크를 무료 QR코드 생성기로 변환하여 축제 안내 포스터나 교문 입구에 부착하면, 학부모와 학생들이 스마트폰 하나로 즐기는 축제가 열립니다!
🎯 에디터 한줄평
"수백만 원의 외주 개발비나 종이 인쇄 비용 없이도, 바이브 코딩 프롬프트 하나로 대학 축제 부럽지 않은 스마트 모바일 축제 시스템을 완성할 수 있답니다. 우리 학교 축제의 품격을 한 단계 높여보세요!"
📌 구글 제미나이 웹 및 개발자 리소스
Google Gemini 공식 포털 바로가기 🔗
