문제를 맞히면 영토를 점령한다! — 5×5 분수 덧셈·뺄셈 땅따먹기 2인 대결 & 체육 미션 챌린지 웹 보드게임
🎲 초등 5~6학년 수학 '분수의 덧셈과 뺄셈', 체육 '영역형 경쟁 활동' 융합 — 연산 학습지를 풀며 한숨 쉬던 아이들이 5×5 격자 보드판 위에서 땅따먹기 지휘관이 됩니다! 분수 덧셈·뺄셈 문제를 풀면 해당 칸을 점령하고, 특정 칸에 숨겨진 '팔벌려뛰기 5회', '제자리 스쿼트' 등 체육 미션을 수행하며 체력과 계산력을 동시에 기르는 신개념 융합 웹 보드게임입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 지루한 연산 반복 ➔ 땅따먹기 영토 확장 | 25개 격자 칸마다 서로 다른 통분 분수 문제가 배정되어, 정답을 맞힌 플레이어(파랑팀/빨강팀)의 깃발이 꽂힙니다. | 가로·세로·대각선 3줄을 먼저 잇는 팀이 추가 보너스 점수 획득. |
| 좌식 수업 ➔ 체육 미션 인터벌 챌린지 | 보너스 황금 칸을 선택하면 '점핑잭 5회', '앉았다 일어서기' 등 즉석 신체 활동 팝업이 떠서 신체 활력을 돋웁니다. | 수학 시간 40분 동안 가만히 앉아 있지 않고 두뇌와 신체를 함께 깨우는 수업. |
| 2인 1키보드/터치 로컬 대결 | 외부 서버 로그인 없이 태블릿 한 대나 교실 크롬북 한 대를 사이에 두고 1P와 2P가 턴(Turn)을 주고받습니다. | 짝꿍 활동 시간이나 수학 단원 평가 후 보충·심화 게임으로 활용. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
제미나이(Gemini)에 아래 프롬프트를 붙여넣으면, 복잡한 게임 라이브러리 없이 순수 HTML과 바닐라 자바스크립트로 구동되는 단일 파일 보드게임이 1분 만에 완성됩니다.
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 던지는 3가지 질문(분모 범위, 체육 미션 강도, 승리 조건)에 답합니다.
- HTML 파일 실행 — 코드를 메모장에 붙여넣고
분수땅따먹기.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 외부 이미지, 사운드 파일 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 5×5 격자 보드판 구현: CSS Grid(repeat(5, 1fr))를 사용하여 25개 타일을 균등하게 배치하고, 1P(파랑)와 2P(빨강)의 턴제 대결 시스템을 구축한다.
3. 분수 문제 자동 생성: 5~6학년 수준의 진분수 덧셈과 뺄셈(분모 2~12, 통분 필요) 문제를 자바스크립트 난수로 자동 출제하고 기약분수 검증 로직을 포함한다.
4. 체육 미션 황금 타일: 25개 중 4개의 무작위 타일에는 체육 미션(스트레칭, 제자리 점프, 제자리 달리기 10초 등) 모달이 뜨도록 설계한다.
5. Web Audio 효과음: 오디오 파일 링크 대신 Web Audio API로 턴 교체음, 정답 팡파르, 오답 부저음을 합성한다.
6. 학생 개인정보 0: 학생 실명 입력을 받지 않으며, 1P와 2P의 현재 영토 수(점수)만 화면 상단에 표시한다.
7. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 다룰 분수 연산 유형은 무엇인가요? (A: 분모가 같은 분수 / B: 분모가 다른 이분모 분수 덧셈·뺄셈)
2. 승리 조건은 어떻게 설정할까요? (A: 13칸 먼저 차지하기 / B: 3줄 빙고 먼저 완성하기)
3. 체육 미션의 운동 강도는 가벼운 교실 스트레칭과 활동적인 유산소 운동 중 어느 쪽으로 맞출까요?🎯 에디터 한줄평
"통분을 왜 해야 하는지 모른 채 연산 연습장만 채우던 아이들이, 영토를 빼앗기지 않기 위해 분모의 최소공배수를 스스로 암산하기 시작합니다. 정답을 맞힌 뒤 벌떡 일어나 점핑잭 5회를 해내며 터져 나오는 웃음소리—그것이 바로 수학과 체육이 교실에서 만났을 때 일어나는 가장 건강한 배움의 장면입니다."
📚 기술·교육 참고 링크
- CSS Grid 턴제 보드게임 설계 및 Web Audio 주파수 합성 가이드
- 교육과정 연계: 초등 5~6학년 수학(분수의 덧셈과 뺄셈), 체육(영역형 경쟁, 건강과 체력 증진)
