모션 쇼릴

슬라이드 개요.md 를 끝까지 읽고, After Effects 모션 디자이너의 쇼릴처럼 도형·선·글자·숫자가 박자에 맞춰 변하며 이어지는 16:9 모션 그래픽 영상을 HTML 파일 하나로 만들어 발표.html 에 저장해 줘.

1. 장면 설계
- 개요의 장마다 메시지 한 문장과 숫자 하나(없으면 도형 하나)를 고른다. 항목이 여럿이면 가장 중요한 하나만, 인용도 하나만. 장면당 3~6초, 전체 60~90초.
- 글은 다 보인 뒤 '한 글자 0.06초 + 1초' 이상 머문다(원문이라 줄일 수 없는 질문·인용은 장면을 늘린다).
- 장면 사이 연결을 먼저 정한다. 앞 장면의 마지막 도형이 다음 장면의 첫 도형이 된다. 예: 원이 커져 화면을 덮고 다음 배경이 됨, 막대가 늘어나 다음 장면의 선이 됨, 숫자 0이 고리가 됨, 점이 쪼개져 여러 점이 됨.
- (선택) 만들기 전에 스토리보드(장면별 시작·끝 모습, 연결 방식, 박자)를 먼저 보여 주고 확인을 받는다.

2. 화면
- 1920×1080 무대를 창 크기에 맞춰 비율을 유지한 채 확대·축소. 글꼴 Pretendard(CDN: https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/pretendardvariable.min.css), word-break: keep-all.
- 색 면 중심: 짙은 남색 #0B1020, 흰색 #F5F3EE, 파랑 #2563EB(지난 일·지금), 주황 #F97316(앞으로 할 일). 장면마다 바탕색이 바뀌며 리듬을 만든다. 같은 바탕색이 연달아 오지 않게 하고, 화면을 덮는 큰 도형(말풍선 등)도 바탕으로 친다.
- 주황 바탕 위 강조 단어는 남색으로(흰색은 대비가 낮음). 병목·경고는 빨강 #EF4444.
- 질감: 필름 그레인(불투명도 4%), 가장자리 어둡게.
- Canvas 2D 또는 SVG로 그리고, 타임라인은 직접 작성한다(라이브러리를 쓰면 버전 고정, 시간으로 되감을 수 있는 것만).
- Canvas에서 쓰는 글꼴은 부분 글꼴(dynamic-subset) 대신 Pretendard 가변 글꼴 전체 파일로(첫 프레임에 다른 글꼴로 보이지 않게).

3. 움직임 (숫자로 정함)
- 박자: 120BPM(한 박 0.5초). 전환, 숫자 착지, 핵심 단어 등장은 박자에 맞추고, 전환은 장면 경계 박자에 끝나게.
- 이징: 등속 금지. 들어오기 easeOutExpo 0.4~0.6초, 나가기 easeInExpo 0.3초, 착지는 스프링(감쇠 0.5~0.6, 진동수 4Hz)으로 살짝 튕김.
- 셰이프: 원·사각·선·삼각이 선부터 그려지고(trim path) 면이 채워지며, 커지고, 쪼개지고, 합쳐진다. 작은 도형들은 2~4프레임씩 늦게 따라온다(follow-through).
- 전환: 원 확장(아이리스), 사선 슬래시, 화면 분할 밀기, 도형 변형(원 → 둥근 사각 → 막대), 한 요소로 확대해 들어가기 중 장면 내용에 맞게. 같은 전환을 연달아 쓰지 않는다. 다음 장면의 첫 요소는 전환이 끝나고 0.1초 안에 보인다(빈 화면 금지).
- 글자: 제목 문장은 마스크 안에서 글자 단위로 아래에서 올라오고(글자 간격 0.03초), 긴 설명 줄은 단어 단위(0.05초 간격). 핵심 단어는 3D로 뒤집히며 들어온다(rotateX 90° → 0°, 원근 1200px. Canvas 2D면 가로 띠로 잘라 원근을 흉내 내거나 그 단어만 DOM으로).
- 크기: 제목 문장 72~80px, 숫자와 핵심 구절만 120~200px.
- 숫자: 자리마다 굴러가며 맞춰지고(구르는 동안 세로로 늘어나 모션 블러처럼), 착지할 때 스프링으로 튕기며 주변에 충격선 6~8개가 퍼진다.
- 이전 → 이후 비교: 이전 숫자가 조각나 흩어지고 그 조각이 모여 새 숫자가 된다.
- 장면 안에서도 무언가 늘 조금씩 움직인다(배경 도형의 느린 회전, 선의 흐름).

4. 효과음
- Web Audio로 직접 합성: 전환에 '휙'(필터가 훑는 노이즈 0.3초), 숫자 착지에 '쿵'(60Hz 사인 0.15초), 글자·눈금에 '틱'(짧은 클릭). 소리는 화면 사건보다 1프레임 늦게.
- 첫 클릭이나 키 입력 뒤에 소리 시작, M으로 끄고 켜기. 0.25초 넘게 건너뛸 때는 소리를 내지 않는다.

5. 금지
- 정해진 자리에서 투명도만 바뀌며 나타나기, 글머리 기호 목록이 한 줄씩 등장, 카드가 옆에서 미끄러져 들어오기, 장면 사이가 빈 화면으로 끊기기, 등속 움직임, 표와 세 줄 넘는 글.

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

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

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

9. 검수
- 브라우저 자동화(Playwright 등)로 1920×1080에서 renderAt(t)를 불러, 장면마다 다 자리 잡은 프레임과 전환 프레임(전환 시작 +0.15초, +0.3초, 전환 끝, 다음 장면 +0.1초·+0.3초)을 캡처해 직접 본다. 마지막에 0.1초 간격으로 전체를 훑어 빈 화면과 한 프레임짜리 잔상을 찾는다.
- 확인할 것: PPT처럼 보이는 곳(제자리 등장, 미끄러져 들어오기), 전환 중 빈 화면, 글자 겹침·잘림, 박자에 안 맞는 사건.
- 발표 모드에서 멈추는 프레임이 모두 완성된 화면인지(글자가 덜 나왔거나 빠지기 시작한 상태가 아닌지), 다음·이전·클릭·A도 눌러 본다.
- 모바일 확인: 아이폰 가로 화면 흉내(Playwright webkit + iPhone 기기 설정)로 탭·왼쪽 탭·스와이프가 넘어가는지 눌러 본다(WebKit에는 스와이프 기능이 없으니 PointerEvent를 직접 만들어 확인).
- 고칠 것을 '몇 초, 무엇을, 어떻게'로 적고 고친 뒤 다시 캡처한다(2~4회). 확인한 것과 못 한 것을 나눠 알려 주고, 캡처 파일은 끝나면 지운다.