엘리베이터 역설 쇼츠

프롬프트 설정

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

9:16 세로, 21초짜리 쇼츠용 설명 영상을 HTML 파일 하나로 만들어 줘. 「2층에서 엘리베이터를 부르면 왜 늘 내려오는 게 먼저 올까」를 7층 건물 단면 그림 하나로 답한다. 버튼을 누를 때마다 「↓」 칩이 쌓여 짜증이 쌓이고(여섯 번 중 다섯 번), 그 칩들이 그대로 날아가 엘리베이터 통로의 칸이 되며 답(위쪽 5칸 · 아래쪽 1칸 = 5/6)을 보여 준다. 마지막에 내가 6층으로 옮기면 색이 뒤집힌다 — 이유는 엘리베이터가 아니라 내가 선 자리.

핵심 아이디어: 같은 물건이 장면을 잇는다. 쌓인 실패 기록(칩)이 다음 장면에서 설명 도형(통로의 칸)이 되고, 끝에는 그 칸의 점들이 로고가 된다. 잘린 컷이 아니라 변하는 물건이다. 글은 블로그 글의 문장이다.

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

[바꿀 곳]
- Q = ["2층에서 부르면", "왜 늘 내려오는 게", "먼저 올까"] (물음 세 줄)
- S2_TOP = "버튼을 6번 눌러 보면" · S2_BIG = "6번 중 5번 내려온다"
- S3_TOP = "위쪽 5칸, 아래쪽 1칸" · STAT = "5/6" · STAT_SUB = "엘리베이터가 위쪽에 있을 확률"
- S4_TOP = ["6층에서는 반대로", "6번 중 5번 올라온다"]
- END = ["이유는 엘리베이터가 아니라", "내가 선 자리에 있다"] (둘째 줄만 강조색)
- TITLE = "엘리베이터 역설" · BRAND = "내 채널" · ME_LABEL = "나"
- PALETTE: BG #E8ECEF(바탕) · INK #14181B(글·엘리베이터) · FLOOR #BFC8D0(층 선) · SHAFT #D6DCE2(통로) · ME #F2A93B(나·강조 낱말·로고 위 점 — 이 색은 이 셋에만) · DOWN #3D6FD9(내려옴) · UP #2E8B5E(올라옴) · MUTED #6F7880(층 번호)

[크기]
- 기준 화면 1080×1920, 30fps, DURATION = 21.0초(프레임 0~629). 짧은 변 S = 1080.
- 쇼츠·릴스 화면의 위·아래는 앱 단추가 덮는다: 글은 y 230~1500, x 72~1008 안. 왼쪽 정렬, 왼쪽 경계 x 72(가운데 정렬은 STAT 과 끝 카드뿐).
- 글 크기: Q 96px 굵기 800(기준선 y 320·425·530) · 장면 위 글 64px 굵기 800 INK(기준선 y 320, 둘째 줄 410) · S2_BIG 84px 굵기 800 · STAT 300px 굵기 800 · STAT_SUB 48px 굵기 700 · END 첫 줄 60px 굵기 700 INK · 둘째 줄 76px 굵기 800 ME · 층 번호 44px · 칩 화살표 56px. 어느 글도 44px 아래로 줄이지 않는다(폰·압축에서 뭉개진다). 줄이 x 1008 을 넘으면 그 줄 크기만 비율대로 줄인다(44px 아래로는 안 줄인다).
- 건물 단면: 1층~7층 바닥 선 y_k = 1480 − (k−1)·130 (1층 1480, 2층 1350 … 7층 700), 선은 x 250~1000, 3px FLOOR. 층 번호 "1층"~"7층" 은 x 230 에 오른쪽 맞춤, 바닥 선 위 12px 기준선. 통로(SHAFT)는 x 620~800, y 580~1480, 둥근 모서리 8. 엘리베이터 = 통로 안 INK 둥근 사각 160×116(둥근 14), 바닥이 그 층 바닥 선에 닿는다, 가운데에 진행 방향 화살표(흰 ▲/▼, 44px).
- 「나」 = ME 원 지름 96, 안에 ME_LABEL 흰 44px 굵기 800, 2층 바닥 선 위에 선다(중심 x 430, y 1350 − 52). 「나」 오른쪽(x 500~560)에 호출 단추 판(흰 둥근 사각 60×96, 테두리 3px INK, 안에 작은 ▲▼ 두 개 — 선 3px).
- 선은 2px 이상, 강조 테두리 3px 이상.

