2026년 9월 7일 월요일

[창체·학급자치] 학급 자치 헌법 제정 & 실시간 모둠 안건 투표 시스템



우리 반 규칙을 우리가 만들어 찬반 투표로 통과시킨다 — '학급 자치 헌법 제정 & 실시간 모둠 안건 투표 시스템'

🗳️ 초등 창체·학급자치 — 매주 학급 다모임 회의 시 모둠별로 발제한 학급 규칙 건의사항을 실시간으로 상정하고, 학생들이 교실 태블릿으로 즉시 찬반 투표하여 결과를 시각적 막대 그래프로 확인하는 디지털 민주주의 플랫폼입니다. 학급 자치 헌법의 조항을 아이들 손으로 직접 통과시키는 체험을 통해 민주시민의 기본 자질을 몸에 새깁니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
헌법 제정 3단계 워크플로 1) 모둠별 발제 → 2) 전교생 찬반 투표 → 3) 통과된 규칙을 '학급 자치 헌법'에 조항 등록. 세 단계가 한 화면에서 흐르는 것처럼 이어집니다. 다모임 시간 20분 내 투표 완료하고 학급 헌법에 새 조항을 등록.
실시간 막대 그래프 투표 찬성/반대 투표 버튼을 누르는 순간 막대 그래프가 애니메이션으로 늘어나고 퍼센트가 표시됩니다. "찬성 64% vs 반대 36%"를 즉시 시각화 — 투표의 무게를 몸으로 체감.
헌법 조항 아카이빙 통과된 규칙은 학급 헌법 조항 목록에 자동 등록되고, 학기말 CSV 내보내기로 인쇄합니다. 1학기 마지막 날 학급 자치 헌법 전문을 인쇄하여 교실 게시판에 부착.

2. 핵심 아키텍처 해설

① 안건 및 헌법 조항 상수

const AGENDAS = [
  { id: 1, text: "교실 뒷줄 정리당번 확대", proposer: "모둠 1", yes: 0, no: 0 },
  { id: 2, text: "화요일마다 칭찬 스탬프 교환", proposer: "모둠 3", yes: 0, no: 0 }
];

const CONSTITUTION = [
  { no: 1, text: "사이 좋게 지내며 서로 존중한다", date: "2026-03-15" }
];

상정된 안건과 통과되어 학급 헌법에 등록된 조항을 각각 배열로 관리합니다.

② 찬반 투표 및 막대 그래프 실시간 렌더링

function vote(agendaId, isYes) {
  const a = AGENDAS.find(x => x.id === agendaId);
  if (isYes) a.yes++; else a.no++;
  const total = a.yes + a.no;
  const yesPct = total > 0 ? Math.round(a.yes / total * 100) : 0;

  document.getElementById("yes-bar").style.width = yesPct + "%";
  document.getElementById("no-bar").style.width = (100 - yesPct) + "%";
  document.getElementById("result").textContent =
    "찬성 " + a.yes + "표 (" + yesPct + "%) / 반대 " + a.no + "표";
  sound("ding");
}

투표 버튼이 눌릴 때마다 막대 그래프가 애니메이션으로 갱신되며, 과반수를 넘으면 자동으로 '통과!' 녹색 뱃지가 표시됩니다.

③ 헌법 등록 및 CSV 내보내기

function passToConstitution(agendaId) {
  const a = AGENDAS.find(x => x.id === agendaId);
  const today = new Date().toISOString().slice(0, 10);
  CONSTITUTION.push({
    no: CONSTITUTION.length + 1,
    text: a.text,
    date: today
  });
  sound("fanfare");
}

과반수를 넘은 안건은 '헌법 등록' 버튼으로 자치 헌법 조항에 자동 등록되며, 학기말 CSV 내보내기로 인쇄합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 모둠 개수(4개)와 기존 자치 규칙 수에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 자치헌법투표.html로 저장하여 학급 다모임 시간에 전자칠판에 띄웁니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const AGENDAS = [...] 상수에 발제 안건 2건 이상과 const CONSTITUTION = [...] 상수에 기존 자치 헌법 1건 이상을 내장한다.
3. 실시간 투표 및 막대 그래프: 찬성/반대 투표 버튼을 누르면 즉시 막대 그래프가 애니메이션으로 늘어나고 퍼센트가 표시된다. 과반수 초과 시 '통과!' 뱃지가 표시된다.
4. 학생 개인정보 0: 투표는 익명으로 하고 발제자는 모둠명만 표기하며, 학생 실명을 저장하지 않는다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 과반수 기준을 과반(50% 초과)으로 할까요, 2/3(66% 초과)으로 할까요?
Q2. 투표 화면 배경을 학급 자치 느낌의 파랑 톤과 민주주의 느낌의 빨강 톤 중 어느 것으로 갈까요?
Q3. 학기말 헌법 전문 인쇄 시 A4 세로 방향으로 갈까요?

🎯 에디터 한줄평

"'그 규칙 마음에 안 들어요'라고 소리치는 것이 아니라, 내 의견을 주문서에 적어 상정하고 누군가의 찬성표를 받아 통과시키는 과정 — 그것이 초등학교 교실에서 가장 초기 단계의 민주주의 실습입니다. 투표 막대가 오르내릴 때 아이들은 '내 의견은 무게가 있다'는 것을 몸으로 배우게 됩니다."

📚 기술·교육 참고 링크

  • 교육부 학생 자치활동 활성화 가이드라인 및 초등 학급 회의 표준안
  • 교육과정 연계: 초등 3~6학년 창체(학급 자치 회의), 도덕(민주적 의사 결정), 사회(지역 사회 참여)
By 시간: