2026년 9월 6일 일요일

[창체·자치] 실시간 다모임 안건 즉석 찬반 보드 - 원형 그래프 1초 만에



안건 상정하자마자 바로 찬반! — '실시간 학급 다모임 즉석 투표 보드'

🗳️ 초등 학급 다모임·창체 — 학급 자치 회의에서 안건이 상정되면, 태블릿과 전자칠판만으로 학생 전원이 1초 만에 익명 찬반 투표하고 즉시 원형 그래프(도넛 차트)가 애니메이션으로 열리는 디지털 민주주의 플랫폼입니다. 외부 투표 사이트 가입이나 복잡한 QR 로그인 절차가 전혀 없습니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
실시간 도넛 차트 애니메이션 찬성표가 늘어나면 초록 부채꼴이 부드럽게 늘어나고, 반대표는 분홍 부채꼴이 채워집니다. 투표율 50% 초과 시 자동으로 '과반수 통과' 판정 및 소리 효과.
익명 투표와 보안 누가 찬성했는지 표시되지 않는 완전 익명 설계 — 손을 들어 투표할 때의 부담감을 없애 학생들이 정직하게 참여합니다. 한 기기당 1회 투표만 허용(중복 방지 로직 내장).
안건 이력 자동 저장 투표가 끝난 안건은 제목과 결과가 자동으로 저장되어 학급 회의록 작성에 그대로 활용됩니다. CSV 다운로드 및 @media print 투표 결과 요약지 출력.

2. 핵심 아키텍처 해설

① 도넛 차트 Canvas 렌더링

function drawDonut(ctx, yes, no) {
  const total = yes + no;
  if (total === 0) return;
  const ratio = yes / total;
  const cx = 150, cy = 150, r = 100;
  ctx.beginPath();
  ctx.arc(cx, cy, r, -Math.PI / 2, -Math.PI / 2 + ratio * Math.PI * 2);
  ctx.lineTo(cx, cy);
  ctx.fillStyle = "#4CAF50";
  ctx.fill();
  ctx.beginPath();
  ctx.arc(cx, cy, r, -Math.PI / 2 + ratio * Math.PI * 2, -Math.PI / 2 + Math.PI * 2);
  ctx.lineTo(cx, cy);
  ctx.fillStyle = "#E91E63";
  ctx.fill();
}

찬성(초록)과 반대(분홍)의 비율에 맞춰 부채꼴 각도를 계산하고, 중앙을 뚫어놓아 도넛 형태로 시각화합니다.

② 과반수 통과 판정 및 피드백

function checkMajority(yes, no, quorum) {
  const total = yes + no;
  if (total < quorum) return { passed: false, msg: "투표율이 부족합니다" };
  if (yes / total > 0.5) return { passed: true, msg: "✅ 안건 통과!" };
  return { passed: false, msg: "❌ 부결 — 다시 논의해봐요" };
}

정족수(참여 인원 절반 이상)을 충족했는지 먼저 확인하고, 과반수 찬성 여부를 자동 판정하여 화면에 명확한 결과를 제시합니다.

③ 세션 투표 기록 & 안건 저장

투표 완료 시 안건 제목과 찬성/반대 수가 세션 메모리에 누적되며, '회의록 내려받기' 버튼으로 오늘의 자치 회의 안건 처리 결과를 텍스트(CSV) 형태로 보존합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 학급 인원수(20~25명)와 투표 버튼 크기에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 다모임투표.html로 저장하여 전자칠판에 띄웁니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 실시간 WebSocket 서버, QR 접속 플랫폼 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 실시간 도넛 차트: 찬성(초록)과 반대(분홍) 비율을 부채꼴 각도로 나누어 Canvas 도넛 차트를 그린다.
3. 익명 및 중복 방지: 기기별 세션 토큰을 부여하여 한 대당 1회 투표만 가능하도록 한다(로그인 불필요).
4. 정족수 및 과반수 판정: 총 참여자 수 대비 참석률 50% 이상인지 먼저 확인하고, 찬성률이 절반을 넘으면 자동으로 '안건 통과' 안내를 출력한다.
5. 학생 개인정보 0: 학생 이름·번호 표시 없이 총 투표 수만 그래프에 반영한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 찬성과 반대 외에 '기권(회색)' 버튼도 추가할까요?
Q2. 도넛 차트 색상을 초록/분홍 조합으로 할까요, 청록/주황 조합으로 할까요?
Q3. 투표 완료 후 결과 요약지를 인쇄용 A4 서식으로 출력할까요?

🎯 에디터 한줄평

"민주주의는 누가 찬성했는지 알아보는 게 아니라, 모두의 의견이 균등하게 하나의 숫자로 모이는 것에서 시작합니다. 익명 보드는 손을 들기 부끄러워하는 아이들에게도 정당한 발�权을 부여하며, 종이 쪽지를 세는 선생님의 손가락을 뇌에서 연산 루프로 대체합니다."

📚 기술·교육 참고 링크

  • 실시간 투표 및 디지털 민주주의 교육 이론
  • 교육과정 연계: 초등 사회(민주적 의사 결정 절차), 도덕(정당한 의사 표현과 존중), 창체(학급자치)
By 시간: