2026년 9월 6일 일요일

[교과 연계] 각도와 반사의 원리를 배우는 입체 벽돌깨기 수학 교구



입사각과 반사각이 눈앞에서 튕겨 나갑니다 — 입체 벽돌깨기 각도 수학 교구 완전 정복

📐 4학년 1학기 수학 '각도' 단원에서 학생들은 각도기를 종이에 대고 몇 도인지 재는 수동적 계산에 머물기 쉽습니다. 하지만 패들(paddle, 라켓)의 기울기(30°, 45°, 60°)를 직접 조절하며 공의 반사각(reflection angle)과 궤적 점선을 눈으로 확인하고, 목표 벽돌을 맞추기 위해 각도를 추론하는 순간 수학은 살아 움직이는 물리 게임이 됩니다.

외부 게임 엔진이나 라이브러리 없이, 순수 HTML5 캔버스(Canvas)의 삼각함수 물리 연산으로 단 한 장의 HTML 파일 안에 완성된 심기 모드(데이터 임베딩) 웹 교구입니다. 학내망 원칙(외부 통신 0)을 완벽히 지키며 수학적 공간 감각을 길러줍니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
패들 기울기와 각도 표시 패들의 각도를 키보드나 슬라이더로 조절하면 표면에 각도 눈금선과 각도 수치(30°, 45°, 60°)가 실시간 렌더링(rendering, 화면 그리기)됩니다. 30도와 60도에서 공이 꺾이는 각도 차이 관찰하기.
예상 궤적(trajectory) 점선 공이 패들에 닿기 직전, 반사되어 뻗어나갈 예상 경로를 점선으로 미리 보여주어 입사각과 반사각의 원리를 직관적으로 이해시킵니다. 점선을 보며 목표 벽돌을 맞추기 위한 각도 예측하기.
수학 스테이지 심기 단원별 필수 각도(직각 90°, 예각 45°, 둔각 120°) 벽돌 배치가 파일 상단 상수에 완전히 심어져 있어 무설치 오프라인으로 작동합니다. 모둠별 각도 맞히기 타임어택 챌린지.

2. 핵심 아키텍처 해설

① 패들 각도에 따른 반사각 물리 연산

function reflectBall(ball, paddleAngleRad) {
  // 공의 입사 벡터 (vx, vy)
  const speed = Math.sqrt(ball.vx * ball.vx + ball.vy * ball.vy);
  // 패들 표면의 법선(normal) 벡터 각도
  const normalAngle = paddleAngleRad - Math.PI / 2;
  // 입사각과 반사각 대칭 계산
  const incidentAngle = Math.atan2(ball.vy, ball.vx);
  const reflectedAngle = 2 * normalAngle - incidentAngle - Math.PI;
  // 새로운 속도 벡터 적용
  ball.vx = speed * Math.cos(reflectedAngle);
  ball.vy = speed * Math.sin(reflectedAngle);
}

빛과 당구공의 물리 법칙인 '입사각 = 반사각'을 캔버스 삼각함수로 구현했습니다. 패들의 기울기가 조금만 바뀌어도 공의 반사 방향이 역동적으로 달라집니다.

② 예상 궤적(trajectory) 점선 렌더링

function drawTrajectory(ctx, startX, startY, angleRad, length) {
  ctx.save();
  ctx.setLineDash([6, 6]); // 점선 패턴
  ctx.strokeStyle = "#e53e3e";
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(startX + Math.cos(angleRad) * length, startY + Math.sin(angleRad) * length);
  ctx.stroke();
  ctx.restore();
}

③ 각도 수학 퀴즈 스테이지 데이터 심기

const ANGLE_STAGES = [
  { id: 1, targetAngle: 45, desc: "예각 45도로 튕겨 노란 벽돌을 맞혀보세요!", bricks: [...] },
  { id: 2, targetAngle: 60, desc: "60도 패들을 맞춰 꼭대기 보너스 벽돌을 조준하세요!", bricks: [...] }
];

외부 서버나 API 호출 없이 모든 스테이지 구성과 벽돌 좌표가 ANGLE_STAGES 상수에 박혀 있는 심기 모드(데이터 임베딩)입니다.

④ Web Audio API 타격·반사음 합성

function playHitSound(freq) {
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const osc = ctx.createOscillator();
  const gain = ctx.createGain();
  osc.type = "sine";
  osc.frequency.setValueAtTime(freq, ctx.currentTime);
  gain.gain.setValueAtTime(0.2, ctx.currentTime);
  gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.15);
  osc.connect(gain); gain.connect(ctx.destination);
  osc.start(); osc.stop(ctx.currentTime + 0.15);
}

⑤ 원칙·정합

단일 HTML 파일 완결, 외부 캔버스 엔진이나 사운드 CDN 호출 0. 학생 조작 기록이나 이름은 일절 수집하지 않으며 순수 물리 연산으로 교실 크롬북과 태블릿에서 완벽하게 작동합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini의 질문 3가지(패들 조작 방식, 벽돌 레이아웃, 표시할 각도 눈금)에 답하면 단일 파일 코드가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 '각도벽돌깨기.html'로 저장 후 더블클릭하면 교실 전자칠판과 태블릿에서 즉시 실행됩니다.

제미나이 전용 에러 제로 프롬프트

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리, CDN, 외부 폰트 없이 순수 바닐라 JS와 HTML5 Canvas만으로 단일 HTML 파일로 완성한다.
2. 하단 패들은 좌우 이동뿐 아니라 좌우 방향키나 A/D키로 기울기 각도(-60도 ~ +60도)를 조절할 수 있어야 한다.
3. 패들 중앙에 현재 기울어진 각도 수치(예: 45°)와 각도 눈금선이 선명하게 표시되어야 한다.
4. 공이 패들에 닿았을 때 패들의 기울기 각도를 반영한 입사각/반사각 물리 반사 공식이 정확히 작동해야 한다.
5. 공의 진행 방향 앞쪽에 궤적(trajectory) 점선을 미리 렌더링하여 학생이 반사 경로를 시각적으로 예측할 수 있게 한다.
6. 사운드는 Web Audio API로 오실레이터를 합성하여 벽돌 타격 시 '통', 패들 반사 시 '퐁' 소리를 낸다 (오디오 파일 금지).
7. 모바일 터치 조작(좌우 드래그로 이동, 화면 하단 각도 버튼)을 완벽 지원한다.
8. 학생 개인정보 수집 칸은 일절 포함하지 않는다.
9. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 패들 각도 조절 방식은 무엇을 선호하시나요? (키보드 Q/E키 / 마우스 휠 / 화면 터치 버튼)
Q2. 벽돌에 각도 문제를 적어둘까요? (예: "직각=90" 벽돌을 깨야 클리어)
Q3. 공의 속도 난이도는 어떻게 조절할까요? (초등 4학년 맞춤 완만한 속도 / 단계별 가속)

🎯 에디터 한줄평

종이 위 각도기 재기에서 지루함을 느끼던 아이들이 "선생님, 45도로 꺾어야 저 벽돌에 닿아요!"라며 각도를 공간 전략으로 고민하기 시작합니다. 외부 게임 엔진 하나 없이 삼각함수 몇 줄로 구현한 고품질 수학 교구의 모범 사례입니다.

📚 기술·교육 참고 링크

  • MDN — Canvas 기본 튜토리얼 : 2D 그래픽 렌더링 및 애니메이션 루프
  • 교육과정 연계: 4학년 1학기 수학(각도와 삼각형), 과학(빛의 반사와 굴절)과 직접 연계
By 시간:
라벨: ,