[엘리베이터 움직임] — 정해진 식(무작위 아님)
- 엘리베이터는 1층과 7층 사이를 쉬지 않고 같은 빠르기로 왕복한다(블로그 글의 모형). 한 바퀴 P = 3.0초. 위상 φ(t) = ((t − 2.6) mod 3.0) / 3.0(음수도 0~1 로 감는 mod). 층 위치 f = 1 + 12φ (φ ≤ 0.5, 올라감) · f = 7 − 12(φ − 0.5) (φ > 0.5, 내려감). 화면 y = 1480 − (f − 1)·130.
- 버튼을 누르는 시각 6개: 3.0 · 3.9 · 4.75 · 5.45 · 6.3 · 7.2초. 누른 순간 엘리베이터가 2층보다 위(f > 2)거나 2층 위로 올라가는 중이면 다음 2층 도착은 내려오는 방향(↓), 2층보다 아래(f < 2)면 올라오는 방향(↑). 이 식으로 계산하면 순서대로 ↓ ↓ ↓ ↑ ↓ ↓ 가 나온다(자기 대조에서 확인).
- 엘리베이터는 0.5초에 나타나 9.0초까지 움직인다. 9.0~9.2초 EXIT 로 사라진다.

[장면] — 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).

장면 1 — 물음 (0.0~2.8초)
- 프레임 0: BG 만(반복 이음매).
- 0.1~0.7초: 층 선이 아래층부터 한 줄씩 왼쪽에서 오른쪽으로 그려진다(선 그리기, 0.06초 간격, 각 0.35초 MOVE). 층 번호는 선과 함께 마스크 리빌. 통로는 0.3초에 아래에서 위로 와이프(0.4초). 「나」와 단추 판은 0.6초에 ENTER(크기 0.9 → 1, 불투명도 0 → 1, 0.3초 — 「나」의 튕김은 이것 한 번뿐).
- Q 세 줄을 0.3초부터 한 글자씩 친다(아래 [필름 문법]). 다 친 뒤 2.6초까지 그대로, 2.6~2.8초 위로 닫힌다(EXIT 0.2초).
- CUES: 0.1 swish, 글자마다 key(0.05초 안에 둘이면 하나로), 0.6 pop.

장면 2 — 짜증이 쌓인다 (2.8~9.0초)
- 2.85초 S2_TOP 이 위쪽(기준선 y 320)에 마스크 리빌.
- 버튼을 누를 때마다(6번): 단추 판의 ▼ 가 ME 로 0.2초 켜지고(테두리 3px), 같은 순간 엘리베이터에서 2층까지 통로 안에 다가오는 길이 점선(4px, 그 방향의 색 DOWN/UP)으로 0.3초 만에 그려졌다가 0.4초 뒤 EXIT 로 지워진다(내려오는 길이면 엘리베이터 → 7층 끝 → 2층이 아니라, 지금 자리에서 2층까지 곧장 위→아래, 올라오는 길이면 아래→위 — 방향만 보여 주는 화살 머리 달린 점선). 그리고 위쪽 칩 줄에 칩 하나가 떨어진다: 칩 = 둥근 사각 120×120(둥근 24), 바탕 DOWN 또는 UP, 가운데 흰 ▼ 또는 ▲ 56px. 칩 줄은 x 72 부터 간격 20 으로 6칸, y 360~480. 칩은 위에서 60px 떨어지며 ENTER 0.3초(넘침 없음).
- 7.6초: S2_TOP 이 아래로 마스크 슬라이드되며 S2_BIG 으로 바뀐다(84px). 같은 순간 UP 칩(넷째)만 불투명도 0.35 로 물러나고, DOWN 칩 다섯이 0.06초 간격으로 한 번씩 1.0 → 1.06 → 1.0 (0.24초, MOVE) — 「다섯 번」을 세어 준다.
- 9.0초까지 그대로(읽을 시간 1.4초).
- CUES: 버튼 누를 때마다 click, 칩이 앉을 때마다 tick, 7.6 thud.

장면 3 — 칩이 칸이 된다 (9.0~13.0초)
- 9.0~9.2초: 엘리베이터 EXIT. S2_BIG 은 9.0~9.2초 위로 닫힌다.
- 9.2~10.0초 — 시그니처: 칩 여섯 개가 그대로 날아가 통로의 칸이 된다. DOWN 칩 다섯은 2층~7층 사이 다섯 칸(칸 k = k층 바닥 선과 k+1층 바닥 선 사이, 통로 폭 180 × 높이 130, 둥근 8)으로, UP 칩 하나는 1층~2층 칸으로. 칩마다 위치·크기·둥근 모서리가 함께 바뀐다(MOVE 0.6초, 칩 순서대로 0.04초 간격). 날아가는 동안 화살표는 칸 가운데에 그대로 붙어 있다. 넷째 칩(UP)의 불투명도는 날아가며 1.0 으로 돌아온다.
- 10.0초: 칸 오른쪽(x 820)에 이름표 두 개가 마스크 리빌 — 위쪽 다섯 칸 묶음 가운데 높이에 "위쪽" / "5칸"(48px 굵기 800 DOWN, 두 줄), 아래 한 칸 높이에 "아래쪽" / "1칸"(48px 굵기 800 UP, 두 줄). 그리고 S3_TOP 이 위쪽(기준선 y 320)에 마스크 리빌. 11.2초까지(읽을 시간 1.2초).
- 11.2~11.4초 S3_TOP 위로 닫힘. 11.4초: STAT 「5/6」 이 화면 가운데 정렬로 위쪽 글 자리(기준선 y 560)에 — 「5」 「/」 「6」 이 0.06초 간격으로 아래에서 마스크 리빌(ENTER 0.45초). 「5」 만 DOWN, 나머지 INK. 11.7초 STAT_SUB(48px INK, 가운데 정렬)가 숫자 바로 위(기준선 y 300)에. 13.0초까지(읽을 시간 1.3초).
- CUES: 9.2 swish, 칩이 칸에 앉을 때마다 tick, 10.0 pop, 11.4 thud.

장면 4 — 자리를 옮기면 뒤집힌다 (13.0~16.2초)
- 13.0~13.2초: STAT·STAT_SUB 위로 닫힘.
- 13.2~13.8초: 「나」와 단추 판이 2층에서 6층 바닥 선 위로 미끄러져 올라간다(MOVE 0.6초). 동시에 칸 색이 뒤집힌다: 6층~7층 한 칸만 DOWN(▼), 1층~6층 다섯 칸은 UP(▲). 칸마다 색·화살표가 아래 칸부터 0.05초 간격으로 바뀐다(색 바뀜 0.2초, 화살표는 위아래로 뒤집히는 회전 0.2초). 이름표도 따라 옮긴다: "위쪽 / 1칸"(DOWN)은 6~7층 칸 옆, "아래쪽 / 5칸"(UP)은 1~6층 묶음 옆 가운데.
- 13.4초: S4_TOP 두 줄이 위쪽(기준선 y 320·410)에 층 시차 마스크 리빌(0.12초 간격). 16.0초까지(읽을 시간 2.6초).
- CUES: 13.2 whoosh, 칸 바뀔 때마다 tick, 13.4 pop.

장면 5 — 결론 (16.2~18.8초)
- 16.0~16.2초: S4_TOP 위로 닫힘. 16.2초부터 END 두 줄 층 시차 마스크 리빌(0.15초 간격, 기준선 y 320·420). 둘째 줄은 ME 색 76px.
- 그림은 그대로(6층의 「나」, 뒤집힌 칸). 18.6초까지(읽을 시간 2.4초).
- CUES: 16.2 pop, 16.35 thud(작게).

장면 6 — 끝 카드 (18.8~21.0초) — 아래 [필름 문법]의 끝 카드 서명. 로고 점이 되는 7개 = 통로의 칸 6개 가운데 칸 하나하나의 가운데 점 6개 + 「나」 원 1개(칸은 날아가며 지름 22/16 의 점으로 줄어든다). 나머지(층 선·번호·단추 판·END 글)는 18.8~19.0초에 EXIT 로 닫힌다. 로고 → BRAND → TITLE. 20.5초까지 정지, 20.5~21.0초 닫혀 프레임 629 = 프레임 0.
- CUES: 18.9 whoosh, 점이 앉을 때마다 tick, 19.75 thud.

[필름 문법 — 모든 장면에 지킨다]
- 한 자리에 두 장면의 글이 동시에 있지 않는다. 다음 글이나 그림이 들어오기 전에 앞 글은 다 닫혀 있다(닫힘 끝 → 다음 시작 사이 ≥ 0.05초).
- 장면 글은 INK(강조 낱말만 ME). MUTED 는 층 번호에만.
- 반투명으로 겹쳐 보이는 순간을 만들지 않는다(넷째 칩을 일부러 물러나게 하는 것 하나만 예외).
- 카메라가 완전히 멈춘 장면은 없다: 장면마다 그림 전체가 아주 느리게 다가온다(장면 길이 동안 크기 1.00 → 1.03, 화면 가운데 기준, 선형). 다음 장면은 그 크기에서 이어서 다시 1.00 으로 MOVE 0.3초 돌아간 뒤 다시 다가온다(튀지 않게). 글은 이 확대에 넣지 않는다(글은 제자리).
- 물음 글은 한 글자씩 친다(글자당 0.05초, 끝에 깜박이는 막대 커서 6px × 0.9em ME 색 — 칠 때는 켜진 채, 다 치면 0.5초 주기로 깜박이다 닫힐 때 같이 사라진다).
- 끝 카드 서명: 정한 점 7개가 화면 가운데(540, 860)로 날아와 반지름 46px 원 위에 고르게 앉아 로고 점이 된다(0.05초 간격, MOVE 0.45초, 점 지름은 앉으며 22·16 으로 번갈아, 위쪽 3개는 ME, 나머지 INK). 이어 로고 아래 가운데에 BRAND 56px 굵기 800 INK(기준선 y 1010)가 마스크 리빌, 0.2초 뒤 그 아래 TITLE 64px 굵기 800 INK(기준선 y 1110). 정지 ≥ 0.5초 뒤 모두 닫혀 BG.

[구현]
- 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 애니메이션으로 움직이지 않는다.
- window.renderAt = t => render(t), window.DURATION = 21 을 열어 둔다(renderAt 이 한 번이라도 불리면 재생 루프는 멈춘다 — 영상 굽기용).
- window.CUES = [{t: 초, kind: "swish"|"pop"|"tick"|"thud"|"whoosh"|"click"|"key"}] 를 시각 순으로(위 장면들이 말한 자리 전부, 식에서 계산). 소리는 이 파일에서 내지 않는다.
- 화면 맞추기: 창 크기에 맞춰 화면비를 지키며 가운데에 꽉 차게(남는 곳은 BG). devicePixelRatio 는 2 까지만. 창 크기가 0 이면 다음 프레임에 다시.
- 마스크 리빌 = 글 줄 상자로 클립하고 안의 글을 기준선 아래 1.1em 에서 0 으로(ENTER 0.45초). 불투명도는 움직임 길이의 55% 안에 0 → 1. 페이드만으로 나타나는 글은 없다. 닫힘은 거꾸로(위로 1.1em, EXIT 0.2초).
- 이징은 CONFIG.EASE 에 셋, 베지어는 뉴턴법 6회 + 이분법 20회, 입력 0·1 에서 정확히 0·1.
- 브라우저 저장소를 쓰지 않는다. 모든 함수·상수를 먼저 정의하고 시작은 맨 끝에서 한 번. 콘솔 오류 없이.
- 자기 대조(시작할 때 한 번, console.table · 어긋나면 console.warn, try/catch): 버튼 6번의 방향 = ↓↓↓↑↓↓ · 하행 5 · renderAt(0) 이 BG 한 색 · 장면마다 글 줄의 오른쪽 끝 ≤ 1008 · 어느 시각이든 서로 다른 장면의 글이 같이 보이는 프레임 수 = 0(0.1초 간격으로 훑어 센다).

[하지 말 것] — 이유와 함께
- 남색·보라 바탕, 그라디언트, 발광, 입자, 반짝이 — AI 영상의 기본값이다. 이 영상은 종이 위 평면 그림처럼 깔끔하다.
- 사람 얼굴·표정·이모지 — 「나」는 원과 글자 하나로 충분하다.
- 글을 가운데 정렬로 쌓기 — 가운데는 STAT 과 끝 카드뿐이다.
- 모든 등장이 페이드+위로 20px, 모든 요소가 같은 이징으로 동시에 — 생성물의 표지다.
- 이 글에 없는 숫자·문장을 지어내지 않는다(블로그 글의 문장이다). 엘리베이터 대수·확률 다른 값(13/18 등)을 넣지 않는다.