2026년 9월 6일 일요일

[교과 연계] 3D 가상 지구 온난화 시뮬레이터 - 기온 슬라이더로 체감하는 기후 위기



기온 1도가 오르면 내 고향은 어디까지 잠길까? — 3D 가상 지구 온난화 및 해수면 상승 시뮬레이터 완전 정복

🌍 6학년 사회과 '지구촌 환경 문제' 단원에서 교과서 속 평면 통계 그래프 대신, 마우스로 자유롭게 회전하는 3D 지구 구체(sphere)를 만납니다. 기온 상승 슬라이더(+1.5℃, +2.0℃, +4.0℃)를 올리는 순간 극지방 빙하가 녹아내리며 연안 도시의 침수선이 차오르고, 침수 면적과 기후 난민 수치가 실시간으로 계산됩니다.

무거운 3D 게임 엔진이나 외부 라이브러리 설치 없이, 순수 HTML5 캔버스(Canvas)의 3D 투영 수학(삼각함수)만으로 단 한 장의 HTML 파일 안에 구현된 심기 모드(데이터 임베딩) 시뮬레이터입니다. 학내망 원칙을 완벽히 준수하며 데이터 기반 환경 시민성을 길러줍니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
무설치 3D 구체 투영 Three.js 등 무거운 외부 3D 엔진(CDN)을 일절 쓰지 않고, 순수 2D 캔버스에 위도·경도 삼각함수 수학 공식으로 구체와 대륙을 직접 렌더링(rendering, 화면 그리기)합니다. 마우스 드래그로 회전 각도(yaw·pitch)를 조작하며 지구 반대편 살펴보기.
슬라이더 연동 연안 침수 온도 슬라이더(1.5℃~4.0℃) 조작 시 기후 모델 데이터에 따라 해수면 높이(0.5m~2.8m)가 연동되어 연안 도트의 색상이 파란 바다색으로 즉시 바뀝니다. 인천·부산·투발루 등 주요 연안 도시의 해발고도별 침수 시뮬레이션.
데이터 심기 & 오프라인 완결 IPCC 기후 보고서 기반 주요 해수면 상승 공식과 전 세계 12개 연안 도시 데이터를 파일 상단 상수에 완전히 심어 인터넷 없는 교실에서도 100% 동작합니다. 모둠별 기후 위기 보고서 탐구 과제에 침수 면적 통계 인용하기.

2. 핵심 아키텍처 해설

① 순수 삼각함수 3D 구체 투영(projection)

function project3D(lat, lon, yaw, pitch, radius) {
  const phi = (90 - lat) * (Math.PI / 180);
  const theta = (lon + yaw) * (Math.PI / 180);
  // 구면 좌표계를 3차원 직교 좌표(x, y, z)로 변환
  const x = radius * Math.sin(phi) * Math.cos(theta);
  const y = radius * Math.cos(phi);
  const z = radius * Math.sin(phi) * Math.sin(theta);
  // 시점(pitch) 회전 변환
  const cosP = Math.cos(pitch), sinP = Math.sin(pitch);
  const rotY = y * cosP - z * sinP;
  const rotZ = y * sinP + z * cosP;
  // 화면 평면에 원근(perspective) 투영
  const scale = 300 / (300 + rotZ);
  return { x: centerX + x * scale, y: centerY - rotY * scale, visible: rotZ > -50 };
}

외부 CDN 라이브러리가 전혀 없어도, 위도와 경도를 화면상의 (x, y) 픽셀 좌표로 정확하게 매핑합니다. rotZ > -50 조건으로 지구 뒷면의 보이지 않는 점은 자동으로 가려집니다.

② 기온 상승에 따른 해수면·난민 통계 모델

const CLIMATE_MODEL = {
  getSeaLevelRise: function(tempDelta) {
    // 1.5도: 약 0.5m / 2도: 약 1.1m / 4도: 약 2.8m (비선형 가속 모델)
    return (tempDelta * 0.25 + Math.pow(tempDelta, 1.8) * 0.18).toFixed(2);
  },
  getDisplacedMillions: function(seaLevelMeters) {
    // 1m 상승 시 전 세계 연안 인구 약 1억 4천만 명 영향
    return Math.round(seaLevelMeters * 145);
  }
};

③ 주요 연안 도시 데이터 심기

const COASTAL_CITIES = [
  { name: "인천 (대한민국)", lat: 37.45, lon: 126.70, elevation: 1.8 },
  { name: "투발루 (푸나푸티)", lat: -8.52, lon: 179.20, elevation: 1.2 },
  { name: "베네치아 (이탈리아)", lat: 45.44, lon: 12.33, elevation: 1.0 },
  { name: "마이애미 (미국)", lat: 25.76, lon: -80.19, elevation: 2.0 }
];

해수면 상승 수치가 해당 도시의 elevation(해발고도)을 초과하는 순간 침수 경보 뱃지가 깜빡이며 시각적 충격을 줍니다.

④ Web Audio API 해수면 상승 경보음

function playAlertSound() {
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const osc = ctx.createOscillator();
  const gain = ctx.createGain();
  osc.type = "sawtooth";
  osc.frequency.setValueAtTime(320, ctx.currentTime);
  osc.frequency.exponentialRampToValueAtTime(160, ctx.currentTime + 0.3);
  gain.gain.setValueAtTime(0.2, ctx.currentTime);
  gain.gain.linearRampToValueAtTime(0.01, ctx.currentTime + 0.3);
  osc.connect(gain); gain.connect(ctx.destination);
  osc.start(); osc.stop(ctx.currentTime + 0.3);
}

⑤ 원칙·정합

단일 HTML 파일 완결. 기후 데이터와 도시 좌표가 모두 코드 상수로 박혀 있어 외부 통신 0, CDN 호출 0. 학생 조작 기록이나 개인정보를 수집하지 않는 순수 시각화 교육 앱입니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini의 질문 3가지(표시할 도시 목록, 슬라이더 범위, 배경 스타일)에 답하면 단일 파일 코드가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 '지구온난화시뮬레이터.html'로 저장 후 더블클릭하면 교실 크롬북과 전자칠판에서 즉시 실행됩니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 Three.js 등 외부 3D 라이브러리나 폰트, CDN 없이 순수 바닐라 JS와 HTML5 Canvas로만 단일 HTML 파일로 완성한다.
2. 3D 지구 구체는 위도·경도 삼각함수 투영 수식을 직접 작성하여 회전 및 원근감을 구현한다 (마우스 드래그로 회전 제어).
3. 온도 조절 슬라이더(range input: +1.0℃ ~ +5.0℃, 0.1단위)를 제공하고, 조절 시 해수면 상승치(m)와 예상 난민 수(백만 명)가 즉시 재계산되어야 한다.
4. 파일 상단 COASTAL_CITIES 상수에 한국 인천, 투발루, 베네치아, 몰디브 등 8개 이상의 주요 취약 지역을 심어두고(심기 모드 — 데이터 임베딩), 해수면 높이가 도시 고도를 넘으면 침수 경고 효과를 연출한다.
5. 사운드는 Web Audio API로 오실레이터를 합성하여 슬라이더 조작 시 부드러운 틱 소리, 침수 임계점 돌파 시 경고 하강음을 출력한다 (오디오 파일 금지).
6. 모바일 및 태블릿 터치 드래그 회전 완벽 지원 (Pointer Events 적용, 가로 스크롤 방지).
7. 학생 개인정보 수집 칸은 일절 포함하지 않는다.
8. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 특별히 강조하고 싶은 우리나라 연안 지역이 있나요? (예: 인천 연안, 부산 해운대, 서해안 간척지 등)
Q2. 시뮬레이터 화면 배치는 어떻게 할까요? (좌측 3D 지구 + 우측 데이터 패널 / 상하 분할)
Q3. 온실가스 감축 목표(파리협정 1.5℃ 기준선) 표시선 뱃지를 지구 상단에 고정할까요?

🎯 에디터 한줄평

"1.5도가 오르면 지구가 어떻게 될까?"라는 질문에 교과서 텍스트는 숫자를 주지만, 이 3D 시뮬레이터는 '물에 잠기는 도시'라는 공간적 체감을 선물합니다. 외부 라이브러리 하나 없이 순수 캔버스 수학으로 구현해 인터넷 없는 과학실에서도 거침없이 돌아가는 진정한 에듀테크 도구입니다.

📚 기술·교육 참고 링크

  • IPCC 공식 기후변화 평가보고서 : 국제 공인 해수면 상승 및 기후 시나리오 통계
  • 교육과정 연계: 6학년 사회(지구촌 평화와 발전), 과학(계절의 변화와 기후), 환경 동아리 활동과 직접 연계
By 시간:
라벨: ,