구독·좋아요 엔드카드

프롬프트 설정

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

영상 맨 끝에 붙이는 구독·좋아요·알림 엔드카드 애니메이션을 HTML 파일 하나로 만들어 줘. 미리보기에서 바로 재생되게. 길게 설명할 테니 숫자는 그대로 지켜 줘.

핵심 아이디어: 첫 프레임부터 엔드카드가 다 차려져 있다 — 왼쪽에 채널 프로필 원과 채널 이름, 그 아래 화면 폭의 절반을 넘는 노란 「구독」 버튼과 「좋아요」·「알림」 버튼, 오른쪽에 다음 영상을 얹을 16:9 칸 두 개. 바탕에는 낮은 대비의 사선 줄무늬가 천천히 흐른다. 화살표 커서가 0초에 출발해 0.70초에 구독 버튼을 누른다. 누른 점에서 짙은 색이 원으로 퍼지며 노랑이 뒤집히고, 글자는 「구독」에서 「✓ 구독중」으로 바뀌고, 버튼이 탄성 있게 튀고, 작은 파편 16개가 터진다. 이어서 좋아요(엄지가 까딱)와 알림(종이 흔들림)을 차례로 누른다. 끝에서 세 버튼이 「쏙」 들어갔다가 누르기 전 모습으로 차례로 「쏙」 튀어나오고, 그 화면이 곧 처음 화면이라 이음매 없이 반복된다.

[바꿀 곳]
- 채널 이름: 달빛 공방
- 한 줄 소개: 매주 금요일 저녁 7시 새 영상
- 프로필 글자: 비워 두면 채널 이름의 첫 글자(「달」). 편집기에서 프로필 사진을 얹을 자리라 단색 원에 글자 하나만 둔다
- 버튼 글자: 구독 → 누른 뒤 구독중 · 좋아요 · 알림
- 다음 영상 칸 글자: 다음 영상 · 추천 영상 (편집기에서 실제 영상을 얹으면 가려지는 자리 표시)
- 색 — 바탕 #12162B · 줄무늬 #181E3A · 다음 영상 칸 #20264A · 칸 글자 #4C5480 · 프로필 원 #6C7BFF · 이름과 밝은 글자 #F4F1EA · 소개 글자 #9AA0C4
- 색 — 강조(노랑) #FFD23F · 강조 위 글자 #12162B · 누르기 전 좋아요·알림 버튼 #262C4D · 누른 뒤 구독중 버튼 #3A4166
- 색 — 파편 세 가지 #FFD23F · #F4F1EA · #6C7BFF · 커서 #FFFFFF(테두리 #12162B)
- 시드: 2710 (파편 방향·거리·크기·회전이 전부 이 값에서 나온다)
- 길이: 8초 = 기본 8초 + 머묾 늘리기 holdExtra 0초 (holdExtra 를 늘리면 세 버튼이 눌린 화면만 그만큼 오래 머문다). 녹화 파일 길이 = 6.20 + holdExtra 초 — 영상 끝 화면은 보통 5~20초라 holdExtra 는 0~13.8 안에서 고른다
- 화면비: 16:9 (캔버스 1920×1080)

[크기] — 전부 화면 높이 H 기준(W = 16/9·H = 1.7778H). 괄호 안은 1920×1080 에서의 px.
- 왼쪽 영역: x 0.08H ~ 0.98H(86 ~ 1058px). 오른쪽 칸 영역과의 틈 0.087H.
- 다음 영상 칸 두 개: 폭 0.6311H × 높이 0.355H(정확히 16:9, 682×383px), 모서리 반지름 0.025H, 오른쪽 끝 = W − 0.08H.
  왼쪽 끝 x = 1.0667H(1152px). 위 칸 y 0.115H ~ 0.470H, 아래 칸 y 0.530H ~ 0.885H. 칸 글자는 굵기 600, 잉크 높이 0.040H, 잉크 중심 = 칸 중심.
