개념 설명

슬라이드 개요.md 를 끝까지 읽고, 3Blue1Brown 영상처럼 어두운 바탕 위에서 선·도형·숫자·식이 다른 형태로 이어서 변하며 개념을 설명하는 16:9 모션 발표물을 HTML 파일 하나로 만들어 발표.html 에 저장해 줘.

1. 장면 설계
- 장마다 '청자가 이해할 것'을 그림 하나로 설명할 방법을 정한다. 설명은 2~4단계로 나누고, 단계마다 화면 위 형태가 다음 형태로 변한다.
- 핵심 원칙: 새 요소를 따로 띄우지 않고, 이미 있는 요소가 변해서 다음 내용이 된다. 예:
  - 상자 6개가 쪼개져 19개가 되고, 병목 3곳이 강조됐다가 묶여 8개가 됨
  - 흩어진 점 1,200개가 격자로 정렬되고, 그중 812개가 색이 바뀌며 한쪽으로 모여 비율 막대가 됨
  - 막대그래프의 막대 꼭대기가 이어져 선 그래프가 됨
  - 숫자 '19'가 쪼개져 19개의 칸이 됨
  - 식(a × b = c)의 각 항이 해당 도형으로 날아가 붙음
- 장면 사이도 변형으로 잇는다. 앞 장면의 마지막 형태 일부가 남아 다음 장면의 시작이 된다. 이 변형은 다음 장면의 첫 단계로 친다.
- 바꿀 원본이 없는 첫 요소(덱의 첫 도형, 점 수백 개)는 선이나 점 하나에서 그려지며 생긴다.
- 서로 다른 양 사이를 변형할 때는 크기·개수가 거짓 비율을 암시하지 않게 점·선 같은 중립 형태를 거친다.
- 한 번에 한 생각에 맞지 않는 개요 항목은 관련 장면으로 옮기거나 빼고, 무엇을 옮기고 뺐는지 알려 준다.
- 표지와 마무리는 왼쪽 위 제목 없이 가운데에 크게.
- (선택) 만들기 전에 스토리보드(장면별 단계, 각 단계의 시작·끝 형태, 장면 사이 연결)를 먼저 보여 주고 확인을 받는다.

2. 화면
- 배경 #0E1015, 기본 선·글자 #ECEFF4, 보조 #8B93A7, 빈 칸·아직 없음 #3A3F4B. 강조색 파랑 #58A6FF(지난 일·지금), 주황 #FFA657(앞으로 할 일, 앞으로 풀 병목). 세 번째 강조가 꼭 필요하면 초록 #7EE787만.
- 1920×1080 무대를 창 크기에 맞춰 비율 유지. 글꼴 Pretendard(CDN: https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/pretendardvariable.min.css), 숫자는 고정폭 숫자(tabular-nums).
- 선 두께 3~4px, 도형은 테두리 위주에 옅은 채움(불투명도 15~25%). 찬 칸과 빈 칸을 대비할 때는 찬 칸 60~80%, 빈 칸 0~10%. 장식 없음, 여백 넉넉히.
- 사각형을 경로 보간하면 모서리가 깎이니 모서리마다 점 수를 고정하거나 사각형 값(위치·크기)으로 보간한다.
- SVG 또는 Canvas 2D. 도형 변형은 점 개수를 맞춘 경로 보간(path morph)으로.

3. 움직임 (숫자로 정함)
- 그려지기: 선이 stroke-dashoffset으로 그려지고(0.6~1.0초), 이어서 채움이 차오른다(0.3초).
- 변형: 위치·모양·색·크기가 함께 바뀌며 0.8~1.4초(easeInOutCubic). 여러 개가 변할 때는 0.02~0.04초 간격으로 차례로, 수백 개 이상이면 전체가 0.7초 안에 퍼지게.
- 강조: 대상 주위에 테두리가 그려졌다 사라지거나, 0.3초 동안 1.15배로 커졌다 돌아온다.
- 숫자: 변하는 동안 값이 연속으로 바뀐다(쉼표·소수 자리 유지). 평균·비율처럼 중간값이 틀린 뜻이 되는 숫자는 0부터 올리지 않고 이전 값에서, 없으면 바로 최종값으로.
- 화면 이동·확대: 다음 설명 자리가 화면 밖이거나 한 요소 안으로 들어갈 때 화면 전체가 1.2초 동안 밀리거나 확대된다. 이동하는 동안에는 제목·자막을 새로 쓰지 않는다.
- 등속 금지. 한 번에 한 가지만 움직인다(동시에 움직이는 무리는 하나).

4. 글자
- 장면 제목은 왼쪽 위(52px, 존댓말 문장). 설명은 아래쪽 자막처럼 한 줄(30~34px), 단계마다 바뀐다. 질문 원문처럼 그림 자체가 글인 곳은 38px 안팎, 마무리 문장은 80px 안팎.
- 인용은 원문을 자막 줄에 쓰고, 출처는 해당 라벨을 밝게 하고 작은 글씨로 덧붙인다.
- 도형 옆 라벨은 도형과 함께 움직인다(24~28px).
- 글자도 왼쪽에서 오른쪽으로 그려지듯 나타나고, 다음 단계에서 변형되거나 접히며 사라진다.

5. 금지
- 정해진 자리에서 투명도만 바뀌며 나타나기, 글머리 기호 목록, 카드가 미끄러져 들어오기, 장면 사이가 빈 화면으로 끊기기, 등속 움직임, 아이콘·일러스트 장식, 한 화면에 설명 문장 두 줄 이상.

6. 문구
- 장면 제목은 존댓말 문장, 설명 자막과 라벨은 명사형. 원문이 화면에 따로 있으면 자막은 줄여 써도 된다(예: '질문 2 · 데이터').
- 숫자·이름·인용은 개요에 있는 것만 쓴다. 새 숫자를 만들지 않고, 인용과 질문은 원문 그대로. 기준일·출처는 작은 글씨로.

7. 렌더 계약 (MP4로 뽑을 수 있게)
- 화면은 시간 t(초)만으로 정해진다. window.renderAt(t)를 부르면 그 시각의 화면을 그 자리에서 그린다. window.DURATION에 전체 길이(초, 자동 재생의 머묾 포함).
- 단계 안 움직임이 그 단계 길이를 넘어 잘리지 않게 한다.
- setTimeout, CSS transition·animation, Date.now, Math.random을 쓰지 않는다. 난수는 시드를 고정한 함수로.
- 실시간 재생은 requestAnimationFrame으로 t를 진행시키며 같은 그리기 함수를 부른다. 바깥에서 renderAt(t)를 부르면 실시간 재생을 멈춘다.
- 글꼴 준비가 끝나면 풀리는 window.READY(Promise).

8. 재생과 조작
- 기본은 발표 모드: 열면 첫 단계를 재생하고 멈춘다. 이후 단계마다 멈춘다. →·Space·Enter·PageDown·클릭으로 다음 단계를 재생하고(재생 중에 눌러도 바로 다음 단계로. 누를 때마다 반드시 한 단계씩 넘어감), 장면의 마지막 단계에서 누르면 장면 사이 변형을 재생하며 다음 장면으로. ←·PageUp은 이전 단계가 끝난 상태로.
- 모바일: 탭으로 다음, 화면 왼쪽 1/3 탭은 이전, 좌우 스와이프로 이전·다음. window의 click 대신 pointerdown·pointerup으로 처리한다(아이폰 Safari는 화면 탭을 window click으로 보내지 않음). touch-action: none. 마우스 클릭은 어디를 눌러도 다음이고, 한 번 눌러 두 장 넘어가지 않게 한다.
- A로 자동 재생 켜고 끄기(단계 사이 1.5초 머묾). 자동 재생에서는 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)를 불러, 단계마다 끝난 프레임과 변형 중간 프레임(시작 +40%)을 캡처해 직접 본다. 장면 사이 변형은 0.4초 간격으로 따로 촘촘히 본다.
- 단계 끝 프레임과 그 1.5초 뒤 프레임을 픽셀로 비교해, 단계 길이에 잘려 덜 끝난 움직임(덜 써진 라벨 등)을 찾는다.
- 확인할 것: 변형 중에 형태가 꼬이거나 뒤집히는지(점 개수·순서), 새 요소가 갑자기 생기는 곳, 라벨 겹침, 자막이 그림과 맞는지, 한 화면에 생각이 두 개인 곳.
- 발표 모드(단계 멈춤, 다음, 이전, 클릭, A)도 눌러 본다.
- 모바일 확인: 아이폰 가로 화면 흉내(Playwright webkit + iPhone 기기 설정)로 탭·왼쪽 탭·스와이프가 넘어가는지 눌러 본다(WebKit에는 스와이프 기능이 없으니 PointerEvent를 직접 만들어 확인).
- 고칠 것을 '몇 초, 무엇을, 어떻게'로 적고 고친 뒤 다시 캡처한다(2~4회). 확인한 것과 못 한 것을 나눠 알려 주고, 캡처 파일은 끝나면 지운다.