어색한 3월 첫 모임이 우리 학교 퀴즈 무대가 됩니다 — 아이스브레이킹 매칭 게임 완전 정복

🧊 3월 학부모 총회나 교원 자율연수의 첫 5분은 어색한 인사말로 지나가기 쉽습니다. 교화·교목·마스코트·학교 비전 문구 카드를 짝 맞추는 기억력 매칭(matching) 게임으로 바꿔보세요. 테이블별로 손을 들고 '저건 우리 교화 국화!'를 외치는 순간, 낯선 부모님과 신입 선생님이 같은 팀이 됩니다.

제미나이 프롬프트 한 번으로 만들고 더블클릭으로 실행됩니다. 학교 상징 데이터는 파일 상단 상수에 심는 심기 모드(데이터 임베딩) 구조라 학기마다 문구만 갈아 끼우면 매년 재사용됩니다. 외부 통신 0, 학내망 원칙 완벽 준수.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
3분 제작 루틴	프롬프트 붙여넣기 → 역질문 3가지 답변 → 더블클릭 실행. 총회 직전에도 만들어 내는 쾌속 제작 흐름입니다.	제작 3단계 체크리스트로 시연.
학교 상징 심기	교화·교목·마스코트·비전·규칙을 상수로 심으면 게임 완성 — 학교마다 다른 우리 학교 전용 게임이 됩니다.	학기마다 문구 갱신(인수인계 문서화).
테이블별 턴제 무대	전자칠판을 무대로 테이블(모둠) 턴제로 진행 — 참가자 개인 정보는 일절 저장하지 않습니다.	테이블 턴 리듬 운영.

2. 핵심 아키텍처 해설

① 학교 상징 데이터 상수 (심기 모드)

const SYMBOLS = [
  { name: "국화", desc: "우리 교화 — 성숙과 아름다움" },
  { name: "소나무", desc: "우리 교목 — 곧은 기상" },
  { name: "샛별", desc: "우리 마스코트 — 새 학기의 별" },
  { name: "질서와 배려", desc: "우리 학교 비전 문구" }
];

학교마다 상징이 다르므로 이 상수만 바꾸면 누구나 자기 학교 전용 게임을 3분 안에 만들 수 있습니다. 갱신 방법을 학기마다 인수인계 문서에 남기는 루틴까지 제시합니다.

② 짝으로 구성된 카드 덱 생성

function buildDeck() {
  const cards = [];
  SYMBOLS.forEach(function (s) {
    cards.push({ pairId: s.name, side: "name" });   // 이름 카드
    cards.push({ pairId: s.name, side: "desc" });   // 설명 카드
  });
  return shuffle(cards);   // 섞기
}

'이름 카드'와 '설명 카드'를 한 쌍으로 만들고 셔플하는 단순한 구조 — 매칭 게임 엔진의 심장입니다.

③ 뒤집기·매칭 판정 로직

let flipped = [];   // 현재 뒤집은 카드 (최대 2장)

function onFlip(card) {
  if (flipped.length === 2) return;   // 2장 이상은 무시
  flipped.push(card);
  sound("flip");
  if (flipped.length === 2) {
    if (flipped[0].pairId === flipped[1].pairId) {
      keepOpen(flipped);              // 짝 성공 — 앞면 유지
      sound("fanfare");
      flipped = [];
    } else {
      setTimeout(function () {
        flipBack();                   // 실패 — 1.2초 뒤 다시 뒤집기
        flipped = [];
      }, 1200);
    }
  }
}

④ 턴 기록 (세션 메모리, 종료 시 소멸)

const TURNS = [];

function recordTurn(tableNo, isMatch) {
  TURNS.push({ tableNo: tableNo, match: isMatch, at: Date.now() });
}
// 참가자 개인 정보는 저장하지 않고 테이블 번호만 기록 — 세션 메모리

⑤ Web Audio API 카드 사운드

function sound(kind) {
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const osc = ctx.createOscillator();
  osc.type = kind === "fanfare" ? "triangle" : "square";
  osc.frequency.setValueAtTime(kind === "fanfare" ? 880 : 330, ctx.currentTime);
  osc.connect(ctx.destination);
  osc.start(); osc.stop(ctx.currentTime + 0.12);
}

⑥ 원칙·정합

단일 HTML 완결, 외부 통신 0. 참가자 실명·좌석 저장 일절 금지(테이블 번호만, 세션 메모리). 스마트폰 개별 접속이 꼭 필요하면 학교가 검토·계약한 서비스 링크 연결이 원칙 — 이 글의 기본 설계는 전자칠판 무대형으로 학내망 안에서 완결됩니다.

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

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
역질문 답변 — Gemini의 질문 3가지(상징 목록, 카드 수, 턴제 방식)에 답하면 단일 파일 코드가 확정됩니다.
HTML 파일 실행 — 완성 코드를 '우리학교매칭게임.html'로 저장 후 더블클릭 — 전자칠판에 바로 띄웁니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리, CDN, 폰트, 이미지 없이 순수 바닐라 JS와 HTML5 Canvas/CSS로만 단일 HTML 파일로 완성한다.
2. 파일 상단 SYMBOLS 상수에 학교 상징(교화·교목·마스코트·비전 문구·규칙) 8쌍 이상을 심어두고(심기 모드 — 데이터 임베딩), 상수 갱신 방법을 주석으로 안내한다.
3. 이름 카드와 설명 카드를 한 쌍으로 만들어 셔플하는 매칭 게임 엔진을 직접 구현한다(뒤집힌 2장의 pairId가 같으면 짝 성공).
4. 짝 성공 시 두 카드는 앞면으로 유지되고 Web Audio 합성 팡파르가 울리고, 실패 시 1.2초 뒤 자동으로 뒤집힌다.
5. 테이블(모둠)별 턴제로 진행하며, 화면 하단에 현재 턴 테이블 번호를 크게 표시한다(참가자 실명 저장 금지, 세션 메모리만).
6. 전자칠판용 큰 글씨(최소 32px)와 터치 버튼 88px 이상을 지원하고, 사운드는 Web Audio API 오실레이터 합성만 사용한다.
7. 외부 링크·구글 폼·서버 배포 코드를 일절 넣지 않는다.
8. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 우리 학교 상징 8쌍은 무엇으로 구성할까요? (교화 / 교목 / 마스코트 / 비전 문구 / 생활 규칙 등)
Q2. 카드 개수와 턴제 방식은? (테이블별 순서 / 손들기 선착)
Q3. 카드 뒷면 디자인 톤은? (학교 대표 색 / 파스텔 무지개)

🎯 에디터 한줄평

3월의 어색한 첫 인사가 '우리 학교 지식 퀴즈'로 바뀌는 5분 — 교화와 교목이 학부모와 신입 교사의 첫 기억이 되는 절묘한 온보딩 도구입니다. 3분 제작의 비밀은 '상수 심기' — 학교만 바꾸면 매년 다른 학교에서 재사용되는 설계의 승리입니다.

📚 기술·교육 참고 링크

MDN — CSS transition : 카드 뒤집기 애니메이션 원리
교육·연수 연계: 신입 교사 온보딩, 학부모 총회, 교직원 첫 회의 아이스브레이킹 자료는 학내망 공개 기준으로 준비

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

2026년 9월 6일 일요일

[행정/연수] 우리 학교 기억력 매칭 게임 - 3월 총회·연수 아이스브레이킹 3분 제작