- 프로필 원: 중심 (0.21H, 0.245H), 반지름 0.13H — 왼쪽 끝 0.08H, 위끝 0.115H(위 칸과 같은 높이). 프로필 글자는 굵기 800, 잉크 높이 0.12H, 잉크 중심 = 원 중심, 색 #F4F1EA.
- 채널 이름: 굵기 800, 잉크 높이 0.100H, 잉크 왼쪽 끝 x = 0.40H, 잉크 위끝 y = 0.160H. 잉크 폭 한도 0.58H.
- 한 줄 소개: 굵기 500, 잉크 높이 0.035H, 잉크 왼쪽 끝 x = 0.40H, 잉크 위끝 y = 0.295H. 잉크 폭 한도 0.58H.
  (이름 위끝 0.160H ~ 소개 아래끝 0.330H 의 가운데가 0.245H = 프로필 원 중심 높이.)
- 구독 버튼(알약 모양 = 모서리 반지름이 높이의 절반): x 0.08H ~ 0.98H(폭 0.90H = 화면 폭의 51%), y 0.450H ~ 0.650H(높이 0.20H), 중심 (0.53H, 0.55H).
  「구독」·「구독중」 공통 글자 크기 = 「구독」의 잉크 높이가 0.085H 가 되는 크기, 굵기 700.
  누른 뒤 내용 = 체크 표시(한 변 0.075H 상자) + 틈 0.025H + 「구독중」. 묶음 전체의 가로 가운데 = 버튼 중심. 묶음 폭 한도 0.72H(버튼 폭의 80%).
- 좋아요 버튼: x 0.080H ~ 0.505H, 알림 버튼: x 0.555H ~ 0.980H. 둘 다 폭 0.425H, y 0.715H ~ 0.885H(높이 0.17H, 아래 칸 아래끝과 맞춘다), 알약 모양.
  내용 = 아이콘(한 변 0.085H 상자) + 틈 0.025H + 글자. 두 버튼 공통 글자 크기 = 「좋아요」·「알림」 중 잉크 높이가 큰 쪽이 0.055H 가 되는 크기, 굵기 700. 묶음 가로 가운데 = 버튼 중심, 묶음 폭 한도 0.361H(버튼 폭의 85%).
- 모든 글자의 세로 위치는 잉크 중심으로 맞춘다: textBaseline 'alphabetic' 에서 기준선 y = 원하는 잉크 중심 y + (actualBoundingBoxAscent − actualBoundingBoxDescent) / 2. 가로는 actualBoundingBoxLeft·Right 로 잰 잉크 상자로 놓는다.
- 글자 크기 정하기: 크기 1000px 로 measureText 해서 잉크 높이를 재고 비례로 목표 잉크 높이에 맞춘다(100px 근처에서는 브라우저가 잉크 상자를 정수 px 로 반올림해 1px = 0.0009H 가 그대로 오차가 된다). 그 크기에서 잉크 폭(또는 묶음 폭)이 한도를 넘을 때만, 최후에 한도에 맞게 줄이고 console.warn 으로 어느 문구를 몇 배로 줄였는지 알린다. 기본 문구로는 줄이는 일이 0번인 것이 정상이다(채널 이름 잉크 폭은 글꼴에 따라 약 0.40~0.46H).
- 화살표 커서: 높이 h = 0.12H(130px). 쉬는 자리 R = (1.005H, 0.860H) — 왼쪽 영역과 아래 칸 사이 틈의 아래쪽, 커서가 어떤 칸이나 버튼에도 겹치지 않는다.
- 누르는 점(커서 끝이 닿는 점, 버튼 안 오른쪽 아래 — 커서 몸통이 버튼 글자를 가리지 않게): 구독 K1 = (0.854H, 0.595H) · 좋아요 K2 = (0.4455H, 0.845H) · 알림 K3 = (0.9205H, 0.845H).
- 요소(칸·버튼·프로필·글자)가 화면의 약 절반을 덮고, 나머지는 흐르는 줄무늬 바탕이다. 화면 가운데에 작게 모으지 않는다.

