🕹️ 제미나이로 만드는 초등 게이미피케이션 교구: 레트로 구구단 스네이크 게임 웹앱 (html2canvas 학습 인증서 탑재)

💡 이번 교구 바이브 코딩 30초 다이제스트:
초등 2~3학년 아이들에게 구구단 연습을 문제지로만 시키면 금방 지루해하고 집중력이 흐트러지기 마련입니다.
클래식 아케이드 명작 '지렁이 게임(Snake Game)'에 '반짝이는 지식 별 퀴즈'와 '10초 타임어택'을 결합해 보세요! 사과 3개를 먹을 때마다 구구단 4지선다 퀴즈가 팝업되며, Web Audio API로 구현된 신나는 8비트 사운드와 함께 게임 종료 시 나만의 '구구단 마스터 포토카드(PNG)'를 즉시 저장할 수 있습니다. 별도 설치 없이 브라우저에서 더블 클릭만 하면 열리는 단일 HTML 웹앱입니다!

📊 한눈에 보는 3대 핵심 변화 분석표

무엇이 바뀌었나요? (영역)	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
🍎 먹이와 퀴즈의 유기적 결합	단순 반복 플레이가 아니라, 사과 3개를 먹으면 황금별이 뜨고 게임이 일시정지되며 10초 카운트다운 구구단 퀴즈가 열립니다.	수학 수업 도입 5분 동안 전자칠판 모드로 반 전체 대표 학생 1명이 도전하는 동기유발 게임
🔊 설치 없는 8비트 Web Audio	외부 음원 파일(MP3) 다운로드 없이 브라우저 자체 주파수 합성 기술로 레트로 효과음(획득음, 정답음, 실패음)을 실시간 생성합니다.	음원 파일 링크가 깨지거나 학교 방화벽에 막힐 염려 없이 100% 오프라인에서도 작동
📸 포토카드 인증서 PNG 저장	게임이 끝나면 학생 닉네임, 생존 시간, 맞힌 퀴즈 개수, 획득 뱃지가 담긴 인증 카드를 이미지 파일로 즉시 다운로드합니다.	학생들이 획득한 '구구단 탐험가/마스터' 인증서 이미지를 패들렛이나 학급 위두랑에 제출하기

🛠️ 현장 교사 & 초보 바이브 코더를 위한 실전 활용 가이드

📌 따라하기 3단계 순서

1단계 (제미나이에 프롬프트 입력): 구글 제미나이(gemini.google.com) 접속 후, 아래의 [에러 제로 & 거꾸로 프롬프트]를 복사해 붙여넣습니다.
2단계 (역질문 3가지 답변): 제미나이가 되묻는 질문(대상 학년, 오답 처리 규칙, 조작 인터페이스 등)에 교실 상황에 맞게 1~2줄로 답변합니다.
3단계 (단일 index.html 저장 및 실행): 제미나이가 출력한 완전한 코드를 복사하여 메모장에 넣고 index.html로 저장한 뒤 브라우저로 열면 즉시 게임이 시작됩니다.

📋 복사해서 바로 쓰는 '구글 제미나이 전용 에러 제로 프롬프트'

당신은 뛰어난 감각을 가진 풀스택 프론트엔드 엔지니어이자 교육용 캐주얼 게임 디자이너입니다.
구글 제미나이 환경에서 초등학생을 위한 레트로 감성 교육용 아케이드 웹앱 '구구단 스네이크 챌린지'를 제작해 주세요.
별도 빌드 도구 없이 브라우저에서 즉시 열리는 단일 HTML5 파일(HTML + CSS + JS)로 작성해 주세요.

[🚨 에러 방지 기본 안전장치 (Zero-Error Baseline)]
1. 단일 파일 완결성: HTML, CSS, JavaScript를 생략(// TODO, /* 나머지 코드 */ 등) 없이 하나의 index.html 파일 안에 완전체로 작성할 것.
2. Web Audio API 방어 코드: 사용자 첫 클릭/터치 시 `audioCtx.resume()`를 호출하여 브라우저 오디오 자동 재생 정책을 준수하고, 외부 MP3 파일 없이 OscillatorNode/GainNode로 비프음(사과 획득, 퀴즈 딩동댕, 게임오버)을 자체 합성할 것.
3. 이미지 캡처 라이브러리: 결과 카드 PNG 저장을 위해 head 태그에 공식 CDN(<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>)을 포함할 것.
4. 모바일/태블릿 터치 제어: 방향키 키보드 제어 외에 화면 하단에 가상 터치 D-패드(상/하/좌/우 버튼)를 배치하여 반응형으로 지원할 것.

[🎮 핵심 게임 메커니즘 및 학습 규칙]
1. 기본 룰: 캔버스(Canvas) 기반 지렁이 게임. 사과 1개당 10점. 사과를 3개 먹을 때마다 반짝이는 '지식 별(Quiz Star)' 아이템 생성.
2. 퀴즈 시스템: '지식 별'을 먹으면 게임 루프가 즉시 일시정지(Pause)되고 2~9단 랜덤 구구셈 4지선다 퀴즈 모달이 팝업됨.
   - 10초 카운트다운 프로그레스 바 작동.
   - 정답 선택 시: 딩동댕 효과음 + 점수 100점 + "정답입니다! 7 × 8 = 56" 핵심 해설 카드 1.5초 노출 후 게임 재개.
   - 오답 또는 시간 초과 시: 하드코어 챌린지 룰에 따라 즉시 경고음과 함께 Game Over 처리 후 결과 화면으로 직행.
3. 전체 제한 시간: 3분(180초) 타이머. 30초 이하 시 붉은색 깜빡임 연출.
4. 비주얼 스타일: 파스텔 네오 브루탈리즘 스타일(크림색 배경, 민트/핑크/옐로우 포인트, 3px 검정 테두리, 4px 하드 드롭 그림자, Google DungGeunMo 웹폰트).
5. 결과 포토카드: 닉네임, 최종 점수, 생존 시간, 맞힌 퀴즈 수, 뱃지(구구단 탐험가/마스터)를 포토카드 형태로 표시하고, [내 학습 카드 이미지로 저장] 버튼 클릭 시 html2canvas로 'math_arcade_result.png' 다운로드.

[❓ 역질문 유도 (Reverse Prompting)]
코드를 바로 작성하지 말고, 나에게 아래 3가지 질문을 먼저 던져서 게임 설정을 확인해 줘:
1. 구구단 범위를 2~9단 전 범위로 할까요, 아니면 2~5단 기초 모드 선택 버튼을 추가할까요?
2. 오답 시 즉시 게임오버 외에 '하트 3개(목숨)' 모드를 옵션으로 둘까요?
3. 학생용 닉네임 입력 창을 게임 시작 화면에 띄울까요?

🎯 에디터 한줄평

"단순한 스네이크 게임이 구구단 연산 퀴즈 및 html2canvas 학습 인증서와 만나 완벽한 교실 게임 교구로 재탄생했습니다. 아이들의 승부욕과 성취감을 동시에 자극하는 최고의 5분 집중 웹앱입니다!"

🔗 관련 기술 레퍼런스:
• HTML5 Canvas Game Loop & Web Audio API Sound Synthesis
• html2canvas Official CDN: https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js

인문학과 바이브 코딩의 만남

2026년 9월 6일 일요일

[바이브 코딩 교구] 제미나이로 5분 만에 만드는 '레트로 구구단 스네이크 아케이드' (포토카드 인증서 다운로드 탑재)