미니어처 세계

슬라이드 개요.md 를 끝까지 읽고, 회사를 작은 미니어처 세계(아이소메트릭 디오라마)로 만들고 카메라가 그 위를 끊김 없이 지나가며 이야기하는 16:9 3D 모션 발표물을 HTML 파일 하나로 만들어 발표.html 에 저장해 줘. Three.js를 쓴다.

1. 세계 설계
- 개요에 나오는 장소(본사, 공장, 물류센터, 팀 등)를 땅 하나 위에 배치한 미니어처 회사를 만든다. 장소가 없으면 주제에 맞는 상징 공간(사무실 층, 회의실, 서버실)을 만든다.
- 축척: 땅은 150×100 안팎의 떠 있는 판(옆면에 흙층, 둘레로 하늘이 보임), 사람 키 1.6, 건물 높이 3~8. 건물 정면과 인물은 카메라 쪽을 향하게.
- 장소 사이는 길·철도·컨베이어로 잇고, 그 위를 사람·차량·문서 상자가 오간다.
- 개요의 장마다 세계 안의 '자리'를 하나 정하고, 숫자는 세계 안의 사물로 보여 준다.
  - 사람 수: 작은 사람들이 건물로 들어가거나 광장에 모임. 많으면 한 명 = 10명처럼 단위를 정하고 화면에 표시
  - 단계·과정: 컨베이어 칸 수. 막히는 곳에 상자가 쌓이고 빨간 경광등
  - 시간 절약: 쌓였다 낮아지는 서류 더미, 시계탑
  - 확산·교육: 차량이 길을 따라 각 장소로 가고 도착한 건물에 불이 켜짐
  - 만든 것: 건물 옆에 하나씩 생기는 작은 가게·간판
  - 인용: 캐릭터 머리 위 말풍선
  - 일정: 철도·길 옆에 꽂힌 깃발(지난 일 파랑, 앞으로 할 일 주황), 카메라가 옆으로 따라감
  - 월별 추이: 땅에서 솟는 기둥
  - 몇 단계 중 몇 번째: 버스 정류장과 그 사이를 가는 버스
  - 질문·숙제: 인물 머리 위 주황 말풍선
  - 앞으로 할 일: 공사 중인 구역(비계, 크레인, 주황 표시). 처음부터 울타리와 크레인을 세워 두어 빈 터로 보이지 않게
- 사람처럼 단위를 줄인 숫자는 반올림하고(35명 → 4명), 정확한 숫자는 표지판에 쓴다.
- 첫 장면은 높은 곳에서 세계 전체를 보여 주며 내려오고, 마지막 장면은 다시 올라가 지나온 자리에 모두 불이 켜진 세계를 보여 준다.
- (선택) 만들기 전에 스토리보드(세계 배치도, 장면별 자리·카메라·사물 변화)를 먼저 보여 주고 확인을 받는다.

2. 화면과 재질
- Three.js 0.160.0 고정(importmap으로 CDN). 글꼴 Pretendard(CDN: https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/pretendardvariable.min.css). 1920×1080 무대를 창 크기에 맞춰 비율 유지. 픽셀 비율은 1.5 이하.
- 로우폴리, 평면 셰이딩(flatShading), 단순하고 통통한 장난감 비율(건물은 낮고 굵게, 사람은 머리가 큰 2.5등신).
- 밝은 파스텔: 하늘 #EAF2FF → #FDF6EC 그라데이션, 땅 #E7E2D6, 길 #CFC8B8, 물 #9CC9F0, 나무 #7BBF8E, 건물 벽 #F7F4EE. 강조는 파랑 #3B82F6(지난 일·지금), 주황 #F97316(앞으로 할 일).
- 조명: 따뜻한 해(방향광 강도 2.2, 그림자 켬, PCFSoft, 그림자 맵 2048), 하늘광(HemisphereLight 0.9). 톤매핑 ACESFilmic.
- 카메라: 화각 20~25°의 원근 카메라를 멀리 두고 위에서 35~45° 내려다봄(아이소메트릭 느낌).
- 질감: 아주 옅은 그레인, 화면 위아래를 약하게 흐려 미니어처 느낌(틸트시프트, CSS로 하고 글자는 흐림 밖에).

3. 카메라 (숫자로 정함)
- 자리 사이 이동 2~3초(easeInOutCubic), 이동 중 살짝 위로 올랐다 내려오는 곡선. 자리에 도착하면 건물 1~3개와 그 표지판이 화면 가운데 60%를 채우게.
- 구도: 왼쪽 위 제목 판(약 900×300) 자리를 비우고, 주요 사물과 표지판은 그 아래나 오른쪽에 온다.
- 한 장면 안에서 여러 자리를 돌 수 있다(인용마다 그 사람에게로, 일정은 옆으로 따라가기).
- 도착 뒤에도 아주 느리게 계속 움직인다(초당 0.4° 회전, 발표 모드에서 머무는 동안은 ±6° 안에서 오감).
- 멀리서 보는 장면은 작은 변화가 안 보이니 표시(풍선, 지붕 등)를 키우거나 덧붙인다.
- 세계는 늘 살아 있다: 사람은 걷고(다리 흔들림 2Hz), 차는 달리고, 구름은 흐르고, 나무는 흔들린다.

4. 사물 움직임
- 새로 생기는 사물은 스프링(감쇠비 0.55 안팎, 최고 1.1배)으로 튀어나온다(크기 0 → 1.1 → 1). 여러 개면 0.04초 간격.
- 숫자가 바뀌면 사물도 함께 바뀐다(컨베이어 칸이 줄고, 서류 더미가 낮아지고, 불 켜진 창이 늘어남).

5. 글자
- 한글 3D 글꼴은 쓰지 않는다. 글자는 HTML 겹침(CSS2DRenderer 등)으로 3D 위치에 붙인다.
- 장면 제목은 화면 왼쪽 위 고정 자리(52px 이상, 흰 반투명 판 위). 큰 숫자는 사물 위 표지판처럼(80~140px). 숫자가 여럿이면 하나만 표지판에, 나머지는 제목 판 아래 설명 한 줄(40자 이내).
- 목록이 필요한 장(일정, 기능)은 한 줄씩 목록 대신 세계 안 이름표로 흩어 놓는다.
- 말풍선은 흰 바탕, 굵은 테두리, 꼬리가 캐릭터를 가리킨다. 웹툰처럼 튀어나오고 글자는 한 줄씩.
- 글자도 마스크 안에서 아래에서 올라오며 들어오고, 위로 빠지며 나간다.

6. 금지
- 정해진 자리에서 투명도만 바뀌며 나타나기, 글머리 기호 목록이 한 줄씩 등장, 카드가 옆에서 미끄러져 들어오기, 장면 사이가 빈 화면으로 끊기기, 카메라 순간 이동, 등속 움직임, 세계가 멈춰 있는 화면, 화면 전체를 덮는 2D 패널.

7. 문구
- 장면 제목은 존댓말 문장, 나머지는 명사형. 한 화면에 제목 하나, 큰 숫자 하나, 짧은 설명 한두 줄.
- 숫자·이름·인용은 개요에 있는 것만 쓴다. 새 숫자를 만들지 않고, 인용과 질문은 원문 그대로. 기준일·출처는 작은 글씨로.

8. 렌더 계약 (MP4로 뽑을 수 있게)
- 화면은 시간 t(초)만으로 정해진다. window.renderAt(t)를 부르면 그 시각의 카메라·사물·사람·글자를 그 자리에서 그린다. window.DURATION에 전체 길이(초).
- setTimeout, CSS transition·animation, Date.now, Math.random을 쓰지 않는다. 난수는 시드를 고정한 함수로, 스프링과 걷기도 t로 계산하는 식으로.
- 실시간 재생은 requestAnimationFrame으로 t를 진행시키며 같은 그리기 함수를 부른다. 바깥에서 renderAt(t)를 부르면 실시간 재생을 멈춘다.
- 발표 모드에서 멈춘 동안 세계의 움직임과 카메라 오감은 실제로 흐른 시간으로, 등장 움직임은 이야기 시간 t로 계산한다(renderAt(t)에서는 둘이 같음).
- WebGLRenderer는 preserveDrawingBuffer: true. 글꼴 준비가 끝나면 풀리는 window.READY(Promise). 글꼴 대기는 3초 상한(requestAnimationFrame으로 잼).

9. 재생과 조작
- 기본은 발표 모드: 장면에 들어가면 카메라 이동과 등장 움직임이 재생되고, 다 나타난 상태로 멈춰 기다린다(세계의 움직임은 계속). →·Space·Enter·PageDown·클릭으로 다음, ←·PageUp으로 이전(이전 장면은 다 나타난 상태로). 재생 중에 다음을 누르면 장면 안 멈춤 지점이 남았으면 그 지점으로, 없으면 다음 장면으로 바로 넘어간다.
- 모바일: 탭으로 다음, 화면 왼쪽 1/3 탭은 이전, 좌우 스와이프로 이전·다음. window의 click 대신 pointerdown·pointerup으로 처리한다(아이폰 Safari는 화면 탭을 window click으로 보내지 않음). touch-action: none. 마우스 클릭은 어디를 눌러도 다음이고, 한 번 눌러 두 장 넘어가지 않게 한다.
- 인용처럼 장면 안에서 차례로 바뀌는 곳은 바뀔 때마다 멈춘다. ←는 이전 장면(다 나타난 상태).
- A로 자동 재생(영상 모드) 켜고 끄기. 자동 재생에서는 Space 일시정지, 마지막에서 멈춘다. F 전체화면, H·Home 처음부터.
- 화면 아래에 얇은 진행 막대와 '번호 / 전체 · 장면 이름', 키 안내는 처음 3초만.
- 주소 옵션: ?s=N(N번 장면으로 가는 이동부터), ?t=초(그 시각에서 멈춤), ?auto(자동 재생으로 시작), ?record(자동 재생 + 진행 막대·안내 숨김)
- 지금 장면 번호를 주소 끝에 #N으로 표시한다(history.replaceState). 새로고침하거나 #N으로 열면 그 장면부터 시작하고, 주소의 #N을 바꾸면 그 장면으로 다시 연다. #N이 있으면 ?s보다 먼저 따른다.
- 외부 파일은 글꼴 CDN과 Three.js CDN만.

10. 검수
- 브라우저 자동화(Playwright 등)로 1920×1080에서 renderAt(t)를 불러, 장면마다 카메라가 도착한 프레임과 이동 중간 프레임, 첫·마지막 전체 세계를 캡처해 직접 본다. 헤드리스 크롬은 --use-angle=metal(맥) 등으로 GPU를 켠다.
- 확인할 것: 글자와 건물 겹침, 표지판이 화면 밖이나 제목 판 뒤로 감, 인물이 건물·나무에 가려짐, 말풍선이 캐릭터를 가리키는지, 그림자가 너무 진하거나 깨지는지, PPT처럼 보이는 곳.
- 사람·차·기차 경로는 정지 캡처로 판단하기 어려우니 경로 좌표를 건물 경계 상자와 대조해 뚫고 지나가는 곳을 찾는다.
- 발표 모드(멈춤, 다음, 이전, 클릭, A)도 눌러 본다.
- 모바일 확인: 아이폰 가로 화면 흉내(Playwright webkit + iPhone 기기 설정)로 탭·왼쪽 탭·스와이프가 넘어가는지 눌러 본다(WebKit에는 스와이프 기능이 없으니 PointerEvent를 직접 만들어 확인).
- 고칠 것을 '몇 초, 무엇을, 어떻게'로 적고 고친 뒤 다시 캡처한다(2~4회). 확인한 것과 못 한 것을 나눠 알려 주고, 캡처 파일은 끝나면 지운다.