출제자가 개념을 갖는다 — 웹 개념 퀴즈 배틀 & 오답노트 웹앱 완전 정복

🧠 5~6학년 실과 SW, 국어 어휘·사회 역사 단원. 학생들이 배운 개념을 4지선다 문제와 해설로 직접 쓰고 JSON(자바스크립트 객체 표기법, JavaScript Object Notation) 데이터로 탑재하면 — 친구들이 퀴즈 배틀을 풀고, 틀린 문제만 모아 맞춤형 오답노트가 완성됩니다.

오답노트는 브라우저 인쇄 대화상자(print dialog)의 'PDF로 저장'으로 출력 — 서버·설치·외부 호출 없이 문서가 완성됩니다. 출제자 관점에서 개념을 다시 세우는 과정이 메타인지(meta-cognition)의 정점입니다.

📖 한 줄 정의

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

학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
출제자 관점 수업	개념을 문제로 재구조화 — '이 보기가 왜 틀린가'를 설명할 수 없으면 문제도 통과하지 못합니다(해설 필수!). 보기 4개의 미묘한 차이를 만드는 과정이 곧 개념 학습입니다.	모둠별 문제 5개 작성 → 합본.
JSON 문제은행	문제·보기·정답·해설을 JSON(자바스크립트 객체 표기법) 상수로 탑재 — 심기 모드(데이터 임베딩)로 외부 통신 0.	QUIZ 상수에 모둠 문제 이어 붙이기.
퀴즈 배틀	문항별 시간 제한(15초), 즉시 판정, Web Audio 합성음(정답 '똑'·오답 '삑') — 배틀은 모둠 대표 지명 방식.	judge 함수로 즉시 판정.
오답노트 자동 수집	틀린 문제만 모아 해설과 함께 오답 화면을 만들고, 인쇄 대화상자(print dialog)의 'PDF로 저장'으로 개인 오답노트가 완성됩니다.	@media print 서식 → PDF 출력.
원칙·정합	단일 HTML·외부 통신 0. 학생 표기는 번호·닉네임만(실명 저장 금지), 배틀 기록은 세션 메모리 + CSV 내보내기(로컬 장부).	EMBED_QUIZ 문제은행 상수.

2. 핵심 아키텍처 해설

① JSON 문제은행 (학생 작성 → 심기)

const QUIZ = [
  { q: "웹페이지의 뼈대를 만드는 언어는?",
    a: ["HTML", "CSS", "JS", "JSON"], c: 0,
    why: "뼈대=HTML, 옷=CSS, 행동=JS — 세 역할이 나뉜다" }
];

② 배틀 판정 엔진

function judge(i, pick) {
  if (pick === QUIZ[i].c) {
    scores[cur] += 10; sound("ding"); next();
  } else {
    WRONGS.push(QUIZ[i]); sound("nope"); showWhy(QUIZ[i]);
  }
}

틀린 문항은 오답 목록(WRONGS)에 자동 수집 — '다시 볼 문제'가 배틀의 결과물이 됩니다.

③ 오답노트 인쇄 서식

@media print { button { display: none; } .card { border: 1px solid #999; } }
// 인쇄 대화상자에서 'PDF로 저장' — 서버 없이 문서 완성

④ CSV 배틀 기록

function battleCSV() {
  return RESULTS.map(function (r) {
    return [r.group, r.score, r.wrong.length].join(",");
  }).join(";");
}

⑤ 원칙·정합

단일 HTML·외부 통신 0. 표기 번호·닉네임, 기록은 세션 메모리에서 시작해 CSV로 보존 — 문제은행·기록 모두 학내망 안에서 완결됩니다.

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

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
역질문 답변 — Gemini의 질문 3가지(단원 주제, 문항 수, 오답노트 서식)에 답하면 설계가 확정됩니다.
HTML 파일 실행 — 완성 코드를 '퀴즈배틀.html'로 저장 후 더블클릭. 모둠 문제를 QUIZ 상수에 붙여 배틀 시작.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일로 완성한다.
2. 사운드는 Web Audio API로 직접 합성한다: 정답 '똑', 오답 '삑', 배틀 시작 '시작음'. 오디오 파일·CDN 금지.
3. 모바일 터치 대응: 뷰포트 메타 태그 필수, 보기 버튼 최소 44px, 360px 가로 스크롤 금지.
4. 파일 상단 QUIZ 상수에 문제은행을 심는다: q(문제), a(보기 4개 배열), c(정답 번호), why(해설). 외부 퀴즈 API 금지.
5. 배틀은 문항별 15초 시간 제한 + 즉시 판정으로 진행하고, 틀린 문항은 WRONGS 목록에 자동 수집한다.
6. 오답노트 화면: 틀린 문항만 해설(why)과 함께 나열 + @media print 인쇄 서식 — 인쇄 대화상자의 'PDF로 저장'으로 문서 완성(서버·외부 발행 금지).
7. 학생·모둠 표기는 번호·닉네임만(실명 저장 금지), 점수는 세션 메모리 + CSV 내보내기 버튼(로컬 파일).
8. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 어떤 단원 문제은행으로 시작할까? (웹 개발 6대 개념 / 국어 어휘 / 사회 역사)
Q2. 문항 수와 시간 제한은? (기본 10문항·15초)
Q3. 오답노트 서식은? (문제+해설+내 답 기본)

🎯 에디터 한줄평

문제를 만드는 순간 개념이 뼈대를 갖습니다 — '왜 이 보기는 틀린가'를 말로 설명할 수 없으면, 그 문제는 통과하지 못하는 해설 필수 규칙이 개념 학습의 안전장치입니다. 오답노트가 인쇄 대화상자에서 나오는 설계 — 설치 없는 문서 발급이 현장 도구의 기본값입니다. 오답이 있는 자리에서 배틀은 끝나지 않습니다.

📚 기술·교육 참고 링크

MDN — JSON : 문제은행 데이터 표기법
교육과정 연계: 실과 SW(웹 개념), 국어(어휘 정확성), 사회(역사 연표) 단원과 함께 확장

인문학과 바이브 코딩의 만남

2026년 9월 6일 일요일

[교과 연계] 나만의 퀴즈 웹앱 & 오답노트 - 출제자 관점으로 개념을 다시 세우다