교과 맞춤형 이미지 퍼즐 퀴즈 & 발표 즉각 피드백 생성기
🧩 국어 발표, 사회 문화재 탐구, 영어 단어 퀴즈. 교과서 삽화나 사진을 16조각 모자이크 퍼즐(mosaic puzzle)로 가려두고 하나씩 열며 정답을 유추하는 역동적인 퀴즈 웹앱을 소개합니다.
학생 발표 직후 평정 척도 버튼을 누르면 성취 기준 기반 피드백(feedback) 문장이 즉시 조합되며, 평가 기록은 외부 전송 없이 로컬 장부로 안전하게 아카이빙됩니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 모자이크 퍼즐 퀴즈 | 정답 이미지를 4×4(16조각) 격자로 덮어두고 번호를 누를 때마다 한 조각씩 열립니다. 조각이 열릴 때마다 획득 점수가 줄어들어 학생들이 최소 힌트로 맞히려고 집중합니다. | 사회 문화재, 과학 실험 기구, 영어 단어 사진을 심어두고 모둠별 스피드 추리 대결. |
| 발표 관찰 즉각 피드백 | 발표 태도·전달력·내용 충실도 등 3대 영역의 평정 척도(상/중/하) 버튼을 누르면, 교육과정 성취 기준에 맞춘 구체적 격려 문장이 1초 만에 조합되어 화면에 뜹니다. | 발표 직후 전자칠판에서 피드백 문장을 함께 확인하여 즉각적인 긍정 강화. |
| 평가 기록 아카이빙 | 학생 관찰 평가 문장은 외부 클라우드로 전송하지 않고 브라우저 세션 메모리에 누적한 뒤, 수업 종료 시 교사용 CSV 파일로 다운로드합니다. | 'CSV 내보내기' 버튼으로 수업 후 나이스(NEIS) 세특 관찰 기록 참고 자료로 활용. |
2. 핵심 아키텍처 해설
① 도트 데이터: PUZZLES 상수
const PUZZLES = [
{ answer: "첨성대", hint: "신라의 천문대", imgData: "iVBORw0KGgo..." }
];퀴즈의 핵심인 대표 이미지는 Base64(베이스64) 텍스트로 파일 안에 심어두는 방식을 씁니다 — 외부 이미지 링크가 완전히 없어도 사진이 사진으로 그려지는 심기 모드(데이터 임베딩)의 정석입니다.
② CSS 그리드 조각 마스킹
.tile {
background-size: 400% 400%;
background-position: calc(var(--x) * 100%) calc(var(--y) * 100%);
}
.tile.opened { opacity: 0; }전체 이미지를 배경으로 쓰고 조각마다 배경 위치를 계산해 자르면, 외부 이미지 자르기 API가 필요 없습니다. 열린 조각은 투명도 0으로 처리합니다.
③ 피드백 조합 엔진
const FEEDBACK = {
태도: ["차분한 시선 전달이 인상적입니다.", "청중을 향한 제스처가 아낌없습니다."],
전달력: ["핵심 어휘를 강조하여 크게 들립니다.", "마침표마다 숨을 고르면 더 안정적입니다."],
내용: ["근거 사례가 설득력 있습니다.", "자료를 내 말로 재구성한 노력이 빛납니다."]
};
function makeFeedback(picks) {
return "🎯 " + picks.태도 + " " + picks.전달력 + " " + picks.내용;
}관찰 결과를 조합한 상수 문장을 붙이는 구조 — 평가 기준이 코드에 명시되어 관찰 평가의 객관성이 확보됩니다.
④ 수업 몰입도를 높이는 사운드 설계
function sound(kind) {
const ctx = audioCtx();
const o = ctx.createOscillator();
o.type = kind === "open" ? "triangle" : "square";
o.frequency.value = kind === "open" ? 660 : 220;
o.connect(ctx.destination);
o.start(); o.stop(ctx.currentTime + 0.1);
}조각을 열 때는 가벼운 삼각파를, 발표 피드백이 뜰 때는 낮은 사각파를 합성해 학생들의 귀가 화면을 따라가게 합니다.
⑤ 원칙·정합
단일 HTML·외부 통신 0. 학생 표기는 번호·닉네임만(이름 저장 0), 발표 관찰 기록은 세션 메모리에서 CSV 내보내기로 로컬 파일 저장 — 관찰 평가 장부는 학내망 안에서 완결됩니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
- 역질문 답변 — Gemini가 던지는 질문 3가지(과목, 조각 수, 피드백 영역)에 답하면 설계가 확정됩니다.
- HTML 파일 실행 — 완성 코드를 '퍼즐퀴즈.html'로 저장 후 더블클릭으로 실행합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·외부 CSS/JS 프레임워크·외부 이미지 호출 없이 단일 HTML 파일로 완성한다.
2. 퀴즈 이미지는 파일 상단 PUZZLES 상수에 Base64 텍스트로 내장하거나, 브라우저 로컬 파일 선택(<input type="file">)으로 읽어 표시하는 외부 통신 0 구조를 취한다.
3. 4×4 조각 마스킹은 CSS Grid와 background-position으로 구현하며, 조각을 누를 때마다 번호가 사라지고 이미지가 서서히 드러나게 만든다.
4. 조각 열기 사운드와 정답 판정 사운드는 Web Audio API로 자체 합성한다(오디오 파일 다운로드 금지).
5. 학생 발표 피드백 기능: 평가 영역 3가지(태도·전달력·내용)의 평정 버튼을 누르면 성취 기준 기반 피드백 문장이 즉시 화면에 조합된다.
6. 관찰 평가 결과는 학생 번호와 조합된 피드백 문장으로 세션 메모리에 누적되며, 'CSV 내보내기' 버튼으로 교사용 로컬 파일로 다운로드된다. 학생 실명은 저장하지 않는다.
7. 모바일·태블릿·전자칠판 터치 대응: 최소 터치 영역 48×48px 이상, 가로 스크롤 금지.
8. // TODO, /* 생략 */ 등 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 어떤 교과 단원(국어 발표, 사회 문화재, 과학 실험, 영어 어휘)을 중심으로 퀴즈를 구성할까요?
Q2. 모자이크 조각 수는 몇 단계(3×3, 4×4, 5×5)로 설정할까요?
Q3. 발표 피드백 영역에 추가하고 싶은 우리 학급만의 특별한 평가 항목이 있나요?🎯 에디터 한줄평
"가려진 것을 하나씩 열어가는 순간, 학생들의 눈빛은 수업의 가장 깊은 곳으로 모여듭니다. 모자이크 퍼즐은 호기심을 극대화하고, 발표 직후 눈앞에 펼쳐지는 구체적인 피드백 문장은 학생에게 가장 따뜻하고 정교한 지도를 선물합니다. 외부 클라우드 없이 단일 파일과 로컬 CSV로 관찰 평가 장부까지 깔끔하게 지켜낸 설계 — 진정한 교실 맞춤형 에듀테크의 표본입니다."
📚 기술·교육 참고 링크
- CSS Grid 가이드 : 4×4 모자이크 퍼즐 배치를 위한 순수 그리드 기법
- Web Audio API 오실레이터 합성 : 외부 사운드 파일 없는 로컬 효과음 제작
- 교육과정 평가 기준 : 교과별 관찰 평가 루브릭과 피드백 문장 설계 지침
