필름 카운트다운

프롬프트 설정

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

옛 필름 카운트다운으로 시작하는 영상 인트로를 HTML 파일 하나로 만들어 줘. 미리보기에서 바로 재생되게. 길게 설명할 테니 숫자는 그대로 지켜 줘.

핵심 아이디어: 낡은 필름 리더가 화면을 꽉 채운 채 3·2·1 을 센다. 시계 바늘 같은 부채꼴이 1초에 한 바퀴씩 화면 전체를 어둡게 쓸고, 필름 층은 그레인·먼지·세로 긁힘·프레임 떨림·명멸과 함께 초당 24장으로 덜컥거린다. 1의 바늘이 한 바퀴를 닫는 순간 카메라 조리개가 「찰칵」 닫혔다가 육각형으로 열리고, 그 안에 잡티 하나 없는 깨끗한 컬러 화면과 제목이 있다. 더러운 필름 → 깨끗한 화면의 대비가 이 작품의 반전이다.

[바꿀 곳]
- 카운트다운 글자: 3 · 2 · 1 (한글로 바꾸려면 셋 · 둘 · 하나 — 「하나」가 두 글자라 세 글자 모두 숫자보다 약 3분의 2 크기로 작아진다. 안쪽 원 안에 들어가게 하려는 것이라 정상이다)
- 제목: 긴 여름의 끝
- 부제: 단편 영화 · 2026
- 색 — 필름 리더: 바탕 #A9A293 · 쓸고 간 자리 #6F695D · 원과 십자선 #F3EFE6 · 숫자와 바늘 #141210
- 색 — 조리개 날개 세 톤 #1C1C20 · #303036 · #26262B · 날개 안쪽 모서리 #5A5A62 · 날개 이음선 #0C0C0E
- 색 — 제목 화면: 바탕 #E0452B · 제목과 부제 #FFF6E8
- 시드: 1961 (그레인·먼지·긁힘이 전부 이 값에서 나온다. 바꾸면 다른 잡티가 같은 방식으로 나온다)
- 길이: 8초 (끝나면 처음으로 이어서 반복)
- 화면비: 16:9 (캔버스 1920×1080)

[크기] — 전부 화면 높이 H 기준(W = 16/9·H). 화면 가운데 C = (W/2, H/2).
- 필름 리더는 화면 전체다. 부채꼴은 C 를 중심으로 반지름 1.20H(화면 모서리까지 1.02H 보다 크다)로 그려 화면 끝까지 덮는다.
- 바깥 원 반지름 0.44H(선 굵기 0.012H), 안쪽 원 반지름 0.37H(선 굵기 0.008H). 둘 다 C 중심.
- 십자선: C 를 지나는 가로선·세로선, 화면 끝에서 끝까지, 굵기 0.005H.
- 바늘: C 에서 반지름 1.20H 까지의 직선, 굵기 0.006H.
- 카운트다운 글자: 굵기 700, 잉크 중심(actualBoundingBox 로 잰 잉크 상자의 가운데)을 C 에 둔다.
  글자 크기는 세 글자에 공통 하나다: 각 글자마다 「잉크 높이 0.50H」와 「잉크 폭 0.62H」 둘 다 넘지 않는 가장 큰 글꼴 크기를 measureText 로 구하고, 셋 중 가장 작은 값을 쓴다.
  (숫자는 높이가, 「하나」는 폭이 한계가 된다. 한 번만 계산해 둔다.)
- 제목: 굵기 800. 잉크 폭이 0.70W 가 되는 글꼴 크기로 하되, 그때 잉크 높이가 0.26H 를 넘으면 잉크 높이 0.26H 에 맞춘다.
- 부제: 굵기 600, 잉크 높이 0.045H. 제목 잉크 아래끝에서 0.06H 아래가 부제 잉크 위끝.
- 제목+부제 묶음: 가로는 각자 잉크 중심을 W/2 에, 세로는 제목 잉크 위끝~부제 잉크 아래끝의 가운데를 H/2 에.
- 조리개 육각형: 꼭짓점까지 반지름 a(장면에서 시간에 따라 바뀜), 완전히 열림 A = 1.25H.
  열린 육각형의 변까지 거리 = A·cos30° = 1.08H 가 화면 모서리까지 1.02H 보다 커서, 완전히 열리면 날개가 하나도 안 보인다.
  닫힘은 A₀ = 1.18H(= 1.02H / cos30°, 날개가 화면 모서리에 막 닿는 반지름)에서 시작한다.

[필름 층 — 24fps 계단]
필름 리더와 그 위의 잡티는 영화 필름이다. 화면 재생률과 상관없이 필름 프레임 번호 k = floor(t·24) mod 192 로만 바뀐다(8초 = 192장).
리더의 내용(글자·부채꼴·바늘)도 tf = k/24 로 계산한다 — 바늘이 한 바퀴를 24걸음(15°씩) 덜컥거리며 돈다. 조리개와 제목 화면은 필름이 아니라서 매 화면 프레임 매끄럽게 움직인다.
필름 프레임마다 난수 생성기를 새로 만든다: rng = mulberry32((CONFIG.seed + Math.imul(k, 0x9E3779B1)) >>> 0). 아래 순서대로 꺼내 쓴다(순서가 바뀌면 다른 화면이 된다).
1. 프레임 떨림(필름이 영사기 안에서 흔들리는 위브): T = k/24 일 때
   dx = 0.0030H·sin(2π·1.25·T) + 0.0012H·(2·r1 − 1)
   dy = 0.0040H·sin(2π·0.875·T + 0.6) + 0.0016H·(2·r2 − 1)
   (1.25Hz 는 8초에 10번, 0.875Hz 는 7번 — 반복 이음매에서 정확히 이어진다. 최대 약 4.5px·6px.)
   리더 내용·긁힘·먼지를 (dx, dy) 만큼 옮겨 그린다. 바탕은 사방으로 0.02H 넉넉히 칠해 가장자리가 드러나지 않게 한다.
2. 명멸: 다 그린 리더 위에 검정을 불투명도 0.02 + 0.07·r3 로 화면 전체에 한 번 덮는다(2~9%).
3. 먼지: 개수 n = [0,0,1,1,1,2,2,3][floor(r·8)]. 하나마다 위치는 화면 안 아무 데나.
   70% 는 덩어리 — 반지름 0.003~0.010H, 꼭짓점 7개의 반지름을 각각 ±40% 흔든 다각형, 색 #0E0D0B 불투명도 0.85(그중 4분의 1은 흰 #F6F3EA).
   30% 는 머리카락 — 길이 0.05~0.12H 의 2차 베지어 곡선(제어점을 옆으로 0.02~0.05H 비킴), 굵기 0.0022H, #0E0D0B 불투명도 0.75.
   먼지는 딱 한 필름 프레임(1/24초)만 보인다.
4. 세로 긁힘 두 줄: x_j = X_j·W + 0.012W·sin(2π·c_j·k/192 + p_j) + 0.0015W·(2·r − 1).
   1번: X=0.31, c=3, p=0.4 — 리더가 보이는 동안 늘 있다. 2번: X=0.68, c=5, p=1.7 — 12프레임(0.5초) 덩어리마다 mulberry32(CONFIG.seed + 1000 + floor(k/12)) 의 첫 값이 0.5 미만일 때만 있다.
   위에서 아래까지 6토막으로 나눠 그리고, 토막마다 15% 확률로 건너뛴다(끊긴 긁힘). 굵기 0.0018H, 색 #F3EFE6, 불투명도 0.30 + 0.35·r.
5. 그레인: 시작할 때 한 번, 320×320 잡음 타일 4장을 시드 난수로 만든다(픽셀 회색값 = 128 + 110·(r+r+r − 1.5), 0~255 로 자름, 불투명).
   필름 프레임마다 타일 k mod 4 를 패턴으로, 3배 확대(알갱이 약 3px, 타일 한 장 = 화면 960px)하고 (floor(r·960), floor(r·960)) 화면 px 만큼 어긋나게 화면 전체에 깐다 — globalCompositeOperation 'overlay', 불투명도 0.30.
   확대할 때 imageSmoothingEnabled = true 로 둬 알갱이 경계를 부드럽게 뭉갠다(패턴에 setTransform 으로 3배 배율). 알갱이가 커야 블로그·폰처럼 400~960px 폭으로 줄여 보여도 그레인이 남는다.
6. 비네트: C 중심 원형 그라디언트, 반지름 0.55H 에서 투명 → 1.05H 에서 검정 불투명도 0.30. 리더에만.
그리는 순서: 바탕 → 부채꼴 → 십자선 → 원 둘 → 바늘 → 글자 → 긁힘 → 먼지 (여기까지 위브로 옮김) → 그레인 → 비네트 → 명멸.

[조리개 — 날개 6장]
α_i = φ − 90° + 60°·i (i = 0..5, 캔버스 좌표라 i 가 커지면 시계 방향), 꼭짓점 V_i = C + a·(cos α_i, sin α_i).
변 i(V_i → V_{i+1})의 방향 D_i = (cos(α_i + 120°), sin(α_i + 120°)). a = 0 이어도 이 식은 정의된다.
날개 i = 삼각형 (V_i, V_i + 5H·D_{i−1}, V_i + 5H·D_i) — 꼭짓점 V_i 에서 뻗은 60° 쐐기. 여섯 쐐기가 육각형 바깥을 겹침·빈틈 없이 정확히 덮고 육각형 안은 건드리지 않는다(a = 0 이면 C 에서 나온 60° 부채꼴 여섯 개).
날개 i 의 색 = 세 톤 중 i mod 3 번째(평평하게). 그 위에 이음선 = V_{i+1} 에서 D_i 방향으로 5H 뻗은 직선, #0C0C0E 굵기 0.003H.
안쪽 모서리 = 여섯 변 V_0 → V_1 → … → V_5 를 closePath 로 닫은 경로 하나, lineJoin 'miter', #5A5A62 굵기 0.005H. 조리개 회전 φ = 35°·(a/A) — 열릴수록 시계 방향으로 돈다.
그리는 법: 그 시각의 내용(리더 또는 제목 화면)을 화면 전체에 그린 뒤 날개 6장을 위에 덮는다. 클립·구멍 뚫기 없이 이것으로 육각 창이 된다.
조리개는 2.70–3.80초와 6.90–8.00초에만 그린다(나머지 시간 a = A, 날개 없음).

[장면] (박자 = 1초. 큰 사건은 정수 초에 떨어진다)
1. 0.00–1.00 「3」. 바늘이 12시 방향에서 시계 방향으로 등속 한 바퀴. θ = 360°·frac(tf). 12시에서 θ 까지 쓸고 간 부채꼴은 #6F695D, 나머지는 바탕 #A9A293.
   t = 0 화면은 이미 꽉 찬 리더(3·원·십자선·그레인·긁힘)다. 빈 화면이나 검정으로 시작하지 않는다.
2. 1.00 정각에 글자가 「2」로 딱 바뀌고 부채꼴이 0 으로 돌아간다(밝은 바탕으로 덜컥 — 진짜 리더처럼). 1.00–2.00 같은 한 바퀴.
3. 2.00 정각 「1」. 2.00–3.00 같은 한 바퀴.
4. 2.70–3.00 조리개가 닫힌다: u = (t−2.70)/0.30, a = A₀·(1 − u), A₀ = 1.18H — 등속. 2.70초에 모서리 네 곳에서 날개가 들어오기 시작해 3.00초에 완전히 닫힌다(화면 전체가 날개 여섯 장).
   날개가 덮는 넓이: 2.80초 약 28% · 2.85초 약 50%(a = 0.59H, 바깥 원 0.44H 와 「1」은 아직 창 안) · 2.90초 약 78% · 2.933초 약 90% · 3.00초 100%. 80% 넘게 덮인 「닫힌」 구간이 2.91~3.08초 약 0.17초다.
5. 3.00–3.80 조리개가 열린다(시그니처): u = (t−3.00)/0.80, a = A·easeOutCubic(u). 3.00초부터 육각 창 안의 내용은 제목 화면이다.
   3.10초 a = 0.41H(창 높이 약 0.81H·폭 0.78H, 화면 한가운데 — 제목 가운데 글자가 창 안에), 3.20초 0.72H(창의 위아래 꼭짓점이 화면 밖으로, 좌우에는 아직 날개), 3.40초 1.09H(모서리 네 곳에만 날개), 3.80초 다 열림. φ 는 0° → 35° 로 함께 돈다.
6. 제목 화면: 바탕 #E0452B 를 화면 전체에, 그 위에 제목과 부제. 필름 잡티는 하나도 없다.
   제목+부제 묶음 배율 s: 3.00–3.80 1.06 → 1.00 (easeOutCubic, 조리개와 같은 u), 3.80–7.30 1.00 → 1.03 (easeInOutSine). 배율 중심 = C.
7. 3.80–4.20 부제가 아래에서 올라온다: 부제 잉크 높이의 1.1배 아래에서 출발(첫 프레임엔 상자 안에 아무것도 없다), easeOutQuart, 부제 잉크 상자 밖은 잘린다. 그전에는 부제가 안 보인다.
8. 4.20–6.90 머묾. 움직임은 6번의 느린 밀기뿐.
9. 6.90–7.30 조리개가 제목 위로 닫힌다: u = (t−6.90)/0.40, a = A₀·(1 − u) — 4번과 같은 등속 닫힘. 7.10초 약 51%, 7.20초 약 87%, 7.30초 100%.
10. 7.30–8.00 조리개가 리더 위로 열린다: u = (t−7.30)/0.70, a = A·easeOutCubic(u). 7.30초부터 창 안은 다시 필름 리더 — 글자 「3」, 부채꼴 θ = 0(바늘은 12시), 잡티는 그대로 산다.
    8.00초 = 0.00초 화면(조리개 다 열림, 3, θ = 0).
안의 내용 정리: 3.00 ≤ t < 7.30 이면 제목 화면, 아니면 필름 리더. 리더의 글자·θ: t < 3.00 이면 글자 = 세 글자 중 floor(tf) 번째, θ = 360°·frac(tf). t ≥ 7.30 이면 첫 글자, θ = 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. 상태가 쌓이지 않는다 — 리더의 잡티는 k 만의 함수, 조리개와 제목은 t 만의 함수다. 같은 k 는 언제 그려도 같은 화면이어야 한다.
- CONFIG.labels = ['3','2','1'] 과 CONFIG.labelsKo = ['셋','둘','하나'] 를 두고 CONFIG.useKorean(기본 false)으로 고른다. 글자 크기는 고른 세 글자로 계산한다.
- 그레인 타일 4장·글자 크기·제목 크기는 시작할 때 한 번만 만든다(글꼴은 document.fonts 를 기다릴 필요 없는 시스템 글꼴).
- 필름 리더(잡티·그레인·비네트·명멸 포함)는 필름 프레임 k 가 바뀔 때만 화면 크기의 보이지 않는 캔버스에 새로 그린다. 화면 프레임마다는 그 캔버스를 drawImage 로 옮기고 그 위에 조리개만 그린다. 창 크기가 바뀌면 다시 그린다.
  (그레인 overlay 합성이 초당 60번에서 24번으로 줄고, 같은 k 는 같은 화면이라는 규칙도 저절로 지켜진다. 제목 화면도 같은 식으로 배율이 바뀔 때만 다시 그려도 된다.)
- CONFIG.timing 에 시각을 전부 이름 붙여 모은다: count [0,3] 한 글자 1초 · irisClose1 [2.70,3.00] · irisOpen1 [3.00,3.80] · subtitle [3.80,4.20] · hold [4.20,6.90] · irisClose2 [6.90,7.30] · irisOpen2 [7.30,8.00] · titleFrom 3.00 · titleUntil 7.30 · filmFps 24 · loop 8.
- CONFIG.film 에 위브·명멸·먼지·긁힘·그레인·비네트의 숫자를 모은다. 그레인 불투명도 0 이면 그레인이 꺼지는 식으로 하나씩 끌 수 있게.

[하지 말 것]
- 그레인·먼지·긁힘·떨림을 매 화면 프레임(60fps)마다 새로 뽑지 않는다 — 필름은 초당 24장이라 잡티도 24장 계단으로 바뀌어야 필름으로 읽힌다. 60fps 로 끓는 잡음은 TV 지지직처럼 보인다.
- Math.random 이나 프레임마다 이어 쓰는 난수 하나로 잡티를 뽑지 않는다 — 재생할 때마다, 또 화면 재생률마다 다른 먼지가 나오고 반복 이음매에서 튄다. 필름 프레임 번호 k 로 새 생성기를 만든다.
- 그레인을 매 프레임 ImageData 로 화면 전체 새로 만들지 않는다 — 1920×1080 을 매번 만들면 프레임이 떨어진다. 타일 4장을 미리 만들어 어긋나게 깐다.
- 필름 잡티·비네트·명멸을 제목 화면이나 조리개 날개에 얹지 않는다 — 「더러운 필름 → 깨끗한 화면」의 대비가 이 작품의 반전이다. 날개는 카메라 부품이지 필름이 아니다.
- 조리개를 원이 커지는 마스크나 육각형 구멍 하나로 대신하지 않는다 — 날개 6장의 이음선과 돌아가는 직선 모서리가 있어야 카메라 조리개로 읽힌다. 원형 와이프는 흔한 장면 전환일 뿐이다.
- 날개를 화면 가운데 작은 원판 안에만 그리지 않는다 — 날개는 화면 끝까지 덮어야 3.00초에 화면 전체가 닫힌다. 작은 조리개 그림은 「화면 가운데 작은 그림」이 되고 셔터가 닫히는 순간이 사라진다.
- 닫힘을 A(1.25H)에서 시작하거나 u³ 처럼 끝에 몰리는 가속으로 쓰지 않는다 — 날개는 반지름 1.18H 아래에서야 화면에 들어오고 덮는 넓이는 a² 에 비례해서, 닫힘이 마지막 0.1초 깜빡임으로 줄어든다. 「더러운 필름이 닫혔다」는 앞박자가 있어야 열림이 반전으로 읽힌다.
- 그레인을 보간 없는 네모 픽셀이나 1~2px 알갱이로 깔지 않는다 — 네모 픽셀 잡음은 필름 입자가 아니라 디지털 노이즈로 읽히고, 작은 알갱이는 폰 크기로 줄이면 평균으로 지워진다.
- 안쪽 모서리 여섯 변을 따로따로 긋지 않는다 — 선 끝이 꼭짓점에서 맞물리지 않아 2~3px 홈이 생긴다.
- 날개에 그라디언트·금속 반사·그림자를 넣지 않는다 — 여섯 장의 구분은 평평한 세 톤과 이음선이 맡는다. 반사가 붙으면 이음선이 묻히고 무거워진다.
- 바늘에 이징을 넣거나 매끄럽게 돌리지 않는다 — 시계 바늘은 등속이고, 필름이라 15°씩 덜컥거린다. 이징이 붙으면 1초가 고르게 느껴지지 않고 박자가 무너진다.
- 카운트다운 글자를 페이드·확대·회전으로 바꾸지 않는다 — 리더의 숫자는 정각에 딱 바뀐다. 전환 효과가 붙으면 초 경계가 흐려진다.
- 부채꼴을 바깥 원 안에만 칠하지 않는다 — 화면 전체를 쓸어야 1초마다 화면이 어두워졌다 덜컥 밝아지는 박자가 화면을 채운다.
- 명멸을 흰 번쩍임이나 9% 넘는 어둠으로 키우지 않는다 — 빛에 민감한 사람에게 해롭고, 숫자를 읽기 어렵게 만든다.
- 스프로킷 구멍·필름 테두리·타임코드·「PICTURE START」 같은 글자·화면 구석 라벨을 넣지 않는다 — 지어내기 쉬운 장식이다. 화면 채움을 깎고, [바꿀 곳] 밖의 글자는 독자가 바꿀 수 없다.
- 렌즈 플레어·빛샘(light leak)·색수차·발광·세피아 CSS filter 를 넣지 않는다 — 흔한 「레트로 필름」 템플릿처럼 보이고, filter 는 제목 화면 색까지 물들인다.
- 제목을 한 글자씩 치거나 따로 나타나게 하지 않는다 — 제목의 등장은 조리개가 여는 것 하나다. 등장 장치가 둘이면 시그니처 순간이 갈라진다.
- 끝에서 페이드로 처음 화면에 돌아가지 않는다 — 이음매는 조리개가 닫혔다가 리더 위로 열리는 동작이다. 투명도로 넘기면 두 화면이 겹친 흐린 프레임이 생긴다.
- 시간표에 없는 검정 화면·정지를 넣지 않는다 — 날개가 완전히 닫힌 화면은 3.00초와 7.30초의 한 순간뿐이다.