옆줄이 더 빠른 이유 쇼츠

프롬프트 설정

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

9:16 세로, 16.5초짜리 쇼츠용 설명 영상을 HTML 파일 하나로 만들어 줘. 「왜 늘 옆줄이 더 빠를까」라는 물음에 마트 계산대 세 줄을 위에서 내려다본 그림으로 답한다 — 줄이 셋이면 내 줄이 1등일 확률은 1/3 이고, 그 억울함을 없애는 방법은 한 줄 서기라는 것까지 16.5초 안에.

핵심 아이디어: 관객이 「또 나만 졌다」를 먼저 겪게 한다. 첫 판에서 내 줄(가운데)이 쿠폰 손님 때문에 멈추고 왼쪽 줄이 이긴다. 그다음 판을 빠르게 두 번 더 돌리면 이기는 줄이 매번 바뀌고, 세 판 중 내 줄이 이긴 건 한 번 — 그 「1/3」이 화면을 채운다. 마지막에 세 줄이 한 줄로 합쳐지며 손님이 비는 계산대로 차례차례 가는 모습으로 끝난다. 글은 블로그 글의 문장 그대로다.

쓰임: 유튜브 쇼츠·인스타 릴스. 소리는 따로 입힌다 — 소리 날 자리를 목록(CUES)으로 내놓는다.

[바꿀 곳]
- Q = "왜 늘 옆줄이" / "더 빠를까" (물음, 두 줄)
- STAT_TOP = "줄이 3개면 내 줄이" / "1등일 확률은" · STAT = "1/3" · STAT_BOTTOM = "나머지 2/3는 옆줄이 이긴다"
- END_1 = "억울함을 없애는 건" · END_2 = "줄 고르기가 아니라" · END_3 = "한 줄 서기다" (END_3 만 강조색)
- TITLE = "옆줄이 더 빠른 이유" · BRAND = "내 채널"
- ME_LABEL = "나" · COUPON = "쿠폰"
- PALETTE: BG #E7EBE8(바탕 — 푸른 기 아주 옅은 회색) · INK #151917(글자·계산대) · LANE #CDD3CF(줄 바닥 띠) · PERSON #5B6661(손님 원) · ME #F2A93B(나 — 화면에서 이 색은 나와 강조 낱말뿐) · WIN #2E7D5B(이긴 줄 표시 — 초록) · MUTED #7C8580(보조 글자)

[크기]
- 기준 화면 1080×1920, 30fps, DURATION = 16.5초(프레임 0~494). 짧은 변 S = 1080.
- 쇼츠·릴스 화면의 위·아래는 앱 단추가 덮는다: 글은 y 230~1500 안, 좌우 x 72~1008 안에 둔다.
- 글 크기: 물음 Q 108px 굵기 800 · STAT 360px 굵기 800 · STAT_TOP/STAT_BOTTOM·END 줄 64px 굵기 700 · 이름표(ME_LABEL·COUPON·「1등」) 44px 굵기 800 · TITLE 72px 굵기 800 · BRAND 40px. 어느 글도 화면 위 44px 아래로 줄이지 않는다(폰 화면·압축에서 뭉개진다).
- 정렬: 왼쪽 정렬, 왼쪽 경계 x 72. 가운데 정렬은 STAT 숫자와 끝 카드뿐.
- 계산대 그림(위에서 내려다본 평면): 계산대 3개가 화면 위쪽에 가로로 나란히 — 계산대 하나 = INK 둥근 사각 200×120(둥근 16), 가운데 x = 210·540·870, 윗변 y 600. 계산대 위에 번호 "1"·"2"·"3" 40px MUTED. 각 계산대 아래로 줄 바닥 띠(LANE, 폭 150, y 720~1460, 둥근 75). 손님 = 원 지름 84(PERSON), 줄 안 간격 120px(중심 사이), 맨 앞 손님 중심 y 790. 「나」= ME 색 원 + 안에 ME_LABEL 흰 글자.
- 선은 2px 이상, 강조 테두리 3px 이상.

