2026년 9월 6일 일요일

[수학·미술] 평면도형의 이동 테트리스 - 7가지 블록 회전과 바닥 안착으로 배우는 공간감각



도형을 돌리고 뒤집어 빈틈없이 채운다 — '테트로미노 블록 퍼즐 & 수학 공간감각 교구'

🧩 초등 4학년 수학 '평면도형의 이동(밀기·뒤집기·돌리기)' 단원 — 7가지 테트로미노(Tetromino) 블록이 떨어질 때 90도 회전, 좌우 이동, 바닥 안착 원리를 직접 조작하며 공간 감각을 기릅니다. 블록 색상과 점수 규칙을 상수로 커스터마이징하여 나만의 수학 아케이드 교구를 완성합니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
7대 테트로미노 회전 행렬 I, O, T, S, Z, J, L 블록의 4×4 좌표 배열을 90도씩 회전시키는 2차원 배열 회전 수식을 체득합니다. 화살표 위(↑) 키 클릭 시 시계방향 90도 회전 시각화.
바닥 안착 & 줄 삭제 수학 10×20 격자판의 가로 한 줄이 빈틈없이 '1'로 채워지면 100점을 획득하고 아래로 밀려 내려옵니다. 완성된 줄 삭제 시 Web Audio API 코인 사운드 합성.
나만의 교구 커스터마이징 블록 크기(24px/32px)와 테마 색상(네온/파스텔/우드)을 상수로 바꿔 학급 전용 교구로 개조합니다. 수학 시간에 '2줄 동시 삭제 미션' 챌린지 운영.

2. 핵심 아키텍처 해설

① 7대 테트로미노 형상 상수: SHAPES

const SHAPES = {
  I: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],
  O: [[1,1],[1,1]],
  T: [[0,1,0],[1,1,1],[0,0,0]],
  L: [[0,0,1],[1,1,1],[0,0,0]],
  J: [[1,0,0],[1,1,1],[0,0,0]],
  S: [[0,1,1],[1,1,0],[0,0,0]],
  Z: [[1,1,0],[0,1,1],[0,0,0]]
};

정사각형 4개로 만들어지는 7가지 모양을 2차원 0/1 배열로 정의합니다. 이 데이터가 곧 평면도형의 기본 블록입니다.

② 시계방향 90도 회전 알고리즘

function rotate(matrix) {
  const N = matrix.length;
  return matrix.map((row, i) =>
    row.map((val, j) => matrix[N - 1 - j][i])
  );
}

행과 열을 뒤바꾸고 행 순서를 반전시키는 단 3줄의 회전 수식으로 교과서의 '시계방향으로 90도 돌리기'를 완벽히 구현합니다.

③ 충돌 감지 및 줄 삭제 로직

function clearLines(grid) {
  let cleared = 0;
  for (let r = grid.length - 1; r >= 0; r--) {
    if (grid[r].every(cell => cell !== 0)) {
      grid.splice(r, 1);
      grid.unshift(new Array(10).fill(0));
      cleared++;
      r++; // 같은 줄 재검사
    }
  }
  return cleared;
}

배열의 every 메소드로 가로 한 줄이 모두 채워졌는지를 검사하고, 꽉 찬 행을 잘라내어 상단에 빈 행을 추가합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 격자 크기(10×20)와 블록 낙하 속도에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 수학테트리스.html로 저장하여 전자칠판에서 플레이합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 외부 이미지 없이 순수 HTML5 Canvas와 바닐라 JS로 완성한다.
2. 7가지 테트로미노 블록: I, O, T, S, Z, J, L 형상을 2차원 배열 상수로 정의하고, 상(↑) 키로 90도 회전, 좌우(←→) 이동, 하(↓) 소프트드롭, 스페이스바 하드드롭을 지원한다.
3. 바닥 안착 & 줄 삭제: 10×20 격자판에서 가로 한 줄이 모두 채워지면 삭제되고 점수(줄당 100점)가 올라간다.
4. 효과음 합성: Web Audio API로 블록 회전 시 '틱', 줄 삭제 시 맑은 '딩동', 게임오버 시 '삑' 사운드를 합성한다.
5. 학생 개인정보 0: 점수 기록은 세션 메모리로만 유지하며 실명을 수집하지 않는다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 캔버스 블록 크기를 24px(노트북용)과 32px(전자칠판 대형) 중 무엇으로 할까요?
Q2. 블록 색상 테마를 클래식 원색과 모던 파스텔 중 어느 것으로 갈까요?
Q3. 다음 블록(Next Piece) 미리보기 창을 화면 오른쪽에 배치할까요?

🎯 에디터 한줄평

"'도형을 돌린다'는 말을 문제집에서 보면 어렵지만, 테트리스 게임 안에서는 손가락이 먼저 반응합니다. 2차원 배열의 회전 수식을 직접 들여다보는 순간, 게임은 단순한 오락이 아니라 가장 명쾌한 공간 좌표의 수학 교구가 됩니다."

📚 기술·교육 참고 링크

  • 테트로미노(Tetromino) 기하학 정의 및 평면도형 분할 이론
  • 교육과정 연계: 초등 4학년 수학(평면도형의 이동: 밀기, 뒤집기, 돌리기), 실과(소프트웨어와 프로그래밍)
By 시간: