2026년 9월 8일 화요일

[수학·미술] 3D 입체도형 공간 회전 시뮬레이터 - 손으로 돌려보는 가상 조각 전시관

교과서 속 겨냥도가 화면에서 살아 움직인다! — 3D 입체도형 공간 회전 시뮬레이터 & 나만의 3D 가상 조각 전시관

📐 초등 5~6학년 수학 '직육면체와 정육면체', '각기둥과 각뿔' 및 미술 '입체 조형' 융합 — 종이 교과서의 평면 겨냥도만으로는 보이지 않는 모서리와 꼭짓점을 마우스나 손가락 터치로 360도 자유롭게 돌려보며 공간 지각력을 기르고, 여러 입체도형을 블록처럼 쌓아 나만의 가상 조각상(Sculpture)을 완성해보는 3D 수학 융합 교구입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
평면 겨냥도 vs 360도 3D 인터랙션 점선과 실선으로 상상하던 보이지 않는 면과 모서리를 손끝으로 돌려보며 직관적으로 확인합니다. 마우스 드래그로 각기둥을 돌리며 꼭짓점(vertex) 개수 세기 미션.
무거운 Three.js 없이 순수 Canvas 3D 수식 외부 3D 엔진(Three.js 등 CDN) 없이 3차원 좌표 변환 삼각함수 공식만으로 브라우저에 직접 렌더링합니다. 인터넷이 차단된 교실 크롬북에서도 60fps로 매끄럽게 구동.
입체 조각 조합 모드 정육면체, 삼각기둥, 사각뿔 등을 레고 블록처럼 쌓아 올려 나만의 디지털 조각품을 만듭니다. 완성된 조각상을 회전 뷰어로 감상하며 조형미와 부피(volume) 계산.

2. 핵심 아키텍처 해설

① 3D 입체도형 정점(Vertex) 좌표: SHAPES 상수

const SHAPES = {
  cube: {
    name: "정육면체",
    vertices: [
      [-50, -50, -50], [50, -50, -50], [50, 50, -50], [-50, 50, -50],
      [-50, -50, 50],  [50, -50, 50],  [50, 50, 50],  [-50, 50, 50]
    ],
    edges: [
      [0,1],[1,2],[2,3],[3,0], [4,5],[5,6],[6,7],[7,4], [0,4],[1,5],[2,6],[3,7]
    ],
    faces: 6, verticesCount: 8, edgesCount: 12
  }
};

외부 3D 모델 파일(.obj/.gltf)을 다운로드할 필요 없이 8개의 정점 좌표와 12개의 모서리 연결 규칙을 상수로 심어두는 심기 모드(데이터 임베딩) 구조입니다.

② 순수 삼각함수 기반 3D 회전 투영 엔진

function project(x, y, z, angleX, angleY, fov = 300) {
  // Y축 회전
  let cosY = Math.cos(angleY), sinY = Math.sin(angleY);
  let x1 = x * cosY + z * sinY;
  let z1 = -x * sinY + z * cosY;

  // X축 회전
  let cosX = Math.cos(angleX), sinX = Math.sin(angleX);
  let y2 = y * cosX - z1 * sinX;
  let z2 = y * sinX + z1 * cosX;

  // 2D 원근 투영(Perspective Projection)
  let distance = fov / (fov + z2 + 200);
  return {
    px: x1 * distance + 200,
    py: y2 * distance + 180
  };
}

수학 시간에 배우는 삼각비(sin, cos)가 화면 속 물체를 회전시키는 핵심 원리임을 코드로 증명하는 강력한 수학 융합 아키텍처입니다.

③ 모서리(Edge) 렌더링 및 겨냥도 모드

뒷면에 가려진 모서리를 점선(dashed line)으로 표시하는 '겨냥도 모드 토글'을 탑재하여 초등 수학 성취기준의 핵심 개념을 완벽하게 지원합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 입체도형 종류(정육면체, 각뿔 등)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 3D도형시뮬레이터.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: Three.js 등 외부 3D CDN 라이브러리 없이 순수 HTML5 Canvas와 삼각함수 투영 수식으로 3D 회전 및 렌더링을 완성한다.
2. 심기 모드(데이터 임베딩): const SHAPES = {...} 상수에 정육면체, 직육면체, 삼각기둥, 사각뿔의 정점(vertices) 및 모서리(edges) 좌표를 내장한다.
3. 360도 터치/드래그 회전: 캔버스 위에서 마우스 드래그 또는 모바일 터치 스와이프로 X축/Y축 각도를 부드럽게 회전시키는 인터랙션을 구현한다.
4. 겨냥도 전환 토글: 버튼 클릭 시 뒷면 모서리를 점선으로 투시하는 '겨냥도 모드'와 실선만 보이는 '입체 모드'를 전환할 수 있게 한다.
5. 학생 개인정보 0: 학생 실명 입력 없이 조작 결과만 브라우저 세션에 유지한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 초등 5~6학년 수학 교육과정에 맞춰 기본 제공할 입체도형 3~4가지는 무엇으로 정할까요?
2. 도형의 면 색상을 반투명 파스텔 톤으로 채우는 '면 칠하기' 옵션도 추가할까요?
3. 정점, 모서리, 면의 개수를 화면 한편에 실시간 카운터 배지로 보여줄까요?

🎯 에디터 한줄평

"겨냥도 앞에서 턱을 괴고 눈을 감은 채 머릿속으로 도형을 돌려보던 아이들에게 마우스 터치 한 번으로 3D 세계를 열어줍니다. 외부 라이브러리 하나 없이 순수 삼각함수 10줄로 화면에 공간감이 피어나는 순간, 수학은 더 이상 시험지 위의 문제가 아니라 세상을 빚어내는 살아있는 언어가 됩니다."

📚 기술·교육 참고 링크

  • 컴퓨터 그래픽스 기초: 3D 원근 투영(Perspective Projection) 공식 해설
  • 교육과정 연계: 초등 5~6학년 수학(직육면체와 정육면체, 각기둥과 각뿔), 미술(입체 조형과 공간)
By 시간: