2026년 9월 6일 일요일

[교과 연계] 크롬 다이노 개조 건강 런 게임 - 체육·보건·실과 융합 수업



[교과 연계] 크롬 다이노를 개조한 '건강 런 게임' — 체육·보건·실과 융합 수업 완전 정복

🏃‍♂️ 인터넷이 안 될 때 만나는 크롬 다이노 게임, 오늘 이것을 우리 반 체육·보건 수업으로 완전히 개조해보겠습니다. 햄버거·탄산음료 같은 정크푸드(장애물)는 점프로 피하고, 신선한 채소·과일(보너스 아이템)은 먹어서 점수를 얻는 '건강 런 게임'입니다. 코드는 단일 HTML 파일 하나 — 교실 크롬북에서 바로 돌아갑니다.

5~6학년 체육(육상 달리기)·보건(영양)·실과(정보) 세 교과를 한 파일로 묶는 융합 수업입니다. 학내망 '외부 호출 0' 원칙에 맞춘 음식 도트 데이터 심기 모드(데이터 임베딩) 설계까지 한 번에 담았습니다.

📖 한 줄 정의

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

학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
게임 메카닉 개조 크롬 다이노의 '선인장 뛰어넘기'를 '정크푸드 피하기'로, '밤하늘'을 '건강한 몸'으로 바꿉니다. 달리기 속도가 붙으면 장애물도 빨라지는 육상 런의 재미를 그대로 살립니다. 장애물: 햄버거·탄산음료 도트 아이콘 → 보너스: 채소·과일 도트 아이콘.
교과 연계 3축 체육(점프 타이밍=신체 리듬), 보건(정크푸드 vs 신선식품 판단), 실과·정보(도트 매핑과 조건문 코딩)가 한 화면에서 만납니다. 수업 후 '우리 반 하루 영양 기록표'와 게임 점수 비교 활동.
도트 매핑 음식 아이콘은 이미지 파일 없이 숫자 배열(도트 맵)로 심습니다. 0과 1의 격자가 곧 그림이 되는 구조 — 실과·정보의 픽셀 개념 그대로입니다. 학생이 직접 12×12 도트 맵에 햄버거 모양을 그려 넣어보기.
점수 시스템 정크푸드 피하기 기본 점수 + 신선식품 먹기 보너스 점수. '먹으면 점수'라는 구조가 건강한 식습관의 긍정 강화 학습이 됩니다. 사과 +50, 브로콜리 +100 같은 영양 가치 점수 차등.
학내망 배포 대응 이미지·사운드·폰트 외부 의존성이 전혀 없는 단일 파일이라 학내망 원칙이 자동으로 지켜집니다. 도트 데이터와 사운드(Web Audio 합성)는 모두 파일 안에 완결됩니다. 교사 PC 서버에 올리면 크롬북 학생 단말이 학내망에서 접속.

2. 핵심 아키텍처 해설 — 게임 루프와 도트 매핑

① 게임 루프: 캔버스가 숨쉬는 60분의 1초

function gameLoop() {
  requestAnimationFrame(gameLoop);
  update();   // 좌표·충돌·점수 계산
  draw();     // 캔버스에 다시 그리기
}

게임의 심장은 '반복 실행되는 루프'입니다. 매 순간 장애물을 옆으로 옮기고, 충돌했는지 묻고, 화면을 다시 그리는 이 구조는 게임 웹앱의 표준 무대입니다.

② 도트 매핑: 숫자가 그림이 되는 순간

const BURGER_MAP = [
  "000111110000",
  "011111111110",
  "111111111111",
  "011011011011",
  "000111110000",
  "004444444400",
  "033333333330"
];   // 1=빵, 3=패티, 4=치즈 — 0은 빈칸

음식 도트 아이콘은 이렇게 숫자 격자로 정의합니다. EMBED_DATA에 아이콘 맵이 심어져 있으면 외부 자원을 전혀 쓰지 않는다 — 심기 모드(데이터 임베딩)가 무엇인지는 앞의 '📖 한 줄 정의' 박스를 참고하세요.

