프롬프트 사이트 소개 영상

프롬프트 설정

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

16:9, 30초짜리 웹사이트 소개 영상(런치 필름)을 HTML 파일 하나로 만들어 줘. 「AI 레시피」라는 실제 사이트의 화면을 HTML 로 다시 짓고, 카메라가 그 화면 위를 비스듬히 미끄러지며 사람이 쓰는 순서 그대로 — 찾고, 고르고, 글자를 고치고, 복사하고, 붙여 넣으면 결과가 나오는 — 한 편의 이야기를 보여 준다. 화면 녹화가 아니라 다시 지은 화면이라 어느 프레임이든 선명하고, 끝은 로고로 닫힌다.

핵심 아이디어: 이 영상의 주인공은 「글 한 줄을 고치면 결과가 바로 바뀐다」는 한 순간이다(14.6초). 그 순간까지 관객을 사이트 안으로 데려가는 것이 앞 절반이고, 그 결과가 어디서든 그대로 나온다는 것과 그런 레시피가 55개라는 것이 뒤 절반이다. 장면마다 아이디어는 하나이고, 장면 사이는 카메라 이동으로 이어진다(잘린 컷이 아니라 한 공간을 도는 느낌).

쓰임: 사이트 첫 화면 위쪽 소개 영상, SNS 소개 영상. 소리는 따로 입힌다 — 소리가 날 자리를 목록(CUES)으로 내놓는다.

[바꿀 곳]
- HOOK_1 = "결과를 먼저 보고," · HOOK_2 = "골라 쓴다." (첫 장면 두 줄, HOOK_2 만 강조색)
- SITE_NAME = "AI 레시피" · SITE_SUB = "결과를 먼저 보고 골라 쓰는 프롬프트 55가지."
- BRAND = "내 블로그"
- PILLS = ["전부 무료", "상업 사용 가능", "출처 표기 선택"]
- SEARCH_PLACEHOLDER = "예: 로고, 차트, 카드뉴스" · SEARCH_TYPED = "한글" · CHIPS = ["로고", "차트", "한글", "카드뉴스", "SNS", "3D"]
- TABS = [["전체", 55], ["모션그래픽", 32], ["미니게임", 13], ["3D", 9], ["작은 도구", 1]]
- CARDS(6장, 제목 · 분류): ["한글이 조립되는 문장", "모션그래픽"] · ["수묵 산수 패럴랙스", "모션그래픽"] · ["단청 문양 그리기", "모션그래픽"] · ["조각보 분할", "모션그래픽"] · ["달항아리 물레", "모션그래픽"] · ["창호 문살 빛", "모션그래픽"]
- DETAIL_TITLE = "한글이 조립되는 문장" · DETAIL_SUB = "자모 조각이 날아와 맞물리는 순간 한 글자가 되어 「또잉」 튕긴다."
- FIELDS(프롬프트 설정 칸 3개, 이름 · 처음 값): ["큰 문장 첫 줄", "오늘도"] · ["큰 문장 둘째 줄", "한 걸음씩"] · ["작은 문장", "작게 시작해도 괜찮아요"]
- EDIT_TO = "천천히" (첫 칸을 이 말로 고친다)
- CAPTIONS(장면 아래 왼쪽 자막 줄, 시각은 장면 절): "찾고," · "고치고," · "붙여 넣으면, 그대로." · "레시피 55가지."
- PALETTE: INK #141413(어두운 면·글자) · PAPER #F6F1E7(사이트 바탕) · PANEL #EAE1CF(설정 칸 바탕) · AMBER #E9A23B(강조색 — 로고 점, HOOK_2, 지금 누르는 것 하나) · MUTED #8A847A(보조 글자) · STAGE #0F0F0E(미리보기 칸) · PREVIEW_ACCENT #F25A2C(미리보기 작품 안의 강조 낱말 하나에만 — 그 작품의 실제 색이다)

[크기]
- 기준 화면 1920×1080, 30fps, DURATION = 30.0초(프레임 0~899). 짧은 변 S = 1080.
- 사이트 화면은 「페이지 판」 하나에 짓는다: 가상 크기 1600×1000px 의 div. 실제 사이트처럼 보이도록 아래 [사이트 다시 짓기]의 치수를 그대로 쓴다. 카메라는 이 판을 3D 로 기울이고 밀고 당긴다.
- 화면에서 **읽혀야 하는 글**(장면 자막·HOOK·지금 치고 있는 글·누르는 단추 글자·큰 숫자·끝 카드)은 어느 시각이든 화면 위 실제 크기가 28px 이상, 장면 자막은 44px 이상이다(압축·폰 화면에서 이보다 작으면 뭉개진다). 판 안의 나머지 글(메뉴·카드 설명 같은 배경 글)은 그 장면의 분위기라 작아도 되지만, 화면 위 12px 아래로는 줄이지 않는다.
- 선·테두리는 화면 위 2px 이상, 강조 테두리(지금 누르는 칸)는 3px 이상.
- 자막 줄 자리: 왼쪽 x 96px, 기준선 y 1080 − 110 = 970px, 크기 48px 굵기 700 PAPER, 자막은 언제나 칩 위에 얹는다(칩 바탕 INK 불투명도 0.94, 둥근 14, 안쪽 여백 위아래 14·좌우 26, 자막 앞에 AMBER 4px × 32px 세로 막대 하나). 칩은 그 뒤 화면(사이트 판·단추)을 깨끗하게 가리고, 자막 글이 판 글과 섞여 읽히는 프레임이 없다. 한 번에 자막은 하나뿐 — 다음 자막이 들어오기 0.05초 전에 앞 자막은 다 닫혀 있다.
- 세이프 영역: 판 밖에 얹는 글(HOOK·자막·끝 카드)은 x 96~1824, y 54~1026 안.

