한 키보드를 두 명이 잡으면 친구가 된다! — 2인 1키보드 협동/대전 아케이드 게임존 (친교 게임존)
🎮 초등 3~6학년 실과(소프트웨어 활용), 체육(경쟁과 협력), 창체(친교 활동) 융합 — 학생들이 1대의 키보드를 공유하여 협동 또는 대전 방식의 아케이드 게임을 함께 즐기고, 직접 게임 메커니즘을 코딩으로 수정하는 학급 친교 게임존 구축 프로젝트입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 개인 플레이 ➔ 2인 협동·대전 | 한 학생이 혼자 게임을 하면 개인 성취에 그치지만, 1P와 2P가 키보드를 나눠 쓰면 협동/대전 모드로 전환됩니다. | WASD(1P) + 화살표(2P) 키 분리를 구현하여 하나의 키보드로 두 명이 동시에 플레이. |
| 교사 제공 게임 ➔ 학생이 만든 게임 | 학생들이 직접 Canvas 도트로 캐릭터를 그리고, 점수 조건과 충돌 판정 코드를 직접 수정합니다. | 기본 제공되는 술래잡기 게임에서 스피드·맵 크기·충돌 판정 조건을 학생이 수정해보는 실습. |
| 단일 게임존 ➔ 4대 게임 라이브러리 | 협동 플래그 뺏기, 2인 1조 우유 운반, 2인 대전 벽돌깨기, 순간 반응 속도 테스트 4종을 한 파일에 모아 전환 가능. | 모둠별로 다른 게임을 플레이하며 교실에서 친교 대회 개최. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
제미나이(Gemini)에 아래 프롬프트를 붙여넣으면 단일 HTML 파일로 즉시 완성됩니다.
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 게임 유형, 조작키, 1P/2P 색상에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
친교게임존.html로 저장 후 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 게임 엔진(Phaser 등), 소셜 로그인, DB 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 게임 데이터 심기 모드: const GAMES = [{ id: "flag", name: "협동 플래그 뺏기", mode: "coop" }, { id: "brick", mode: "battle" }, ...] 상수에 4종 게임 메타데이터를 내장한다.
3. 2인 키보드 동시 입력: 1P는 WASD, 2P는 방향키(↑↓←→)를 동시에 처리하는 이벤트 리스너와 Canvas 게임 루프를 구현한다.
4. Web Audio 합성: 충돌 '쿵', 승리 '팡파르', 카운트다운 '삑-땡' 소리를 순수 Web Audio API로 합성한다.
5. 학생 개인정보 0: 학생 실명을 절대 입력받지 않으며, 1P/2P 번호 및 팀 닉네임으로만 표기한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 1P와 2P의 조작키는 무엇으로 할까요? (기본: WASD / 화살표)
2. 게임 화면의 크기와 배경 색상 톤은 어떤 느낌으로 할까요?
3. 4대 게임 중 어떤 게임을 기본 시작 화면으로 할까요?🎯 에디터 한줄평
"혼자 하는 게임은 기술을 익히지만, 둘이 하는 게임은 관계를 다룹니다. 1P와 2P가 같은 키보드를 나누는 순간, 아이들은 자연스럽게 상대의 키 입력 타이밍을 관찰하고 타협하는 법을 배웁니다. 기술 교육이 인성 교육을 품는 가장 자연스러운 방법입니다."
📚 기술·교육 참고 링크
- HTML5 Canvas 2인 키보드 동시 입력 게임 설계 및 Web Audio 사운드 합성 가이드
- 교육과정 연계: 초등 3~6학년 실과(소프트웨어 활용), 체육(경쟁과 협동), 창체(친교 활동)