③ 충돌 판정: 두 사각형이 겹치는가

function isCrash(runner, food) {
  return runner.x < food.x + food.w &&
         runner.x + runner.w > food.x &&
         runner.y < food.y + food.h &&
         runner.y + runner.h > food.y;
}

'충돌'은 결국 두 사각형이 겹치는가의 수학입니다. 점프 타이밍이 이 조건식을 벗어나는 게 전부 — 체육의 리듬 감각과 정보의 조건문이 여기서 만납니다.

④ 보너스 로직: 먹으면 이로운 식품 점수

if (isCrash(runner, item)) {
  score += item.value;   // 사과 +50, 브로콜리 +100
  sound("coin");         // Web Audio 합성 '똑'
}

⑤ 학내망 전략: 통신 0 완결 설계

이미지=도트 맵, 사운드=Web Audio 합성, 데이터=상수. 세 가지가 모두 파일 안에 있으니 교사 PC 서버에 파일 한 장만 올리면 학내망 수업이 완성됩니다. 학생 단말은 브라우저로 접속해 플레이 — 외부로 나가는 데이터는 0입니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini가 던지는 질문 3가지(장애물 종류, 보너스 점수, 속도 상승)에 답하면 설계가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 '건강런.html'로 저장 후 더블클릭. 바로 학내망 배포본입니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·프레임워크·웹폰트·이미지 파일 없이 단일 HTML 파일로 완성한다. 캔버스 도트 맵과 Web Audio 합성으로 모든 그래픽·사운드를 해결한다.
2. 게임 데이터(정크푸드 3종, 신선식품 3종의 도트 맵·점수·이름)는 파일 상단 EMBED_DATA 상수로 완전히 심는다(학내망 배포용 외부 호출 0 모드).
3. 사운드는 Web Audio API로 직접 합성한다: 점프 '펑', 보너스 획득 '똑', 충돌 '삑', 게임오버 효과음. 오디오 파일 사용 금지.
4. 모바일 터치 대응: 화면 탭=점프, 크롬북 스페이스바=점프, 360px 화면 가로 스크롤 금지.
5. 속도가 시간에 따라 서서히 증가하고, 장애물 간격이 일정 범위 안에서 무작위로 배치된다(너무 빠르지 않은 교실 난이도).
6. 점수 표시는 천 단위 콤마와 함께 화면 상단에, 최고 점수는 브라우저 저장 없이 세션 메모리로만 관리한다(개인정보 수집·저장 0).
7. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 장애물(정크푸드)은 어떤 3종으로 할까요? (햄버거·탄산음료·감자튀김 외에 우리 반에서 정한 것)
Q2. 보너스 식품의 점수 차등은 어떻게 할까요? (사과·당근·브로콜리 등 영양 가치 반영)
Q3. 주인공 러너는 어떤 모습으로 할까요? (도트로 그린 학생 실루엣 / 학급 마스코트 변형)

🎯 에디터 한줄평

'게임을 만들면 게임을 이해한다' — 그런데 이번 설계는 한 걸음 더 나아가 게임이 보건 교육의 관으로 작동합니다. 정크푸드는 피하는 장애물이고 신선식품은 먹는 보너스라는 규칙 자체가 영양 교육의 메시지입니다. 도트 매핑은 픽셀의 원리를, 게임 루프는 반복문과 조건문을, 충돌 판정은 좌표 수학을 각각 하나씩 가져옵니다. 체육 시간에 점프 리듬을 몸으로 익히고 컴퓨터실에서 그 리듬을 코드로 옮기는 융합 — 학내망 통신 0 설계까지 완벽한 교과 연계 글입니다.

📚 기술·교육 참고 링크

  • 교육과정 연계: 체육(달리기·점프 활동), 보건(영양소와 균형 잡힌 식사), 실과·정보(데이터와 표현, 절차 지향 프로그래밍)와 함께 활용
  • MDN Web Docs: Canvas API — 도트 맵을 그리는 표준 기술
  • MDN Web Docs: Web Audio API — 무설치 사운드 합성
By 시간: