2026년 9월 6일 일요일

[학급 경영] 등굣길 안전 런 게임 챌린지 - 교통안전 주간 창체 상시 플레이존



[학급 경영] '우리 반 안전 등굣길 런' — 교통안전 주간 창체 수업 완전 정복

🚸 교통안전 주간, 교실 전자칠판을 '상시 플레이존'으로 바꿔보겠습니다. 불법 주정차 차량은 점프로 피하고, 신호등이 녹색불일 때만 횡단보도를 건너는 '안전 등굣길 런 게임' — 학생들이 직접 만들고, 아침 자율 시간에는 전자칠판에서 랭킹 챌린지를 운영합니다.

창의적 체험활동(안전교육)의 핵심인 보행 안전 수칙을 게임 규칙으로 체화합니다. 개인정보 수집 0 설계(닉네임도 저장하지 않는 세션 메모리)와 학내망 '외부 호출 0' 원칙 — 학급 경영 도구로도 안전한 설계를 담았습니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
수업 시나리오 교통안전 주간 창체 시간에 게임 제작 → 완성 게임을 전자칠판 '상시 플레이존'으로 → 아침 자율 시간 랭킹 챌린지. 게임 제작 자체가 안전교육 수업이 됩니다. 주간 스케줄: 월(기획)→화·수(제작)→목(완성)→금(챌린지 시작).
안전 수칙 → 게임 규칙 불법 주정차 차량 = 피하는 장애물, 녹색불 = 건널 수 있는 창, 빨간불 위 횡단 = 감점 100점. 수칙이 곧 게임 규칙이라 학습 효과가 게임 플레이에 붙어 나옵니다. 신호등 상태 머신으로 규칙을 코드로 옮기기.
배경 아트 횡단보도 줄무늬와 스쿨존 표지판은 이미지 파일 없이 순수 CSS·캔버스 도트로. 외부 이미지가 없어야 학내망 원칙이 자동으로 지켜집니다. CSS 반복 그라디언트로 얼룩말 무늬 횡단보도 그리기.
랭킹 챌린지 닉네임+점수를 세션 메모리(변수)로만 관리 — 브라우저 저장도, 서버 전송도 하지 않습니다. '재미는 남기고, 개인정보는 남기지 않는' 학급 경영용 설계입니다. 전자칠판 TOP 5 랭킹판 + '오늘의 챔피언' 축하 화면.
학내망 배포 대응 단일 파일·통신 0이니 전자칠판 브라우저에 바로 풀스크린으로 띄우면 끝입니다. EMBED_DATA에 안전 규칙 데이터를 심어 완결성을 높입니다. 교사 PC 서버 파일 공유 → 크롬북 학생 단말도 동일 게임.

2. 핵심 아키텍처 해설 — 신호등과 랭킹판

① 게임 루프는 그대로 재활용

update()와 draw()가 번갈아 도는 표준 무대(게임 루프)는 건강 런 게임과 동일합니다. 이번 글에서 바뀌는 것은 두 가지 — 규칙(신호등)과 아트(등굣길)입니다. '같은 무대에 새 규칙 얹기'가 이 방법의 핵심입니다.

② 신호등 상태 머신: 규칙을 코드로 옮기기

const LIGHTS = ["green", "yellow", "red"];
let lightIndex = 0;

function nextLight() {
  lightIndex = (lightIndex + 1) % 3;
  drawLight(LIGHTS[lightIndex]);
}
setInterval(nextLight, 3000);   // 3초마다 신호 변경

if (LIGHTS[lightIndex] === "red" && runner.onCrosswalk) {
  score -= 100;      // 빨간불 건너기 감점
  sound("siren");    // Web Audio 합성 사이렌
}

신호등은 '정해진 순서로 도는 상태' — 상태 머신(state machine)의 가장 쉬운 예입니다. 교통 안전 수칙이 이 한 덩어리의 코드로 완전히 표현됩니다.

③ 장애물 설계: 등굣길의 위험 요소

const OBSTACLES = [
  { kind: "parkedCar",   w: 60, h: 34 },   // 불법 주정차 차량 (정지)
  { kind: "movingBike",  w: 30, h: 30, speed: 2 }  // 갑자기 나오는 오토바이 (이동)
];

학생들이 우리 등굣길의 위험 요소를 직접 회의에서 정하고 그 목록을 장애물로 만듭니다 — 게임 기획 회의 자체가 안전교육입니다.

④ '저장하지 않는' 랭킹판

const ranks = [];   // 세션 메모리 — 파일을 닫으면 사라짐(저장 0)

function addRank(nick, score) {
  ranks.push({ nick: nick, score: score });
  ranks.sort(function (a, b) { return b.score - a.score; });
  return ranks.slice(0, 5);   // TOP 5만 표시
}

닉네임은 임시로 입력받되 어디에도 저장하지 않습니다. 학내망 원칙(개인정보 수집·저장 0)의 가장 작은 실천이자, 어린이 개인정보 소양 수업의 살아있는 예제입니다.

⑤ 학내망 전략: 전자칠판 상시 플레이존

배경·캐릭터·사운드·규칙이 모두 상수로 심겨 있으니(EMBED_DATA) 파일 하나를 교사 PC 서버에 올리면 전자칠판과 크롬북이 같은 게임을 플레이합니다. 심기 모드(데이터 임베딩)가 무엇인지는 앞의 '📖 한 줄 정의' 박스를 참고하세요.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini가 던지는 질문 3가지(위험 요소, 신호 주기, 랭킹 표시)에 답하면 설계가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 '등굣길런.html'로 저장 후 전자칠판 브라우저로 열기.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·프레임워크·웹폰트·이미지 파일 없이 단일 HTML 파일로 완성한다. 횡단보도·스쿨존 배경은 순수 CSS, 캐릭터·차량은 캔버스 도트 맵으로 그린다.
2. 안전 수칙 데이터(장애물 2종, 신호등 규칙, 감점 규칙)는 파일 상단 EMBED_DATA 상수로 완전히 심는다(학내망 배포용 외부 호출 0 모드).
3. 사운드는 Web Audio API로 직접 합성한다: 점프 '펑', 신호 전환 '딩', 빨간불 위반 '사이렌', 신기록 '팡파르'. 오디오 파일 사용 금지.
4. 모바일 터치 대응: 화면 탭=점프, 크롬북 스페이스바=점프, 360px 가로 스크롤 금지.
5. 신호등은 녹색→노란색→빨간색으로 3~5초 간격 순환하고, 빨간불 동안 횡단보도 구역에 서 있으면 감점 100점.
6. 랭킹은 닉네임+점수를 세션 메모리(변수)로만 관리한다 — 브라우저 저장(localStorage)·서버 전송 금지(개인정보 수집·저장·전송 0).
7. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 장애물은 우리 등굣길의 어떤 위험 요소로 할까요? (불법 주정차 차량 / 오토바이 / 빗물 고인 구간 등 학급 회의 결정)
Q2. 신호등 주기는 몇 초로 할까요? (교실 난이도에 맞춰 3~5초 권장)
Q3. 랭킹 표시는 몇 위까지? (전자칠판 가독성 기준 TOP 5 권장)

🎯 에디터 한줄평

안전교육의 늪은 '외우게 하기'입니다. 이 설계는 빨간불 위 횡단이 감점이 되는 순간, 수칙을 몸으로 기억하게 만듭니다. 게임 기획 회의에서 '우리 등굣길의 위험 요소'를 직접 뽑아 장애물로 만드는 과정은 창체 시간 그 자체가 되고, '닉네임도 저장하지 않는 랭킹판'은 어린이 개인정보 소양의 첫 실천이 됩니다. 전자칠판 상시 플레이존은 일회성 수업이 아니라 학급 문화로 남는다는 점 — 학급 경영 관점에서 가장 현명한 리소스 활용입니다.

📚 기술·교육 참고 링크

  • 교육과정 연계: 창의적 체험활동(안전·교통안전), 실과·정보(절차 지향 프로그래밍), 보건(안전한 생활)과 함께 활용
  • 도로교통공단 교통안전 자료: https://www.kotsa.or.kr/ — 스쿨존·보행 안전 수칙의 공식 자료
  • MDN Web Docs: setInterval — 신호등 주기를 만드는 표준 함수
By 시간: