대기대순환 3D — 교사용 안내

지구의 바람 흐름이 비와 기후를 만드는 과정을 장면 단위 애니메이션으로 설명하는 수업 도구입니다. 통합사회(자연환경과 인간)·한국지리·세계지리(세계의 기후)의 기후 단원에서 활용할 수 있습니다.

1준비 — 설치 없이 바로 실행

폴더를 통째로 복사해 둡니다(USB·공유 폴더 가능). 폴더 안의 파일 위치를 바꾸지 마세요.
index.html을 더블클릭하면 실행됩니다. 크롬·엣지·웨일 브라우저를 권장합니다.
인터넷이 필요 없습니다. 학교망에서 외부 사이트가 막혀 있어도 똑같이 동작합니다.
교실 TV·전자칠판에서는 키보드 F를 누르면 발표 모드(전체 화면·큰 자막)로 바뀝니다.

2조작 — 한 번 누를 때마다 한 장면

하고 싶은 것	키보드 · 발표용 리모컨	화면
다음 장면	`→` `Space` `PgDn`	아래 파란 ▶ 버튼
이전 장면	`←` `PgUp`	◀ 버튼
다음·이전 단계로 건너뛰기	`Shift`+`→` / `Shift`+`←`	왼쪽 패널의 단계 목록
이 단계 처음부터	`R`	⟲ 버튼
발표 모드 켜기/끄기	`F` / `Esc`	—
애니메이션 속도 바꾸기	`S`	「느리게 · 보통 · 빠르게」 버튼 (고른 속도는 다음에도 유지)
처음 화면으로	`Home`	—

「자동」을 켜 두면 장면의 움직임이 끝난 뒤 자막 길이에 맞춰 다음 장면으로 넘어갑니다(자습·복습용). 학생에게 질문을 던지고 싶은 곳에서는 넘기기 전에 잠시 멈춰 이야기를 나눠 보세요.

지구본은 드래그로 돌리고 휠·두 손가락으로 확대/축소합니다. 색깔 띠나 지역 마커(핀)를 누르면 위도대별 설명 카드가 나타납니다. 휴대전화·세로 태블릿에서는 아래 바를 위로 쓸어올려 패널을 열고, 좌우로 쓸어 장면을 넘깁니다.

3수업 흐름 — 8단계 · 49장면 (약 40~45분)

단계	핵심 내용 · 화면	장면	권장
1. 대기대순환이란?	같은 굵기의 햇빛이 적도(좁은 면적)와 60°(약 2배 넓은 면적)에 닿는 모습 → 위도별 기온 → 에너지 과잉·부족 그래프(열적 불균형)	5	5분
2. 저위도의 공기 흐름	지구본을 세로로 잘라 단면으로 펼침 → 데워진 공기 덩어리 상승 → 해들리 순환이 상승·상층·하강 순서로 그려짐 → 30°에서 내려온 공기가 지표에서 적도 쪽·60° 쪽 두 갈래로 퍼짐	7	5분
3. 고위도의 공기 흐름	극에서 하강한 찬 공기와 30°에서 온 공기가 60°에서 만남(한대 전선) → 함께 상승 → 위에서 갈라져 극 순환·페렐 순환 완성 → 세 고리가 톱니바퀴처럼 맞물려 돎	7	6분
4. 시스템과 기압대	지표에 L(저기압)·H(고기압) 도장 → 단면을 다시 지구에 감아 기압대 띠 확인	5	4분
5. 강수	올라가는 공기 → 구름 → 비 / 내려오는 공기 → 구름이 사라짐 → 사막 지역 마커	5	5분
6. 바람	남북으로 곧은 바람 → 지구 자전 → 바람이 서서히 휘어짐(전향력) → 무역풍·편서풍·극동풍	7	6분
7. 결론 — 위도별 기후	열대 우림·사막·서안 해양성 기후 지역 마커 → 마커를 눌러 위도대 카드 확인	5	5분
8. 계절에 따른 기압대 이동	자전축 23.5°·공전 그림 → 7월·1월에 기압대가 연속으로 남북 이동 → 사바나(우기·건기)·지중해성(여름 건조·겨울 비) 기후	8	7분

한 차시에 모두 하기 어렵다면 1~4단계(대기대순환의 형성)와 5~8단계(기후와의 연결)로 나누어 두 차시로 운영해도 좋습니다.

4원하는 장면 바로 열기

주소 끝에 #단계-장면을 붙이면 그 장면이 바로 열립니다. 진행할 때마다 주소가 자동으로 바뀌므로, 수업을 멈춘 곳에서 새로고침해도 그 장면이 유지됩니다.

index.html#1-11단계 첫 장면(햇빛과 기온)

index.html#2-12단계 — 지구본을 잘라 단면으로

index.html#6-16단계 — 바람과 전향력

index.html#8-18단계 — 계절에 따른 기압대 이동

5자막 고치기

화면 자막은 모두 js/steps.js 파일 한 곳에 있습니다. 메모장이나 코드 편집기로 열어 따옴표 안의 문장만 바꾸고 저장한 뒤 새로고침하면 반영됩니다.

cap: 화면 자막 · body: 패널에 보이는 단계 설명
<b>…</b>로 감싼 부분은 굵게(파란색) 강조됩니다.
따옴표(")나 쉼표를 지우면 동작하지 않을 수 있으니, 고치기 전에 파일을 복사해 두세요.

6문제가 생겼을 때

증상	확인할 것
빈 화면 · "3D 라이브러리를 불러오지 못했습니다"	폴더 구조가 그대로인지 확인하세요(`index.html`, `style.css`, `js`, `assets`, `libs`가 한 폴더 안에 있어야 함). 압축 파일은 압축을 푼 뒤 실행하세요.
"3D 화면(WebGL)을 사용할 수 없습니다"	크롬·엣지로 다시 열어 보세요. 브라우저 설정에서 「그래픽 가속」이 꺼져 있으면 켜야 합니다.
화면이 느리거나 끊김	느린 컴퓨터에서는 몇 초 뒤 자동으로 화질을 낮춰 부드럽게 만듭니다. 다른 프로그램·탭을 닫고, 필요하면 왼쪽 패널을 닫아 보세요.
전체 화면이 안 됨	일부 기기는 전체 화면을 막습니다. 이때도 발표 모드(큰 자막·패널 숨김)는 그대로 쓸 수 있습니다.
키보드가 반응하지 않음	3D 화면을 한 번 클릭한 뒤 다시 눌러 보세요. 입력 칸에 커서가 있으면 단축키가 동작하지 않습니다.
애니메이션 없이 장면만 바뀜	기기 설정의 「동작 줄이기(움직임 최소화)」가 켜져 있으면 애니메이션 없이 완성된 장면이 바로 보입니다.

지구 사진: NASA Blue Marble(퍼블릭 도메인) · 글꼴: Pretendard 기반 AocSans(SIL OFL 1.1, assets/fonts/OFL.txt) · 3D 라이브러리: three.js · 외부 통신 없음