3D 데이터 조형

슬라이드 개요.md 를 끝까지 읽고, 성과 숫자가 3D 공간의 물체가 되고 카메라가 그 사이를 끊김 없이 지나가는 16:9 3D 모션 영상을 HTML 파일 하나로 만들어 발표.html 에 저장해 줘. Three.js를 쓴다.

1. 장면 설계
- 하나의 3D 공간에 개요의 장마다 '자리'를 만들고 카메라가 순서대로 지나간다. 장면 사이를 자르지 않는다. 장면당 6~10초(인용은 12초까지), 전체 2~3분.
- 자리는 25~30 간격으로 몇 줄을 뱀 모양으로 이어 놓고, 바닥의 빛의 길로 잇는다(지나온 만큼 켜짐). 자리 사이에는 낮은 어두운 건물을 채우되 카메라 경로와 시선은 비운다.
- 숫자마다 물체를 정한다.
  - 사람·건수: 작은 큐브 여러 개(InstancedMesh). 비율은 그중 일부가 켜지는 것으로(예: 1,200개 중 812개)
  - 추이: 바닥에서 솟는 빛기둥
  - 단계·과정: 레일 위를 지나가는 블록. 막히는 곳은 블록이 쌓이고 붉게 맥박침
  - 거점·확산: 지형 위 지점과 그 사이를 흐르는 빛 궤적
  - 기능·구성: 중심 물체 주위를 도는 위성
  - 로드맵: 계단·플랫폼
  - 인용: 공중에 뜬 큰 따옴표 아래 글자
  - 숫자가 없는 장(결론, 질문): 와이어 상자, 3D 물음표 같은 상징 물체
- 표지는 제목을 왼쪽 가운데에 크게. 마지막 장면은 카메라가 높이 올라가 지나온 자리가 한 도시처럼 한눈에 보이고(안개를 0.006 안팎으로 줄임), 핵심 메시지를 다시 띄운다.
- (선택) 만들기 전에 스토리보드(자리 배치도, 장면별 카메라 위치·이동, 물체)를 먼저 보여 주고 확인을 받는다.

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 이하.
- 어두운 스튜디오: 배경 #05070D, 물체가 은은하게 비치는 짙은 바닥(반사면 Reflector 등을 약하게, 바닥과 반사면의 깊이가 겹쳐 멀리서 줄무늬가 생기지 않게 살짝 띄움), 안개(FogExp2 밀도 0.035)로 깊이감.
- 조명: 키(앞 위 45°, 강도 2.5), 림(뒤, 파랑), 바닥에 퍼지는 파랑 보조광. 톤매핑 ACESFilmic, 노출 1.1.
- 물체 색: 지난 일·지금은 파랑 #3B82F6, 앞으로 할 일은 주황 #F97316, 나머지는 회색 #2A3140, 병목·경고는 빨강 #EF4444. 발광 물체는 바탕색을 0.3배로 어둡게 하고 색은 발광으로 낸다(emissiveIntensity 작은 물체 1.5~2.5, 넓은 면 1.2~1.5). 그래야 허옇게 날아가지 않는다.
- 후처리: 블룸(강도 0.8, 반경 0.4, 문턱 0.75), 필름 그레인, 가장자리 어둡게.

3. 카메라 (숫자로 정함)
- 화각 35°. 자리 사이 이동 1.6~2.4초(easeInOutCubic), 경로는 곡선(CatmullRom)으로 높이를 조금씩 바꾸며.
- 이름 있는 움직임을 섞는다: 밀고 들어가기(push-in), 옆으로 흐르기(truck), 주위 돌기(orbit 15~30°), 크레인 업.
- 도착 뒤에도 멈추지 않고 아주 느리게 계속 움직인다(초당 0.5° 회전 또는 0.05 전진, 발표 모드에서 머무는 동안은 ±6° 안에서 오감). 미세한 흔들림(화면 기준 0.1° 안팎).
- 이동 중간이 빈 바닥이 되지 않게: 시선은 이동의 70~75% 시점에 다음 자리에 먼저 도착하고, 다음 물체는 카메라가 다가가는 동안 솟기 시작한다.

