2026년 9월 6일 일요일

[수학·정보] 확률과 통계 시뮬레이터 - 주사위·동전 100회 대량 실험으로 배우는 데이터 리터러시



이론이 아니라 숫자로 직접 확인한다 — '확률과 통계 시뮬레이터 & 수학 룰렛'

🎲 초등 5~6학년 수학 '가능성(확률)' 단원 — 주사위를 100번 던지는 실험을 브라우저에서 1초 만에 수행하고, 이론적 확률과 실험적 확률이 서로 다른 값에서 수렴해가는 과정을 막대 그래프로 시각화합니다. 대규모 반복 데이터가 무엇을 말해주는지 배우는 통계 탐구 웹앱입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
100회 난수 대량 실험 버튼 한 번 누르면 주사위 100번 던지기, 동전 뒤집기 실험이 1초 만에 완료되어 각 눈이 몇 번 나왔는지 카운트됩니다. 1,000회·10,000회 버튼으로 데이터가 더 골고루 분포해지는 것을 체감합니다.
이론 vs 실험 확률 수렴 이론적 확률(각 면 1/6 = 약 16.7%)과 실험적 확률(실제 관측 비율)이 회수가 늘어날수록 가까워지는 과정을 시각화합니다. 두 값의 차이(오차)가 줄어드는 막대 그래프를 직접 관찰합니다.
실물 주사위·동전 모드 전환 동전 던지기(앞/뒤), 주사위(1~6), 룰렛(8분할) 세 가지 도구를 전환하며 다양한 실험을 수행합니다. 실제 주사위를 굴려보고 앱 실험 결과와 비교하는 융합 활동.

2. 핵심 아키텍처 해설

① 난수 생성 & 통계 집계 엔진

const counts = [0, 0, 0, 0, 0, 0];
function simulateRoll(n) {
  for (let i = 0; i < n; i++) {
    const face = Math.floor(Math.random() * 6); // 0~5
    counts[face]++;
  }
  renderChart();
}

자바스크립트 내장 난수 엔진을 100회·1,000회 반복하면서 각 면이 나온 횟수를 누적 집계합니다.

② 이론 확률과 실험 확률의 수렴 그래프

function renderChart() {
  const total = counts.reduce((a, b) => a + b, 0);
  const theory = 100 / 6;
  counts.forEach((c, i) => {
    const experimental = (c / total) * 100;
    drawBar(i, c, experimentPercent = experimentPercent, theoreticalPercent = theory);
  });
}

Canvas 2D로 6개의 막대를 그리고, 이론값(1/6)을 기준선으로 표시해 차이가 줄어드는 것을 눈으로 확인합니다.

③ EMBED 폴백 이중 모드

const EMBED_LAST = null;
// 교사가 미리 받아둔 실험 결과를 심으면 오프라인에서도 비교 가능

오프라인 환경에서도 마지막 실험 결과를 상수로 심어두면 수업이 끊기지 않습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 실험 도구(주사위·동전)와 회수(100회)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 확률탐구.html로 저장하여 수학 탐구 수업에 활용합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 서버 통신 없이 순수 HTML5 Canvas와 바닐라 JS로 완성한다.
2. 100회·1,000회·10,000회 버튼: Math.random()으로 주사위 눈(1~6)을 생성하고 각 눈별 카운트를 집계한다.
3. 이론 확률 vs 실험 확률 수렴: 실험을 반복할수록 각 눈의 비율이 이론값(1/6 = 16.7%)에 가까워지는 막대 그래프를 렌더링한다.
4. 동전 모드: 앞(50%)/뒤(50%) 실험도 별도 탭으로 지원한다.
5. 학생 개인정보 0: 학생 데이터를 수집하지 않으며 결과는 세션 메모리로만 유지한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 기본 실험 도구로 주사위와 동전 중 무엇을 사용할까요?
Q2. 막대 그래프 색상을 컬러풀한 무지개 6색과 다크 모드 중 어느 것으로 할까요?
Q3. 실험 기록을 CSV로 다운로드하여 수학 통계 수업에 활용할까요?

🎯 에디터 한줄평

"주사위 100번을 실제로 던지면 손목이 아프지만, 알고리즘에게는 1초짜리 일입니다. 10,000번 반복하면 사실 다른 숫자가 나온다는 것을 눈으로 볼 때 '확률'은 공식이 아닌 데이터의 냄새를 가진 살아있는 개념으로 자리 잡습니다."

📚 기술·교육 참고 링크

  • 대수의 법칙(Law of Large Numbers) 이론 및 초등 통계 교육 가이드
  • 교육과정 연계: 초등 5~6학년 수학(가능성, 통계와 확률), 정보(데이터와 정보처리)
By 시간: