[학급 경영] '우리 반 안전 등굣길 런' — 교통안전 주간 창체 수업 완전 정복
🚸 교통안전 주간, 교실 전자칠판을 '상시 플레이존'으로 바꿔보겠습니다. 불법 주정차 차량은 점프로 피하고, 신호등이 녹색불일 때만 횡단보도를 건너는 '안전 등굣길 런 게임' — 학생들이 직접 만들고, 아침 자율 시간에는 전자칠판에서 랭킹 챌린지를 운영합니다.
창의적 체험활동(안전교육)의 핵심인 보행 안전 수칙을 게임 규칙으로 체화합니다. 개인정보 수집 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. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
- 역질문 답변 — Gemini가 던지는 질문 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 — 신호등 주기를 만드는 표준 함수