[사이트 다시 짓기] (페이지 판 1600×1000 안 좌표, 글꼴은 아래 구현 절의 시스템 글꼴, 글자 크기 px)
허브 화면(장면 2):
- 머리줄 y 0~96, 바탕 PAPER: 왼쪽 x 72 에 로고(작은 점 7개를 반지름 13px 원 위에 고르게 놓고 지름 4~6px 로 크기를 번갈아, 위쪽 3개만 AMBER 나머지 INK) + BRAND 26px 굵기 800. 오른쪽에 메뉴 "글 · 영상 · 책 · AI 레시피 · 소개" 20px(「AI 레시피」만 밑줄 2px), 맨 오른쪽 INK 단추 "최신 글과 영상 →" 20px PAPER 글자, 둥근 모서리 8px, 높이 46.
- 히어로 띠 y 96~610, 바탕 INK 가로 전체. 위에서부터 가운데 정렬: 빵부스러기 "홈 / AI 레시피" 18px MUTED(왼쪽 x 72, y 140) · PILLS 세 알약(높이 34, 18px, 첫째는 PAPER 바탕 INK 글자, 나머지는 #2A2927 바탕 PAPER 글자, 알약 사이 10px, y 180) · SITE_NAME 96px 굵기 800 PAPER(y 230~330) · SITE_SUB 26px PAPER 85% (y 360) · 검색 알약 폭 700 높이 66 둥근 33 바탕 #FFFFFF, 왼쪽 돋보기 아이콘(선 2.5px) + 자리표시 SEARCH_PLACEHOLDER 24px MUTED, 오른쪽 끝 INK 원형 단추 "찾기" 22px(지름 56 둥근 알약 폭 84) (y 410~476) · 그 아래 "자주 찾는 것" 16px MUTED + CHIPS 알약(테두리 2px #5A5752, 18px PAPER, 높이 36) (y 500) · 맨 아래 탭 줄 y 560~610: TABS 를 "이름 숫자"(숫자는 14px MUTED)로 22px PAPER, 탭 사이 44px. 고른 탭은 PAPER 바탕 INK 글자, 위 모서리만 둥근 10px 판(바탕과 이어진다).
- 카드 줄 y 640~: 제목 "새로 올라온 것" 28px 굵기 800 INK (x 72). 카드 4개×2줄 대신 3개×2줄(폭 460, 사이 28, x 72 부터), 카드 = 썸네일(460×258, 둥근 12, 아래 [썸네일]) + 아래 분류 "모션그래픽" 16px MUTED + 제목 24px 굵기 700 INK. 둘째 줄은 판 아래로 넘쳐 잘려도 된다(판은 1000px 에서 끝난다).

상세 화면(장면 3): 같은 머리줄 + 빵부스러기 "홈 / AI 레시피 / 모션그래픽 / " + DETAIL_TITLE(18px). 왼쪽 미리보기 칸 x 120~520, y 140~852(400×712, 9:16, 둥근 18, 바탕 STAGE) · 그 아래 알약 단추 "다시 재생" "새 탭에서 보기"(테두리 2px, 18px). 오른쪽 x 580~1500: 분류 "한글" 16px AMBER, DETAIL_TITLE 56px 굵기 800, DETAIL_SUB 24px MUTED, 소제목 "프롬프트 설정" 28px 굵기 800, 설정 상자(바탕 PANEL, 둥근 18, x 580~1180, y 400~900): 안내 "설정을 바꾸면 미리보기에 바로 반영됩니다." 18px MUTED · FIELDS 3칸(이름 20px 굵기 700 + 오른쪽 끝 글자 수 "3/5" 16px MUTED, 입력칸 높이 56 바탕 #FBF8F2 테두리 2px #D9CFBC 둥근 10, 값 24px INK) · 상자 아래 고정 단추 "프롬프트 복사" INK 바탕 PAPER 글자 24px 굵기 700, 높이 64 둥근 32, 폭 220 (x 600, y 920).

미리보기 칸 안 작품(작게 다시 그린 것): 바탕 STAGE. 세로 가운데에 FIELDS[0] 값(크기 110px 굵기 800 PAPER), 그 아래 줄 "한 " + "걸음씩"(「걸음씩」만 PREVIEW_ACCENT, 밑줄 6px) 110px, 그 아래 FIELDS[2] 값 32px PAPER 85%. 글자는 음절마다 등장한다: 음절 하나가 0.36초 동안 위 0.6em 에서 내려와(ENTER) 크기 1.12 → 1.0 으로 한 번 튕기며(넘침은 이 튕김 하나뿐, 크기 12% 이내) 자리에 앉는다. 음절 간격 0.07초. 미리보기 작품의 시간은 영상 시간과 따로 흐른다(장면이 정하는 시각에 0 부터 다시 시작).

[썸네일] — 사진·외부 그림 없이 각 작품의 성격이 한눈에 보이게 판 위에 직접 그린다(캔버스 하나 또는 SVG). 모두 정지 그림이고, 화면에 보이는 동안 아주 느리게(4초에 화면 폭 2% 이하) 움직여도 된다.
1 한글이 조립되는 문장: STAGE 바탕에 굵은 두 줄 "오늘도 / 한 걸음씩"(「걸음씩」 PREVIEW_ACCENT) · 2 수묵 산수 패럴랙스: 밝은 한지색 바탕(#EDE7DA)에 먹 농담이 다른 산 능선 세 겹(명도 25%·45%·65%), 아래가 부드럽게 흐려짐 · 3 단청 문양 그리기: 짙은 녹청(#1F4E4A) 바탕에 반원·꽃잎 기하 문양(주황 #D9643A·흰 #F2EBDD·먹 #1A1A1A)을 가운데 대칭으로 · 4 조각보 분할: 크기가 다른 직사각형 9~12개로 나눈 면(파스텔 6색, 사이 4px 꿰맨 선 #F6F1E7) · 5 달항아리 물레: 회색빛 바탕(#3A3936)에 우윳빛 항아리 실루엣(#EFE9DC) 하나, 아래 그림자 타원 · 6 창호 문살 빛: 어두운 바탕(#22201C)에 격자 문살(가는 선 3px #C9A86A) 사이로 비스듬한 빛 띠(투명도 25%).

[장면] — 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, 나타남은 ENTER, 사라짐은 EXIT. 선형은 타자 진행·숫자 세기·느린 흐름에만.

장면 1 — 물음 (0.0~3.6초), 바탕 INK, 판 없음
- 0.0 빈 INK 화면(프레임 0 은 완전히 비어 있다 — 반복 이음매). 0.25초부터 HOOK_1 을 한 글자씩 친다(글자당 0.06초, 끝에 깜박이는 막대 커서 4px × 0.9em, 깜박임 주기 0.5초 — 칠 때는 켜진 채). 크기 92px 굵기 800 PAPER, 왼쪽 x 160, 기준선 y 500. 
- 1.35초부터 둘째 줄 HOOK_2 를 같은 방식으로(기준선 y 620, AMBER). 2.0초 이후 정지 — 읽을 시간 1.0초.
- 3.0~3.6초: 두 줄이 화면 안쪽으로 물러난다(크기 1 → 0.82, 불투명도 1 → 0, EXIT, 위로 40px). 동시에 3.1초부터 페이지 판이 화면 오른쪽 아래 멀리서 기울어진 채 들어온다(장면 2 의 시작 카메라로 MOVE 0.5초). CUES: 글자마다 key, 3.1 whoosh.

장면 2 — 찾기 (3.6~9.0초), 허브 화면
- 카메라 시작(3.6초): 판이 화면 안에서 크게 기울어 있다 — rotateX 32°, rotateZ −10°, rotateY 6°, 판 가운데가 화면 가운데보다 아래 오른쪽(x +180, y +140), 크기는 히어로의 SITE_NAME 이 화면에서 약 150px 높이로 보일 만큼 가깝다. 원근 거리 1600px. 판 먼 쪽(위쪽)은 흐림 4px, 가까운 쪽은 선명 — 얕은 초점(아래 구현 절의 초점 규칙).
- 3.6~4.4초: 카메라가 판을 따라 위로 미끄러진다(히어로 PILLS·SITE_NAME·SITE_SUB 가 지나간다). SITE_NAME 이 화면 가운데를 지날 때(약 4.0초) 그 줄이 초점면.
- 4.4~5.2초: 커서(흰 화살표 28px, 검은 테두리 2px, 그림자 없음)가 화면 오른쪽 밖에서 들어와 검색 알약에 멈춘다(MOVE). 5.2초 클릭(커서 크기 0.85 → 1, 0.12초 · 검색 알약 테두리 AMBER 3px 로 켜짐). 카메라는 검색 알약이 화면 가운데에 오도록 기울기를 rotateX 32 → 18° 로 줄이며 다가간다.
- 5.3~5.75초: SEARCH_TYPED 를 친다(글자당 0.18초 — 한글 자판 두 번 누름). 자리표시는 첫 글자에서 사라진다. 자막 CAPTIONS[0] "찾고," 가 5.3초에 들어온다(마스크 리빌 0.4초, 아래 구현 절).
- 6.0초: 커서가 "찾기" 로 가서 6.25초 클릭. 6.3~6.8초 탭 줄에서 "모션그래픽 32" 가 골라진 탭이 되고(판 바탕이 옆으로 미끄러져 옮겨 간다, MOVE 0.35초), 카드 6장이 0.06초 간격으로 아래에서 1em 올라오며 나타난다(마스크 리빌, ENTER 0.45초, 썸네일 → 글자 순, 층 시차 2프레임).
- 6.8~9.0초: 카메라가 첫 카드 「한글이 조립되는 문장」 쪽으로 천천히 다가가며(MOVE 2.2초) 기울기를 rotateX 18 → 8°, rotateZ −10 → −3° 로 편다. 첫 카드가 초점면, 나머지 카드는 흐림 2~5px. 커서가 7.8초부터 첫 카드로 가 8.6초에 클릭(카드 테두리 AMBER 3px).
- CUES: 5.2 click, 글자마다 key, 6.25 click, 6.3 swish(탭), 카드마다 pop, 8.6 click.

장면 3 — 고치기 (9.0~17.5초), 상세 화면 — 이 영상의 중심
- 9.0~9.8초 이어 붙임: 누른 카드의 썸네일이 그대로 커지며 상세 화면의 미리보기 칸 자리·크기로 옮겨 간다(같은 요소가 이동 — 위치·크기·둥근 모서리 12 → 18, MOVE 0.8초). 그동안 허브 화면은 그 자리에서 흐려지며(흐림 0 → 12px, 불투명도 1 → 0) 사라지고 상세 화면의 나머지가 나타난다(오른쪽 칸 글들이 층 시차로 0.05초 간격 마스크 리빌). 카메라는 rotateX 8°, rotateY −8°(오른쪽 설정 칸이 조금 가까이) 로.
- 9.8초: 미리보기 칸 안 작품이 처음부터 재생된다(FIELDS 값 그대로 — "오늘도 / 한 걸음씩 / 작게 시작해도 괜찮아요"). 약 1.3초 만에 모두 앉는다.
- 10.6~11.4초: 커서가 첫 칸(큰 문장 첫 줄)으로. 11.4 클릭 — 칸 테두리 AMBER 3px, 칸 안 커서 막대. 자막 CAPTIONS[1] "고치고," 가 11.4초에 들어온다("찾고," 는 장면 2 가 끝나는 8.8~9.0초에 이미 위로 닫혀 있다 — 상세 화면 위에 남지 않는다).
- 11.6~12.2초: 원래 값을 한 글자씩 지운다(글자당 0.12초, 뒤에서부터). 12.4~13.3초: EDIT_TO 를 친다(글자당 0.3초 — 한글 한 글자 = 2~3번 누름; 글자 중간 상태(ㅊ → 처 → 천)를 보여 주면 더 좋다 — 초성·중성·종성을 유니코드 공식(0xAC00 + (초성×21 + 중성)×28 + 종성)으로 조합해 보이면 된다). 글자 수 표시 "3/5" 도 따라 바뀐다.
- 13.3~14.6초: 카메라가 설정 칸에서 미리보기 칸으로 고개를 돌린다(rotateY −8 → +6°, 미리보기 칸이 초점면, 설정 칸 흐림 3px, MOVE 1.0초). 
- 14.6초 — 시그니처: 미리보기 작품의 첫 줄이 새 말 EDIT_TO 로 다시 조립된다. 옛 글자 "오늘도" 는 음절마다 위로 0.4em 빠지며 사라지고(EXIT 0.2초, 0.04초 간격), 새 글자 "천천히" 가 음절마다 튕기며 앉는다(위 미리보기 규칙). 둘째·셋째 줄은 그대로. 이 순간 카메라는 미리보기 칸을 향해 한 박 동안 밀고 들어간다(14.6~15.6초, 화면에서 미리보기 칸 높이 약 560 → 780px, MOVE). 작품 바깥은 흐림 6px 로 물러난다.
- 15.6~16.4초: 정지에 가까운 머무름(새 문장을 읽는 시간). 
- 16.4~17.2초: 카메라가 조금 물러나며 "프롬프트 복사" 단추가 통째로 보인다(16.6~17.2초 동안 단추 전체가 화면 x 120~1800, y 120~940 안 — 자막 칩과도 겹치지 않는다). 커서가 단추로 가 16.9초 클릭: 단추 바탕이 AMBER 로 바뀌고 글자가 "복사했어요 ✓" 로 바뀐다(글자 교체는 아래로 마스크 슬라이드 0.25초).
- CUES: 9.0 whoosh, 11.4 click, 지우는 글자마다 key, 치는 누름마다 key, 14.6 pop(음절마다 작은 pop 3개, 0.07초 간격), 16.9 click.

장면 4 — 붙여 넣기 (17.5~22.5초)
- 17.2~17.6초 휩 이동: 카메라가 오른쪽으로 빠르게 미끄러진다(화면 폭 1.2배 거리, 0.4초, MOVE). 이 동안 가로 방향 모션 블러(아래 구현 절). 같은 물건이 장면을 잇는다: 17.1초 「복사했어요 ✓」 단추에서 작은 묶음 칩(문서 아이콘 + "프롬프트" 26px, 바탕 AMBER, 둥근 14)이 떨어져 나와 화면 맨 위층에 떠서 커서와 함께 휩을 건너가고(블러 받지 않음), 18.0초에 입력 상자 안 「붙여 넣은 글」 묶음 자리·크기로 들어가 그 묶음이 된다(MOVE 0.4초, 바탕 AMBER → 묶음 바탕).
- 이어지는 화면: 이름 없는 AI 채팅 창 하나(판 하나, 1200×760, 바탕 #FBF8F2 — 어두운 무대 위의 밝은 창, 둥근 18, 테두리 2px #E2D9C8). 위쪽에 막대 세 개(대화 흔적 — 글 없음, 높이 14, 폭 60%·45%·52%, #E6DECF). 아래쪽 입력 상자(폭 1080, 높이 96, 바탕 #F2ECE1, 테두리 2px #E2D9C8, 둥근 20) 안 왼쪽 자리표시 "무엇이든 물어보세요" 24px MUTED. 카메라는 rotateX 12°, rotateZ 3° 로 살짝 기울어 있고 입력 상자가 화면 아래 3분의 1.
- 18.0초: 입력 상자에 붙여 넣기 — 자리표시가 사라지고 상자가 위로 자라며(높이 96 → 180, MOVE 0.4초) 안에 「붙여 넣은 글」 묶음이 나타난다: 왼쪽 문서 아이콘(선 2.5px) + "프롬프트 · 한글이 조립되는 문장" 26px INK 굵기 700 + 아래 "큰 문장 첫 줄: 천천히" 22px MUTED (묶음 바탕 #E9E1D2, 둥근 14). 자막 CAPTIONS[2] "붙여 넣으면, 그대로." 18.0초에 들어온다.
- 18.8초 커서가 보내기 단추(지름 52 원, AMBER, 위 화살표 흰색 선 3px)로 가서 19.2초 클릭. 묶음이 위로 올라가 대화의 내 말풍선이 된다(MOVE 0.4초).
- 19.6~22.0초: 답 자리에 결과 칸 하나가 펼쳐진다(16:9, 폭 760, 바탕 STAGE, 둥근 14, 위에서 아래로 마스크 리빌 0.5초) — 그 안에서 같은 작품이 새 문장으로 재생된다: "천천히 / 한 걸음씩 / 작게 시작해도 괜찮아요"(가로 배치, 크기는 칸 높이에 맞춰 줄인다). 카메라는 결과 칸으로 밀고 들어가 22.0초에 결과 칸이 화면 높이의 70%.
- CUES: 17.2 whoosh, 18.0 paste, 19.2 click, 19.6 swish, 결과 음절마다 작은 pop.

장면 5 — 58가지 (22.5~26.8초)
- 22.2~22.8초: 결과 칸이 그 자리에서 작아지며(1 → 0.22) 화면 가운데 타일 하나가 되고, 그 주변으로 타일 벽이 열린다: 5열 × 3줄 = 15장, 타일 크기 300×169, 사이 24px, 벽 전체가 원근 안에서 rotateY −14°, rotateX 6°. 타일은 [썸네일] 6종 + 같은 방식으로 그린 새 그림 8종(막대 차트 5개 막대 · 카드뉴스 표지(큰 제목 막대 + 작은 줄 3개) · 미로(격자 벽 선 3px) · 접히는 우산 실루엣 · 별자리 점과 선 · 큰 숫자 「37%」 · 자막 띠(아래 막대 + 글 줄) · 둥근 로고 획)로 채운다. 같은 그림이 이웃하지 않는다. 
- 타일들은 가운데에서 바깥으로 0.03초 간격으로 마스크 리빌(ENTER 0.4초). 벽은 22.8~26.8초 동안 오른쪽으로 느리게 흐른다(화면 폭의 6%, 선형) — 멈춘 벽이 아니라 흐르는 진열장.
- 23.2초: 벽 앞(초점면)에 큰 숫자가 0 → 55 로 센다(23.2~24.4초, ENTER 곡선 위에서 정수로, 숫자 300px 굵기 800 PAPER, 화면 왼쪽 x 160 기준선 y 640). 벽은 이 동안 흐림 4px·밝기 55% 로 물러난다. 숫자 오른쪽 아래에 TABS 의 넷 "모션그래픽 32 · 미니게임 13 · 3D 9" 이 한 줄 34px PAPER 80% 로 층 시차 리빌(24.4초부터 0.08초 간격). 자막 CAPTIONS[3] "레시피 55가지." 24.4초.
- CUES: 22.4 whoosh, 타일 리빌 3장마다 tick 1개, 숫자 세는 동안 정수가 바뀔 때마다 tick(단 0.05초 안에 둘 이상이면 하나로), 24.4 pop.

장면 6 — 끝 카드 (26.8~30.0초)
- 26.8~27.3초: 로고가 될 7장을 뺀 벽·숫자·자막이 화면 안쪽으로 물러나며 사라진다(크기 1 → 0.9, 불투명도 → 0, EXIT 0.5초, 층 시차: 자막 → 숫자 → 벽). 바탕 INK.
- 26.8초 — 우리 서명: 타일 벽이 물러나기 직전, 벽 가운데의 타일 7장이 각각 점으로 줄어들며(타일 → 지름 26·18 번갈아 점, 0.04초 간격, MOVE 0.5초) 화면 가운데 위쪽(960, 400)의 반지름 70px 원 위 자리로 날아와 앉아 로고 점이 된다(위쪽 3개 AMBER, 나머지 PAPER). 나머지 타일·숫자·자막은 26.8~27.3초에 물러나며 사라진다. 27.5초 BRAND 가 로고 아래 가운데(기준선 y 610)에 마스크 리빌(120px 굵기 800 PAPER), 27.7초 SITE_NAME 이 그 아래(기준선 y 690) 52px 굵기 700 PAPER 85%, 27.9초 PILLS 세 알약(높이 56, 글자 30px, 첫째 PAPER 바탕 INK 글자, 나머지 #2A2927 바탕 PAPER 글자, 알약 사이 14, y 750~806 가운데 정렬). 가운데 정렬은 이 끝 카드에만.
- 28.3~29.5초: 완전 정지.
- 29.5~30.0초: 모두 EXIT 로 닫히며(불투명도 → 0, 0.4초) 프레임 899 는 프레임 0 과 같은 빈 INK 화면.
- CUES: 26.8 whoosh(작게), 점이 앉을 때마다 tick, 27.5 thud, 27.9 pop.

[구현]
- 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 표 하나에 모아, 숫자만 바꿔 박자를 다듬을 수 있게.
- 화면은 DOM 으로 짓는다(사이트 화면·채팅 창·자막·끝 카드는 div·span, 썸네일 그림만 canvas 나 SVG). 카메라 = 바깥 무대 div 에 perspective 1600px, 그 안 카메라 div 의 transform(translate3d·rotateX/Y/Z·scale)을 시각마다 계산해 넣는다.
- 모든 움직임은 시간 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 = 30 을 열어 둔다(정지 화면·영상 굽기에 쓴다 — renderAt 을 부르는 동안은 재생 루프가 화면을 덮어쓰지 않게, renderAt 이 한 번이라도 불리면 재생 루프를 멈춘다).
- window.CUES = 소리 자리 목록 [{t: 초(소수 셋째 자리), kind: "key"|"click"|"whoosh"|"swish"|"pop"|"tick"|"paste"|"thud"}] 를 시각 순으로. 위 장면들이 말한 자리 전부이고, 타자·숫자 세기처럼 반복되는 것은 실제로 글자가 바뀌는 시각마다 하나씩. 소리는 이 파일에서 내지 않는다.
- 화면 맞추기: 1920×1080 무대를 창 크기에 맞춰 화면비를 지키며 가운데에 꽉 차게 축소·확대한다(남는 곳은 INK). 스크롤이 생기지 않게. 창 크기를 읽었는데 0 이면 다음 프레임에 다시 맞춘다(미리보기 칸이 처음 한순간 0 을 줄 수 있다).
- 마스크 리빌 = 글 줄을 overflow:hidden 상자에 넣고 안의 글을 아래 1.1em 에서 0 으로 올린다(ENTER). 불투명도는 움직임 길이의 55% 안에 0 → 1. 페이드만으로 나타나는 글은 없다.
- 초점(얕은 심도): 장면마다 「초점면」 요소를 정하고, 나머지 요소에 filter: blur(px) 를 준다. 판 안 요소의 흐림은 카메라에서 본 깊이 차에 비례(기울어진 판의 먼 쪽일수록 크게), 최대 6px. 흐림 값도 t 로 계산한다.
- 휩 이동의 모션 블러: 페이지 안에 SVG 필터 하나(feGaussianBlur stdDeviation 을 "가로 세로" 두 값으로)를 두고, 카메라 가로 이동 속도가 한 프레임에 화면 폭 3% 를 넘는 동안만 카메라 div 에 filter: url(#hblur) 를 걸어 가로 흐림 = 한 프레임 이동 거리의 0.5배(최대 40px), 세로 0.
- 커서는 판 밖, 화면 맨 위 층의 요소다. 커서의 화면 위치는 「가리키는 판 안 요소의 화면 위치」를 그 시각 카메라로 계산해서 정한다(getBoundingClientRect 를 render 안에서 읽어 써도 된다 — 단 transform 을 먼저 넣고 나서 읽는다). 그래야 기울어진 판 위 단추에 정확히 멈춘다.
- 이징: CONFIG.EASE 에 ENTER·EXIT·MOVE 셋. 베지어는 x(s) = 입력을 뉴턴법 6회 + 실패 시 이분법 20회로 풀어 y 를 돌려준다. 입력 0·1 에서 정확히 0·1.
- 장면 경계(카메라가 이어지는 자리)에서 위치가 튀지 않게, 카메라 값은 키 프레임 표(시각, rotateX, rotateY, rotateZ, x, y, z, scale)와 구간마다의 이징으로만 계산한다. 키 프레임 표를 CONFIG.CAM 에.
- 브라우저 저장소(localStorage·sessionStorage·IndexedDB·쿠키)를 쓰지 않는다 — 미리보기 칸에서 막혀 오류가 난다.
- 모든 함수·상수를 먼저 정의하고, 시작은 스크립트 맨 끝에서 한 번만. 콘솔에 오류가 나지 않게 한다.
- 자기 대조(시작할 때 한 번, console.table · 어긋나면 console.warn, try/catch 로 감싸 실패해도 재생은 돈다): renderAt(0) 화면이 비어 있다(INK 말고 보이는 요소 없음) · renderAt(14.0) 과 renderAt(15.6) 에서 미리보기 첫 줄 글이 각각 FIELDS[0] 값과 EDIT_TO · CUES 개수와 첫·끝 시각 · 읽혀야 하는 글 요소들의 화면 글자 크기 최솟값(장면별) ≥ 28px.

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