2026년 9월 6일 일요일

[교과 연계] 초등 수학 타격 액션 디펜스 - 구구단·분수 퀴즈로 몬스터 물리치기



구구단을 몬스터 타격으로 바꾸는 수학 액션 디펜스 — 점진 3단계 프롬프팅 완전 정복

⚔️ 몬스터가 다가오면 수학 퀴즈를 맞추고, 정답 순간 타격감(hit feel) 4종 세트 — 플래시(flash)·화면 흔들림(screen shake)·데미지 팝업(damage popup)·타격 사운드 — 로 몬스터를 물리치는 액션 디펜스(defense) 게임입니다. 4~6학년 수학 연산 단원과 실과 SW 단원이 한 게임에서 만납니다.

점진적 3단계 프롬프팅(무대 → 퀴즈 → 타격감·슬라이더)으로 하루(24시간) 프로젝트가 가능합니다. 몬스터는 메이플스토리 캐릭터 대신 우리 반만의 도트 맵(dot map) 몬스터를 직접 디자인 — 저작권 존중과 창의성을 동시에 배웁니다. 문제은행·아트·사운드를 전부 파일 안에 심는 심기 모드(데이터 임베딩)라 학내망 통신은 0입니다.

📖 한 줄 정의

심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).

학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
수업 시나리오 수학 연산 단원(구구단·분수) + 실과 SW 단원을 결합해, 점진 3단계 프롬프팅으로 하루 안에 완성합니다. 단계마다 저장·실행으로 다음 단계를 확인하는 리듬이 핵심입니다. 1단계 무대 → 2단계 퀴즈 → 3단계 타격감·슬라이더 순서로 파일을 키워갑니다.
타격감(hit feel) 4종 정답 판정 순간 ① 플래시(flash) ② 화면 흔들림(screen shake) ③ 데미지 팝업(damage popup) ④ 타격 사운드가 동시에 터집니다 — '맞췄다!'를 머리가 아니라 몸으로 느끼게 하는 게임 개발의 기술입니다. 화면 흔들림은 캔버스 이동 오프셋 3줄로 시작.
문제은행 구구단(2~9단)과 분수(같은 분모 덧셈) 문제를 EMBED_DATA로 파일 안에 심습니다. 랜덤으로 뽑아 몬스터에 붙이고, 정답이면 몬스터 체력이 줄어듭니다. 문제 35개 심기 → Math.random으로 뽑기.
인게임 슬라이더 input type="range" 슬라이더(slider)로 정답 제한 시간 3~10초를 조절합니다. 학급 실력에 맞춘 난이도 튜닝이 게임 안에서 바로 가능합니다. 슬라이더 값을 화면에 실시간 표시하기.
저작권 안전 설계 메이플스토리 고유 캐릭터·음악·아이콘은 사용하지 않습니다. '귀여운 슬라임 느낌'이라는 스타일만 참고해, 우리 반만의 몬스터를 도트 맵으로 새로 디자인합니다. 8×8 도트 맵에 우리 반 슬라임을 그려보기.

2. 핵심 아키텍처 해설 — 타격감이 만들어지는 4개의 층

① 무대 해부: 디펜스는 '오른쪽에서 다가오는 위험'

몬스터는 화면 오른쪽에서 스폰(spawn)되어 성문(왼쪽)으로 다가오고, 게임 루프(update/draw)는 표준 무대를 그대로 재활용합니다 — 규칙(문제·판정·연출)만 교체하면 새 장르가 됩니다.

② 도트 맵 몬스터: 0과 1로 그리는 우리 반 슬라임

const SLIME = [
  "00111100",
  "01111110",
  "11111111",
  "11111111",
  "11100111",
  "11111111",
  "01111110",
  "00111100"
];
// "1"마다 작은 사각형을 그려 몬스터 완성 — 이미지 파일 필요 0

③ 문제은행과 랜덤 뽑기

const QUIZ_POOL = [
  { q: "7 x 8 = ?", a: 56 },
  { q: "2/5 + 1/5 = ?", a: 0.6 }
];

function drawQuiz() {
  const i = Math.floor(Math.random() * QUIZ_POOL.length);
  return QUIZ_POOL[i];
}

④ 타격감 4종: 정답 판정 순간의 연출 코드

let shakeTime = 0;
let flashAlpha = 0;

function hitEffect(x, y) {
  shakeTime = 8;                              // ② 화면 흔들림 8프레임
  flashAlpha = 0.5;                           // ① 플래시 밝기
  popups.push({ text: "HIT!", x: x, y: y, life: 20 });   // ③ 데미지 팝업
  sound("hit");                               // ④ Web Audio 타격음
}

function draw() {
  const ox = shakeTime > 0 ? (Math.random() - 0.5) * 8 : 0;
  ctx.setTransform(1, 0, 0, 1, ox, 0);        // 흔들림 = 캔버스를 살짝 옮겨 그리기
  drawStage();
  if (flashAlpha > 0) {
    ctx.fillStyle = "rgba(255,255,255," + flashAlpha + ")";
    ctx.fillRect(0, 0, W, H);
    flashAlpha -= 0.1;                        // 플래시는 서서히 사라지게
  }
  drawPopups();
}

⑤ 슬라이더로 제한 시간 조절 + 심기 전략

<input type="range" id="timeRange" min="3" max="10" value="6">
const range = document.getElementById("timeRange");
range.addEventListener("input", function () {
  LIMIT = Number(range.value);
  limitLabel.textContent = LIMIT + "초";
});