4. 물체 움직임
- 솟거나 켜질 때 스프링(감쇠 0.6~0.7)으로 살짝 넘쳤다가 자리 잡는다. 여러 개면 0.02~0.05초 간격으로 물결치듯, 수백 개 이상이면 2~3초 안에 지나가는 물결로.
- 숫자 카운트업은 물체가 자라는 것과 같은 곡선으로, 단 최종값을 넘지 않게(개요에 없는 숫자가 잠깐이라도 보이지 않게).
- 빛 궤적은 선 위를 흐르는 대시로. 막힌 곳은 1초 주기로 붉게 맥박.

5. 글자
- 한글 3D 글꼴은 쓰지 않는다. 글자는 HTML 겹침(CSS2DRenderer 등)으로 3D 위치에 붙이거나, 캔버스에 그린 글자를 텍스처로 쓴다.
- 장면 제목은 화면 왼쪽 위 고정 자리(56px 이상), 큰 숫자는 물체 옆에 붙어 카메라와 함께 움직인다(90~160px). 장면마다 카메라 구도를 맞춰 제목 자리(왼쪽 위 약 900×180)에 라벨이 들어오지 않게 한다.
- 작은 라벨(일정·위성·거점 이름표)은 22px 이상, 빛 위에서도 읽히게 어두운 글자 그림자. 기준일·출처는 오른쪽 아래 고정.
- 글자도 마스크 안에서 아래에서 올라오며 들어오고, 위로 빠지며 나간다.

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

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

8. 렌더 계약 (MP4로 뽑을 수 있게)
- 화면은 시간 t(초)만으로 정해진다. window.renderAt(t)를 부르면 그 시각의 카메라·물체·글자를 그 자리에서 그린다. window.DURATION에 전체 길이(초).
- setTimeout, CSS transition·animation, Date.now, Math.random을 쓰지 않는다. 난수는 시드를 고정한 함수로, 스프링도 t로 계산하는 식으로.
- 실시간 재생은 requestAnimationFrame으로 t를 진행시키며 같은 그리기 함수를 부른다. 바깥에서 renderAt(t)를 부르면 실시간 재생을 멈춘다(MP4 캡처 사이에 화면이 덮어써지지 않게).
- WebGLRenderer는 preserveDrawingBuffer: true. 글꼴·텍스처 준비가 끝나면 풀리는 window.READY(Promise).

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보다 먼저 따른다.
- 발표 모드에서 멈춘 동안의 계속 움직임도 시간 t로 계산한다(장면 끝 시각에 머무는 동안 흐른 시간을 따로 더함). renderAt(t)는 자동 재생 시간축 그대로.
- 외부 파일은 글꼴 CDN과 Three.js CDN만.

10. 검수
- 브라우저 자동화(Playwright 등)로 1920×1080에서 renderAt(t)를 불러, 장면마다 카메라가 도착한 프레임과 이동 중간 프레임, 마지막 전경을 캡처해 직접 본다. 헤드리스 크롬은 --use-angle=metal(맥) 등으로 GPU를 켠다.
- 확인할 것: 글자와 물체 겹침, 라벨이 제목 자리에 들어옴, 글자 잘림, 허옇게 날아가거나 블룸으로 번진 곳, 이동 중 빈 바닥만 보이는 프레임, 멀리서 생기는 줄무늬, PPT처럼 보이는 곳.
- 발표 모드(멈춤, 다음, 이전, 클릭, 도중에 넘기기, A)도 눌러 본다.
- 모바일 확인: 아이폰 가로 화면 흉내(Playwright webkit + iPhone 기기 설정)로 탭·왼쪽 탭·스와이프가 넘어가는지 눌러 본다(WebKit에는 스와이프 기능이 없으니 PointerEvent를 직접 만들어 확인).
- 고칠 것을 '몇 초, 무엇을, 어떻게'로 적고 고친 뒤 다시 캡처한다(2~4회). 확인한 것과 못 한 것을 나눠 알려 주고, 캡처 파일은 끝나면 지운다.