[바이브 코딩 교구] 제미나이로 완성하는 '구구단 지렁이 아케이드' 풀코드 & 제작 가이드 (포토카드 PNG 저장)

🐍 제미나이로 5분 만에 완성하는 '구구단 지렁이 아케이드' 웹앱: 레트로 게이미피케이션 교구 풀코드 & 제작 노하우

💡 이번 교구 바이브 코딩 30초 핵심 다이제스트:
클래식 지렁이 게임의 몰입감 넘치는 규칙에 '2~9단 랜덤 구구단 퀴즈'와 '10초 타임어택 게이지', 그리고 게임 종료 후 학생의 성취를 증명하는 'html2canvas 학습 인증 포토카드 PNG 다운로드'를 결합한 완성형 에듀테크 웹앱입니다.
외부 라이브러리 설치나 복잡한 빌드 과정 없이, 브라우저에서 단일 index.html 파일 하나로 100% 동작하며 Web Audio API를 통해 자체 합성되는 8비트 레트로 사운드까지 탑재했습니다. 교실 수업 도입 5분 집중용 교구로 최고입니다!

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

무엇이 바뀌었나요? (영역)	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
🎮 아케이드 조작과 연산 학습의 결합	사과 3개를 먹을 때마다 반짝이는 '지식 별'이 생성되고, 먹는 즉시 게임이 멈추며 10초 카운트다운 구구단 퀴즈가 열립니다.	수학 수업 시작 전 대표 학생 1명이 전자칠판 터치나 키보드로 반 전체 앞에서 도전하기
🔊 Web Audio 기반 8비트 사운드 & 파티클	외부 MP3 음원 파일 없이 브라우저 내장 Web Audio API로 C-E-G 코드의 청명한 '딩동댕' 소리와 폭죽 파티클을 자체 생성합니다.	학교망 방화벽이나 음원 다운로드 오류 걱정 없이 오프라인에서도 완벽하게 작동
📸 포토카드 인증서 PNG 다운로드	게임 종료 시 점수, 생존 시간, 맞힌 퀴즈 키워드, 획득 배지(새싹/탐험가/마스터)가 담긴 학습 카드를 원클릭 이미지로 저장합니다.	학생들이 획득한 포토카드 이미지를 학급 위두랑, 패들렛, 구글 클래스룸에 과제 인증으로 제출

🧩 핵심 아키텍처 5대 모듈 심층 해설

• 1. 캔버스 20×20 격자 루프 (Canvas Game Loop): requestAnimationFrame과 누적 델타 타임(Delta Time)을 적용하여, 프레임 드랍 없이 부드러운 스네이크 이동과 충돌(벽/몸통) 판정을 정확히 계산합니다.
• 2. 지식 별(Star) 팝업 & 10초 타임어택: 사과 3개를 먹으면 비어 있는 임의의 칸에 반짝이는 황금 별이 나타나며, 먹었을 때 10초 게이지 바와 함께 매력적인 오답 3개(±1~10 오차)를 포함한 4지선다 퀴즈가 열립니다. 키보드 숫자키 1~4로도 즉시 입력 가능합니다.
• 3. 교육적 비계(Scaffolding) 지식 카드: 정답을 맞히면 "7 × 8 = 56 (7을 8번 더한 값)"처럼 한국어 조사('을/를')가 수치에 따라 정확히 자동 변환되는 지식 카드가 1.5초간 노출되어 덧셈의 동수누가 원리를 자연스럽게 체득하게 돕습니다.
• 4. 3분 전체 타이머 & 긴장감 페이퍼: 전체 플레이 시간 3분(180초) 중 남은 시간이 30초 이하로 줄어들면 타이머 뱃지가 붉은색으로 깜빡이며(Warning Blink) 짜릿한 스릴을 선사합니다.
• 5. 멀티 디바이스 터치 D-Pad & 스와이프 제어: PC 키보드 방향키와 WASD 조작은 물론, 태블릿/스마트폰 터치 가상 패드와 스와이프 제스처까지 완벽히 지원합니다.

💡 초보자를 위한 바이브 코딩 실전 사용 예시

📌 따라하기 3단계 순서

1. 1단계 (제미나이에 프롬프트 입력): 구글 제미나이(https://gemini.google.com)에 접속하여 아래의 [완성형 바이브 코딩 프롬프트]를 복사해 붙여넣습니다.
2. 2단계 (역질문 답변으로 맞춤 설정): 제미나이가 제시하는 3가지 질문(구구단 범위, 목숨 모드 여부, 디자인 테마)에 원하는 교실 규칙을 1줄로 답변합니다.
3. 3단계 (index.html 파일 저장 및 실행): 출력된 전체 코드를 복사하여 메모장에 넣고 gugudan_snake.html로 저장한 뒤 더블 클릭하면 설치 없이 바로 구동됩니다!

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

당신은 뛰어난 감각을 가진 풀스택 프론트엔드 엔지니어이자 교육용 캐주얼 게임 디자이너입니다.
초등학생을 위한 레트로 감성의 웹 기반 교육용 아케이드 게임 '구구단 지렁이 아케이드'를 단일 HTML5 파일로 제작해 주세요.

[🚨 에러 방지 기본 안전장치 (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. 멀티 컨트롤 지원: 키보드 방향키/WASD/숫자키(1~4) 외에 화면 하단에 가상 터치 D-패드와 터치 스와이프 이벤트를 지원할 것.

[🎮 핵심 게임 메커니즘 및 학습 규칙]
1. 기본 룰: 캔버스(Canvas) 기반 지렁이 게임. 사과 1개당 10점. 사과를 3개 먹을 때마다 반짝이는 '지식 별(Quiz Star)' 아이템 생성.
2. 퀴즈 시스템: '지식 별'을 먹으면 게임 루프가 즉시 일시정지(Pause)되고 2~9단 랜덤 구구셈 4지선다 퀴즈 모달이 팝업됨.
   - 10초 카운트다운 프로그레스 바 작동.
   - 정답 선택 시: 딩동댕 효과음 + 점수 100점 + "정답입니다! 7 × 8 = 56 (7을 8번 더한 값)" 핵심 해설 카드 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단 전 범위로 할까요, 아니면 특정 단(예: 3, 6, 9단 집중)을 선택할 수 있게 할까요?
2. 퀴즈 오답 시 즉시 게임오버 대신 '하트 3개(기회 3번)'를 부여할까요?
3. 게임 종료 후 최고 점수를 브라우저 로컬스토리지에 저장하여 명예의 전당을 띄울까요?

🎯 에디터 한줄평

"화려한 그래픽보다 강력한 것은 아이들이 자발적으로 몰입하게 만드는 아케이드 게임 루프와 학습의 정교한 결합입니다. 오늘 바로 교실 전자칠판에 띄워보세요!"

🔗 관련 라이브러리 및 웹 기술:
• HTML5 Canvas 2D Game Rendering & Animation Loop
• Web Audio API (Synthesizer Oscillators & Gain Nodes)
• html2canvas CDN (https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js)