문제은행·도트 맵·사운드 파라미터는 모두 파일 상단 상수로 심습니다. 이 게임은 애초에 외부 fetch가 필요 없는 완전 로컬 게임 — 학내망 배포본은 상수만 교체하면 됩니다(심기 모드(데이터 임베딩) 참고: 앞의 '📖 한 줄 정의' 박스).

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'의 1단계부터 순서대로 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — 1단계에서 Gemini가 던지는 질문 3가지(연산 비중, 몬스터 컨셉, 슬라이더 범위)에 답하면 설계가 확정됩니다.
  3. 단계마다 저장·실행 — 1단계 무대 → 2단계 퀴즈 → 3단계 타격감, 각 단계 끝에 파일을 저장하고 실행해 동작을 확인합니다. 하루면 충분합니다.

제미나이 전용 에러 제로 프롬프트 (점진 3단계)

[사용법] 아래 3단계 프롬프트를 한 번에 하나씩 붙여넣는다. 매 단계가 끝나면 HTML 파일을 저장·실행해 다음 단계로 넘어간다. 최종 결과는 하나의 단일 HTML 파일이어야 한다.

[1단계 — 몬스터 스폰 무대]
캔버스에 몬스터가 오른쪽에서 왼쪽으로 다가오는 디펜스 무대를 만들어줘.
[🚨 에러 방지 안전장치]
- 단일 HTML 파일 완결성: 외부 라이브러리·웹폰트·이미지 파일·오디오 파일 금지.
- 몬스터는 도트 맵(0과 1의 배열)으로 직접 그린다. 메이플스토리 고유 캐릭터·음악·아이콘 사용 금지 — 우리 반만의 슬라임 컨셉으로 새로 디자인한다.
- 게임 루프는 update()와 draw()로 분리한다.
- 사운드는 Web Audio API로 직접 합성한다.
- 모바일 터치 대응: 뷰포트 메타 태그, 버튼 최소 44x44px, 360px 가로 스크롤 금지.
- // TODO, /* 생략 */ 금지.
[❓ 역질문 유도]
코드를 바로 만들지 말고 아래 3가지를 먼저 질문한다.
Q1. 구구단과 분수 문제의 비중은? (구구단 위주 / 분수 위주 / 반반)
Q2. 몬스터 컨셉은? (우리 반 슬라임 / 과일 괴물 / 반 학생이 만든 도트)
Q3. 정답 제한 시간 슬라이더 범위는? (3~10초 권장)

[2단계 — 연산 퀴즈 결합]
몬스터마다 수학 문제를 붙이고, 키패드로 정답을 입력해 판정하게 해줘.
[🚨 에러 방지 안전장치]
- 문제은행은 파일 상단 EMBED_DATA 상수(구구단 25문제 + 같은 분모 분수 10문제)로 완전히 심는다(학내망 배포용 외부 호출 0 모드).
- 정답이면 몬스터 체력 감소, 오답이면 몬스터가 성문에 한 걸음 더 접근한다.
- 숫자 키패드는 3x4 배열 버튼으로 만들고 터치 크기 64px 이상.
- 정답 판정에는 Number() 변환을 반드시 거친다("0.6" 문자열 함정 방지).

[3단계 — 타격감 4종 + 슬라이더]
정답 판정 순간 타격감 4종(플래시, 화면 흔들림, 데미지 팝업, 사운드)을 연출하고, 상단 슬라이더로 정답 제한 시간 3~10초를 조절하게 해줘.
[🚨 에러 방지 안전장치]
- 플래시는 반투명 흰 사각형의 알파를 프레임마다 줄여 사라지게 한다.
- 흔들림은 ctx.setTransform으로 캔버스를 랜덤 오프셋만큼 옮겨 그린다.
- 데미지 팝업은 위로 떠오르다 사라지는 텍스트 배열로 관리한다.
- 사운드는 Web Audio API 합성(타격 '퍽', 정답 '똑', 오답 '삑').
- 슬라이더 값은 화면에 실시간 표시한다.
- 최종 파일은 단일 HTML로 완성 — // TODO, /* 생략 */ 금지.

🎯 에디터 한줄평

연산 반복 훈련('백지연습'의 지루함)이 정답 순간의 타격감으로 바뀌는 순간, 수학은 '당하는 것'에서 '던지는 것'이 됩니다. 특히 이 설계의 백미는 저작권 안전 장치 — 메이플스토리 캐릭터를 베끼는 대신 우리 반만의 몬스터를 도트로 새로 그리는 과정 자체가 저작권 존중 수업이자 실과 SW 수업이 됩니다. 점진 3단계로 나눈 프롬프팅은 '한 번에 완벽한 코드'라는 불가능한 기대를 없애고, 단계마다 성공을 확인하는 하루 프로젝트 리듬을 만들어 줍니다.

📚 기술·교육 참고 링크

  • MDN Canvas API : 도트 맵 그리기와 화면 흔들림의 기초
  • MDN Web Audio API : 타격 사운드 무설치 합성
  • 교육과정 연계: 수학(연산·비율·시간), 실과·정보(SW 프로그래밍·저작권)와 함께 활용
  • 활용 팁: 완성 후 '몬스터 도트 디자인 공모'로 미술 시간과 연결하면 저작권·창의성 학습이 자연스럽게 이어집니다
By 시간: