한 도형 UI 변신

슬라이드 개요.md 를 끝까지 읽고, 도형 하나가 끊기지 않고 제품 화면의 여러 상태로 변하며 제품을 소개하는 16:9 모션 그래픽(Dribbble 수준 UI 모션)을 HTML 파일 하나로 만들어 발표.html 에 저장해 줘.

1. 재료
- 개요에서 소개할 제품(도구·서비스)과 기능을 찾아, 그 제품을 쓰는 한 사람의 흐름으로 UI 상태 8~12개를 정한다. 예: 점 → 입력창 → 파일 첨부 → 생성 중 → 결과 표 → 차트 → 앱 만들기 → 배포 버튼 → 사내 공개 알림 → 사용 숫자 → 제품 이름.
- 상태마다 화면에 보일 숫자·기능은 개요에 있는 것만 쓴다. 개요에 없는 기능은 만들지 않는다. 사용자가 입력하는 요청문, 버튼·채팅·알림 같은 UI 글자는 개요 내용을 바탕으로 짧게 만들어도 된다.
- 개요에 '장표 자산' 화면 캡처가 있으면 그 화면의 구성과 글자를 따라 다시 그린다(캡처를 그대로 붙이지 않음).
- 상태 하나가 장면 하나, 전체 20~40초. 개요의 다른 숫자(사용자 수, 만든 앱 수 등)는 마지막 2~3개 상태(사용 숫자 카드)에 담는다.
- 상태 3~4개씩 묶어 묶음마다 장면 제목(존댓말, 왼쪽 위 44~52px)을 하나 두고, 상태마다 화면 아래 설명 한 줄(명사형 30px)을 둔다.
- (선택) 만들기 전에 UI 상태 목록과 각 상태의 내용을 먼저 보여 주고 확인을 받는다. 화면 캡처가 있으면 요청한다.

2. 연출 원칙
- 도형 하나, 절대 끊지 않는다: 모든 상태는 같은 요소가 크기·모서리 반경·색을 바꾸며 이어지고, 안의 내용은 짧은 흐림과 함께 바뀐다.
- 커서가 모든 변화를 이끈다: 커서가 곡선으로 움직여(0.35~0.6초) 누르면(눌림 0.08초, 요소 0.97배) 다음 상태로 변한다. 생성 완료처럼 시스템이 바꾸는 상태는 진행 표시가 끝나며 바뀌고, 그다음 상태로는 다시 커서가 이끈다. 커서가 다음 버튼으로 가는 이동은 다음 장면 전환에 속한다.
- 이어지는 내용(같은 막대, 숫자, 제목)은 흐림 교체 대신 다음 상태의 자리로 그대로 옮겨 간다. 새로 생기는 내용만 흐림과 함께 들어온다. 변형 중간에 빈 판이 보이지 않게.
- 박자 120BPM(한 박 0.5초). 상태 변화는 정박에서 시작하고, 한 상태는 변형·커서 이동을 포함해 2~6박.
- 1~2번은 카메라가 요소 안으로 확대해 들어가거나(1.2~3배) 빠진다. 확대 중 커서는 장면과 함께 움직인다.
- 시작은 화면 가운데 점 하나(강조색), 끝은 제품 이름(워드마크, 판 밖에 크게)과 한 줄 약속으로 모인다.

3. 화면
- 1920×1080 무대를 창 크기에 맞춰 비율 유지. 글꼴 Pretendard(CDN: https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/pretendardvariable.min.css), word-break: keep-all.
- 배경은 밝은 #F4F4F1 하나로. 요소는 흰색 판 + 검정 글자 #111, 강조색 하나(파랑 #2563EB), 앞으로 할 일이 나오면 주황 #F97316(없으면 쓰지 않음).
- 요소 그림자는 부드럽게(y 24, 흐림 60, 불투명 12%), 모서리 반경 12~40.
- UI 글자 22~32px, 제품 이름·핵심 숫자 120~200px. 화면 아래쪽에 상태를 설명하는 한 줄(명사형, 30px).
- SVG 또는 Canvas 2D.

4. 움직임 (숫자로 정함)
- 크기·반경 변화는 스프링(감쇠비 0.7~0.8, 0.45~0.6초), 색 변화 0.3초.
- 내용 교체: 이전 내용이 흐려지며 0.96배로(0.12초) → 새 내용이 흐림이 걷히며(0.18초).
- 숫자는 자리마다 굴러가며 맞춰지고, 차트는 선이 그려지고 막대가 자란다.
- 아이콘·칩 같은 작은 요소는 위치가 2~4프레임 늦게 따라온다. 따라오는 동안 글자와 겹치지 않게 글자 반대쪽에서.
- 크기와 위치가 같이 바뀌는 막대 무리는 가로 위치·폭을 먼저, 높이를 뒤에 바꿔 덩어리로 겹치지 않게.
- 효과음: Web Audio로 합성(누름 '틱', 변형 '휙' 0.2초, 숫자 착지 '쿵'). 첫 조작 뒤 소리 시작, M으로 끄고 켜기, 0.25초 넘게 건너뛸 때는 소리 없음.

5. 금지
- 상태마다 새 카드가 나타나기(요소는 하나), 화면 전환 컷, 정해진 자리에서 투명도만 바뀌며 나타나기, 글머리 기호 목록, 등속 움직임, 커서 없이 저절로 바뀌는 상태, 개요에 없는 기능.

6. 문구
- 장면 제목은 존댓말 문장, 나머지는 명사형. 한 화면에 제목 하나, 큰 숫자 하나, 짧은 설명 한두 줄.
- 숫자·이름·인용은 개요에 있는 것만 쓴다. 새 숫자를 만들지 않고, 인용과 질문은 원문 그대로. 기준일·출처는 작은 글씨로.
- UI 안의 글자는 실제 제품 말투처럼 짧게(버튼 '배포', 알림 '사내 공개됨').

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 처음부터. M 소리.
- 화면 아래에 얇은 진행 막대와 '번호 / 전체 · 장면 이름', 키 안내는 처음 3초만.
- 주소 옵션: ?s=N(N번 장면으로 가는 이동부터), ?t=초(그 시각에서 멈춤), ?auto(자동 재생으로 시작), ?record(자동 재생 + 진행 막대·안내 숨김)
- 지금 장면 번호를 주소 끝에 #N으로 표시한다(history.replaceState). 새로고침하거나 #N으로 열면 그 장면부터 시작하고, 주소의 #N을 바꾸면 그 장면으로 다시 연다. #N이 있으면 ?s보다 먼저 따른다.
- 외부 파일은 글꼴 CDN 하나만.

9. 검수
- 브라우저 자동화(Playwright 등)로 1920×1080에서 renderAt(t)를 불러, 상태마다 다 바뀐 프레임과 변하는 중간 프레임(변형 시작 +0.15초, +0.3초), 커서가 누르는 순간를 캡처해 직접 본다. 헤드리스 크롬은 --use-angle=metal(맥) 등으로 GPU를 켠다.
- 확인할 것: 요소가 하나로 이어지는지(둘로 보이거나 깜빡이는 순간), 내용 글자가 판 밖으로 넘침, 커서가 누르는 자리와 바뀌는 자리가 맞는지, 박자에 안 맞는 변화, PPT처럼 보이는 곳.
- 발표 모드에서 멈추는 프레임이 모두 완성된 화면인지(덜 나왔거나 빠지기 시작한 상태가 아닌지), 다음·이전·클릭·A도 눌러 본다.
- 모바일 확인: 아이폰 가로 화면 흉내(Playwright webkit + iPhone 기기 설정)로 탭·왼쪽 탭·스와이프가 넘어가는지 눌러 본다(WebKit에는 스와이프 기능이 없으니 PointerEvent를 직접 만들어 확인).
- 고칠 것을 '몇 초, 무엇을, 어떻게'로 적고 고친 뒤 다시 캡처한다(2~4회). 확인한 것과 못 한 것을 나눠 알려 주고, 캡처 파일은 끝나면 지운다.