[장면] — 120BPM 박자 격자(1박 0.5초). 이징 셋: ENTER cubic-bezier(0.16,1,0.3,1) · EXIT (0.7,0,0.84,0) · MOVE (0.65,0,0.35,1). 손님 이동은 MOVE(한 칸 앞으로 = 0.25초), 나타남은 ENTER, 사라짐은 EXIT.

장면 1 — 물음 (0.0~2.6초)
- 프레임 0: BG 만(반복 이음매).
- 0.1~0.6초: 계산대 3개와 줄 바닥 띠가 위에서부터 마스크 리빌(계산대 → 띠, 0.06초 간격). 0.3~0.9초: 손님이 줄마다 4명씩 아래에서 올라와 선다(줄 사이 0.05초, 한 줄 안 0.04초 간격, ENTER 0.4초). 가운데 줄 넷째가 「나」.
- 0.2초부터 Q 두 줄을 화면 위쪽(기준선 y 360·490)에 한 글자씩 친다([필름 문법]). 2.4초까지 그대로.
- 0.8초: 「나」 원이 한 번 커졌다 돌아온다(1 → 1.15 → 1, 0.3초) — 관객에게 「이게 나」를 알리는 하나뿐인 튕김.
- 2.4~2.6초: Q 가 위로 닫힌다(EXIT 0.2초).
- CUES: 0.1 swish, 0.3~0.9 손님 등장 4명마다 pop 하나, 0.8 pop.

장면 2 — 첫 판, 내가 진다 (2.6~6.0초)
- 계산은 정해진 대본대로(무작위 아님). 손님 한 명의 차례 = 계산대 앞으로 한 칸 이동 0.25초(MOVE, 그 줄 뒤 손님들도 함께 한 칸씩) → 계산대에서 계산 s초(제자리) → 퇴장 0.15초(위로 0.3em 빠지며 EXIT, 불투명도 → 0). 다음 손님의 차례는 앞 손님 퇴장이 끝난 순간 시작한다. 줄마다 맨 앞부터 넷째까지의 계산 시간 s(초):
  첫 판(시작 2.7초): 왼쪽 [0.25, 0.30, 0.25, 0.30] · 가운데 [0.25, 1.40, 0.25, 0.25] · 오른쪽 [0.35, 0.40, 0.35, 0.35].
  → 줄이 끝나는 시각(넷째 퇴장 끝): 왼쪽 5.40 · 오른쪽 5.75 · 가운데 6.45(장면이 6.0초에 되감기라 화면에서는 「나」가 끝내지 못한다).
- 가운데 둘째 손님 머리 위에 말풍선 COUPON(INK 바탕 흰 글자 44px, 둥근 12, 꼬리 하나)이 그 손님이 계산을 시작하는 순간(3.60초)부터 계산이 끝날 때(5.00초)까지 떠 있다(나타남 ENTER 0.2초).
- 5.40초 왼쪽 줄이 끝나는 순간 왼쪽 줄 바닥 띠가 WIN 으로 칠해지고(아래에서 위로 와이프 0.3초) 띠 위쪽에 「1등」 이름표(WIN 바탕 흰 글자)가 마스크 리빌. 「나」는 아직 줄에 서 있다 — 바로 이 장면이 「또 나만 졌다」.
- 장면 2 화면 위쪽 글: 2.7초부터 "첫 번째 판" 64px INK 한 줄(기준선 y 360), 5.40초에 "옆줄이 이겼다" 64px INK 로 바뀐다(아래로 마스크 슬라이드 0.25초).
- CUES: 손님 계산이 끝날 때마다 tick, 쿠폰 말풍선 뜰 때 pop, 5.3 thud(작게).

장면 3 — 두 판 더 (6.0~8.6초)
- 6.0~6.3초: 판을 새로 세운다 — 손님·이름표·띠 색 전체가 한 덩어리로 아래로 40px 빠지며 사라지고(EXIT 0.12초, 판 전체 불투명도 1 → 0 — 요소마다 따로 흐려지지 않는다) 처음 배치가 위에서 40px 내려오며 선다(ENTER 0.15초). 같은 자리에 옛 손님과 새 손님이 겹쳐 보이는 프레임은 없다.
- 6.3~7.4초: 둘째 판을 4배 빠르게(이동 0.25·계산 s·퇴장 0.15 를 모두 1/4 로). 계산 s(4배속 전 초): 왼쪽 [0.6,0.6,0.7,0.6] · 가운데 [0.4,0.4,0.4,0.4] · 오른쪽 [0.6,0.7,0.6,0.6] → 끝 시각 왼쪽 7.325 · 가운데 7.10 · 오른쪽 7.325 → 가운데(내 줄) 1등(7.10초에 띠 WIN, 「1등」 이름표).
- 7.4~7.6초: 같은 방식으로 다시 세운다(EXIT 0.08 · ENTER 0.12). 7.6~8.6초: 셋째 판 4배속. 계산 s: 왼쪽 [0.6,0.7,0.6,0.7] · 가운데 [0.5,0.6,1.4,0.5] · 오른쪽 [0.4,0.4,0.45,0.4] → 끝 시각 오른쪽 8.4125 · 왼쪽 8.65 · 가운데 8.75 → 오른쪽 1등(8.41초). 8.6초에 장면이 바뀌므로 그 시각 그림은 그 자리에서 멈춘 채 물러난다.
- 화면 위쪽에 판 기록 셋이 한 줄로 쌓인다(y 360, 44px 굵기 800): 판이 끝날 때마다 하나씩 칩으로 떨어져 쌓인다 — "1판 옆줄" · "2판 내 줄" · "3판 옆줄"(칩 = 글자 52px 굵기 800 INK, 칩 바탕 #FFFFFF 둥근 14, 안쪽 여백 14·22, 칩 사이 14, 위에서 40px 떨어지며 ENTER 0.3초). 「내 줄」 두 글자만 ME 색. 첫 판 기록 칩은 6.0초에 그 줄에 앉는다. 4배속 동안 오른쪽 위 구석에 "×4" 52px INK.
- CUES: 되감기마다 swish, 4배속 계산 끝마다 tick(0.05초 안에 둘이면 하나로), 판이 끝날 때 thud(작게).

장면 4 — 1/3 (8.6~11.4초)
- 8.6~9.0초: 계산대·줄 그림이 아래로 물러나며 작아진다(크기 1 → 0.45, 화면 아래쪽 y 1250~1500 띠 안으로, MOVE 0.4초). 판 기록 줄은 위로 닫힌다.
- 8.9초: STAT_TOP 두 줄(y 400·490) 마스크 리빌. 9.2초: STAT "1/3" 이 그 아래 화면 가운데(기준선 y 900)에 크게 — 숫자 「1」, 빗금, 「3」 이 0.06초 간격으로 아래에서 마스크 리빌(ENTER 0.45초). 「1」 만 ME 색, 나머지 INK. 동시에 아래 작아진 계산대 그림에서 가운데 줄만 ME 색 테두리 3px 로 켜진다(셋 중 하나).
- 10.0초: STAT_BOTTOM 이 STAT 아래(y 1040) 마스크 리빌 — 이때 작은 그림의 왼쪽·오른쪽 줄 띠가 WIN 으로 칠해진다(둘). 
- 10.0~11.2초: 정지 — 읽을 시간.
- CUES: 8.6 whoosh, 9.2 thud, 10.0 pop.

장면 5 — 한 줄 서기 (11.4~13.9초)
- 11.4~11.6초: STAT 묶음(STAT_TOP·STAT·STAT_BOTTOM)이 먼저 위로 다 닫힌다(EXIT 0.2초, 층 시차 0.03초). 11.65~11.95초: 그다음에야 작은 계산대 그림이 다시 커져 화면 가운데로(크기 0.45 → 0.8, MOVE 0.3초) — 커지는 그림이 아직 남은 글 위를 지나가는 프레임은 없다.
- 11.7~12.3초: 세 줄 바닥 띠가 하나로 합쳐진다 — 띠 셋이 가운데로 모여 폭 150 의 한 줄 띠가 되고, 그 띠가 계산대 앞에서 셋으로 갈라지는 갈림길 모양(가운데 띠 + 계산대 1·3 으로 비스듬히 뻗는 짧은 가지 둘). 손님 12명이 도착 순서대로 한 줄로 다시 선다(「나」는 여섯째). MOVE 0.6초.
- 12.3~13.9초: 한 줄의 맨 앞 손님이 그때 비어 있는 계산대로 간다(대본: 계산대 1·2·3 이 0.3초씩 엇갈려 빈다). 「나」는 도착한 순서 그대로 여섯째로 계산대에 닿는다 — 아무도 「나」를 앞지르지 않는다.
- 글: 11.6초부터 END_1·END_2·END_3 세 줄이 위쪽(기준선 y 380·470·590)에 층 시차 마스크 리빌(0.12초 간격). END_3 는 ME 색, 크기 84px. 13.9초까지 그대로(읽을 시간 1.9초, 16음절).
- CUES: 11.7 swish, 손님이 계산대로 갈 때마다 tick, 11.6·11.72·11.84 pop(작게).

장면 6 — 끝 카드 (13.9~16.5초) — [필름 문법]의 끝 카드 서명. 로고 점이 되는 7개 = 그 순간 줄에 서 있는 손님 원 가운데 앞에서부터 7개(「나」가 남아 있으면 「나」를 포함 — 「나」는 위쪽 3개 중 하나가 된다). 나머지(계산대·띠·글·남은 손님)는 13.9~14.1초에 EXIT 로 닫힌다. 로고 → BRAND → TITLE. 16.0초까지 정지, 16.0~16.5초 닫혀 프레임 494 = 프레임 0.
- CUES: 14.0 whoosh, 점이 앉을 때마다 tick, 14.7 thud.

[필름 문법 — 모든 장면에 지킨다]
- 한 자리에 두 장면의 글이 동시에 있지 않는다. 다음 장면의 그림이 움직여 들어오거나 커지기 전에 앞 장면의 글은 다 닫혀 있어야 한다(닫힘 끝 → 다음 움직임 시작 사이 ≥ 0.1초). 그림이 글 자리를 지나가야 하면 글을 먼저 닫는다.
- 장면 글(물음·설명·결론)은 INK 로 쓴다. MUTED 는 번호·작은 표시에만 쓰고, 읽어야 하는 글에 쓰지 않는다(밝은 바탕에 회색 글은 폰에서 안 읽힌다).
- 반투명으로 겹쳐 보이는 순간을 만들지 않는다. 사라지는 요소는 EXIT 로 완전히 사라진 뒤 새 요소가 같은 자리에 온다. 판을 처음 자리로 되돌릴 때는 모든 요소가 불투명도 1 인 채 한 번에 미끄러져 돌아가고, 같은 자리에 두 요소가 0.05초 넘게 겹치지 않게 순서를 엇갈린다.
- 카메라가 완전히 멈춘 장면은 없다: 장면마다 그림 전체가 아주 느리게 다가온다(장면 길이 동안 크기 1.00 → 1.03, 가운데 기준, 선형). 장면이 바뀔 때 1.00 으로 이어 붙는다(튀지 않게 다음 장면은 그 자리에서 이어서 계산).
- 물음 글은 한 글자씩 친다(글자당 0.05초, 끝에 깜박이는 막대 커서 6px × 0.9em, ME 색 — 칠 때는 켜진 채, 다 치면 0.5초 주기로 깜박이다 닫힐 때 같이 사라진다).
- 끝 카드는 우리 서명으로 닫는다(모든 편 같은 문법): 그 장면에 남아 있던 점·원(손님·승객·엘리베이터 표시 등) 가운데 7개가 화면 가운데(540, 860)로 날아와 반지름 46px 원 위에 고르게 앉아 로고 점이 된다(0.05초 간격, MOVE 0.45초, 점 지름은 앉으며 22·16 으로 번갈아, 위쪽 3개는 ME 색, 나머지 INK). 남은 점은 그 자리에서 EXIT 로 사라진다. 이어 로고 아래 가운데에 BRAND 56px 굵기 800 INK(기준선 y 1010) 마스크 리빌, 0.2초 뒤 TITLE 64px 굵기 800 INK(기준선 y 1110, 가운데 정렬). 정지 ≥ 0.5초 뒤 모두 닫혀 프레임 0 과 같은 바탕.

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

이 작품만의 구현:
- 첫 <script> 맨 앞에 CONFIG 객체를 두고 바꿀 곳 절과 이 글의 숫자(장면 시각표·계산 대본·크기·색·이징)를 이름 붙여 모은다. 장면 시각은 CONFIG.T 표 하나에.
- 캔버스 하나(기준 1080×1920)에 그린다. 그림은 시간 t(초)만으로 계산하는 render(t) 로 그린다 — 손님 위치도 대본에서 t 로 바로 계산한다(누적 상태·시뮬레이션 루프를 프레임마다 돌리지 않는다). requestAnimationFrame 의 타임스탬프로 t = (경과 초) mod DURATION. setTimeout·setInterval·CSS 애니메이션으로 움직이지 않는다. 같은 t 는 언제나 같은 그림이다.
- window.renderAt = t => render(t), window.DURATION = 16.5 를 열어 둔다(renderAt 이 한 번이라도 불리면 재생 루프는 멈춘다 — 영상 굽기용).
- window.CUES = [{t: 초, kind: "swish"|"pop"|"tick"|"thud"|"whoosh"|"key"}] 를 시각 순으로(위 장면들이 말한 자리 전부, 대본에서 계산). 소리는 이 파일에서 내지 않는다.
- 화면 맞추기: 창 크기에 맞춰 화면비를 지키며 가운데에 꽉 차게(남는 곳은 BG). devicePixelRatio 는 2 까지만. 창 크기가 0 이면 다음 프레임에 다시.
- 마스크 리빌 = 글 줄 상자로 클립하고 안의 글을 기준선 아래 1.1em 에서 0 으로(ENTER). 불투명도는 움직임 길이의 55% 안에 0 → 1. 페이드만으로 나타나는 글은 없다.
- 이징은 CONFIG.EASE 에 셋, 베지어는 뉴턴법 6회 + 이분법 20회, 입력 0·1 에서 정확히 0·1.
- 브라우저 저장소를 쓰지 않는다. 모든 함수·상수를 먼저 정의하고 시작은 맨 끝에서 한 번. 콘솔 오류 없이.
- 자기 대조(시작할 때 한 번, console.table · 어긋나면 console.warn, try/catch): 판마다 1등 줄(왼쪽·가운데·오른쪽)과 끝나는 시각 · 첫 판에서 「나」가 계산을 끝내는 시각 > 왼쪽 줄 끝 시각 · 장면 5 에서 「나」보다 늦게 선 손님 중 「나」보다 먼저 계산대에 닿는 손님 수 = 0 · renderAt(0) 이 BG 한 색 · 어느 시각이든 서로 다른 장면의 글이 같이 보이는 프레임 수 = 0(0.1초 간격으로 훑어 센다) · 4배속·새로 세우기 동안 손님 원끼리 중심 거리 < 84px 로 겹치는 프레임 수 = 0.

[하지 말 것] — 이유와 함께
- 남색·보라 바탕, 그라디언트, 발광, 입자, 반짝이 — AI 영상의 기본값이다. 이 영상은 종이 위 평면 그림처럼 깔끔하다.
- 손님 원에 얼굴·표정·이모지를 그리지 않는다 — 원과 색만으로 충분히 읽히고, 얼굴이 들어가면 장난감처럼 보인다.
- 글을 가운데 정렬로 쌓기 — 가운데는 STAT 숫자와 끝 카드뿐이다.
- 모든 등장이 페이드+위로 20px, 모든 요소가 같은 이징으로 동시에 — 생성물의 표지다.
- 이 글에 없는 숫자·문장을 지어내지 않는다(블로그 글의 문장이다). 「3배 빠르다」 같은 다른 숫자를 넣지 않는다.
- 튕김은 「나」를 알리는 0.8초의 한 번뿐이다.