2026년 9월 6일 일요일

[교과 연계] 문화유산·한살이 매칭 교구 - 캔바 카드를 파일에 심는 매칭 게임



문제 만드는 사람이 개념을 갖는다 — 문화유산·한살이 매칭 교구 완전 정복

🏛️ 3~4학년 사회 '우리 고장의 문화유산', 과학 '식물의 한살이' 단원. 학생들이 캔바(Canva)로 문화유산 사진 카드와 설명 문구, 씨앗-싹-꽃-열매 그림을 만들면, 그 카드를 파일 안에 심어 두 가지 게임으로 완성합니다 — 사진과 설명을 짝 맞추는 매칭(matching) 게임, 한살이 순서 정렬 게임.

역할을 둘로 나누면 장점만 남습니다 — 캔바는 디자인 도구, 제미나이는 실행 앱. 캔바에서 내려받은 카드는 Base64(베이스64) 텍스트로 파일 안에 심어 학내망 원칙(외부 호출 0)을 지키고, 전자칠판 토너먼트(tournament)까지 단일 파일에서 진행됩니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
제작자 관점 수업 문제 푸는 사람이 아니라 문제 만드는 사람 — 개념이 게임 데이터가 되는 순간 내면화됩니다. 카드 문구를 직접 고르고 다듬는 과정이 곧 단원 학습입니다. 모둠별 카드 5장 만들기 → 전체 카드 뭉치 합치기.
두 게임 엔진 ① 사진↔설명 짝 맞추기 ② 씨앗-싹-꽃-열매 순서 정렬 — 하나의 파일에서 탭으로 전환됩니다. match 판정과 checkOrder 순서 검사 코드.
캔바 이미지 심기 캔바에서 이미지 내려받기 → Base64(베이스64) 변환 → 파일 상단 상수로 심기. 외부 이미지 링크는 절대 금지 — 학내망 원칙과 저작권 걱정을 함께 끝냅니다. 심기 갱신 루틴: 이미지 변환 → 상수 붙여넣기.
전자칠판 토너먼트 모둠별 최단 기록 경쟁 — 스톱워치와 신기록 팡파르(Web Audio)로 전자칠판이 무대가 됩니다. 모둠 기록표 화면.
원칙·정합 단일 HTML·외부 통신 0. 학생 표기는 모둠 번호·닉네임만(실명 금지). 캔바의 '웹사이트로 게시' 링크는 외부 서비스라 — 학내망 배포용은 파일 심기 방식 권장(캔바 사용 자체는 학교 정책 기준). 단일 파일 배포 + 학급 공유 폴더.

2. 핵심 아키텍처 해설

① 카드 데이터 상수

const CARDS = [
  { id: "불국사", kind: "img", b64: "iVBORw0KGgo..." },
  { id: "불국사", kind: "desc", text: "신라의 대표 사찰" },
  { id: "첨성대", kind: "img", b64: "iVBORw0KGgo..." },
  { id: "첨성대", kind: "desc", text: "신라의 천문대" }
];

한 개념(문화유산)이 사진(img)과 설명(desc)의 두 카드로 나뉘어 심깁니다 — id가 짝을 잇는 열쇠입니다.

② 매칭 판정

function match(a, b) {
  return a.id === b.id && a.kind !== b.kind;
}

③ 한살이 순서 정렬

const STAGES = ["씨앗", "싹", "꽃", "열매"];

function checkOrder(picks) {
  return STAGES.every(function (s, i) {
    return picks[i] === s;
  });
}

'싹'과 '열매'를 섞어 놓고 순서를 잡는 과정 자체가 식물의 한살이 단원의 개념 학습입니다.

④ 토너먼트 기록

function recordTime(group, seconds) {
  BEST[group] = Math.min(BEST[group] || 999, seconds);
  sound("bell");   // 신기록 팡파르 — Web Audio
}

⑤ 원칙·정합

단일 HTML·외부 통신 0. 학생 표기는 모둠 번호·닉네임만(실명 금지), 기록은 세션 메모리(종료 시 소멸). 캔바의 '웹사이트로 게시' 링크는 외부 서비스에 접속하는 방식이라 학내망 배포용에는 쓰지 않고, 이미지·문구를 파일 안에 심는 방식으로 완결합니다. 사진·음악 저작물은 학생 창작물 또는 학내망 공개 자료만 사용합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini의 질문 3가지(단원 데이터, 토너먼트 방식, 카드 톤)에 답하면 설계가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 '매칭교구.html'로 저장 후 더블클릭. 캔바 카드를 심고 전자칠판 토너먼트로.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·프레임워크·웹폰트 없이 단일 HTML 파일로 완성한다.
2. 사운드는 Web Audio API로 직접 합성한다: 짝 성공 시 맑은 종소리('딩동'), 오답 시 둔탁한 '쿵', 신기록 달성 시 팡파르 화음. 오디오 파일·CDN 사용 금지.
3. 모바일 터치 대응: 뷰포트 메타 태그 필수, 카드 최소 60×60px, 360px 화면에서 가로 스크롤 금지.
4. 카드 데이터는 파일 상단 CARDS 상수에 심는다: id(공통 키), kind('img' 또는 'desc'), b64(Base64 텍스트) 또는 text. 외부 이미지 URL은 절대 사용하지 않는다(학내망 원칙 외부 호출 0).
5. 짝 맞추기(id 일치 && kind 불일치)와 한살이 순서 정렬(STAGES 배열 순서 일치) 두 모드를 상단 탭으로 전환할 수 있도록 만든다.
6. 학생 표기는 모둠 번호·닉네임만 취급하고, 토너먼트 기록은 세션 메모리로 관리한다(종료 시 소멸).
7. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 사회 문화유산 카드와 과학 식물의 한살이 중 어떤 단원을 기본으로 띄울까?
Q2. 토너먼트 방식은? (A: 최단 시간 타임어택 / B: 최소 시도 횟수 경쟁)
Q3. 카드 뒷면 디자인 톤은? (파스텔 단색 / 모눈 패턴)

🎯 에디터 한줄평

개념을 외우는 가장 확실한 방법은 '이걸로 남을 헷갈리게 만들 퀴즈를 짜보는 것'입니다. 캔바에서 문화유산 사진과 설명을 골라 짝으로 엮고, 씨앗부터 열매까지의 순서를 카드 데이터로 조립하는 순간, 학생은 소비자가 아니라 설계자가 됩니다. 캔바가 만든 아름다운 시각 자료를 파일 안에 심어 학내망 원칙까지 단단히 지킨 교구 — 교실 전자칠판 토너먼트에서 환호성이 터질 수밖에 없는 구조입니다.

📚 기술·교육 참고 링크

  • Canva 공식 사이트 : 카드 템플릿 디자인 도구 (디자인 제작 전용)
  • 교육과정 연계: 사회 3~4학년(우리 고장의 문화유산), 과학 3~4학년(식물의 한살이)과 함께 활용
By 시간:
라벨: ,