2026년 9월 6일 일요일

[과학·영어·미술] 멸종위기 생태 지킴이 - 캔바 일러스트와 퀴즈로 엮는 인터랙티브 게임북



동물 구출 퀴즈와 카드가 살아 숨 쉬는 '멸종위기 생태 지킴이 게임북' 만들기

🐾 초등 5학년 과학 '생물과 환경' 단원 — 교과서 속 멸종위기 동물을 단순히 암기하는 대신, 학생들이 캔바(Canva)로 생태 카드뉴스를 디자인하고 동물 구출 퀴즈가 결합된 단일 HTML 인터랙티브 게임북을 직접 코딩합니다. 복도 게시판 QR코드를 통해 저학년 동생들에게 생태 보호 메시지를 나누는 참여형 융합 프로젝트입니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
디자인과 코드의 2단 분업 그림 그리기는 캔바 AI(Canva)로, 퀴즈 로직과 페이지 전환은 제미나이(Gemini)로 코딩합니다. 외부 웹사이트 호스팅 없이 단일 HTML 파일로 완결됩니다. 캔바에서 동물 일러스트 카드 4장을 PNG로 내려받아 EMBED_PAGES 상수에 Base64(베이스64)로 심기.
게임북(Gamebook) 인터랙션 일방적인 전자책이 아닙니다. 퀴즈 정답을 맞혀야 다음 서식지로 이동하고 멸종위기 동물을 구출하는 선택형 분기 스토리텔링입니다. 정답 클릭 시 부드러운 '구출 성공 팡파르(Web Audio API)'와 함께 생태 해설 팝업 띄우기.
복도 생태 게시판 QR 배포 완성된 HTML 파일을 학교 로컬 서버에 올리고 QR코드를 인쇄해 복도에 부착합니다. 1~2학년 동생들이 태블릿으로 태그해 플레이합니다. 화면 상단에 '쉬운 말 모드(동생들을 위한 큰 글씨)' 토글 버튼 제공.

2. 핵심 아키텍처 해설

① 게임북 분기 데이터: PAGES 상수

const PAGES = [
  {
    id: 1,
    animal: "반달가슴곰",
    habitat: "지리산 생태계",
    threat: "서식지 파괴와 밀렵",
    quiz: {
      q: "반달가슴곰의 가슴에 있는 흰 털의 모양은?",
      options: ["반달 모양", "별 모양", "동그라미"],
      answer: 0,
      rescueMsg: "구출 성공! 지리산 국립공원 보호 구역으로 이동합니다."
    },
    nextId: 2
  }
];

동물별 서식지 정보, 위협 요인, 구출 퀴즈를 하나의 구조화된 상수로 관리합니다. 학생들이 조사한 모둠별 멸종위기 동물을 JSON 객체로 추가하기만 하면 페이지가 무한히 확장됩니다.

② 순수 CSS 책장 넘김 효과

.book-container { perspective: 1000px; }
.page {
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform-origin: left center;
}
.page.flipped { transform: rotateY(-180deg); }

외부 자바스크립트 라이브러리 없이 CSS 3D 변환(perspective, rotateY)만으로 실제 양장본 책장을 넘기는 듯한 입체감을 연출합니다.

③ Web Audio 효과음 & 완전 오프라인

구출 성공 시 브라우저 내장 Web Audio API로 상승하는 경쾌한 멜로디(도-미-솔-도)를 직접 합성하여 오디오 파일 다운로드 0을 실현합니다. 외부 통신이 전혀 없어 학내망 방화벽 속에서도 즉시 실행됩니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 던지는 동물 종류, 퀴즈 난이도 질문에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 생태게임북.html로 저장하여 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 외부 CSS 프레임워크(CDN), 외부 이미지 URL 링크를 일절 쓰지 않는다. 순수 HTML5, 바닐라 CSS, 바닐라 JS로만 단일 파일로 작성한다.
2. Web Audio API 무설치 사운드: 퀴즈 정답 시 상승하는 도-미-솔-도 팡파르, 오답 시 낮은 부저음을 브라우저 내장 오실레이터로 직접 합성한다. mp3/wav 오디오 파일 사용 금지.
3. 반응형 뷰포트 & 터치 대응: 교실 태블릿 및 스마트폰 세로/가로 모드 모두에서 책 레이아웃이 화면 중앙에 정렬되도록 CSS Flexbox/Grid를 적용하고, 버튼 최소 터치 영역을 48×48px로 보장한다.
4. 오프라인 심기 모드(데이터 임베딩): 파일 상단 const PAGES = [...] 상수에 멸종위기 동물 4종(반달가슴곰, 수달, 점박이물범, 사향노루)의 데이터와 퀴즈를 내장하여 외부 통신 0으로 구동한다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성된 코드를 출력한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 기획 질문을 먼저 나에게 던져줘:
1. 우리 모둠이 중점적으로 다룰 멸종위기 동물 3~4종은 무엇인가요?
2. 저학년 동생들이 풀 수 있는 2지선다형 쉬운 퀴즈로 구성할까요, 3지선다형으로 할까요?
3. 동물 이미지는 캔바에서 만든 그림을 붙여넣을 수 있도록 Base64 자리표시자 구조로 비워둘까요?

🎯 에디터 한줄평

"배운 것을 남에게 가르칠 때 가장 깊은 학습이 일어납니다. 고학년 학생들이 캔바로 생태 카드를 그리고 제미나이로 퀴즈 게임북을 엮어 복도에 게시할 때, 교실은 작은 게임 스튜디오가 되고 학생들은 환경 교육 전문가가 됩니다. 클릭 한 번으로 책장이 사르르 넘어가며 동물을 구출하는 경험은 저학년 동생들에게도 잊지 못할 생태 감수성을 심어줍니다."

📚 기술·교육 참고 링크

  • Canva 공식 웹사이트 : 카드뉴스 및 동물 일러스트 템플릿 제작
  • 국립생태원 멸종위기 야생생물 포털 : 국내 멸종위기 야생생물 I급·II급 공식 도감
  • 교육과정 연계: 5학년 과학(생물과 환경), 실과(소프트웨어와 프로그래밍, 융합 표현)
By 시간: