종이가 되기 전의 도형과 우리 태양계의 거인들을 눈앞에! — 직육면체·원기둥 3D 전개도 접기 & 태양계 행성 크기 비교 가상 실험실
🌐 초등 5~6학년 수학 '정육면체와 직육면체의 전개도', '기둥과 뿔의 겉넓이' 및 과학 '태양계' 융합 — 종이 도형 모형 만들기를 넘어, 마우스 드래그로 6개의 면이 3D 공간에서 육면체로 조립되는 실시간 접기 애니메이션을 구현하고, 지구와 태양, 목성의 크기를 실제 비율 그대로 나란히 놓아 우리 태양계의 방대한 스케일을 코딩으로 체험하는 수학·과학 2합 융합 실험실입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 종이 접기 vs CSS 3D 전개도 자동 조립 | 가위질과 접기 단계에서 벗어나, 마우스 클릭 하나로 2D 전개도(Net)의 여섯 개 면이 3D 공간에서 접힙니다. | 슬라이더를 움직여 조립 단계(0~100%)별 표시 각도 관찰. |
| 태양계 스케일 실시간 비교 | 태양의 지름은 지구의 무려 109배, 목성은 11배! 숫자로 암기하던 것을 화면에서 실제 비율로 나란히 놓고 봅니다. | 행성 크기 비율 슬라이더를 드래그하여 떠있는 공 크기 비교. |
| 외부 라이브러리 없는 순수 수식 3D 엔진 | 별도의 Three.js나 WebGL 없이 3차원 좌표 변환 수식만으로 브라우저에 렌더링합니다. | 저사양 크롬북이나 노후 태블릿에서도 프레임 드롭 없이 구동. |
2. 핵심 아키텍처 해설
① 다면체 전개도 데이터: NETS 상수
const NETS = {
cube: {
faces: [
{ x: 0, y: 0, size: 80 }, // 바닥 면
{ x: 0, y: -80, size: 80 }, // 위 면
{ x: 0, y: 80, size: 80 }, // 앞 면
{ x: 0, y: 160, size: 80 }, // 뒷 면
{ x: -80, y: 0, size: 80 }, // 좌측 면
{ x: 80, y: 0, size: 80 } // 우측 면
]
},
cylinder: {
faces: [
{ type: "rect", width: 251.3, height: 150 }, // 측면(전개도 접힌 직사각형)
{ type: "circle", radius: 40, x: -125, y: 200 }, // 아래 원
{ type: "circle", radius: 40, x: 125, y: 200 } // 위 원
]
}
};수학 성취기준에 근거한 정육면체, 직육면체, 원기둥의 표준 전개도 면 좌표를 100% 수학적으로 정확하게 상수로 내장하는 심기 모드(데이터 임베딩) 구조입니다.
② CSS Transform 기반 3D 페이스 조립
.face {
position: absolute;
width: 100px;
height: 100px;
transform-origin: center center;
transition: transform 1s ease-in-out;
}
.face-front { transform: rotateY(0deg) translateZ(50px); }
.face-back { transform: rotateY(180deg) translateZ(50px); }
.face-right { transform: rotateY(90deg) translateZ(50px); }
.face-left { transform: rotateY(270deg) translateZ(50px); }CSS 3D 변환(Tate-Zhang transform) 수식을 사용하여 시험지 위의 전개도를 마우스 각도에 맞춰 여섯 개 면이 접혀 3차원 박스로 튀어나오는 마법을 구현합니다.
③ 태양계 행성 크기 비교 스케일러
const PLANETS = [
{ name: "태양", diam: 1392000, color: "#fbbf24" },
{ name: "지구", diam: 12756, color: "#3b82f6" },
{ name: "목성", diam: 142984, color: "#d97706" },
{ name: "수성", diam: 4879, color: "#a3a3a3" }
];
function comparePlanets(scale = 2000000) {
return PLANETS.map(p => {
const px = Math.max(8, Math.round(p.diam / scale));
return `<div class="planet-orb" style="width:${px}px;height:${px}px;background:${p.color}"></div>`;
}).join("");
}행성 지름 데이터를 상수에 심고 CSS 크기 속성에 반영하여, 지구와 태양이 실제 비율로 나란히 놓였을 때의 격감을 360도 회전 뷰어에서 체감합니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 전개도 유형(정육면체 11종 중 무엇)에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
전개도실험실.html로 저장 후 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: Three.js 등 외부 3D CDN 없이 CSS 3D Transform(T) 또는 HTML5 Canvas 수식으로 완성한다.
2. 심기 모드(데이터 임베딩): const NETS = {...} 상수에 정육면체 11가지 표준 전개도 중 2~3가지와 태양계 행성 크기 실제 데이터(지름 km)를 내장한다.
3. CSS 3D 조립 애니메이션: 2D 전개도가 3D 정육면체로 접혀 붙는 과정을 슬라이더 조작 또는 버튼 클릭으로 0~100% 단계별로 시각화한다.
4. 행성 크기 비교 모드: 태양, 지구, 목성 등 8대 행성의 실제 지름 비율을 눈금자 방식으로 시각화하고, 슬라이더로 크기 조절 가능하게 한다.
5. 학생 개인정보 0: 학생 실명 저장을 금지하고 조작 결과만 세션 메모리에 유지한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 기본 제공 전개도 유형은 정육면체(6면), 사각뿔, 원기둥 중 무엇으로 정할까요?
2. 전개도 접기 애니메이션에서 면 색상은 수학 교과서의 파스텔 톤과 살아있는 광택 효과 중 어느 것으로 할까요?
3. 태양계 비교 모드는 위에서 아래로 보는 2D 뷰와 3D 회전 뷰 중 어느 것으로 할까요?🎯 에디터 한줄평
"가위와 풀로 만들던 전개도 모형이 화면 안에서 마법처럼 접히는 경험은 수학적 추상화 능력을 코딩의 자유로운 연습으로 연결해줍니다. 더 나아가 우리 태양계의 스케일 충격(태양 앞의 지구는 송알뿌리)은 아이들에게 우주의 크기에 대한 인식을 완전히 새롭게 조각할 것입니다."
📚 기술·교육 참고 링크
- CSS 3D Transform 상태 및 다면체 전개도 데이터 시각화 학습
- 교육과정 연계: 초등 5~6학년 수학(직육면체의 부피와 겉넓이), 과학(태양계의 구성과 운동), 미술(입체적 조형)