[아이콘 — 한 변 1 짜리 상자 좌표(y 는 아래로), 상자를 아이콘 크기로 늘려 그린다. 전부 평평한 단색 면]
- 엄지(좋아요): 소매 = 둥근 사각형 (0.02, 0.44)~(0.24, 0.98) 반지름 0.05 · 손바닥 = 둥근 사각형 (0.30, 0.40)~(0.94, 0.98) 반지름 0.16 · 엄지 = (0.42, 0.52) 에서 (0.54, 0.12) 까지의 굵기 0.20 캡슐(양 끝 반원).
  손가락 금 세 줄 = y 0.60 · 0.74 · 0.87 에서 x 0.60 ~ 0.96 의 직선, 굵기 0.035, 그 순간의 버튼 바탕색으로 긋는다(면을 파낸 것처럼 보인다).
- 종(알림): 몸통 = (0.08, 0.80) 에서 시작해 3차 베지어 넷을 잇고 닫는다 — (0.20, 0.72)(0.20, 0.62)(0.20, 0.50) → (0.20, 0.28)(0.34, 0.16)(0.50, 0.16) → (0.66, 0.16)(0.80, 0.28)(0.80, 0.50) → (0.80, 0.62)(0.80, 0.72)(0.92, 0.80), 그리고 closePath(아래 테두리는 y 0.80 직선).
  꼭지 = 원 중심 (0.50, 0.10) 반지름 0.07 · 추 = 원 중심 (0.50, 0.91) 반지름 0.085. 흔들림의 회전축 = 꼭지 중심.
- 체크 표시: (0.10, 0.55) → (0.38, 0.82) → (0.90, 0.22) 꺾은선, 굵기 0.16, lineCap·lineJoin 'round'.
- 화살표 커서(상자 대신 높이 h 를 1 로): 끝 (0, 0) → (0, 0.80) → (0.19, 0.63) → (0.31, 0.92) → (0.44, 0.865) → (0.32, 0.59) → (0.57, 0.59) → 닫기. 채우기 #FFFFFF 뒤에 테두리 #12162B 굵기 0.06h, lineJoin 'round'. 끝 (0, 0) 이 누르는 점이다.

[바탕 — 처음부터 움직인다]
- 줄무늬: 바탕 #12162B 위에, 화면 가운데를 축으로 −60° 돌린 좌표계에서 폭 0.10H 띠를 0.20H 간격으로 #181E3A 로 칠한다. 화면 대각선 반(1.02H)보다 넉넉히 ±1.3H 를 덮는다.
  띠 묶음을 그 좌표계의 x 방향으로 0.20H·n·(t / L) 만큼 옮긴다. n = stripesPerLoop = Math.round(L / 4)(L = 8 → 2, 12 → 3, 20 → 5) — 한 바퀴에 정수 간격이라 이음매가 없고, 길이를 바꿔도 속도가 초당 약 0.04~0.06H 로 유지된다(기본 L = 8초에 0.05H).
- 다음 영상 칸의 반짝임 띠: 칸마다, 폭 0.35·(칸 폭)인 세로 띠가 가로 그라디언트(투명 → #FFFFFF 불투명도 0.08 → 투명)로 0.9초에 등속으로 지나간다. 띠 중심의 x 는 (칸 왼쪽 끝 − 0.4·칸 폭)에서 (칸 왼쪽 끝 + 1.4·칸 폭)까지 간다. 칸 모양으로 잘라 그 안에만 보인다.
  지나가기 시작하는 시각 = 위 칸 −0.45초, 아래 칸 −0.30초에 주기 P = L / m 의 정수 배를 더한 시각, m = Math.round(L / 2)(기본 m = 4, P = 2초 — 길이를 바꿔도 약 2초마다). 그래서 0초 화면에도 띠가 위 칸 한가운데(띠 중심 = 칸 왼쪽 끝 + 0.5·칸 폭)와 아래 칸 왼쪽(칸 왼쪽 끝 + 0.2·칸 폭)을 지나는 중이다. 구독이 뒤집히는 0.70~1.00초에는 띠가 없다(위 칸 0.45초·아래 칸 0.60초에 끝나고 다음은 P − 0.45 · P − 0.30초, 기본 1.55초·1.70초. L ≥ 8 이면 P ≥ 1.78초라 다음 띠는 1.33초 뒤에야 온다).

[움직임 식] — τ = 그 일이 시작된 뒤 지난 초. 문장 속 값은 이 식으로 검산한 값이다.
- 누름: 0.10초 동안 버튼 배율 1 → 0.95, 커서 배율 1 → 0.85(둘 다 easeOutQuad). 버튼 배율 중심 = 버튼 중심, 커서 배율 중심 = 커서 끝.
- 놓임(누른 뒤 튐): 버튼 배율 s(τ) = 1 + e^(−9τ)·(−0.05·cos(18τ) + 0.14·sin(18τ)). s(0) = 0.95 로 눌린 크기에서 그대로 이어지고, τ≈0.081초에 1.064, τ≈0.255초에 0.987, 0.30초 뒤로는 ±1% 안. 커서 배율은 0.12초 동안 0.85 → 1(easeOutQuad).
- 색 뒤집힘: 놓는 순간부터 누른 점을 중심으로 반지름 r(τ) = Rmax·easeOutCubic(min(τ/0.30, 1)) 인 원 안은 「누른 뒤」 모습, 밖은 「누르기 전」 모습이다. 0.10초에 Rmax 의 70%.
  Rmax = 누른 점에서 그 버튼 상자의 가장 먼 모서리까지 거리 + 2px(2px 포함 구독 0.7893H, 좋아요·알림 0.3898H). 그리는 법: 버튼 좌표계(배율 적용)에서 「누르기 전」 버튼 전체를 그린 뒤, 알약 모양과 원을 함께 clip 하고 「누른 뒤」 버튼 전체(바탕·아이콘·글자)를 그 위에 그린다.
- 파편(구독에만): 시작할 때 mulberry32(시드)로 16개를 만든다. i = 0..15 마다 방향 = −130° + (i + 0.5)/16·260° + (r − 0.5)·14°(0° = 오른쪽, 캔버스라 시계 방향이 +). 왼쪽 100°(글자 쪽)는 비운다 — 막 바뀐 「✓ 구독중」 글자를 파편이 가리지 않게. 거리 D = 0.18H + 0.16H·r, 크기 z = 0.016H + 0.012H·r, 회전 속도 = (r − 0.5)·720°/초, 모양 = i 가 짝수면 원(지름 z), 홀수면 모서리 반지름 0.25z 의 정사각형(한 변 z), 색 = 세 가지 중 i mod 3 번째.
  위치 = K1 + (방향 단위벡터)·D·easeOutCubic(min(τ/0.50, 1)) + (0, 0.12H·τ²), 크기 배율 = 1 − 0.4·min(τ/0.70, 1), 불투명도 = τ < 0.40 이면 1, 그 뒤 0.70초까지 0 으로 선형. τ ≥ 0.70 이면 그리지 않는다.
- 엄지 까딱(좋아요 놓임): 엄지 아이콘만 상자의 (0.02, 0.98)(손목)을 축으로 회전 −30°·e^(−7τ)·sin(16τ)(τ≈0.072초에 −16.6°, 반시계), 배율 1 + 0.25·e^(−8τ)·sin(16τ)(τ≈0.069초에 1.129). 0.6초면 멈춘다.
- 종 흔들림(알림 놓임): 종 아이콘만 꼭지 중심을 축으로 회전 24°·e^(−2.5τ)·sin(13τ). τ≈0.106초에 +18.1°(시계 방향), 0.348초에 −9.9°, 0.59초에 +5.4°, 1.15초 뒤로 1° 아래.
- 쏙 들어감: 0.20초 동안 u = τ/0.20, 버튼 배율 = 1 − (2.70158·u³ − 1.70158·u²) (easeInBack 을 1 에서 뺀 것). u≈0.42 에서 1.100 으로 살짝 부풀었다가 u = 1 에 0. 그 뒤 튀어나올 때까지 그 버튼은 안 그린다.
- 쏙 튀어나옴: 버튼 배율 B(τ) = 1 − e^(−11τ)·cos(17τ). B(0) = 0 에서 시작해 τ≈0.151초에 1.159 로 넘쳤다가 0.40초 뒤로 ±1% 안. 넘쳐도 구독 버튼 오른쪽 끝은 1.052H(칸 왼쪽 1.0667H 앞)이고, 좋아요와 알림은 서로 닿지 않는다(가장 가까울 때 0.019H 틈).
- 커서 이동: A 에서 B 로 2차 베지어, 조절점 = (A + B)/2 + 0.15·|AB|·(dy, −dx)/|AB| ((dx, dy) = B − A). 진행 파라미터 = easeInOutCubic(이동 시간 비율) — 출발과 도착에서 속도 0.

[장면] (L = 8 + holdExtra. 앞 3.45초는 고정, 끝의 되돌림은 L 에서 거꾸로 잰다)
1. 0.00 — 꽉 찬 첫 화면: 줄무늬가 흐르고, 칸 반짝임 띠가 지나가는 중이고, 세 버튼은 누르기 전 모습(구독 = 노랑 바탕에 #12162B 「구독」, 좋아요·알림 = #262C4D 바탕에 #F4F1EA 아이콘과 글자), 커서는 R 에 있다. 빈 화면이나 버튼 없는 화면으로 시작하지 않는다.
2. 0.00–0.60 커서 R → K1. 0.60–0.70 구독 누름.
3. 0.70 구독 놓임 — 시그니처 순간. 화면 폭의 51%인 노란 구독 버튼이 누른 점 K1 에서부터 #3A4166 로 뒤집히며(0.80초에 70%, 1.00초에 끝) 그 원의 경계를 따라 「구독」이 「✓ 구독중」(#F4F1EA)으로 바뀌고, 버튼은 0.781초에 1.064배로 튀고, 파편 16개가 K1 에서 0.18~0.34H 거리로 터져 1.40초에 사라진다.
4. 1.10–1.65 커서 K1 → K2. 1.65–1.75 좋아요 누름. 1.75 놓임: 바탕이 #FFD23F 로 뒤집히고 엄지와 글자는 #12162B, 엄지가 까딱한다. 파편은 없다.
5. 2.05–2.55 커서 K2 → K3. 2.55–2.65 알림 누름. 2.65 놓임: 바탕 #FFD23F, 종과 글자 #12162B, 종이 흔들린다(3.8초쯤 멎는다). 파편은 없다.
6. 2.95–3.45 커서 K3 → R. 그 뒤 커서는 R 에 가만히 있다.
7. 3.45 – (L − 1.80) 머묾: 세 버튼이 눌린 화면. 움직이는 것은 줄무늬·칸 반짝임 띠·멎어 가는 종뿐. 기본 3.45–6.20초.
8. 쏙 들어감: 구독 L − 1.80 · 좋아요 L − 1.70 · 알림 L − 1.60 에 시작해 각 0.20초(기본 6.20 · 6.30 · 6.40).
9. 쏙 튀어나옴(누르기 전 모습으로): 구독 L − 1.45 · 좋아요 L − 1.30 · 알림 L − 1.15(기본 6.55 · 6.70 · 6.85). 버튼이 비어 있는 틈은 0.15 · 0.20 · 0.25초.
10. 기본 7.25초에 마지막 알림까지 자리를 잡고, 8.00초 화면 = 0.00초 화면(커서 R, 누르기 전 버튼, 배율 1 — 마지막 팝 뒤 1.15초라 1 과의 차이 0.000003 미만).
11. 녹화 구간 — 끝의 들어갔다 튀어나오기는 화면에서 되풀이할 때의 이음매용이고, 영상 끝에 붙이는 파일에는 넣지 않는다. 녹화는 0초부터 L − 1.80초(기본 6.20초, 세 버튼이 눌린 머묾의 끝)까지만 한다. 그래야 녹화본이 「✓ 구독중」·노란 좋아요·노란 알림이 눌린 화면으로 끝난다. 끝 화면을 더 길게 쓰려면 holdExtra 를 늘린다(녹화 길이 = 6.20 + holdExtra 초, 0~13.8 이면 5~20초).
버튼 i 의 상태(t 는 0 ≤ t < L): t < 누름 시작이면 누르기 전 배율 1 · 누름 0.10초 · 놓임 시각 ~ 들어감 시작이면 누른 뒤(놓임 뒤 0.30초까지는 두 모습이 원으로 나뉨) · 들어감 0.20초 · 그 뒤 튀어나옴 시각까지 안 보임 · 튀어나옴 뒤로 누르기 전 모습, 배율 B.

[구현]
- 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)은 스크립트 맨 끝에서 한 번만 호출한다. 정의되기 전에 쓰면 첫 화면에서 멈춘다.

이 작품에만 해당하는 구현:
- 기준 크기 1920×1080. t = (경과 시간) mod L. 프레임 사이에 쌓이는 상태가 없다 — 커서 위치·버튼 상태와 배율·파편·아이콘 회전은 전부 t 의 닫힌 식이다.
- CONFIG.timing 에 이름 붙여 모은다: base 8 · holdExtra 0 · moves [[0.00,0.60],[1.10,1.65],[2.05,2.55],[2.95,3.45]] · press 0.10 · release [0.70,1.75,2.65] · reveal 0.30 · cursorBack 0.12 · retract [−1.80,−1.70,−1.60](L 기준) · retractDur 0.20 · pop [−1.45,−1.30,−1.15](L 기준) · burstLife 0.70 · shimmer { dur 0.9, perLoop Math.round(L/2), start [−0.45, −0.30] } · stripesPerLoop Math.round(L/4) · recordEnd −1.80(L 기준).
- CONFIG.spring 에 모은다: release { a 9, w 18, c −0.05, s 0.14 } · pop { a 11, w 17 } · thumb { rot −30, a 7, w 16, scale 0.25, sa 8 } · bell { amp 24, a 2.5, w 13 } · backC1 1.70158.
- 녹화: 녹화 버튼 문단을 함께 붙였을 때 이 작품은 「한 바퀴」 대신 0초 ~ L + recordEnd(기본 6.20초)를 녹화한다. 녹화 버튼의 남은 초 표시도 이 길이로 센다. 화면에서 되풀이하는 반복은 지금처럼 L 전체다.
- 시작할 때 한 번만: 글자 크기(목표 잉크 높이로 비례 계산·한도 검사)·버튼 안 묶음의 x 위치·파편 16개 표·Rmax 를 계산해 캐시한다. 아이콘은 상자 좌표 함수로 매번 그린다.
- 그리는 순서: 바탕 → 줄무늬 → 다음 영상 칸(면·반짝임 띠·칸 글자) → 프로필 원과 글자 → 이름·소개 → 구독·좋아요·알림 버튼 → 파편 → 커서.
- 시작할 때 콘솔에 「합격 기준」 표를 console.table 로 찍고 칸마다 기대값·잰 값·PASS/FAIL 을 적는다(그 기기의 글꼴로 잰 값):
  잉크 높이·폭의 잰 값은 그 글자 크기의 10배로 measureText 해서 10 으로 나눈다(정수 px 반올림을 피한다).
  ① 「구독」 잉크 높이 ÷ H = 0.085(0.084~0.086) ② 문구를 줄인 횟수 = 0 ③ 채널 이름 잉크 폭 ÷ H ≤ 0.58(기본 약 0.40~0.46) ④ 「✓ 구독중」 묶음 폭 ÷ H ≤ 0.72(기본 약 0.34~0.38)
  ⑤ 좋아요 묶음 ≤ 0.361(기본 약 0.26~0.29) · 알림 묶음 ≤ 0.361(기본 약 0.20~0.23) ⑥ 파편 수 = 16 ⑦ B 의 최댓값 = 1.159(τ = 0~0.5초를 0.001초 간격으로 잰다) · s(0) = 0.950
  ⑧ 이음매: 0초와 L초(L − 0.000001)의 커서 위치·커서 배율·세 버튼의 상태와 배율이 같다(차이 < 0.0001) ⑨ 튀어나옴 동안(L − 1.45 ~ L − 0.70 를 0.01초 간격) 좋아요 오른쪽 끝 < 알림 왼쪽 끝, 구독 오른쪽 끝 < 칸 왼쪽 끝
  ⑩ 녹화 끝 시각(L − 1.80 − 0.000001)에 세 버튼이 「누른 뒤」 모습이고 배율이 1(차이 < 0.01) ⑪ τ = 0~0.70초(0.01초 간격) 동안 「✓ 구독중」 잉크 상자와 겹치는 파편 = 0개(파편 크기의 반대각선까지 포함해 잰다).
  FAIL 이 하나라도 있으면 console.warn 으로 그 항목을 한 번 더 적는다. 화면에는 아무것도 띄우지 않는다.

[하지 말 것]
각 줄의 「—」 뒤가 이유다.
- 0초 화면을 비우거나 요소를 하나씩 늦게 들이지 않는다(페이드인·슬라이드인 금지) — 끝 화면을 보는 첫 1초에 다음 영상을 누를지 정한다. 0초부터 칸·프로필·이름·세 버튼이 다 있어야 하고, 들어가고 튀어나오는 것은 반복 이음매 직전의 일이다.
- 특정 플랫폼의 이름·로고·빨간 재생 버튼 모양·플랫폼 특유의 아이콘을 그리지 않고, 구독 버튼을 빨강으로 바꾸지 않는다 — 특정 서비스 화면을 베낀 것으로 읽힌다. 버튼 색은 CONFIG 에서만 바꾼다.
- 다음 영상 칸에 가짜 썸네일 그림·영상 제목·재생 시간·재생 삼각형을 넣지 않는다 — 편집기에서 실제 영상을 얹을 자리라 단색 판이어야 얹은 영상 가장자리로 비치지 않는다. 지어내기 쉬운 장식이기도 하다.
- 프로필 원에 얼굴·캐릭터·사진 같은 그림을 넣지 않는다 — 사진을 얹을 자리 표시라 단색 원과 글자 하나면 된다.
- 손 모양 커서나 손가락 그림으로 누르지 않는다 — 좌표 없이 짐작으로 그린 손은 어색해지고, 끝이 한 점인 화살표가 누르는 자리를 가장 또렷하게 보인다.
- 색 뒤집힘을 크로스페이드나 바탕색 한 번에 바꾸기로 하지 않는다 — 두 모습이 겹친 흐린 프레임이 생기고, 누른 점에서 퍼지는 원 경계가 「눌러서 바뀌었다」는 원인과 결과를 보여 준다.
- 파편을 좋아요·알림에도 터뜨리거나 16개보다 늘리거나 별 반짝이·폭죽 꼬리·하트·이모지를 더하지 않는다 — 시그니처는 구독 버튼이 뒤집히는 순간 하나다. 장식이 끼면 버튼보다 파편이 주인공이 되고 시그니처가 갈라진다.
- 그림자·발광·테두리선·버튼 그라디언트를 쓰지 않는다(그라디언트는 칸 반짝임 띠 하나뿐) — 평면 색면이라야 배율 변화와 색 뒤집힘이 또렷하고, 녹화하면 그라디언트에 띠가 생긴다.
- 버튼을 투명도로 나타나거나 사라지게 하지 않는다 — 「쏙」은 크기로 내는 것이다. 페이드는 박자를 흐린다.
- 놓임 스프링을 τ = 0 에서 1 이 되는 꼴로 바꾸지 않는다 — 눌린 크기 0.95 에서 바로 이어져야 한다. 값이 다르면 놓는 순간 버튼이 한 프레임 튄다.
- 커서를 직선 등속으로 움직이거나 순간 이동시키지 않는다 — 기계처럼 보인다. 사람 손은 살짝 휘어 가며 출발과 도착에서 느려진다.
- 알림 버튼에 숫자 배지·빨간 점을, 화면에 「구독해 주세요」 같은 안내 글자나 화살표를 더하지 않는다 — 지어내기 쉬운 장식이고, [바꿀 곳] 밖의 글자는 독자가 바꿀 수 없다.
- 줄무늬 대비를 올리거나 칸 반짝임 띠를 진하게 하지 않는다 — 바탕이 시끄러우면 글자 판독이 떨어지고, 영상으로 압축하면 가는 사선이 깨진다.
- 화면 흔들기·회전·3D 기울기를 쓰지 않는다 — 한글 판독이 떨어지고 반복 이음매에서 튄다.
- 소리를 넣지 않는다 — 미리보기에서 자동 재생이 막히고, 엔드카드는 영상의 소리 위에 얹힌다.