2026년 9월 6일 일요일

[창체·자치] 발표 순서 룰렛 웹앱 - 공정한 번호 추첨으로 배우는 투명한 교실 문화



"다음 차례는...!" — '교실 발표 순서 & 모둠 번호 공정 추첨 룰렛 웹앱'

🎯 초등 창체·학급자치 활동 — 발표 차례나 조편성을 정할 때 눈치 보지 않아도 되도록, 1~25번 학생 번호를 중복 없이 5명씩 추첨하고 모둠 발표 순서를 공정하게 섞어주는 경량 룰렛 웹앱을 제작합니다. 복잡한 설정 없이 단일 HTML 파일로 전자칠판에 띄우기만 하면 됩니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
중복 없는 번호 추첨 1~25번 학생 번호 중 이미 뽑힌 번호는 제외하고 남은 번호에서만 다음 번호를 추첨합니다. "이미 나온 번호"는 회색으로 표시되어 투명하게 확인됩니다.
모둠 발표 순서 셔플 1~6모둠 중 어느 모둠이 먼저 발표할지 무작위로 섞어서 공정하게 정합니다. 긴장감 넘치는 효과음과 함께 당첨 번호가 팝업으로 띄워집니다.
학생 개인정보 0 학생 실명이 아니라 번호(1~25)만 사용하므로 결과가 외부로 전송되지 않고 안전합니다. 로컬 세션 메모리로만 관리되어 창을 닫으면 소멸됩니다.

2. 핵심 아키텍처 해설

① 중복 없는 번호 추첨 알고리즘

let pool = [];

function initPool(maxNum) {
  pool = [];
  for (let i = 1; i <= maxNum; i++) pool.push(i);
}

function drawNumber() {
  if (pool.length === 0) return null;
  const idx = Math.floor(Math.random() * pool.length);
  const num = pool[idx];
  pool.splice(idx, 1); // 중복 제거
  return num;
}

추첨 가능한 번호 풀에서 무작위로 하나를 꺼내면 풀에서 제거되어 중복이 발생하지 않습니다.

② 당첨 번호 팝업 & 효과음

function showResult(num) {
  const popup = document.getElementById("result");
  popup.textContent = num + "번!";
  popup.classList.add("show");
  sound("drum");
  setTimeout(() => popup.classList.remove("show"), 3000);
}

드럼 사운드가 재생되며 당첨 번호가 크게 팝업되어 학급이 실시간으로 확인합니다.

③ 모둠 순서 셔플 알고리즘

function shuffleGroups(n) {
  const arr = [];
  for (let i = 1; i <= n; i++) arr.push(i);
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

피셔-에이츠(Fisher-Yates) 셔플 알고리즘으로 모둠 순서를 완전히 무작위로 배치합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 학생 수와 모둠 수에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 추첨기.html로 저장하여 교실 전자칠판에 띄웁니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 서버, CDN 없이 순수 HTML/CSS/JS로 완성한다.
2. 중복 없는 번호 추첨: 1~25번 학생 번호에서 이미 뽑힌 번호는 제외하고 남은 풀에서만 무작위 추출한다.
3. 모둠 순서 셔플: 피셔-에이츠(Fisher-Yates) 알고리즘으로 1~6모둠 순서를 무작위 배치한다.
4. 긴장감 연출: 추첨 버튼 클릭 시 짧은 북소리(더비비빅) 후 당첨 번호가 크게 팝업으로 떠오른다.
5. 학생 개인정보 0: 학생 실명이 아닌 번호만 사용하고 결과는 세션 메모리로만 유지한다.
6. 효과음 합성: Web Audio API로 추첨 시 드럼, 당첨 시 팡파르 소리를 합성한다.
7. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 학생 수는 몇 명(최대 번호)으로 할까요? (기본: 25)
Q2. 모둠 수는 몇 개로 할까요? (기본: 6)
Q3. 당첨 번호 색상을 골드 골드와 파스텔 핑크 중 어느 것으로 할까요?

🎯 에디터 한줄평

"누가 먼저 발표할까?"라는 질문에 손을 들어주는 친구가 늘 먼저 나오는 것은 자연스러운 일입니다. 하지만 교실에서 공정함이 코드로 보여지는 순간, 선생님은 정의의 수호자가 아니라 학생들과 같은 참여자가 됩니다. 불만 없이 시작하는 발표 수업, 그것이 코드가 교실 문화를 바꾸는 방식입니다."

📚 기술·교육 참고 링크

  • 피셔-에이츠(Fisher-Yates) 셔플 알고리즘 및 순열 이론
  • 교육과정 연계: 초등 창체(자율활동, 학급자치), 수학(가능성과 경우의 수)
By 시간: