2026년 9월 6일 일요일

[창체·자치] 바른 생활 미션 클리어 - 모둠 협동 보물섬 항해 어드벤처 게임



지도 한 장, 보물섬 하나! — '우리 반 바른 생활 미션 클리어 학급 어드벤처 게임'

🗺️ 초등 창체·학급자치 — 인사 잘하기, 급식 잔반 제로, 고운 말 쓰기 같은 우리 반 자치 룰을 게임 속 스테이지 퀘스트로 녹여냅니다. 아침 종례마다 실천한 미션을 클리어하면 학급 캐릭터가 푸른 항구를 떠나 항해하고, 1주일 동안 모든 스테이지를 통과하면 보물섬에 입항하는 협동형 게이미피케이션 경영 보드입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
자치 룰을 스테이지 퀘스트로 "인사 잘하기"는 항만 이탈, "잔반 제로"는 식량 마련, "고운 말 쓰기"는 정글 위험 회피 등 자치 규칙을 해적 모험 퀘스트로 스토리텔링합니다. 아침 종례 시 모둠 대표가 어제 실천 현황을 체크하면 캐릭터가 다음 섬으로 이동.
Canvas 섬 항해 애니메이션 무료 이미지 파일 없이 순수 HTML5 Canvas와 SVG로 파도, 나무, 보물섬을 도트 아트 스타일로 직접 그립니다. 5개 스테이지(파도 타기 → 미스터리 섬 → 위험 숲 → 폭풍 해왕 → 보물섬) 순차 해금.
LocalStorage 주간 진도 보존 브라우저 로컬 저장소에 이번 주 미션 진도를 저장해, 다시 켜도 항해가 중단된 지점부터 이어집니다. 월요일 아침 미션 리셋 버튼으로 1주 단위 사이클 운영.

2. 핵심 아키텍처 해설

① 스테이지 퀘스트 상수: STAGES

const STAGES = [
  { name: "서핑 시작", quest: "인사 잘하기", desc: "아침 인사 100% 달성 시 통과" },
  { name: "미스터리 섬", quest: "고운 말 쓰기", desc: "고운 말 실천 3일 연속 통과" },
  { name: "위험한 숲", quest: "급식 잔반 제로", desc: "모둠 잔반 평균 80% 이상 줄이기" },
  { name: "폭풍의 바다", quest: "교실 청소 지킴", desc: "주간 청소 평점 5점 달성" },
  { name: "보물섬 도착!", quest: "전체 미션 완료", desc: "금요일 축하 팡파르 & 나무 심기" }
];

우리 반 자치 룰이 담긴 퀘스트 문자열을 수정만 하면 어떤 반에든 바로 활용할 수 있습니다.

② Canvas 항해 진도 렌더링

function drawSailing(stageIdx) {
  const ctx = document.getElementById("ocean").getContext("2d");
  // 바다 파도, 섬 배경, 캐릭터 배 그리기
  const x = 80 + stageIdx * 150; // 섬 사이 이동 거리
  drawBoat(ctx, x, waveY);
  drawIsland(ctx, stageIdx);
}

완성된 스테이지는 색상으로 채워지고, 현재 진행 중인 라운드는 배 모양 캐릭터가 파도를 가르는 애니메이션으로 표현됩니다.

③ 성공 팡파르 사운드 합성

function playVictory() {
  const ctx = new AudioContext();
  const o = ctx.createOscillator();
  o.type = "sine";
  o.frequency.setValueAtTime(880, ctx.currentTime);
  o.frequency.exponentialRampToValueAtTime(1760, ctx.currentTime + 0.4);
  o.connect(ctx.destination);
  o.start(); o.stop(ctx.currentTime + 0.6);
}

각 섬 도착 시 높은 음부터 두 배율로 슬라이드되는 Web Audio API 팡파르를 합성하여 학생들의 성취감을 극대화합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 모둠 수(4~6)와 스테이지 퀘스트 규칙에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 보물섬게임.html로 저장하여 전자칠판에 상시 구동합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 이미지 파일(CDN) 없이 순수 HTML5 Canvas와 SVG 도트 그리기로 만든다.
2. 5단계 스테이지 퀘스트: 우리 반 자치 룰을 스테이지별 퀘스트로 매핑하고 완료 시 캐릭터가 다음 섬으로 이동한다.
3. LocalStorage 진도 저장: 브라우저 로컬 저장소에 현재 스테이지 번호를 저장하여 다시 켜도 진행 상태가 유지되도록 한다.
4. Web Audio 팡파르: 각 섬 도착 시 상행 사운드 슬라이드(880Hz → 1760Hz)를 합성한다.
5. 학생 개인정보 0: 학생 실명 대신 모둠명(1팀~6팀)만 표시한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 스테이지 수를 5개(1주 단위)로 할까요, 10개(2주 단위)로 늘릴까요?
Q2. 항해 캐릭터를 돛단배, 우주선, 유령해적 중 무엇으로 할까요?
Q3. 바다 색상은 딥 오션 블루와 라이트 스카이 티어 중 어느 것으로 할까요?

🎯 에디터 한줄평

"'잘하면 별점 1점', '안 하면 훈계 1번'보다 '우리 배가 보물섬에 닿는다'라는 거창한 목표가 훨씬 강력합니다. 이주일간 협동해서 급식 잔반 제로를 이루고 보물섬을 닿아내는 아이들 얼굴에서 발견되는 것은 숙제에 대한 부담이 아니라, 우리 반이라는 항구를 지키고자 하는 주인의식입니다."

📚 기술·교육 참고 링크

  • 게이미피케이션(Gamification) 이론 및 브라우저 캔버스 애니메이션 기초
  • 교육과정 연계: 초등 창체(학급자치, 바른 생활 습관 형성), 도덕(인사 및 예절)
By 시간: