연표 타임라인

프롬프트 설정

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

회사 연혁 타임라인 영상을 HTML 파일 하나로 만들어 줘. 미리보기에서 바로 재생되게. 길게 설명할 테니 숫자는 그대로 지켜 줘.

핵심 아이디어: 무대는 화면 전체를 덮는 커다란 크라프트지(원두 봉투 같은 갈색 종이) 한 장이다. 그 위에 에스프레소색 판지 띠로 된 연표 자(ruler)가 가로로 붙어 있고, 카메라가 그 위를 미끄러진다. 종이 결은 종이판에 붙어 있어 카메라가 날면 함께 흐르고, 물러나면 잘아지며 멀어진다. 왼쪽 위에서 스탠드 조명이 비춘다. 사건 사이에서는 빠르게 날고, 사건에 닿으면 멈춘다. 멈추는 순간 팝업북처럼 종이판 위에 납작하게 접혀 누워 있던 흰 종이 카드가 일어나고, 반으로 접혀 있던 윗장이 앞으로 튀어나오며 펼쳐져 「탁」 붙는다. 카드가 일어나면 종이판에 그림자가 생기고, 윗장이 앞으로 튀어나오는 순간 그 그림자가 오른쪽 아래로 길게 미끄러졌다가 카드가 붙으면 바짝 돌아온다 — 종이와 판 사이의 거리가 보이는 것이 이 작품의 볼거리다. 지나간 카드는 작아져 축 위에 남고, 마지막에는 카메라가 물러나 여섯 장이 그림자를 드리운 채 다 선 전체 연표 — 실물 종이 모형 같은 화면 — 가 한눈에 보인다. 그 전체 연표가 곧 첫 화면이다 — 카드들이 첫 카드부터 물결처럼 접혀 눕고, 첫 카드는 눕자마자 큰 카드로 다시 일어나며, 카메라가 그 카드로 날아 들어가 다시 시작한다.

[바꿀 곳]
- 머리 글(전체 연표 화면에만 보인다): 왼쪽 「온결 로스터리 연표」 · 오른쪽 작은 글씨 「가상의 회사 · 예시」
- 사건 — 지어낸 회사의 지어낸 연혁이다(실존 회사·인물이 아니다). 순서대로 연도 · 월 · 제목 · 한 줄 설명:
  1) 2009 · 3월 · 골목 창고에서 시작 · 로스터기 한 대, 직원 두 명
  2) 2011 · 9월 · 첫 매장 문을 열다 · 하루 손님 서른 명으로 출발
  3) 2015 · 5월 · 원두 정기 배송 · 구독자가 천 명을 넘기다
  4) 2018 · 11월 · 바닷가 2호점 · 창밖으로 파도가 보이는 자리
  5) 2021 · 6월 · 산지와 첫 직거래 · 농장 세 곳과 함께 고른 생두
  6) 2025 · 2월 · 다시, 그 골목으로 · 처음 창고 자리에 지은 로스팅 공방
  제목은 11자 안팎, 설명은 20자 안팎이 알맞다. 사건은 4~8개까지 넣을 수 있고, 넣은 개수에 맞춰 시간표와 전체 화면 배율이 아래 공식대로 따라 바뀐다.
- 색:
  종이판(크라프트) #C49C70 · 결의 어두운 섬유 #8F6A45 · 밝은 섬유 #E3C79F · 어두운 얼룩 #A87F55 · 밝은 얼룩 #D8B68C
  연표 자 띠(에스프레소 판지) #3A2619 · 눈금과 눈금 글자 #EBDCC2
  카드 종이 #FBF5EA · 종이 뒷면 #E2D2B6 · 카드 글자 #22170F · 강조 #BF3A1F
  머리 글과 격자선 잉크 #24180F · 그림자 #2A1A0E · 조명 #FFF2D6 · 화면비 밖 여백 #7A5A3C
  글자 대비는 바탕과 4.5:1 이상이어야 한다(시작할 때 스스로 재서 콘솔에 찍는다 — 아래 구현 절의 대비 대조표). 색을 바꿔도 이 기준은 그대로다.
- 길이: 사건 수로 정해진다(6개면 16초). 끝나면 처음으로 이어서 반복
- 화면비: 16:9 (캔버스 1920×1080)

[크기] — 화면 폭 W, 높이 H 기준
- 연표 자 띠: 화면 왼쪽 끝부터 오른쪽 끝까지, 높이 0.06H, 세로 중심 = 카메라가 정하는 축 높이 Y(아래 [카메라]). 띠의 위 가장자리 = Y − 0.03H, 아래 가장자리 = Y + 0.03H.
- 큰 카드(머무는 사건의 카드, 배율 S = 1): 폭 CW = 0.40W, 높이 CH = 0.50H, 모서리 반지름 0.012H.
  카드는 두 장으로 접힌 종이다. 축에 가까운 「제목 판」 높이 NH = 0.28H, 바깥쪽 「연도 판」 높이 FH = 0.22H. 둘 사이가 접는 선이다.
- 작은 카드(지나간 카드와 전체 연표의 카드): 배율 S_small = 0.24W ÷ 0.40W = 0.6 → 폭 0.24W, 높이 0.30H.
- 줄기: 띠의 바깥 가장자리에서 카드까지 길이 0.08H·S, 굵기 0.004H, 카드 종이색 85%(팝업북의 종이 탭). 줄기 끝이 카드 밑동 B 다(줄기가 자라는 동안은 길이 0.08H·S·g 의 끝을 따라간다 — g 는 아래 [종이 접힘]).
  카드는 B 를 기준으로 커지고 작아진다. 카드 가로 가운데 = 그 사건의 화면 x.
- 사건 표시 점: 띠의 바깥 가장자리(위쪽 카드면 위 가장자리, 아래쪽 카드면 아래 가장자리) 위, 사건 x 에 반지름 0.011H 강조색 원, 둘레에 카드 종이색 테 0.0035H(강조색이 크라프트·띠와 비슷한 밝기라 테가 점을 떼어 낸다 — 압정 머리처럼). 카드가 접혀 누워 있을 때도 늘 보인다.
- 카드는 위·아래를 번갈아 선다: 1·3·5번째 사건은 띠 아래쪽, 2·4·6번째는 띠 위쪽.
  (조명이 왼쪽 위라 그림자는 오른쪽 아래로 진다. 위쪽 카드에서 튀어나온 연도 판의 그림자는 카드 자신의 몸통 뒤에 떨어져 화면의 0.3% 쐐기로만 보이고, 아래쪽 카드에서는 카드 아래 빈 종이판 위로 화면의 약 9% 크기 사다리꼴이 미끄러진다. 그래서 첫 카드(0.95초)와 대표 장면(6.25초)이 아래쪽 카드여야 한다.)
  같은 쪽 이웃 사건은 늘 두 칸 떨어져 있어서, 전체 연표에서도 작은 카드끼리 겹치지 않는다(아래 [전체 연표] 검산).
- 화면 위치 공식: 연도 위치 y(소수 연도)의 화면 x = 0.5W + (y − c)·z·W. c = 카메라 가운데 연도, z = 1년이 화면 폭의 몇 배인지(W/년).
  사건의 연도 위치 e = 연도 + (월 − 0.5) ÷ 12. 기본 사건은 e = 2009.208 · 2011.708 · 2015.375 · 2018.875 · 2021.458 · 2025.125.
- 카드 크기는 카메라 배율 z 와 무관하다(화면에서의 크기). 카메라 배율은 카드 사이 거리만 바꾼다.

[카드 안 — 시작할 때 사건마다 큰 카드(S = 1) 한 장을 화면 밖 캔버스에 그려 둔다. 해상도 = 0.40W × 0.50H × devicePixelRatio]
- 바깥쪽이 연도 판이다. 위쪽 카드는 위에서부터 연도 판(0.22H) → 접는 선 → 제목 판(0.28H). 아래쪽 카드는 위에서부터 제목 판(0.28H) → 접는 선 → 연도 판(0.22H). 축에서 보면 두 쪽 카드가 거울처럼 같은 순서다.
- 바탕: 카드 종이색 둥근 사각형(종이 결·얼룩을 얹지 않는 깨끗한 흰 종이). 접는 선 자리에 2px 선(그림자색 10%)을 긋는다.
- 연도 판: 네 자리 연도를 숫자 높이(measureText('0').actualBoundingBoxAscent) 0.11H 가 되게 글꼴 크기를 역산해 굵기 800, 강조색으로. 왼쪽 끝 = 카드 왼쪽 + 0.028W, 숫자 세로 가운데 = 연도 판 세로 가운데.
  월(「3월」)은 글꼴 크기 0.036H, 굵기 700, 카드 글자색 78%(대비 8.2:1 — 68% 의 5.85 는 작은 카드에서 획이 옅어져 실측 5.1 까지 내려가고, 55% 면 3.8:1 로 기준 미달), 연도와 같은 기준선, 연도 잉크 오른쪽 끝 + 0.010W 에서 시작.
- 제목 판: 제목 글꼴 크기 0.060H 굵기 800 카드 글자색, 설명 글꼴 크기 0.034H 굵기 500 카드 글자색 78%(월과 같은 까닭). 설명 기준선 = 제목 기준선 + 0.064H. 왼쪽 끝 = 카드 왼쪽 + 0.028W.
  제목 윗선부터 마지막 설명 기준선까지의 묶음을 제목 판 세로 가운데에 둔다.
- 글자 영역 폭 = 0.40W − 2 × 0.028W = 0.344W(660px). 제목이 넘치면 글꼴 크기를 줄여 맞춘다(최소 0.045H). 설명이 넘치면 띄어쓰기에서 줄을 나눠 두 줄(줄 간격 0.048H)까지. 그래도 넘칠 때만 끝을 「…」로 줄이고 console.warn 으로 알린다.
- 기본 사건의 제목은 가장 긴 「골목 창고에서 시작」이 맑은 고딕 굵게에서 약 560px(0.29W), 설명은 가장 긴 것이 약 0.30W 라 줄임 0 · 두 줄 0 이 정상이다.

[종이 접힘 — 원근 띠로 그린다]
카드 한 장의 상태 = 줄기 진행 g(0~1), 제목 판 각도 θ(0° 누움 ~ 90° 섬), 연도 판 펼침 φ(0° 접힘 ~ 180° 펼침), 배율 S.
옆에서 본 평면에서 생각한다: u = 축에서 바깥쪽으로 잰 거리, w = 화면 안쪽으로 들어간 깊이(앞쪽은 음수).
- 제목 판 위의 점(밑동에서 거리 d, 0 ≤ d ≤ NH·S): (u, w) = d·(sinθ, cosθ). θ = 0 이면 판이 화면 안쪽으로 누워 보이지 않고, 90° 면 똑바로 서 있다.
- 접는 선 Hn = NH·S·(sinθ, cosθ).
- 연도 판 위의 점(접는 선에서 거리 d, 0 ≤ d ≤ FH·S): Hn + d·(sinβ, cosβ), β = θ + 180° − φ.
  φ = 0 이면 β = θ + 180° — 연도 판이 제목 판 위로 되접혀 포개져 있고 뒷면이 보인다. φ = 90° 면 판이 보는 사람 쪽으로 튀어나와 있다. φ = 180° 면 제목 판과 한 평면으로 펼쳐진다.
  sinβ > 0 이면 앞면(연도 글자), 아니면 뒷면(종이 뒷면 색 단색)을 그린다.
- 투영(원근): 초점 F = 2.2·CH·S. 점 (u, w) 의 화면 위치 = 밑동 B 에서 바깥쪽으로 u·F/(F + w), 그 자리의 카드 폭 = CW·S·F/(F + w)(카드 가로 가운데 기준).
  위쪽 카드의 바깥쪽 = 화면 위(−y), 아래쪽 카드의 바깥쪽 = 화면 아래(+y).
- 그리기: 판마다 d 를 24칸으로 나눠 칸마다 띠 하나를 drawImage 로 그린다. 띠의 위아래 = 두 끝점의 화면 위치를 장치 픽셀 정수로 반올림한 값(작은 쪽부터), 다음 띠와 1px 겹친다. 원본 = 미리 그린 카드에서 그 d 에 해당하는 가로줄.
  띠마다 그 띠의 사다리꼴(위 끝 폭과 아래 끝 폭이 다른 네 꼭짓점, 위아래는 위의 정수 경계 그대로)로 clip 한 뒤, 두 끝 폭 중 넓은 쪽 폭으로 drawImage 한다 — 폭 하나짜리 직사각형을 쌓으면 판의 옆선이 3~4px 계단이 된다. clip 은 움직이는 카드 한두 장의 띠에만 쓰므로 비용이 작다.
  (소수 픽셀 경계는 위아래 띠의 반투명 가장자리끼리 만나 배경이 비치는 가는 가로줄이 된다 — 24칸이면 카드 한 장에 줄 22개.)
  판이 평평할 때(θ = 90° 이고 φ = 180°)는 띠로 나누지 않고 카드 전체를 drawImage 한 번으로 그린다. 머묾·작은 카드·전체 연표가 모두 여기에 해당한다. 띠는 움직이는 동안에만 쓴다.
  한 장으로 그릴 때도 위아래 끝은 띠와 같은 규칙으로 정한다 — 밑동 B 와 바깥 끝(B 에서 0.50H·S)을 장치 픽셀 정수로 반올림한 값. 그래야 띠에서 한 장으로 바뀌는 프레임(카드가 붙는 순간)에 카드가 1px 튀지 않는다.
  제목 판의 d 는 카드의 축 쪽 변에서 접는 선 쪽으로, 연도 판의 d 는 접는 선에서 바깥 변 쪽으로 잰다. 그래서 글자는 거울상이 되지 않는다.
  뒷면은 네 꼭짓점(접는 선 양 끝, 연도 판 끝 양 끝)을 투영한 사다리꼴 하나로 칠한다.
- 판 음영: 띠마다 결의 어두운 섬유색(#8F6A45)을 알파 0.35·(1 − |sin(판 방향각)|) 로 덧칠한다(제목 판 방향각 = θ, 연도 판 = β). 판이 눕거나 보는 사람을 향해 모로 설수록 어둡다.
  가장 어두울 때 판 색 ≈ #D5C4B0(따뜻한 종이색). 그림자색 #2A1A0E 처럼 거의 검은 색을 섞으면 크림이 채도를 잃어 차가운 회색 판(#9D9287)이 되고, 그 위 빨간 연도가 1.8:1 로 죽는다. 이 판 위 강조색 연도 대비 3.2 는 움직이는 0.1초 동안뿐이라 4.5 기준 밖이다.
- 그리는 순서: 제목 판 → 연도 판(늘 그 위에). θ < 0.5° 이면 카드를 그리지 않는다(표시 점은 그린다).
- 펼침 시간표(카드마다 펼침 시작 U 부터 국소 시간 L, 길이 0.75초):
  줄기 g: L 0.00–0.15 에서 0 → 1, easeOutCubic.
  제목 판 θ: L 0.08–0.40 에서 0° → 90°, easeOutCubic.
  연도 판 φ: L 0.34–0.75 에서 φ = 180° × easeOutBack(v, c1 = 1.2), v = (L − 0.34) ÷ 0.41. (easeOutBack(x) = 1 + (c1+1)(x−1)³ + c1(x−1)²)
  이 식이면 φ 는 L ≈ 0.60 에서 최대 189.5° 까지 넘어갔다가(연도 판이 화면 안쪽으로 9.5° 젖혀진다) L = 0.75 에 정확히 180° 로 붙는다.
- 이 투영으로 검산한 펼침(세 번째 사건, U = 5.85초. 높이는 밑동에서 바깥쪽으로 잰 값):
  6.05초 θ 68° — 접힌 꾸러미(앞은 제목 판, 그 위에 연도 판 뒷면)가 0.24H 높이로 일어나는 중.
  6.25초 φ 91° — 연도 판이 보는 사람 쪽으로 튀어나와 끝 폭이 카드 폭의 1.25배, 앞면 글자가 막 보이기 시작.
  6.30초 φ 140° — 연도 판 끝이 밑동에서 0.515H(제자리 0.50H 보다 바깥), 끝 폭 1.15배.
  6.45초 φ 189.5° — 끝 폭 0.97배로 살짝 젖혀졌다가, 6.60초에 평평한 카드 0.50H 로 붙는다.
- 접어 눕히기(전체 연표에서 시작할 때): 펼침을 거꾸로, 길이 0.50초. 국소 시간 L 에서 φ 180° → 0°(L 0.00–0.22), θ 90° → 0°(L 0.18–0.45), 줄기 1 → 0(L 0.40–0.50), 모두 easeInOutCubic. 배율은 S_small 그대로.

[그림자 — 종이판에 떨어지는 카드의 그림자]
- 조명은 왼쪽 위 앞에서 온다. 종이판(바탕)은 카드 경첩보다 깊이 WS = 0.04H·S 만큼 뒤에 있다고 본다.
- 카드 위의 점 (u, w) 의 그림자 = 그 점의 화면 위치에서 (KX·h, KY·h) 만큼 옮긴 자리. h = max(0, WS − w), KX = 0.45, KY = 0.70(화면 오른쪽·아래가 +). 위쪽 카드와 아래쪽 카드 모두 같은 방향이다(조명은 하나다).
  평평한 카드(모든 점 w = 0): 그림자는 카드 사각형을 (0.45, 0.70)·0.04H·S 옮긴 같은 크기 둥근 사각형 — S = 1 이면 (19.4px, 30.2px), S = 0.6 이면 (11.7px, 18.1px).
  움직이는 카드: 띠마다 두 끝점을 각자의 h 로 옮긴 네 꼭짓점 사다리꼴(폭은 그 끝의 투영 폭). 앞면·뒷면 가리지 않고 판의 모든 띠가 그림자를 낸다. 종이판보다 뒤에 있는 점(w ≥ WS)은 h = 0 이라 그림자가 카드 바로 밑에 숨는다.
  θ < 0.5° 라 카드를 그리지 않는 동안은 그림자도 없다.
- 그리기: 화면 1/4 해상도(480×270, devicePixelRatio 와 무관)의 화면 밖 캔버스 「그림자 층」 하나. 프레임마다 지우고, 모든 카드의 그림자 도형을 그림자색 불투명(알파 1)으로 채운 뒤, 본 캔버스에 globalAlpha 0.30 으로 화면 전체 크기에 한 번 drawImage 한다(imageSmoothingEnabled = true).
  불투명으로 채워야 1px 씩 겹친 띠가 진한 가로줄이 되지 않는다. 4배로 늘려 그리는 보간이 가장자리를 약 4px 부드럽게 만든다 — 흐림 필터는 쓰지 않는다.
- 검산(세 번째 사건 — 아래쪽 카드, U = 5.85초):
  6.05초 θ 68° — 판의 바깥쪽만 종이판 앞에 있어 그림자가 (9px, 13px) 비켜 막 생긴다.
  6.15초 θ 87° — 거의 선 카드의 그림자가 (13~18px, 20~28px) 비킨다.
  6.25초 φ 91° — 앞으로 튀어나온 연도 판 끝(w = −0.22H, h = 0.26H)의 그림자가 오른쪽으로 126px·아래로 197px 까지 길게 미끄러진다. 그림자가 가장 긴 순간이다.
  6.30초 φ 140° — 끝 그림자 (87px, 136px).
  6.45초 φ 189.5° — 연도 판이 종이판 쪽으로 젖혀져(w = +0.036H) 끝 그림자가 (2px, 3px) 로 판에 붙는다.
  6.60초 — 평평한 카드와 함께 (19px, 30px) 로 돌아와 붙는다.
  아래쪽 카드의 그림자는 카드 아래 빈 종이판으로 떨어진다 — 이것이 볼거리다(6.25초에 화면의 약 9%). 위쪽 카드(2·4·6번째)에서는 같은 그림자가 카드 몸통 뒤에 가려 오른쪽 귀퉁이 쐐기로만 보이고 연표 띠에는 닿지 않는다.

[크라프트 종이판과 조명]
- 종이 결 타일: 시작할 때 1024×1024 화면 밖 캔버스 하나에 시드 고정 난수로 한 번 그린다.
  크라프트 #C49C70 으로 채운다 → 얼룩 36개(반지름 80~260px 원형 그라디언트, 가운데 알파 0.08~0.25 → 가장자리 0, 절반은 어두운 얼룩색·절반은 밝은 얼룩색) → 섬유 2,400개(길이 6~34px 곧은 선, 굵기 1px(열에 하나는 1.6px), 각도 0~180° 고르게, 60% 는 어두운 섬유색 알파 0.10~0.22 · 40% 는 밝은 섬유색 알파 0.12~0.24).
  이음매 없게: 얼룩과 섬유를 각각 (dx, dy) ∈ {−1024, 0, 1024}² 아홉 자리에 똑같이 그린다(타일 밖은 잘린다). 한 번만 그리므로 2만 획 남짓이어도 부담이 없다.
- 종이판 그리기: ctx.createPattern(타일, 'repeat') 로 화면 전체를 채운다. 패턴 변환(setTransform 에 DOMMatrix) = 배율 s = z ÷ zoomStay, 이동 = (연도 2000.0 의 화면 x, 축 높이 Y).
  그래서 결은 연도 축에 붙어 있다 — 카메라가 날면 흐르고(머묾에서는 타일 실제 크기), 전체 연표에서는 0.27배로 잘아져 종이판이 멀어진다.
  결에는 움직임 번짐을 주지 않는다(불규칙한 무늬라 바퀴 착시가 생기지 않는다).
- 조명(화면에 고정, 움직이지 않는다) — 종이판 위에 두 겹:
  빛 웅덩이 = 가운데 (0.25W, 0.05H), 반지름 0 → 0.95W 원형 그라디언트, 조명색 알파 0.20 → 0.
  가장자리 어둠 = 가운데 (0.5W, 0.55H), 반지름 0.55W → 1.05W 원형 그라디언트, 띠 색(#3A2619) 알파 0 → 0.22.
  조명은 종이판에만 비춘다(카드보다 먼저 그린다) — 카드 글자 대비를 흔들지 않기 위해서다.
- 비용 상한: 종이판은 프레임마다 패턴 채우기 한 번 + 그라디언트 두 번, 그림자는 1/4 층 한 장. 결 타일·카드 그림은 시작할 때 한 번만 만든다.
- 그리는 순서(한 프레임): 화면비 밖 여백 → 종이판 결 → 조명 두 겹 → 해 격자선 → 연표 자 띠·눈금·해 글자 → 사건 표시 점 → 그림자 층 → 줄기 → 카드(카드마다 제목 판 → 연도 판) → 머리 글.

[카메라] (사건 수 n, k = 1…n. E(u) = easeInOutCubic(u))
- 축 높이: 위쪽 카드 사건에 머물 때 Y = 0.74H(큰 카드가 0.13H ~ 0.63H 를 차지), 아래쪽 카드 사건이면 Y = 0.26H(카드 0.37H ~ 0.87H). 전체 연표에서 Y = 0.50H.
- 머물 때 배율 z_t = 0.16W/년(1년 = 307px). 전체 연표 배율 z0 = 0.70W ÷ (e_n − e_1), 가운데 c0 = (e_1 + e_n) ÷ 2.
  기본 사건이면 z0 = 0.70 ÷ 15.917 = 0.04398W/년(84.4px), c0 = 2017.167. 전체 연표에서 사건 x = 0.150 · 0.260 · 0.421 · 0.575 · 0.689 · 0.850 W.
- 시간표: 도착 A_k = 1.30 + (머묾 1.50 + 이동 0.85)·(k − 1) = 1.30 + 2.35·(k − 1). 한 칸 2.35초는 따로 정하지 않고 머묾 + 이동으로 계산한다(머묾을 바꾸면 도착이 따라간다). 출발 D_k = A_k + 1.50(마지막 사건만 D_n = A_n + 1.30). 이동 = D_k ~ A_(k+1), 0.85초.
  물러남 = D_n ~ D_n + 1.25. 전체 연표 정지 = 그 뒤 0.40초. 길이 T = A_n + 2.95(기본 16.00초).
- 날아 들어감(0 ~ 1.30초), u = t ÷ 1.30: z = z0·(z_t/z0)^E(u) (로그 공간 보간, z_t/z0 = 3.638).
  첫 사건의 화면 x 를 전체 연표 자리 x1⁰(0.150W)에서 0.5W 로 x1 = x1⁰ + (0.5W − x1⁰)·E(u) 만큼 옮기고, c 는 그것에 맞춰 c = e_1 − (x1 − 0.5W) ÷ (z·W) 로 역산한다. Y = 0.50H + (Y_1 − 0.50H)·E(u).
  (c 와 z 를 따로 보간하면 확대하는 동안 첫 사건이 화면 밖으로 밀렸다가 돌아온다. 초점 사건의 화면 x 를 보간하고 c 를 역산해야 사건이 한 방향으로만 미끄러진다.)
- 머묾(A_k ~ D_k): c = e_k, z = z_t, Y = Y_k. 카메라는 움직이지 않는다.
- 이동(D_k ~ A_(k+1)), u = (t − D_k) ÷ 0.85: c = e_k + (e_(k+1) − e_k)·E(u), z = z_t·(1 − 0.18·sin²(πu)), Y = Y_k + (Y_(k+1) − Y_k)·E(u).
  사건 사이에서 빠르다: 가운데 속도는 평균의 3배(easeInOutCubic 의 가운데 기울기 3), 3.67년 간격이면 화면 가운데가 초속 약 3,200px 로 흐른다. 배율이 0.82배로 살짝 빠졌다 돌아와 날아가는 느낌을 준다. 축은 위아래로 0.48H 미끄러진다.
- 물러남(D_n ~ D_n + 1.25), u = (t − D_n) ÷ 1.25: 날아 들어감을 거꾸로 — z = z_t·(z0/z_t)^E(u), 마지막 사건의 화면 x 를 0.5W 에서 전체 연표 자리(0.850W)로 보간하고 c 를 역산, Y = Y_n + (0.50H − Y_n)·E(u). u = 1 에서 c = c0, z = z0, Y = 0.50H 가 정확히 된다.
- 카메라 표본(대조용): 0.65초 c 2011.29 · z 0.0839W · Y 0.38H / 3.225초 c 2010.46 · z 0.1312W · Y 0.50H / 14.975초 c 2023.04 · z 0.0839W · Y 0.62H.
  모든 구간 경계에서 c·z·Y 값이 끊기지 않는다(파이썬으로 검산함).

[카드 일정] (카드 k)
- 펼침 시작 U_k = A_k − 0.15(카메라가 아직 감속하는 중에 일어나기 시작한다). 첫 카드만 예외(아래). 펼침 동안과 머묾 동안 S = 1.
- 작아짐: D_k ~ D_k + 0.60 에 S = 1 → 0.6, easeInOutCubic. 그 뒤로 끝까지 S = 0.6, 펼친 채 축 위에 남는다. 마지막 카드는 물러남이 시작될 때 같은 식으로 작아진다.
- 접어 눕히기 시작 F_k = 0.05·(k − 1): 첫 카드(0.00초)부터 마지막 카드(0.25초)까지 왼쪽에서 오른쪽으로 물결처럼.
- 첫 카드만 펼침 시작 U_1 = 0.50초 — 접어 눕히기가 끝나는 바로 그 순간이다. 작은 카드가 웅크렸다가 쉬지 않고 큰 카드(S = 1)로 일어난다. 카메라가 날아 들어가는 동안 일어나, 0.95초 무렵 연도 판이 튀어나오고 1.25초에 붙는다(도착 1.30초).
  나머지 카드는 U_k = A_k − 0.15. (첫 카드까지 A_1 − 0.15 = 1.15초에 펼치면 0.62~1.23초 동안 화면에 연표 자와 점 둘만 남는다. 첫 1초가 「있던 것이 다 사라지는 1초」가 된다.)
- 상태 요약: t < F_k 펼친 작은 카드 → 접어 눕히기(0.50초) → U_k 까지 누움(표시 점만, 첫 카드는 누움 0초) → 펼침(S = 1) → 머묾 → 작아짐 → 끝까지 작은 카드.

[연표 자와 눈금]
- 해 격자선: 정수 연도마다 화면 위 끝에서 아래 끝까지 세로선, 굵기 2px, 머리 글 잉크색 7%. 종이에 인쇄된 괘선처럼 화면을 연표의 결로 채운다.
- 해 눈금: 정수 연도마다 띠의 위·아래 가장자리에서 안쪽으로 0.012H, 굵기 3px, 눈금 색.
- 달 눈금: 해 사이 11개(2월~12월 경계), 가장자리에서 안쪽으로 0.006H, 굵기 2px, 눈금 색 × 달 알파. 달 알파 = clamp((z/12 − 0.006) ÷ 0.004, 0, 1) — 머물 때 1, 전체 연표에서 0.
- 해 글자: 띠 세로 가운데에 연도 숫자, 글꼴 크기 0.030H, 굵기 700, 눈금 색, 눈금 x 에 가운데 정렬. 5의 배수 해는 늘 보이고, 나머지 해의 알파 = clamp((z − 0.06) ÷ 0.03, 0, 1)(z 는 W/년). 전체 연표에서는 2010·2015·2020·2025 만 보인다(84px 간격에 네 자리 숫자를 다 쓰면 겹친다).
- 움직임 번짐(선에만): 격자선·해 눈금·달 눈금은 지금 시각 t 의 x 와 1/120초 전 시각의 x(카메라는 t 만의 함수라 바로 계산된다) 사이를 채운 사각형으로 그린다. 폭 = max(선 굵기, 두 x 의 차), 알파 × 선 굵기 ÷ 폭. 달 눈금은 추가로 알파 × clamp(1 − (두 x 의 차 − 4px) ÷ 12px, 0, 1) — 16px 넘게 번지면 사라진다. 기본 사건에서 이동 중 가장 큰 번짐은 화면 가운데 약 27px, 물러남의 화면 끝에서 약 47px 이다.
- 머리 글: 왼쪽 0.035W, 기준선 0.07H, 글꼴 크기 0.034H, 굵기 800. 오른쪽 작은 글씨는 오른쪽 끝 0.965W, 글꼴 크기 0.024H, 굵기 500, 머리 글 색 그대로(가장 어두운 결 위에서도 대비 6.3:1 — 옛날처럼 55% 로 옅게 하면 크라프트 위에서 2.8:1 로 기준 미달). 알파 = min( clamp((2·z0 − z) ÷ z0, 0, 1), clamp((Y − 0.47H) ÷ 0.03H, 0, 1) ) — 배율이 전체 연표의 2배가 되거나 축이 0.47H 아래로 내려가면 사라진다.
  축 조건이 필요한 까닭: 사건 수가 홀수면 마지막 카드가 아래쪽이라, 물러남에서 배율이 먼저 줄고 축은 0.26H 에서 늦게 올라온다. 축이 0.47H 아래면 위쪽 작은 카드의 윗변(Y − 0.378H)이 머리 글 줄(0.07H)을 덮는다.
  기본 6개는 마지막 카드가 위쪽이라 축이 0.74H → 0.50H 로 늘 0.47H 위다 — 배율 조건만 걸려 머리 글은 약 14.96–15.60초에 나타난다(그때 위쪽 작은 카드 윗변은 약 0.25H 로 머리 글 줄과 멀다).

[전체 연표 — 0초 화면 = 끝 화면]
- 여섯 장 모두 펼친 작은 카드(S = 0.6), 위 셋·아래 셋 번갈아. 작은 카드 위 끝 0.122H, 아래 끝 0.878H, 왼쪽 끝 0.030W, 오른쪽 끝 0.970W — 화면의 76% 높이를 연표가 채운다. 머리 글은 그 위(기준선 0.07H)에 있어 카드와 닿지 않는다.
- 같은 쪽 이웃 사이 최소 연도 차 6.083년(2015.375 → 2021.458) × z0 = 0.2675W ≥ 작은 카드 폭 0.24W + 틈 0.02W. 겹침 0.
- 사건을 바꿔서 이 조건이 깨질 때만 최후의 수단으로 S_small 을 (최소 간격·z0·W − 0.02W) ÷ 0.40W 로 낮추고 console.warn 으로 알린다.

[장면] (기본 사건 6개, T = 16.00초)
1. 0.00–0.75 전체 연표에서 출발. 0초는 정지한 전체 연표 — 조명이 든 크라프트 종이판 위에 여섯 장이 그림자를 드리우고 선 꽉 찬 화면. 곧바로 첫 카드부터 오른쪽으로 물결처럼 접혀 눕고(0.05초 간격, 첫 카드 0.00–0.50 · 마지막 카드 0.25–0.75), 동시에 카메라가 첫 사건으로 날아 들어가기 시작한다.
2. 0.00–1.30 날아 들어감. 1년 84px → 307px 로 확대, 축이 0.50H → 0.26H 로 올라가 첫 사건(아래쪽 카드)이 화면 가운데에 온다. 종이 결이 0.27배에서 실제 크기로 커지며 종이판이 다가오고, 달 눈금이 배율을 따라 나타난다.
3. 0.50–1.25 첫 카드 펼침(시그니처의 첫 등장 — 0.95초 무렵 연도 판이 튀어나온다). 접힌 순간 바로 일어나므로 종이가 거의 없는 화면은 0.53~0.60초 4프레임 남짓뿐이다. 1.30–2.80 머묾(카메라는 1.30초에 멈춘다).
4. 2.80–3.65 이동(위쪽 카드 사건으로 — 축이 0.26H → 0.74H 로 미끄러진다). 첫 카드는 2.80–3.40 에 작아지며 왼쪽으로 흘러간다.
5. 이후 같은 박자(2.35초마다): 도착 3.65 · 6.00 · 8.35 · 10.70 · 13.05초, 펼침은 각 도착 0.15초 전에 시작해 도착 0.60초 뒤(펼침 시작 0.75초 뒤) 붙는다.
6. 6.00초 — 시그니처 순간의 대표 장면: 화면 가운데, 축 아래 0.11H 에서 폭 0.40W·높이 0.50H 의 종이가 아래로 일어나고, 6.25초 연도 판이 앞으로 튀어나와 끝 폭이 0.50W 까지 넓어지며 그 그림자가 카드 아래 빈 종이판 위로 오른쪽 126px·아래 197px 까지(화면의 약 9%) 길게 미끄러졌다가, 6.60초에 평평한 카드로 붙으며 그림자도 (19px, 30px) 로 바짝 돌아온다. 왼쪽 위 모서리에는 앞서 지나간 카드의 가장자리가 폭 약 0.03W(64px)의 흰 조각으로 걸쳐 있다(그 카드의 연도 판은 화면 밖). 이것이 정상이다 — 보이게 하려고 카드나 축을 옮기지 않는다.
7. 13.05–14.35 마지막 카드 머묾. 14.35–15.60 물러남 — 지나간 다섯 장이 왼쪽에서 다시 들어오며 연표 전체가 화면에 모이고, 종이 결이 잘아지며 종이판이 멀어져 연표 전체가 실물 종이 모형처럼 보이고, 마지막 카드는 14.35–14.95 에 작아진다.
8. 15.60–16.00 전체 연표 정지 = 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)은 스크립트 맨 끝에서 한 번만 호출한다. 정의되기 전에 쓰면 첫 화면에서 멈춘다.

이 작품에만 해당하는 구현:
- 이 작품의 기준 크기는 1920×1080 이다.
- 카메라 cam(t) → {c, z, Y} 와 카드 상태 cardState(k, t) → {g, θ, φ, S} 를 t 만의 순수 함수로 만든다(이름을 card 로 짓지 않는다 — 색·종이를 가리키는 지역 변수 card 와 겹쳐, 선언 전에 부르면 시작 단계에서 멈춘다). 움직임 번짐에 쓰는 「1/120초 전」 시각이 0 보다 작으면 T 를 더해 감는다.
- CONFIG 에 [바꿀 곳]의 사건·색과, 이 글의 숫자를 이름 붙여 모은다: 크기(cardW 0.40, cardH 0.50, nearH 0.28, farH 0.22, smallScale 0.6, stem 0.08, band 0.06, axisAbove 0.74, axisBelow 0.26) · 배율(zoomStay 0.16, overviewFill 0.70, travelDip 0.18) · 시간(dive 1.30, dwell 1.50, lastDwell 1.30, move 0.85, zoomOut 1.25, hold 0.40, unfoldLead 0.15, firstUnfold 0.50, unfoldDur 0.75, foldDur 0.50, foldStagger 0.05(왼쪽→오른쪽), shrinkDur 0.60) · 종이(focal 2.2, strips 24, backC1 1.2, shade 0.35, shadeColor #8F6A45) · 그림자(shadowDepth 0.04, shadowKx 0.45, shadowKy 0.70, shadowAlpha 0.30, shadowRes 0.25) · 종이판(tile 1024, blotches 36, fibers 2400, anchorYear 2000.0, lampX 0.25, lampY 0.05, lampR 0.95, lampAlpha 0.20, edgeR0 0.55, edgeR1 1.05, edgeAlpha 0.22).
- 화면비 밖 여백(구현 공통 문단의 「남는 곳의 배경색」)과 body 배경은 #7A5A3C 다.
- 카드 그림과 종이 결 타일은 시작할 때 한 번 화면 밖 캔버스에 그려 캐시한다. 매 프레임에는 패턴 채우기·그라디언트·띠 단위 drawImage·그림자 층만 한다.
- ★합격 기준 자체 대조: 시작할 때 사건마다 [번호, 연도 위치 e, 쪽, 전체 연표 x(W 비율), 도착 A_k, 제목 줄임 여부, 설명 줄 수] 를 console.table 로 출력하고, z0·같은 쪽 최소 간격(W 비율)·T 도 함께 찍는다. 기본 사건의 기대값:
  e = 2009.208 · 2011.708 · 2015.375 · 2018.875 · 2021.458 · 2025.125 / 쪽 = 아래 · 위 · 아래 · 위 · 아래 · 위 / x = 0.150 · 0.260 · 0.421 · 0.575 · 0.689 · 0.850 / A = 1.30 · 3.65 · 6.00 · 8.35 · 10.70 · 13.05 / z0 = 0.04398 / 같은 쪽 최소 간격 0.2675 / T = 16.00 / 제목 줄임 0 · 설명 두 줄 0.
  또 cam(0) 과 cam(T − 0.000001) 의 c·z·Y, 위 [카메라]의 표본 세 시각 값을 대조한다(허용 오차 0.01).
  첫 1초 채움: 0~1초를 1/60초 간격으로, 카드마다 화면에 차지하는 사각형(폭 = 카드 폭 × S, 높이 = 밑동에서 가장 바깥 끝까지의 투영 높이, 화면 안으로 자름)의 넓이를 더해 화면 넓이로 나눈다. 이 값이 0.01 미만인 프레임 수 × 1/60 이 0.15초 이하여야 한다. 기대값 약 0.07초(0.53~0.58초, 4프레임). 넘으면 첫 카드의 U_1 이나 물결 방향이 틀린 것이다.
  대비 대조표: [항목, 글자색, 바탕색, 대비] 를 console.table 로 찍는다. 알파로 옅게 쓰는 글자는 바탕과 섞은 색으로 잰다(WCAG 상대 휘도). 기본 색의 기대값:
  제목/카드 종이 16.2 · 설명(78%)/카드 종이 8.2 · 월(78%)/카드 종이 8.2 · 연도(강조)/카드 종이 5.04 · 해 글자/띠 10.6 · 머리 글/가장 어두운 결 6.32(가장 어두운 결 = 크라프트에 어두운 얼룩색을 알파 0.25 로 섞은 #BD9569).
  색을 바꿨어도 4.5 미만인 줄이 있으면 console.warn('대비 미달: <항목> <값>') 을 낸다.
  그림자 대조: 평평한 카드 그림자 변위 S = 1 이면 (19.4, 30.2)px · S = 0.6 이면 (11.7, 18.1)px, 세 번째 카드의 6.25초 연도 판 끝 그림자 변위 (126, 197)px(허용 오차 3px).
  난수 대조: 시드 난수 함수가 불린 횟수를 세어, 첫 render 전과 render(0)·render(6.25) 뒤가 같아야 한다(결은 시작 때 한 번만 뿌린다). 다르면 경고.
  사건이 기본값인데 어긋나는 값이 하나라도 있으면 console.warn('합격 기준 미달: <항목> 기대 <값> 실제 <값>') 을 낸다.

[하지 말 것]
- 카드를 투명도로 나타나게 하거나(페이드) 크기만 키워 등장시키지 않는다 — 이 작품의 볼거리는 「접힌 종이가 일어나 펼쳐지는 것」 하나다. 페이드나 확대 등장은 그 순간을 지운다.
- 접힘을 scaleY 하나로만 납작하게 줄였다 늘리지 않는다 — 원근(띠마다 다른 폭)이 없으면 공항 안내판 넘김이나 셔터처럼 보여 종이로 읽히지 않는다. 연도 판이 앞으로 튀어나오며 넓어지는 것이 「펼쳐진다」의 증거다.
- 연도 판 뒷면에 글자를 거울상으로 그리지 않는다 — 접혀 있을 때 보이는 것은 종이 뒷면이다. 거울 글자는 오류로 읽힌다.
- CSS 3D(rotateX·perspective)나 DOM 요소로 카드를 만들지 않는다 — 시간 t 만으로 그리는 캔버스 한 장이어야 다시 재생해도 같은 화면이 나오고, 레터박스 상자 안에서 녹화된다.
- 카드 크기를 카메라 배율에 묶지 않는다 — 묶으면 전체 연표에서 카드가 글을 못 읽을 만큼 작아지고, 머물 때는 화면 밖으로 커진다. 배율은 카드 사이 거리만 바꾼다.
- 카메라를 일정한 속도로 움직이거나, 사건에서 멈추지 않고 미끄러지듯 지나치지 않는다 — 「사건 사이 빠르게, 사건에서 머묾」의 대비가 이 작품의 박자다.
- 날아 들어감·물러남에서 c 와 z 를 따로 보간하지 않는다 — 확대하는 동안 초점 사건이 화면 밖으로 밀렸다 돌아와 멀미가 난다.
- 지나간 카드를 지우거나 화면 밖으로 날려 보내지 않는다 — 끝에서 여섯 장이 다 선 전체 연표가 결말이고, 그 화면이 곧 첫 화면이다.
- 카드를 한쪽에만 세우지 않는다 — 위·아래 번갈아야 전체 연표에서 작은 카드끼리 겹치지 않는다.
- 연도 숫자를 0부터 굴리는 카운트업으로 만들지 않는다 — 숫자는 종이에 인쇄된 글자다. 굴러가는 숫자가 시선을 빼앗아 판이 펼쳐지는 순간을 덮는다.
- 카드마다 다른 색, 무지개색 표시 점을 쓰지 않는다 — 강조색은 연도 숫자와 표시 점 하나여야 「여기가 사건」이 읽힌다.
- 화면 가운데 고정 세로선(재생 헤드)·진행 막대·「NOW」 표시를 넣지 않는다 — 카드 줄기와 겹쳐 선이 둘로 보이고, 카메라가 사건에 머무는 것으로 이미 「지금」이 표시된다.
- 카드 사이를 잇는 곡선·화살표, 아이콘·이모지·사진 자리 상자를 넣지 않는다 — 카드는 연도·제목·설명 세 줄의 종이다. 장식이 붙으면 템플릿 슬라이드처럼 보인다.
- 입자·빛 번쩍임·글로우·렌즈 플레어·카메라 흔들림을 넣지 않고, 조명은 [크라프트 종이판과 조명]의 화면에 고정된 두 겹뿐이다(움직이는 빛·색이 흐르는 그라디언트 금지) — 크라프트 판 위 흰 종이와 그림자 한 겹의 실물감이 이 작품의 톤이다. 효과가 붙으면 흔한 기업 소개 템플릿이 된다.
- 그림자를 ctx.shadowBlur·ctx.filter 흐림으로 카드마다·띠마다 그리지 않는다 — 띠마다 반투명 흐린 그림자가 겹쳐 진한 가로줄이 생기고, 띠 48개 × 카드 수만큼 흐림을 돌려 프레임이 무거워진다. 그림자는 1/4 해상도 층 한 장에 불투명으로 칠하고 층 전체에 알파를 한 번 준다.
- 그림자를 카드 밑의 고정 타원이나 그라디언트 띠로 대신하지 않는다 — 연도 판이 튀어나올 때 그림자가 오른쪽 아래로 길게 미끄러졌다 돌아오는 것이 「종이가 판에서 떨어져 있다」의 증거다. 고정 그림자는 스티커처럼 보인다.
- 종이 결을 매 프레임 난수로 새로 뿌리지 않는다 — 결이 지글지글 끓어 머묾의 정지 화면이 흔들리고, 다시 재생할 때 다른 화면이 나온다. 시작할 때 한 번 만든 타일을 연도 축에 붙여 민다.
- 카드 위에 종이 결·얼룩·조명을 얹지 않는다 — 카드 글자 대비가 흔들리고, 흰 카드와 크라프트 판의 재질 대비가 흐려진다.
- 커피잔·원두·압정·테이프 그림·나뭇결 책상·손 같은 소품을 그리지 않는다 — 세계는 종이 한 장이다. 소품이 붙으면 카페 광고 일러스트가 되고 연표가 묻힌다.
- 종이판을 비스듬한 바닥처럼 기울이거나 화면 전체를 3D 로 돌리지 않는다 — 카메라 공식·카드 원근·그림자 변위는 화면과 나란한 종이판에서만 검산됐다.
- 전체 연표에서 모든 해의 숫자를 그리지 않는다 — 1년 84px 간격에 네 자리 숫자를 쓰면 서로 붙는다. 5의 배수만, 나머지는 배율에 따른 알파로.
- 빠른 이동 중에 달 눈금을 그대로 그리지 않는다 — 25px 간격 눈금이 한 프레임에 50px 넘게 움직이면 바퀴가 거꾸로 도는 것처럼 보인다(에일리어싱). 번짐 폭으로 지운다.
- 실존 회사·인물·브랜드의 연혁을 예시로 쓰지 않는다 — 예시는 지어낸 회사다. 실존 연혁은 사실 확인 책임이 생긴다.
- 시간표에 없는 정지·빈 화면을 넣지 않는다 — 정지는 머묾마다 카드가 붙은 뒤의 시간(첫 사건 약 1.5초 — 첫 카드가 1.25초에 먼저 붙는다, 둘째~다섯째 약 0.9초, 마지막 0.7초. 읽는 시간이라 줄이지 않는다)과 전체 연표 0.40초뿐이다. 첫 카드를 다른 카드처럼 1.15초에 펼치면 0.62~1.23초가 빈 축이 되어 첫 1초에 볼 것이 없다.