2026년 9월 8일 화요일

[과학·실과] 수도관과 도로로 배우는 전기 회로 & 컴퓨터 네트워크 시뮬레이터

수도꼭지를 잠그면 전기가 끊긴다? — 일상 사물 비유 전기 회로 & 컴퓨터 네트워크 원리 시뮬레이터

💡 초등 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. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 기본 모드(전기 회로 vs 컴퓨터 네트워크)에 답합니다.
  3. 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학년 과학(전기의 이용, 전지 연결), 실과(정보 사회와 네트워크 통신)
By 시간: