글 한 편 요약 영상

프롬프트 설정

Claude 가 읽는 제작 지시문입니다. 직접 읽지 않아도 됩니다.

16:9, 30초짜리 「글 한 편 요약 영상」을 HTML 파일 하나로 만들어 줘. 블로그 글 한 편의 이야기를 제품 소개 영상의 문법으로 보여 준다 — 입력창에 「농담 하나 해 줘」를 치고, 농담 하나가 답으로 오고, 같은 부탁을 다시 한 기록이 펼쳐지며 되풀이된 농담 줄에 빨간 표시선이 붙고, 기록이 사라져도 그 빨간 선 셋만 남아 큰 답 문장의 밑줄이 되고, 그 밑줄 세 조각이 펼쳐져 카드 세 장의 테두리가 되고, 카메라가 카드를 하나씩 들여다본 뒤 물러나고, 흔한 오해 문장의 낱말이 바뀌며 끝난다.

핵심 아이디어: 요약 영상이 지루해지는 이유는 글을 읽어 주기 때문이다. 이 영상은 글이 다루는 일이 화면에서 실제로 일어나게 하고, 앞에서 본 되풀이(빨간 선)가 뒤의 설명 구조(카드)로 바뀌는 순간을 만든다. 글은 장면마다 한 문장뿐이고, 크게·정확하게 놓는다. 화면의 대화와 기록은 글이 든 실험의 상위 농담으로 꾸민 예이고, 그 점을 기록 머리에 밝힌다.

쓰임: 블로그 글 소개 영상(글 맨 위·SNS). 소리는 따로 입힌다 — 소리 날 자리를 목록(CUES)으로 내놓는다.

[바꿀 곳]
- REQUEST = "농담 하나 해 줘" · REPLY = "허수아비가 상을 받은 이유는?"
- LOG_HEAD = "새 대화에서 같은 부탁 · 글이 든 실험의 상위 농담으로 꾸민 예"
- LOG_ROWS(번째 · 돌아온 농담): ["1번째", "허수아비가 상을 받은 이유는?"] · ["2번째", "허수아비가 상을 받은 이유는?"] · ["3번째", "토마토가 빨개진 이유는?"] · ["4번째", "토마토가 빨개진 이유는?"] · ["5번째", "수학책이 슬픈 이유는?"] · ["6번째", "허수아비가 상을 받은 이유는?"]
- FLAGS(붙는 줄 번호 · 표시 글, 줄 번호는 0 부터, 나오는 순서대로): [[0, 1], "같은 농담"] · [[2, 3], "또 같은 농담"] · [[5], "허수아비, 세 번째"]
- CAPTIONS: "새 대화에서 다시 물어도," · "같은 농담이 돌아온다."
- ANSWER_LABEL = "이 글의 답" · ANSWER = ["다시 물어도 비슷한 농담,", "확률이 몇 개에 몰려 있어서다."] (둘째 줄의 「몇 개에」만 강조색)
- CARDS(이름표 · 제목 · 그림 종류): ["세어 보니", "대부분이 같은 25가지", "note"] · ["몰림", "위 4가지가 절반 가까이", "window"] · ["다시 뽑으면", "무거운 칸이 또 나온다", "loop"]
- NOTE_LINES = ["1,008개를 셌다.", "900개 넘게가 같은 25가지였다."]
- WINDOW_CHIPS = ["허수아비 140번", "토마토 122번", "수학책 121번", "원자 119번"] (첫 칩만 강조색)
- LOOP_NODES = ["토마토", "수학책", "허수아비", "원자"] (원 위·오른쪽·아래·왼쪽 차례) · LOOP_STOP = "또 허수아비"
- QUOTE_FROM = "「챗GPT는 농담을 25개만 안다」" · STRIKE = "25개만 안다" · QUOTE_TO = "「농담을 고르는 확률이 몇 개에 몰려 있다」" · QUOTE_HI = "몇 개에 몰려" · QUOTE_SRC = "근거: Jentzsch·Kersting(2023) — 2023년 1월 영어로 받은 농담 1,008개"
- BRAND = "내 블로그" · POST_TITLE = ["챗GPT 농담이", "늘 비슷한 이유"]
- PALETTE: PAPER #F6F1E7(바탕) · INK #141413(글·어두운 창) · CARD #FFFDF8 · LINE #DED3BE(카드 테두리) · AMBER #E9A23B(강조) · RED #C8553D(되풀이 표시) · SOFT #5F5A52(출처 한 줄에만)

[크기] 기준 화면 1920×1080, 30fps, DURATION = 30.0초(프레임 0~899).
- 자막 칩(CAPTIONS): 왼쪽 x 96, 기준선 y 990, 48px 굵기 700 PAPER, 칩 바탕 INK 불투명도 0.94, 둥근 14, 안쪽 여백 위아래 14·좌우 26, 글 앞에 AMBER 4px × 32px 세로 막대. 마스크 리빌로 열리고 EXIT 로 닫힌다. 한 번에 하나. 칩이 창과 겹치지 않는다.
- 카메라: 카드 장면에서만 쓴다. 바깥 무대 div 안 카메라 div 의 transform(translate·scale)을 키 프레임 표(시각, x, y, scale)와 구간마다 cubic-bezier(0.76, 0, 0.24, 1) 이징으로만 계산한다(CONFIG.CAM). 회전(rotateY 등)은 쓰지 않는다. 카메라가 카드 하나를 들여다볼 때 나머지 카드는 흐림 없이 불투명도 0.75.

[장면] (시각은 초, 모두 CONFIG.T 에)
장면 1 — 부탁 (0.00~5.20)
- 0.00~0.25 빈 PAPER(프레임 0).
- 0.25 입력창(INK, 1440×132, 둥근 22, x 240~1680, 세로 가운데 y 522)이 아래 40px 에서 ENTER 0.5초. 창 안 왼쪽 x 288 에 깜빡이는 막대 커서(4px × 52px, AMBER).
- 0.70 부터 REQUEST 를 한 글자씩 친다(글자당 0.08초, 48px 굵기 500 PAPER, 글자마다 key). 다 치면 커서가 0.5초 주기로 깜박인다.
- 창 오른쪽 안 끝에 보내기 단추(지름 72 AMBER 원, 안에 INK 위쪽 화살표 선 5px). 다 친 뒤 0.40초에 눌린다(크기 1 → 0.92 → 1, 0.18초, click).
- 눌린 뒤 0.10초부터 0.6초 MOVE: 입력창이 대화 창으로 자란다(x 240~1680, y 270~702, 1440×432, 같은 INK·둥근 22). 친 글은 오른쪽 위 말풍선(#2A2927 바탕, 둥근 18, 42px PAPER, 창 오른쪽 안쪽 여백 48)으로 옮겨 앉는다.
- 그 0.45초 뒤 REPLY 가 창 왼쪽 x 300, 기준선 y 590 에 80px 굵기 700 자간 −1.6px PAPER 로 한 글자씩(0.05초, key). 다 나오면 pop 하나. 답 글이 창 오른쪽 안쪽 여백 60 을 넘으면 글 크기를 줄인다(최소 64px).
- CAPTIONS[0] 칩: 3.40 열림, 4.90 닫힘.
장면 2 — 다시 물은 기록 (5.20~11.20)
- 5.20~5.64 대화 창이 왼쪽으로 밀려 나간다(x −1500, 회전 없음). 5.30~5.74 기록 창(INK, 1680×888, 둥근 22, x 120~1800, y 96~984)이 오른쪽 밖에서 미끄러져 들어온다. 둘 다 0.44초, cubic-bezier(0.76, 0, 0.24, 1). whoosh 5.20.
- 기록 창 머리 기준선 y 168: LOG_HEAD 30px PAPER 불투명도 0.65. 그 아래 2px #2A2927 선(y 196).
- LOG_ROWS 6줄: 첫 줄 기준선 y 294, 줄 간격 114. 번째 x 168 에 42px 굵기 600 PAPER 불투명도 0.65 · 농담 x 408 에 45px 굵기 500 PAPER. 6.00 + 0.26·i 초에 줄마다 마스크 리빌(tick).
- 표시(FLAGS)는 7.70 · 8.50 · 9.30 에 나온 순서대로 하나씩: 해당 줄들 왼쪽 창 안(x 140)에 RED 세로 표시선 6px 가 그 줄들 높이만큼(맨 위 줄 기준선 −50 ~ 맨 아래 줄 기준선 +22) 위에서 아래로 그어지고(0.25초), 그 줄들의 농담 글이 RED 로 바뀌며, 첫 해당 줄 높이 x 1200 에 표시 글(42px 굵기 600 PAPER, 앞에 지름 14px RED 점)이 오른쪽 30px 에서 ENTER 0.35초로 들어온다. 표시 글은 바탕 칩 없이 글만, 오른쪽 끝 x 1752 를 넘지 않는다. pop 하나씩. 표시가 붙지 않는 줄(5번째)은 그대로 PAPER.
- CAPTIONS[1] 칩: 9.80 열림, 11.00 닫힘.
- 9.65~11.00 정지(칩 열림 말고는 움직임 없음).
장면 3 — 답 (11.20~14.30) · 연결 ① 「빨간 선 셋이 밑줄이 된다」
- 11.20~11.50 기록 창의 글·줄·창 바탕이 EXIT(크기 0.98, 불투명도 0) — 단 RED 표시선 셋은 남는다(창 밖 맨 위 층으로 옮겨 그 자리에 그대로).
- 11.60 ANSWER_LABEL 42px 굵기 600 INK, 왼쪽 x 156 기준선 y 366 마스크 리빌 · 11.75 ANSWER[0] 108px 굵기 700 자간 −1.8px INK 기준선 y 480 · 11.95 ANSWER[1] 같은 크기 기준선 y 612, 「몇 개에」만 AMBER. 모두 왼쪽 정렬. 두 줄 다 x 1824 를 넘지 않는다(넘으면 두 줄을 같은 비율로 줄인다).
- 11.50~12.05 표시선 셋이 세로 막대에서 가로 조각으로 돌며 옮겨 가, 「몇 개에」 글 바로 아래(기준선 +22, 두께 6px)에 나란히 놓인 밑줄 세 조각이 된다 — 세 조각 폭 = (「몇 개에」 글 폭 − 2·12) / 3, 조각 사이 12px. 이징 cubic-bezier(0.76, 0, 0.24, 1), 조각마다 0.04초 엇갈림. 마지막 0.20초에 색 RED → AMBER. thud 12.05.
- 12.05~14.10 정지.
- 14.10~14.30 글만 위로 EXIT. 밑줄 세 조각은 남는다.
장면 4 — 카드 셋 (14.30~24.40) · 연결 ② 「밑줄 조각이 카드가 된다」
- 카드 최종 자리(물러난 모습, 카메라 scale 1): 카드 1·2·3 = x 120 · 690 · 1260, y 192, 폭 540 · 높이 696, 둥근 18, CARD 바탕, 테두리 3px LINE, 그림자 없음.
- 14.30~14.90: 밑줄 조각 k 가 카드 k 의 외곽선으로 펼쳐진다 — 조각과 카드 외곽선을 각각 64점 경로로 만들고 점마다 cubic-bezier(0.76, 0, 0.24, 1) 로 보간(SVG path 셋). 두께 6 → 3px, 색 AMBER → LINE, 마지막 0.15초에 안쪽이 CARD 로 채워진다. swish 14.30.
- 카드 안(카드 왼쪽 위 기준): 이름표 42px 굵기 600 AMBER(x +42, 기준선 +84) · 제목 54px 굵기 700 자간 −0.9px INK(기준선 +162, 두 줄까지, 줄 간격 66, 폭 456 안에서 낱말 단위로 줄바꿈) · 그림 칸 456×327(x +42, y +330). 14.75~15.05 세 카드의 이름표·제목이 마스크 리빌(카드 사이 0.05초).
- 카메라 키 프레임: 14.90 scale 1 → 14.90~15.34 카드 1 을 들여다봄(scale 1.32, 카드 1 가운데 = 화면 가운데) → 17.60~18.04 카드 2 로 → 20.30~20.74 카드 3 으로 → 22.66~23.10 물러나 scale 1 → 23.10~24.10 세 장 전부 정지.
- 그림 note(카드 1): 종이 쪽지(PAPER 바탕, 둥근 12, 2px LINE, 그림 칸 꽉 차게, 안쪽 여백 24) 안에 회색 줄 자리 표시 넷(높이 14, #D9CFBC). 15.65~15.87 NOTE_LINES[0] 이 문장 통째로 마스크 리빌(이징 (0.22, 1, 0.36, 1)) — 40px 굵기 600 INK, 줄 간격 52, 쪽지 폭에 맞춰 두 줄까지(첫 두 회색 자리를 대신한다) · 16.30~16.52 NOTE_LINES[1] 이 그 아래 두 줄까지. 문장 첫 줄 왼쪽에 지름 12px AMBER 점. paste 하나씩. 글이 쪽지 밖으로 나가는 프레임이 없다(넘치면 글 크기를 줄인다, 최소 32px).
- 그림 window(카드 2): 그림 칸 꽉 찬 창(2px INK 테두리, 둥근 12, 위 52px 머리줄 아래 2px 선). 18.20 + 0.24·i 초에 WINDOW_CHIPS[i] 가 카드 왼쪽 바깥 120px 에서 창 안 자리(머리줄 아래부터 세로로 4칸, 칸 높이 60, 사이 10, 왼쪽 여백 20)로 0.26초 MOVE 로 들어온다(paste). 칩 = 높이 56, 36px 굵기 700 INK, 테두리 2px INK, PAPER 바탕, 둥근 28. 첫 칩만 AMBER 바탕.
- 그림 loop(카드 3): 그림 칸 가운데 반지름 112 원(3px INK). 원 위 위·오른쪽·아래·왼쪽에 LOOP_NODES(지름 20 INK 점 + 바깥쪽에 36px 굵기 700 INK 이름 — 이름이 그림 칸 밖으로 나가지 않게 원 반지름을 줄여 맞춘다). AMBER 점(지름 24)이 원을 따라 2.4초에 한 바퀴(20.80 부터). 21.60 에 점이 「허수아비」(원 아래) 자리에서 0.6초 멈추고, 그동안 「허수아비」 이름 글이 닫히고(EXIT 0.12초) 바로 그 자리 — 원 아래 이름 자리, 가로 가운데 = 원 가운데 — 에 LOOP_STOP 칩(RED 바탕 32px 굵기 600 PAPER, 둥근 10, 안쪽 여백 8·16)이 열린다. 칩은 원 왼쪽·오른쪽 이름(「원자」·「수학책」)과 원 선에 닿지 않는다 — 칩 위 끝이 원 아래 끝보다 12px 이상 아래, 그림 칸 안. 칸이 모자라면 원 반지름을 줄이고 원을 위로 올려 맞춘다. 22.40 에 칩이 닫히고 「허수아비」 이름이 돌아오며 점은 다시 돈다(tick 21.60).
장면 5 — 오해 문장의 낱말이 바뀐다 (24.40~27.40)
- 24.10~24.40 카드 셋이 아래로 EXIT(0.04초 엇갈림).
- 24.55 QUOTE_FROM 72px 굵기 600 자간 −1.2px INK 가운데 기준선 y 520 마스크 리빌.
- 25.50~25.80 STRIKE 낱말 위로 RED 6px 가로줄(끝 둥글게)이 왼쪽에서 오른쪽으로 — 높이는 글자 몸통 한가운데(기준선 위 0.36em), 길이는 STRIKE 글 폭 + 좌우 6px. 그어진 뒤 STRIKE 글만 INK 불투명도 0.45(swish).
- 25.95 줄 전체 위로 EXIT(0.3초). 26.30 QUOTE_TO 같은 자리 마스크 리빌, QUOTE_HI 만 AMBER(QUOTE_TO 가 x 96~1824 를 넘으면 글 크기를 줄인다). 26.50 QUOTE_SRC 36px 굵기 500 SOFT 기준선 y 612.
- 27.05 출처 줄 EXIT. 27.10 QUOTE_TO 글 위, 고르게 떨어진 7자리(글 폭을 8등분한 경계 7곳, 기준선 위 0.4em)에 지름 10px INK 점 7개가 0.03초 간격으로 생겨나고(불투명도만), 27.30 글이 EXIT.
끝 카드 (27.40~30.00) — 글 제목이 주인공, 로고는 작게
- 27.40 부터 점 7개가 0.04초 간격으로 MOVE 0.40초에 작은 로고 자리로: 가운데 (180, 300) 반지름 30px 원 위, 맨 위부터 시계 방향 360/7°. 지름 10·7 번갈아, 위쪽 3개 AMBER, 나머지 INK. 앉을 때마다 tick.
- 27.70 BRAND 42px 굵기 600 INK, 로고 오른쪽 x 234 기준선 y 314 마스크 리빌 · 27.80 POST_TITLE[0] 96px 굵기 700 자간 −1.8px INK 왼쪽 x 144 기준선 y 492 · 27.85 POST_TITLE[1] 같은 크기 기준선 y 604(thud 27.80).
- 28.20~29.65 정지.
- 29.65~29.95 모두 EXIT 로 닫혀 마지막 프레임 = 프레임 0 의 빈 PAPER.

[구현]
- HTML 파일 하나로 만든다. 외부 파일·글꼴·라이브러리·네트워크 요청을 쓰지 않는다(미리보기에서 막히거나 느려진다).
- 첫 <script> 맨 앞에 CONFIG 객체를 두고 [바꿀 곳]의 값과 이 글에 나온 숫자(시간표·크기·색·세기)를 이름 붙여 모은다. 나중에 숫자만 바꿔 다듬을 수 있게.
- 그림은 시간 t(초)만으로 계산하는 함수 render(t) 로 그린다. requestAnimationFrame 의 타임스탬프나 performance.now() 로 t 를 구한다. setTimeout·setInterval·CSS 애니메이션·transition 으로 움직이지 않는다(프레임마다 속도가 달라지고, 다시 재생할 때 어긋난다). 시뮬레이션처럼 상태가 쌓이는 작품은 고정 시간 간격으로 상태를 진행하되 그 진행도 타임스탬프로만 정한다.
- 난수는 시드 고정 난수(mulberry32 등)만 쓴다. Math.random 은 쓰지 않는다(매번 다른 화면이 나온다).
- 캔버스 내부 해상도는 화면비에 맞춘 기준 크기로 고정하고, 창 크기에 맞춰 화면비를 지키며 가운데에 꽉 차게 보이게 한다(남는 곳은 배경색). 스크롤이 생기지 않게 한다. devicePixelRatio 는 그리는 선명도에만 반영한다.
- 글자는 시스템 글꼴만 쓴다: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif. 붓글씨·손글씨 느낌은 글꼴이 아니라 획을 그려서 낸다.
- 길이가 정해진 작품은 끝나면 처음과 같은 화면으로 돌아가 이음매 없이 반복한다.
- 모든 함수·상수·셰이더 문자열을 먼저 정의하고, 시작(초기화와 첫 requestAnimationFrame)은 스크립트 맨 끝에서 한 번만 호출한다. 정의되기 전에 쓰면 첫 화면에서 멈춘다.

이 작품만의 구현:
- 모든 움직임은 시간 t(초)만으로 계산하는 함수 render(t) 가 정한다: 요소마다 transform·opacity·filter·textContent·속성을 t 로 계산해 직접 넣는다. CSS transition·animation·setTimeout·setInterval 로 움직이지 않는다(프레임마다 속도가 달라지고, 다시 재생할 때 어긋난다). 같은 t 는 언제나 같은 화면이다 — 프레임 사이에 쌓이는 상태를 두지 않는다(치고 있는 글자·물리·깜빡임 위상도 t 에서 바로 계산한다).
- 장면 밖의 층은 display:none 으로 뺀다. visibility:hidden 으로만 감추면 그 안 자식에 visibility:visible 을 넣는 순간 부모를 뚫고 보여, 다른 장면의 글이 엉뚱한 장면 위에 떠 있게 된다. render(t) 는 매번 모든 층의 보임 여부를 t 로 다시 정한다.
- 재생: requestAnimationFrame 의 타임스탬프로 t = (경과 초) mod DURATION. window.renderAt = t => render(t) 와 window.DURATION 을 열어 둔다(정지 화면·영상 굽기에 쓴다 — renderAt 이 한 번이라도 불리면 재생 루프를 멈춰 화면을 덮어쓰지 않는다).
- window.CUES = 소리 자리 목록 [{t: 초(소수 셋째 자리), kind: "key"|"click"|"whoosh"|"swish"|"pop"|"tick"|"paste"|"thud"}] 를 시각 순으로. 장면 절이 말한 자리 전부이고, 타자·숫자 세기처럼 반복되는 것은 실제로 글자가 바뀌는 시각마다 하나씩. 소리는 이 파일에서 내지 않는다.
- 화면 맞추기: 1920×1080 무대 div 를 창 크기에 맞춰 화면비를 지키며 가운데에 꽉 차게 축소·확대한다(남는 곳은 그 시각의 바탕색). 스크롤이 생기지 않게. 창 크기를 읽었는데 0 이면 다음 프레임에 다시 맞춘다(미리보기 칸이 처음 한순간 0 을 줄 수 있다). 캔버스를 쓰면 내부 해상도는 1920×1080 고정, devicePixelRatio 는 선명도에만.
- 마스크 리빌 = 글 줄을 overflow:hidden 상자에 넣고 안의 글을 아래 1.1em 에서 0 으로 올린다(ENTER). 불투명도는 움직임 길이의 55% 안에 0 → 1. 닫을 때는 반대로 위로 −1.1em(EXIT). 페이드만으로 나타나는 글은 없다.
- 이징: CONFIG.EASE 에 ENTER = cubic-bezier(0.16, 1, 0.3, 1) · EXIT = (0.7, 0, 0.84, 0) · MOVE = (0.65, 0, 0.35, 1). 베지어는 x(s) = 입력을 뉴턴법 6회 + 실패 시 이분법 20회로 풀어 y 를 돌려준다. 입력 0·1 에서 정확히 0·1.
- 카메라(무대 전체 배율)는 1.00 으로 고정한다 — 움직이는 것은 물체다. 화면 전체가 천천히 다가오는 줌은 무게를 없애고, 장면이 바뀔 때 배율이 되돌아가며 정렬이 흔들린다. 장면 절이 「정지」라고 한 구간은 완전히 멈춘다(정확한 멈춤이 리듬을 만든다).
- 화면에서 읽혀야 하는 글은 어느 시각이든 화면 위 실제 크기가 28px 이상, 장면의 주 문장은 44px 이상. 선·테두리 2px 이상, 강조선 3px 이상.
- 세이프 영역: 글은 x 96~1824, y 54~1026 안.
- 한 자리에 두 장면의 글이 동시에 있지 않는다. 다음 장면의 글이 들어오기 0.1초 전에 앞 장면의 글은 다 닫혀 있다. 반투명으로 겹쳐 보이는 순간을 만들지 않는다.
- 브라우저 저장소(localStorage·sessionStorage·IndexedDB·쿠키)를 쓰지 않는다 — 미리보기 칸에서 막혀 오류가 난다.
- 화면 = 맨 아래 층 캔버스 하나(1920×1080 — 바탕 PAPER 를 Canvas 2D 로 칠한다. 바탕색이 바뀌는 곳이 없으니 칠하는 것은 이것뿐) + 그 위 DOM(창·말풍선·기록 줄·표시 글·카드 안 글·인용) + 맨 위 SVG 하나. 세 층을 같은 무대 div 에 겹쳐 함께 화면에 맞춘다. 빨간 표시선·밑줄 조각·카드 외곽선은 맨 위 층 SVG 하나의 path 셋이 처음부터 끝까지 이어 간다 — 장면이 바뀌어도 같은 path 의 d 를 t 로 다시 계산할 뿐 바꿔 끼우지 않는다.
- 밑줄 조각 자리·폭은 「몇 개에」 span 의 배치 상자로 정한다 — 함수 하나 stageBox(el) 가 el 에서 offsetParent 를 따라 무대 div(position:relative)에 닿을 때까지 offsetLeft·offsetTop 을 더하고 offsetWidth·offsetHeight 를 붙인 {x, y, w, h}(무대 1920×1080 좌표 — offset 값은 transform·무대 배율에 흔들리지 않는다). 잴 때 그 층이 display:none 이면 잴 동안만 display:block · visibility:hidden 으로 두고 되돌린다. 시작할 때 한 번, document.fonts.ready 뒤에 다시 잰다. 표시 글이 농담 글과 겹치는지도 배치 상자로 확인해, 겹치면 표시 글 크기를 줄인다(최소 32px).
- 자기 대조(시작할 때 한 번, console.table · 어긋나면 console.warn, try/catch): renderAt(0)·renderAt(29.99) 빈 PAPER · renderAt(9.6) 에 표시 글 3개가 보이고 서로·농담 글과 겹치지 않음 · renderAt(12.5) 에 밑줄 조각 셋이 「몇 개에」 아래 · renderAt(23.5) 에 카드 3장이 겹치지 않고 세이프 영역 안, 카드 제목이 두 줄 안 · renderAt(21.9) 에 LOOP_STOP 칩이 다른 이름 글·원 선과 겹치지 않음 · renderAt(27.0) 에 QUOTE_TO 보임 · CUES 개수와 첫·끝 시각 · 장면마다 읽혀야 하는 글의 화면 크기 최솟값 ≥ 28px.

[하지 말 것] — 이유와 함께
- 보라→파랑·청록 그라디언트, 남색 바탕, 네온 발광, 렌즈 플레어, 빛 번짐 — 가장 흔한 AI 영상의 기본값이다. 깊이는 원근·크기·초점으로만 낸다.
- 화면 가득 떠다니는 입자, 반짝이, 글리치·RGB 분리 — 채우기용 장식이고 글을 죽인다(장면이 정한 입자만 쓴다).
- 모든 요소가 같은 이징·같은 길이로 동시에 움직이기, 모든 등장이 페이드+20px 위로 — 생성물의 표지다. 위 시각표의 엇갈림·마스크 리빌을 지킨다.
- 튕기는 스프링을 여기저기 쓰기 · scale(0) 에서 시작 — 장난감처럼 보인다. 넘침은 장면 절이 허락한 한 곳뿐.
- 유리 효과(backdrop-filter)·큰 그림자·발광 테두리 — 값싼 장식이다. 그림자는 쓰지 않는다.
- 코너 브래킷·타임코드·「01/06」 번호·모노 라벨 HUD — 요즘 소개 영상의 상투다.
- 바꿀 곳과 장면 절에 없는 문구·숫자·브랜드 이름을 지어내지 않는다. 실제 회사·서비스의 이름이나 로고를 넣지 않는다.
- 장면 절이 정하지 않은 곳에서 1.5초 넘게 아무것도 안 움직이는 구간.