수도꼭지를 잠그면 전기가 끊긴다? — 일상 사물 비유 전기 회로 & 컴퓨터 네트워크 원리 시뮬레이터
💡 초등 6학년 과학 '전기의 이용' 및 실과 '네트워크와 정보 전달' 단원 — 눈에 보이지 않는 전자의 흐름과 인터넷 패킷의 이동을 학생들이 가장 익숙한 '수도관(수압, 밸브, 물레방아)'과 '우편배달부(편지, 주소, 택배 터미널)'에 1:1로 매핑하여 애니메이션으로 조작해 보는 과학·정보 융합 인터랙티브 시뮬레이터입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 추상적 개념 vs 실물 사물 비유 | 전압=수압(물탱크 높이), 전류=물 흐름 속도, 저항=수도관 굵기, 스위치=수도꼭지 밸브로 1:1 시각화합니다. | 슬라이더로 물탱크를 높이면 전구(물레방아)가 빨라지는 직관적 체험. |
| 네트워크 패킷과 편지 배달부 | 인터넷 데이터가 작게 쪼개진 패킷(Packet)이 되어 라우터를 거쳐 목적지 IP 주소로 배달되는 과정을 트럭 애니메이션으로 구현합니다. | 실과 '인터넷 통신' 단원에서 패킷 손실 및 재전송 원리 수업. |
| 순수 Canvas 동적 애니메이션 | 외부 물리 엔진 라이브러리 없이 순수 HTML5 캔버스로 물 입자와 편지 트럭이 파이프/도로를 달리는 모습을 그립니다. | 전자칠판에 전체 화면으로 띄워 터치 조작 실습. |
2. 핵심 아키텍처 해설
① 물리 비유 매핑 모델: ANALOGY_MODELS 상수
const ANALOGY_MODELS = {
circuit: {
voltage: { name: "전압 (V)", metaphor: "물탱크 높이 (수압)", unit: "V", default: 5 },
current: { name: "전류 (I)", metaphor: "흘러가는 물의 양", unit: "A", formula: "V / R" },
resistance: { name: "저항 (R)", metaphor: "파이프의 좁은 정도", unit: "Ω", default: 10 },
switch: { name: "스위치", metaphor: "수도꼭지 밸브", state: true }
},
network: {
packet: { name: "데이터 패킷", metaphor: "작게 나뉜 택배 상자" },
router: { name: "라우터/공유기", metaphor: "우체국 물류 분류 센터" },
ip: { name: "IP 주소", metaphor: "우리 집 도로명 주소" }
}
};과학과 정보 교과의 핵심 개념을 일상 사물의 언어로 번역한 심기 모드(데이터 임베딩) 사전 구조입니다.
② 옴의 법칙(Ohm's Law) 시뮬레이션 계산 루프
function calculateCircuit(v, r, isClosed) {
if (!isClosed) return { current: 0, bulbBrightness: 0 };
const current = v / r; // I = V / R
const brightness = Math.min(100, Math.round((current / 1.5) * 100));
return { current: current.toFixed(2), bulbBrightness: brightness };
}슬라이더로 전압(수압)을 높이거나 저항(파이프 굵기)을 좁힐 때마다 옴의 법칙에 따라 전류가 실시간 재계산되며, 연결된 전구의 밝기가 노란색 광채(glow)로 즉시 갱신됩니다.
③ 순수 Canvas 파티클 흐름 렌더링
파란색 물 입자(전자)들이 파이프 회로를 따라 일정한 속도로 회전하는 애니메이션 루프를 requestAnimationFrame으로 구동하여 완벽한 오프라인 단일 HTML 구동을 보장합니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 모드(전기 회로 vs 컴퓨터 네트워크)에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
과학사물시뮬레이터.html로 저장 후 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 물리 엔진, 외부 그래픽 라이브러리 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 2대 모드 탭 지원: 상단 탭으로 '① 전기 회로(수도관 비유)'와 '② 컴퓨터 네트워크(택배 배달 비유)'를 자유롭게 전환할 수 있도록 한다.
3. 옴의 법칙 슬라이더 인터랙션: 전압 슬라이더(1~12V)와 저항 슬라이더(1~20Ω), 스위치 토글을 두어 전구 밝기와 물 흐름 속도가 실시간 변화하도록 한다.
4. 네트워크 패킷 애니메이션: 송신 컴퓨터에서 출발한 3개의 택배 상자가 공유기(라우터)를 거쳐 수신 컴퓨터에 도달하는 애니메이션을 Canvas에 그린다.
5. 학생 개인정보 0: 학생 실명 입력 없이 누구나 즉시 조작해 보는 탐구 도구로 완결한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 기본으로 먼저 열릴 탭은 전기 회로 모드와 네트워크 모드 중 어느 것으로 할까요?
2. 전구(물레방아) 과부하 시 '퓨즈 단선' 경고 연출도 포함할까요?
3. 네트워크 모드에서 패킷 전송 속도를 조절하는 속도 슬라이더도 배치할까요?🎯 에디터 한줄평
"과학과 기술이 어려운 이유는 공식 때문이 아니라 '눈에 보이지 않기 때문'입니다. 수도꼭지를 잠그면 불이 꺼지고, 우체국 택배가 나뉘어 배달되는 장면을 눈으로 확인하는 순간, 아이들은 더 이상 옴의 법칙이나 IP 주소를 외우지 않고 당연한 상식으로 이해하게 됩니다."
📚 기술·교육 참고 링크
- 비유를 활용한 과학 교수학습 모형(FAR 모델: Focus-Action-Reflection)
- 교육과정 연계: 초등 6학년 과학(전기의 이용, 전지 연결), 실과(정보 사회와 네트워크 통신)
