콩쥐팥쥐를 픽셀로 재해석하다! — 초등 전래동화·역사 인물 2D 픽셀 어드벤처 게임 제작 프로젝트
🎮 초등 3~6학년 국어(이야기 이해), 사회(우리 역사의 인물), 실과(소프트웨어 활용) 융합 — 전래동화와 역사 인물의 이야기를 학생들이 직접 2D 픽셀 스타일 어드벤처 게임으로 재해석하고 코딩하여 제작하는 창작 프로젝트입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 읽기 중심 이야기 학습 ➔ 픽셀 게임 재해석 | 전래동화를 그냥 읽고 끝나는 대신, 학생들이 등장인물을 픽셀 스프라이트로 변형하고 대사와 분기 조건을 직접 코딩합니다. | 콩쥐팥쥐, 흥부와 놀부, 이순신 장군의 전투 등을 픽셀 게임으로 재해석. |
| 스토리 라인 ➔ 분기 조건 코드 | "만약 콩쥐가 도움을 청하면 ➔ 아저씨 등장"과 같은 이야기 분기를 if-else 조건문으로 구현하며 논리력을 훈련합니다. | 선택지 분기로 3개 이상 결말을 가진 다중 경로 스토리 게임 제작. |
| 교사 중심 연출 ➔ 학생 주도 제작 | 교사가 데모를 시연하는 대신 학생들이 직접 캔바(Canva)에서 픽셀 아트를 그리고, 코드로 스프라이트를 이동시킵니다. | 모둠별로 다른 전래동화를 주제로 게임을 제작하고 교실에서 전시회 개최. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
제미나이(Gemini)에 아래 프롬프트를 붙여넣으면 단일 HTML 파일로 즉시 완성됩니다.
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 재해석할 동화·인물과 픽셀 아트 스타일에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
픽셀어드벤처.html로 저장 후 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 게임 엔진(Phaser/Three.js 등), 소셜 로그인, DB 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 이야기 데이터 심기 모드: const STORY = { title: "콩쥐팥쥐", scenes: [{ text: "...", bg: "#87CEEB", options: [...] }, ...] } 상수에 이야기 장면과 분기 조건을 내장한다.
3. 픽셀 스프라이트 렌더링: 등장인물은 8×8 또는 16×16 도트 맵(dot map)으로 그려서 CSS Grid로 렌더링한다(외부 이미지 파일 금지).
4. 분기 조건 구현: 학생이 정한 선택지에 따라 if-else 조건문으로 다음 장면이 바뀌며, 3개 이상 결말을 가진 다중 경로를 지원한다.
5. Web Audio 사운드: 대화 이동 '똑', 선택 확정 '띠링', 엔딩 도달 '팡파르'를 순수 Web Audio API로 합성한다.
6. 학생 개인정보 0: 학생 실명 입력 없이 제작자 닉네임 및 모둠 번호만 표시한다.
7. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 재해석할 전래동화 또는 역사 인물은 누구인가요? (예: 콩쥐팥쥐, 흥부와 놀부, 이순신, 신사임당)
2. 픽셀 스프라이트 크기는 8×8(초급)과 16×16(중급) 중 무엇으로 할까요?
3. 게임 속 선택지는 몇 개로 할까요? (기본: 2~3개 분기, 3개 결말)🎯 에디터 한줄평
"읽고 끝나는 이야기는 시험지 위에서만 살아남지만, 학생이 직접 픽셀로 재해석한 이야기는 친구들 손에 쥐어지는 순간 살아 숨쉬는 문화가 됩니다. '콩쥐가 왜 도움을 청해야만 했을까?'라는 질문에 학생이 다른 결말을 코드로 구현하는 순간, 그것이 진짜 윤리 교육이자 SW 교육입니다."
📚 기술·교육 참고 링크
- HTML5 Canvas 픽셀 스프라이트 렌더링 및 분기 조건 스토리 게임 설계 가이드
- 교육과정 연계: 초등 3~6학년 국어(이야기 이해, 문학적 상상력), 사회(우리 역사의 인물), 실과(소프트웨어 활용)
