2026년 9월 6일 일요일

[행정/안전] 학교 재난 대피 3D 시뮬레이터 - 비상구 탈출 훈련을 게임처럼



화재·지진 대피 훈련이 1분짜리 비상구 탈출 게임이 됩니다 — 학교 재난 대피 3D 시뮬레이션 완전 정복

🚨 화재 및 지진 대피 훈련 주간, 학교 건물 평면도를 3D 복셀(voxel, 작은 큐브 블록) 미로로 구현합니다. 학생들이 1인칭 조작으로 연기 발생 구역을 피해 가장 가까운 계단과 비상구를 찾아 탈출하는 인터랙티브 훈련 게임 — 형식화되기 쉬운 연례 대피 훈련을 체감 훈련으로 업그레이드합니다.

무거운 게임 엔진이나 외부 라이브러리 설치 없이, 순수 캔버스 복셀 큐브 렌더링 + 원근 투영으로 단일 HTML 파일 안에 완성합니다. 3D 배치도와 연기 위치 데이터는 심기 모드(데이터 임베딩)로 심어 학내망 원칙(외부 통신 0)을 지킵니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
1인칭 복셀 이동 화살표 키·태블릿 조이스틱으로 복도를 걷는 1인칭 시점(카메라). 외부 엔진 없이 캔버스 큐브 렌더링으로 안전 구현. 1분 안에 비상구 도달 미션.
연기 발생 구역 장애물 회색 연기 큐브가 깔린 칸은 통과 불가 — 건강 악화 시뮬레이션을 통과해야 하는 대피 경로 설계 학습으로 바꿉니다. 안전 대피 경로 찾기.
비상구 화살표 시스템 가장 가까운 비상구 방향이 화면 하단에 실시간 나침반으로 표시 — 위기 대처 의사결정 지원. 나침반 보며 최단 탈출.

2. 핵심 아키텍처 해설

① 건물 평면도 복셀 상수 (심기 모드)

const FLOOR_MAP = [
  ["■", "■", "■", "■", "■"],
  ["■", " ", " ", " ", "■"],
  ["■", " ", "🔥", " ", "■"],
  ["■", " ", " ", "⏹", "■"],
  ["■", "■", "■", "■", "■"]
];   // ■=벽, " "=복도, 🔥=연기, ⏹=비상구

학교 건물 평면도를 문자 그리드로 심는 심기 모드(데이터 임베딩) 설계. 교사가 학교 평면도를 손으로 옮겨 심으면 3D 건물이 즉시 생성됩니다.

② 복셀 큐브 원근 렌더링

function drawVoxel(x, y, size, color) {
  const projected = project3D(x, y, camX, camY, camAngle);
  ctx.fillStyle = color;
  ctx.fillRect(projected.x - size / 2, projected.y - size / 2, size, size);
}

③ 연기(장애물) 충돌 감지 & 대피 안내

function checkCollision(px, py) {
  const gridX = Math.floor(px / GRID_SIZE);
  const gridY = Math.floor(py / GRID_SIZE);
  const cell = FLOOR_MAP[gridY] && FLOOR_MAP[gridY][gridX];
  return cell === "■" || cell === "🔥";   // 벽·연기는 통과 불가
}

function nearestExit(px, py) {
  const exits = [];
  FLOOR_MAP.forEach(function (row, y) {
    row.forEach(function (c, x) {
      if (c === "⏹") exits.push({ x: x, y: y });
    });
  });
  return exits.reduce(function (best, e) {
    return best === null || dist(px, py, e) < dist(px, py, best) ? e : best;
  }, null);
}

연기·벽은 통과할 수 없도록 충돌 감지가 걸리고, nearestExit 함수가 학생 위치에서 가장 가까운 비상구를 실시간 계산해 화면 하단 나침반으로 안내합니다.

④ 1분 타이머 + 탈출 성공 연출

let remaining = 60;   // 초 단위

setInterval(function () {
  remaining -= 1;
  timerEl.textContent = "남은 시간: " + remaining + "초";
  if (remaining <= 0) gameEnd(false);
}, 1000);

function gameEnd(success) {
  if (success) {
    sound("fanfare");
    showBanner("성공! " + remaining + "초 안에 탈출했습니다");
  } else {
    sound("alarm");
    showBanner("아쉽지만 시간이 다 됐어요 — 다시 도전!");
  }
}

⑤ Web Audio API 경보·성공음

function sound(kind) {
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const osc = ctx.createOscillator();
  const gain = ctx.createGain();
  if (kind === "alarm") {
    osc.type = "sawtooth";
    osc.frequency.setValueAtTime(220, ctx.currentTime);
    osc.frequency.exponentialRampToValueAtTime(440, ctx.currentTime + 0.4);
  } else if (kind === "fanfare") {
    osc.type = "triangle";
    osc.frequency.setValueAtTime(660, ctx.currentTime);
    osc.frequency.exponentialRampToValueAtTime(990, ctx.currentTime + 0.25);
  }
  gain.gain.setValueAtTime(0.15, ctx.currentTime);
  osc.connect(gain); gain.connect(ctx.destination);
  osc.start(); osc.stop(ctx.currentTime + 0.4);
}

⑥ 원칙·정합

단일 HTML 파일 완결, 외부 CDN·API·게임 엔진 완전 금지. 학생 조작·성적 기록 일절 없음, 대피 경로 데이터는 파일 상단 상수로 심는 심기 모드(데이터 임베딩). 학내망 원칙을 100% 지키는 순수 시뮬레이션 훈련기입니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini의 질문 3가지(평면도 복잡도, 장애물 구성, 타이머 길이)에 답하면 단일 파일 코드가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 '대피훈련.html'로 저장 후 더블클릭 — 교실 크롬북과 전자칠판에서 즉시 훈련을 시작합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 Three.js 등 외부 라이브러리, 폰트, CDN, 외부 이미지 URL 없이 순수 바닐라 JS와 HTML5 Canvas 2D 원근 투영 수식으로만 단일 HTML 파일로 완성한다.
2. 학교 건물 평면도를 파일 상단 FLOOR_MAP 문자 그리드 상수로 심어두고(심기 모드 — 데이터 임베딩), 그 문자 그리드를 기반으로 복셀(voxel) 큐브 3D 건물이 그려지게 한다.
3. 1인칭 이동은 화살표 키·터치 조이스틱(태블릿)로 복도를 걷는 방식이며, 연기(🔥)와 벽(■) 칸은 checkCollision 함수로 통과를 금지한다.
4. nearestExit 함수가 현재 위치에서 가장 가까운 비상구(⏹)를 실시간 계산하고 화면 하단에 나침반 화살표로 방향을 표시한다.
5. 남은 시간 60초 카운트다운 타이머와 함께, 1분 안에 탈출 성공 시 Web Audio 합성 팡파르가 나오게 한다.
6. 사운드는 Web Audio API로 직접 합성(경보음·성공음)하며 오디오 파일 사용은 금지한다.
7. 학생 실명·성적·기록 저장 일절 금지, 조작은 순수 로컬 세션에서만 이루어진다.
8. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 건물 평면도 크기는 어느 정도? (10×10 복셀 / 15×15 복셀)
Q2. 장애물 구성은? (연기 / 파편 / 통제 차단 구역)
Q3. 남은 시간은? (60초 / 90초)

🎯 에디터 한줄평

연례 대피 훈련이 '체조 동작 몇 가지'에 그치기 쉬웠다면, 이 3D 훈련기는 학생의 위치 판단·경로 결정·비상구 선택까지 게임처럼 몸에 새기게 해줍니다. 외부 엔진 없이 캔버스 수학으로 만든 1인칭 대피 시뮬레이션 — 학교 안전 교육에 딱 필요한 실용성입니다.

📚 기술·교육 참고 링크

  • MDN — Canvas API : 순수 바닐라 2D 캔버스 원근 투영 수식
  • 교육과정 연계: 초등 안전교육(재난 대피), 창의적 체험활동(안전·생활), 실과(SW 활용)와 직접 연계
By 시간:
라벨: ,