단어 암기 시트를 버리세요! — 초등 전과목 단원별 핵심 용어 캔바 매칭 게임 & 1인 1단원 퀴즈 팩토리
🗂️ 초등 3~6학년 전교과(국어, 사회, 과학, 도덕) 및 실과 '소프트웨어로 문제를 해결해요' 융합 — 띠지 안의 용어를 무의미하게 밑줄 긋던 암기 시트 대신, 학생들이 직접 단원의 핵심 용어와 정의를 캔바(Canva) 일러스트 카드로 만들고, 제미나이(Gemini) 프롬프트 한 줄로 나만의 '용어 매칭 게임 + 객관식 퀴즈'를 터미널 없이 단일 HTML 파일로 완성하는 참여형 학습 도구 프로젝트입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 밑줄 긋기 암기 ➔ 나만의 학습 게임 출제 | 학생이 단원의 6~10개 핵심 용어와 정의를 정리하면 제미나이가 그것을 데이터로 파싱하여 3×4 매칭 게임 및 4지선다 퀴즈로 즉시 변환합니다. | 국어(가나다 순), 과학(자연 현상), 사회(지도/역사), 도덕(공동체) 등 단원별로 활용. |
| 일방적 암기 ➔ 출제자 관점의 개념 재구조화 | "오답 보기 3개를 뭐로 쓸지" 고민하는 과정 자체가 개념 간의 미세한 차이를 정교하게 구별하는 훈련이 됩니다. | 4지선다에 넣을 '함정 답안(비슷한 단어)'을 스스로 찾아보게 유도. |
| 종이 카드 ➔ 3D 뒤집기 & 랜덤 배치 | 제미나이가 생성한 코드는 용어 카드를 무작위로 셔플하고 뒤집을 때마다 3D 뒤집기 효과를 주는 인터랙티브 게임입니다. | 학급 패들릿에 올려 친구들이 서로의 게임으로 배우고 즐기게 함. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
제미나이(Gemini)에 아래 프롬프트를 붙여넣으면 복잡한 코드 작성이나 라이브러리 설치 없이 즉시 완성됩니다.
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 단원 데이터 입력 — 제미나이가 묻는 단원명과 학생이 정리한 용어-정의 목록에 답합니다.
- HTML 파일 실행 — 코드를 메모장에 붙여넣고
용어매칭게임.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 웹 폰트, 이미지 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 용어 데이터 심기 모드: const TERMS = [{ word: "...", def: "...", emoji: "..." }, ...] 상수에 6~10개의 핵심 용어를 내장한다.
3. 매칭 게임 구현: 3×4(총 12장) 카드 그리드에서 용어 카드(파랑)와 정의 카드(노랑)를 무작위 셔플하여 배치하고, 클릭 시 CSS 3D rotateY로 뒤집는다.
4. 매칭 판정 및 피드백: 두 카드가 정확히 일치하면 파스텔 그린 테두리로 고정하고 부드러운 Web Audio 합성음을 재생하며, 오답이면 1초 후 자동으로 다시 뒤집는다.
5. 학생 개인정보 0: 학생 실명을 일절 입력받지 않으며, 카드 뒤집기 성과 횟수만 화면에 표시한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 어떤 교과와 단원의 용어로 시작할까요? (예: 5학년 1학기 과학 '혼합물의 분리')
2. 캔바(Canva)에서 만든 일러스트 이미지를 카드 배경에 심을까요? (기본: 이모지 심볼 사용)
3. 오답 시 1초 후 다시 뒤집을지, 아니면 오답 횟수에 따라 타이머를 감소시킬지 정할까요?🎯 에디터 한줄평
"외운 단어는 시험지 채점하고 끝나지만, 내가 출제한 문제는 내 머릿속에서 더 오래 살아남습니다. '과학 단원의 혼합물'이라는 용어를 친구들이 맞힐 수 있는 게임으로 재가공하는 과정에서 아이들은 분리 방법의 차이를 세 번, 네 번 복습하게 됩니다. 교사가 문제를 내는 시대가 끝나고, 학생이 세계를 질문하는 시대가 열립니다."
📚 기술·교육 참고 링크
- CSS 3D 매칭 카드 설계 및 피셔-에이츠(Fisher-Yates) 셔플 알고리즘 가이드
- 교육과정 연계: 초등 3~6학년 전교과 단원별 개념 정리, 실과(소프트웨어로 문제를 해결해요)
