줌 아웃

슬라이드 개요.md 를 끝까지 읽고, 한 사람의 업무 화면에서 회사 전체까지 끊김 없이 줌 아웃하며 숫자가 층위마다 쌓이는 16:9 모션 영상을 HTML 파일 하나로 만들어 발표.html 에 저장해 줘.

1. 층위 설계
- 개요의 숫자와 사례를 층위 4~6개로 나눈다. 예: 한 칸(엑셀 한 칸, 한 사람의 반복 업무, 현장 인용) → 책상(한 사람의 하루·주) → 팀(팀 수, 업무 단계) → 사업장(본사·공장·물류센터, 교육) → 회사(사용자, 만든 앱, 아낀 시간) → 다음(내년 과제).
- 층위 하나가 장면 하나. 아래 층위는 위 층위 그림 안의 정확한 한 자리에 들어 있다(엑셀 한 칸은 모니터 안에, 모니터는 책상 위에, 책상은 팀 층 평면도 안에, 팀 층은 건물 안에, 건물은 회사 지도 안에).
- 숫자도 층위를 따라 쌓인다(한 사람 주 몇 시간 → 팀 → 회사 월 몇 시간처럼 개요에 있는 숫자로만). 그 층위 단위의 숫자가 개요에 없으면 회사 전체 숫자를 아래 층위에 두거나, 숫자 없이 사물 변화(켜지는 화면 수 등)로 보여 준다.
- 공간 사슬은 첫 장면의 인용·사례의 소속이 정한다(예: 물류센터 운영팀 인용이면 한 칸 → 그 사람 책상 → 운영팀 → 물류센터 → 회사).
- 방향은 기본이 줌 아웃(작은 변화가 커짐). 개요가 '전체에서 현장으로' 가는 이야기면 줌 인으로 바꾼다.
- '다음(내년 과제)'은 공간적으로 더 큰 층위가 아니므로, 가장 큰 층위에서 1.2~1.5배 물러서는 마지막 장면으로 둔다. 처음 그 한 칸이 아직 작게 빛나고, 앞으로 할 일은 그 둘레로 주황 잔물결이 번지며.
- (선택) 만들기 전에 층위 표(층위, 그림, 숫자, 다음 층위 안 자리, 장면 길이)를 먼저 보여 주고 확인을 받는다.

2. 줌 방식
- 무한 줌: 층위마다 그림을 따로 그리되, 다음 층위 그림 안 정확한 자리에 이전 층위가 들어가도록 크기와 위치를 맞춘다(층위 사이 배율 8~20배).
- 카메라는 다음 층위 안 자리(이전 층위가 들어 있는 점)를 고정점으로 확대·축소한다. 배율은 로그 스케일로 보간하고 이동 하나에 easeInOutCubic(가속·감속은 이동 안에서만, 출렁임 없음). 층위 사이 이동 2.5~4초, 이동 중 회전 ±3°는 이동 끝에 0으로 돌아온다.
- 너무 작아져 안 보이는 층위는 흐려지며 사라지고, 새로 보이는 층위는 줌과 동시에 선부터 그려진다(크로스페이드만으로 바꾸지 않음).
- 지금 층위에 이전 층위의 자리를 빛나는 점이나 테두리로 늘 표시한다('여기서 왔다').

3. 화면
- 1920×1080 무대를 창 크기에 맞춰 비율 유지. 글꼴 Pretendard(CDN: https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/pretendardvariable.min.css), word-break: keep-all.
- 2D(SVG 또는 Canvas)로, 모든 층위를 위에서 본 평면도 선화로 통일한다. 모니터처럼 위에서 안 보이는 사물은 펼친 노트북처럼 위에서도 화면이 보이는 사물로 바꾼다.
- 어두운 배경의 비네트·그라디언트는 띠가 생기지 않게 디더를 넣는다.
- 배경 짙은 남색 #0B1020, 선화는 흰 선 2~3px(불투명 70%), 강조 파랑 #3B82F6, 앞으로 할 일 주황 #F97316.
- 숫자는 화면 오른쪽 아래 고정 자리에 층위마다 쌓인다: 이전 층위 숫자는 40~60px로 작아지며 위로 밀리고, 새 숫자가 아래에 크게(120~180px, 단위는 숫자의 40%).
- 장면 제목은 왼쪽 위(56px), 설명 한두 줄과 출처는 제목 아래. 줌 이동 중에는 제목을 숨기고 도착 뒤 마스크 안에서 올라온다.
- 층위 이름표(한 칸 · 책상 · 팀 …)는 화면 위쪽에 작은 눈금으로 지금 위치만 표시하고, 그림 안에는 이름표를 붙이지 않는다.

4. 움직임
- 숫자는 줌이 끝나기 0.3초 전부터 굴러가며 맞춰진다. 최종값을 넘지 않게.
- 구조(벽, 외곽선, 길)는 줌과 동시에 선부터 그려지고, 사물(사람, 집기, 기계)은 줌이 멈춘 뒤 0.03초 간격으로 그려진다.
- 멈춘 동안에도 화면이 살아 있게: 빛나는 점의 맥박(1.5초 주기), 아주 느린 줌 드리프트(초당 0.5%, 최대 3~4%에서 잦아듦). 다음 이동은 드리프트한 그 자리에서 이어진다.

5. 금지
- 층위 사이 컷, 크로스페이드로만 층위 바꾸기, 정해진 자리에서 투명도만 바뀌며 나타나기, 글머리 기호 목록, 등속 움직임, 줌이 빨라졌다 느려지는 출렁임, 층위 그림 안에 이전 층위 자리가 없음.

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

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

8. 재생과 조작
- 기본은 발표 모드: 장면에 들어가면 등장 움직임이 재생되고, 다 나타난 상태로 멈춰 기다린다(계속 움직임은 유지). →·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 하나만.

9. 검수
- 브라우저 자동화(Playwright 등)로 1920×1080에서 renderAt(t)를 불러, 장면마다 줌이 멈춘 프레임과 줌 중간 프레임(배율 25%·50%·75% 지점), 마지막 전체를 캡처해 직접 본다. 헤드리스 크롬은 --use-angle=metal(맥) 등으로 GPU를 켠다.
- 확인할 것: 이전 층위가 다음 층위 안 정확한 자리에 들어 있는지(층위 경계 양쪽의 변환 값과 처음 한 칸의 화면 위치를 수치로 비교), 한 이동 안의 배율 변화가 매끄러운지, 숫자 쌓임이 겹치지 않는지, 너무 작은 선이 지글거림, PPT처럼 보이는 곳.
- 발표 모드에서 멈추는 프레임이 모두 완성된 화면인지(덜 나왔거나 빠지기 시작한 상태가 아닌지), 다음·이전·클릭·A도 눌러 본다.
- 모바일 확인: 아이폰 가로 화면 흉내(Playwright webkit + iPhone 기기 설정)로 탭·왼쪽 탭·스와이프가 넘어가는지 눌러 본다(WebKit에는 스와이프 기능이 없으니 PointerEvent를 직접 만들어 확인).
- 고칠 것을 '몇 초, 무엇을, 어떻게'로 적고 고친 뒤 다시 캡처한다(2~4회). 확인한 것과 못 한 것을 나눠 알려 주고, 캡처 파일은 끝나면 지운다.