장면 전환 3종 팩

프롬프트 설정

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

영상 편집에 쓰는 장면 전환 3종을 한 바퀴로 보여 주는 세로 영상을 HTML 파일 하나로 만들어 줘. 미리보기에서 바로 재생되게. 길게 설명할 테니 숫자는 그대로 지켜 줘.

핵심 아이디어: 큰 제목 하나가 박힌 단색 장면 카드 셋(A → B → C → 다시 A)이 서로 다른 전환 세 가지로 넘어간다. ① 두 겹 색띠가 시차를 두고 사선으로 쓸고 가는 와이프 ② 먹이 종이에 번지듯 가장자리가 울퉁불퉁한 원이 퍼지는 잉크 번짐 ③ 가로 블라인드 날이 위에서부터 차례로 닫혔다 열리는 셔터. 전환은 셋 다 정확히 0.8초(150 BPM 의 두 박)이고 박 위에서 시작해 박 위에서 끝난다. 편집자가 녹화해서 전환 소스로 쓰는 것이 목적이라, 모든 면은 납작한 단색이고 경계는 칼같이 선명하다.

[바꿀 곳]
- 장면 제목(한 줄, 2~4글자가 가장 크게 보인다): A 「여름」 · B 「바다」 · C 「노을」
- 장면 색: A 배경 #F4EFE6 · 글자 #141416 / B 배경 #1640D6 · 글자 #F4EFE6 / C 배경 #FF5B2E · 글자 #141416
- 와이프 띠 색: 앞 띠 #FFC83D · 뒤 띠 #141416
- 셔터 날 색: #141416
- 잉크 테두리 색: 들어오는 장면 배경색의 RGB 를 각각 0.82배(C 기본값이면 #D14B26) — 장면 색을 바꾸면 따라 바뀐다
- 박자: 150 BPM(한 박 0.4초). 전환 길이 TR = 2박 = 0.8초. BPM 을 바꾸면 모든 시각이 박 단위로 따라 늘고 준다.
- 전환 이름 표시: 켬 (끄면 화면 아래 작은 이름표가 사라진다 — 녹화해서 소스로 쓸 때는 끈다)
- 길이: 18박 = 7.2초 (끝나면 처음으로 이어서 반복)
- 화면비: 9:16 (캔버스 1080×1920)

[크기] — W = 화면 폭, H = 화면 높이
- 장면 카드 = 화면 전체를 채우는 배경색 한 면 + 제목 하나. 카드에 다른 것(번호·모서리 글자·테두리)은 없다.
- 제목: 굵기 800. 글꼴 크기는 measureText 의 actualBoundingBox 로 잰 잉크 폭이 0.80W 가 되게 역산하고, 그때 잉크 높이가 0.24H 를 넘으면 0.24H 가 되게 줄인다(1글자 제목 대비). 장면마다 따로 계산한다.
  잉크 중심(잉크 상자의 가운데)을 (0.5W, 0.47H)에 둔다. 「여름」이면 글꼴 크기 약 0.24~0.26H, 잉크 높이 약 0.23~0.24H — 화면 폭을 거의 다 쓰는 큰 글자다. 글꼴에 따라(Pretendard·Noto Sans KR) 2글자 제목도 높이 상한 0.24H 에 걸려 잉크 폭이 0.78~0.79W 로 줄 수 있다(정상). 값은 코드가 그 기기 글꼴로 잰다.
- 제목 크기 변화(카드마다 같은 규칙, 잉크 중심 기준 확대):
  나가는 장면의 제목은 전환 0.8초 동안 1.00 → 1.06배(easeInCubic) — 밀려나며 다가오는 느낌.
  들어오는 장면의 제목은 전환 시작부터 1.2초(전환 0.8초 + 한 박) 동안 1.12 → 1.00배(easeOutCubic) — 내려앉는 느낌. 이것 말고 제목은 움직이지 않는다.
- 전환 이름표: 글꼴 크기 0.021H(약 40px), 굵기 700, 색 #F4EFE6. 둘레에 알약 모양 바탕(높이 0.036H, 좌우 여백 0.018H, 채움 #141416 불투명도 0.88, 테두리 2px #F4EFE6 불투명도 0.9).
  알약 중심 = (0.5W, 0.92H). 어느 카드·띠 위에서도 읽히게 이 바탕을 쓴다.
  문구: 「① 사선 와이프 · 0.8초」「② 잉크 번짐 · 0.8초」「③ 셔터 · 0.8초」(초 = TR 을 소수 첫째 자리로).

[전환 ① 사선 와이프 — A → B, 두 겹 색띠]
- 앞선 셋(앞 띠·뒤 띠·장면 B)은 모두 같은 기울기의 직선이다. 진행 방향 n = (cos30°, −sin30°) = (0.866, −0.5)(화면 좌표, y 아래가 +) — 오른쪽 위로 간다. 앞선은 n 에 수직(방향 e = (0.5, 0.866))이라 가로에서 60° 기운 가파른 사선이고, 왼쪽 아래 모서리부터 오른쪽 위 모서리 쪽으로 쓸고 간다.
- 앞선 k 가 덮는 영역 = { 점 p : p·n < s_k }. 그리는 순서: 장면 A → 앞 띠 영역(앞 띠 색) → 뒤 띠 영역(뒤 띠 색) → 장면 B 를 그 영역으로 잘라(clip) 그린다. 셋 다 같은 꼴의 반평면이라 이음매 틈이 생기지 않는다.
  반평면은 앞선 위의 점 q = s·n 과 방향 e = (0.5, 0.866)으로 만든 큰 사각형(q ± 3H·e, 거기서 −n 쪽으로 3H)으로 그린다.
- s 의 출발 S0 = 네 모서리 투영값 p·n 의 최솟값 − 2px, 도착 S1 = 최댓값 + 2px. 1080×1920 이면 S0 = −962.0, S1 = 937.3, 이동 거리 1899.3px.
- s_k(τ) = S0 + (S1 − S0)·easeInOutQuad((τ − d_k)/0.64) (τ = 전환 시작 후 초, 괄호 안은 0~1 로 자른다). easeInOutQuad(x) = x < 0.5 ? 2x² : 1 − (−2x + 2)²/2. 출발 시차 d = 앞 띠 0.00 · 뒤 띠 0.064 · 장면 B 0.16.
  세 앞선이 같은 곡선을 시간만 밀어 쓰므로 순서(앞 띠 ≥ 뒤 띠 ≥ B)가 늘 지켜진다. 끝나는 시각은 0.64 · 0.704 · 0.80초 — B 가 정확히 전환 끝(0.80초)에 도착한다.
  곡선이 2차인 이유: 모서리에서 자라는 면적은 이동 거리의 제곱이라, 양끝이 더 납작한 곡선(easeInOutCubic 이상)은 처음과 끝 20%가 화면에서 정지로 보인다. 이 곡선이면 τ≈0.12 에 A 아닌 곳이 화면의 1%를 넘고 τ≈0.68 에 B 가 99% — 눈에 읽히는 와이프가 약 0.56초다.
- 확인값: 띠가 가장 넓을 때 앞 띠 약 0.19H(τ≈0.35), 뒤 띠 약 0.28H(τ≈0.43). τ = 0.40(전환 한가운데, 박 위)에 s = 403.1 · 80.2 · −427.8 — 화면 오른쪽 위에 A, 그 아래로 노랑 띠, 검정 띠, 왼쪽 아래에 B 와 그 제목 일부가 보인다. B 가 마지막 모서리를 1px 안으로 덮는 것은 τ≈0.78. 가장 빠를 때 앞선 속도는 약 97~99px/프레임(60fps).

[전환 ② 잉크 번짐 — B → C]
- 잉크 = 장면 C 가 보이는 구멍. 방울 셋의 합집합이다: 큰 방울 중심 (0.56W, 0.58H) · 작은 방울 ㄱ (0.22W, 0.30H) · 작은 방울 ㄴ (0.84W, 0.86H).
- 기준 반지름은 지수로 자란다(어느 크기에서나 같은 비율로 번져 보이게): 큰 방울 R(τ) = R0·K^(τ/TR), R0 = 0.03H, K = R_END/R0.
  R_END = 큰 방울 중심에서 가장 먼 화면 모서리까지의 거리 + 0.035H + 0.012H + 0.01H (1080×1920 이면 0.660H + 0.057H = 0.717H, K ≈ 23.9).
  작은 방울은 같은 K 로 늦게 출발한다: R(τ) = r0·K^((τ − δ)/TR), ㄱ r0 = 0.018H · δ = 0.10초, ㄴ r0 = 0.014H · δ = 0.20초. 출발 전에는 없다.
  확인값: 큰 방울 τ=0.40 에 0.147H, τ=0.60 에 0.324H. 작은 방울들은 τ≈0.53~0.55 에 큰 방울과 맞붙어 합쳐진다.
  지수로 번지므로 앞 절반은 조용하다: τ=0.40 에 화면의 약 15%, 덮인 면적 절반은 τ≈0.56 에 온다. 박 위에 있는 것은 시작(방울 「톡」)과 끝이다 — 의도한 성격이니 앞당기지 않는다.
- 가장자리 = 종이 섬유를 따라 번진 울퉁불퉁함. 방울마다 각도 θ 를 360등분(작은 방울 180등분)한 다각형으로 그리고, 꼭짓점 반지름은
  r(θ) = R + A(R)·fbm(px/λ, py/λ),  (px, py) = 방울 중심 + R·(cosθ, sinθ) — 기준 원 위의 그 점의 「화면 위치」에서 잡음을 읽는다.
  A(R) = 0.035H·min(1, R/0.20H) (작을 때는 잡음도 작다), λ = 0.12H.
  잡음은 화면에 고정된 한 장이다(시간에 따라 바꾸지 않는다). 그래서 번지는 경계가 새 종이 결을 만나며 모양이 자연스럽게 바뀐다.
- 잡음 정의(이대로): 시드 7 의 mulberry32 로 −1~1 값 256개 표를 만든다. 격자점 (ix, iy) 의 값 = 표[(Math.imul(ix, 73856093) ^ Math.imul(iy, 19349663)) & 255].
  값 잡음 n(x, y) = 네 격자점 값을 smoothstep(f·f·(3−2f)) 가중으로 두 번 선형 보간.
  fbm(x, y) = (n(x, y) + 0.5·n(2x+17.3, 2y+5.1) + 0.25·n(4x+3.7, 4y+11.9)) / 1.75 — 3옥타브.
  이 값들로 검산했다: 경계가 어느 각도에서도 한 프레임도 뒤로 물러나지 않고(번짐은 단조 증가), 큰 방울이 τ≈0.79 에 마지막 모서리를 덮는다.
- 그리는 순서: 장면 B(나가는 제목 확대 포함) → 테두리: 세 방울 다각형을 반지름 r(θ)+0.012H 로 한 경로에 모아 잉크 테두리 색으로 채움 → 속: 세 방울을 r(θ) 로 한 경로에 모아 clip 하고 장면 C(들어오는 제목 포함)를 그린다.
  모든 다각형을 같은 방향(θ 증가)으로 돌려 nonzero 채움이 합집합이 되게 한다. 그래서 테두리는 어느 방울의 속에도 들어가지 않은 바깥 가장자리에만 0.012H 두께로 남는다.

[전환 ③ 셔터 — C → A, 가로 블라인드]
- 화면을 가로 날 8장으로 나눈다. 날 i(0 = 맨 위)의 중심 y = (i + 0.5)·H/8, 날 높이 HB = H/8 = 240px.
- 날은 자기 중심선에서 위아래로 두꺼워지며 닫히고(블라인드 날이 돌아가는 모양), 다시 중심선으로 얇아지며 열린다.
  닫힘: 날 i 는 τ = 0.025·i 에 출발해 0.225초 동안 높이 0 → HB (easeInCubic — 끝에 「탁」 닫힌다). 마지막 날(i=7)이 τ = 0.40(전환 한가운데, 박 위)에 닫힌다.
  열림: 날 i 는 τ = 0.40 + 0.025·i 에 출발해 0.225초 동안 높이 HB → 0 (easeOutCubic — 처음에 「탁」 열린다). 마지막 날이 τ = 0.80 에 다 열린다.
- 날 뒤의 장면: τ < 0.40 이면 C(나가는 제목 확대), τ ≥ 0.40 이면 A(들어오는 제목 내려앉기). τ = 0.40 에 화면 전체가 날 색이라 교체가 보이지 않는다.
- 날 사각형의 y 는 정수로 반올림하고, 높이가 HB 인 닫힌 날은 위아래로 1px 씩 키워 그린다 — 이웃 날 사이에 머리카락 같은 틈이 비치지 않게.

[장면] — 박 b = 0.4초, 전체 18박 = 7.2초, 전환 시작·끝은 모두 박 위
- 0.0–0.8 (0–2박) 전환 ① 사선 와이프 A → B. t = 0 프레임은 크림색 화면 가득 큰 「여름」(띠는 아직 화면 밖 — 빈 화면으로 시작하지 않는다). 0.12초 안에 노랑 띠가 왼쪽 아래 모서리로 들어오고, 한가운데 0.4초(1박)에 띠 두 겹이 화면을 가로지른다.
- 0.8–2.4 (2–6박) 장면 B 머묾(처음 0.4초는 제목이 내려앉는 꼬리).
- 2.4–3.2 (6–8박) 전환 ② 잉크 번짐 B → C. 2.4초 박 위에 큰 방울이 0.03H 로 떨어지고, 3.19초에 마지막 모서리가 덮인다.
- 3.2–4.8 (8–12박) 장면 C 머묾.
- 4.8–5.6 (12–14박) 전환 ③ 셔터 C → A. 5.2초 박 위에 화면이 완전히 닫힌다.
- 5.6–7.2 (14–18박) 장면 A 머묾. 7.2초 = 0.0초 프레임(A 가득, 제목 1.00배) — 이음매 없이 반복. 머묾은 셋 다 4박이다.
- 전환 이름표: 각 전환 시작부터 1.2초(전환 + 한 박) 동안 보인다 — ① 0.0–1.2 · ② 2.4–3.6 · ③ 4.8–6.0. 나타나고 사라질 때 불투명도를 0.1초 동안 바꾼다(작품 전체에서 불투명도가 변하는 것은 이 이름표뿐). 이름표 켜기가 꺼져 있으면 그리지 않는다.

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

이 작품에만 해당하는 구현:
- 이 작품의 기준 크기는 1080×1920 이다.
- 시간표는 박 단위로 CONFIG 에 둔다: bpm 150, loopBeats 18, transitions = [{kind:'wipe', from:'A', to:'B', startBeat:0}, {kind:'ink', from:'B', to:'C', startBeat:6}, {kind:'shutter', from:'C', to:'A', startBeat:12}], lengthBeats 2.
  초 = 박 × 60/bpm. 전환 안의 세부 시각(와이프 시차 0.064·0.16·곡선 0.64, 작은 방울 δ 0.10·0.20, 셔터 간격 0.025·날 시간 0.225·닫힘 0.40)은 TR 에 대한 비율(0.08·0.2·0.8 / 0.125·0.25 / 0.03125·0.28125·0.5)로 저장해, BPM 을 바꿔도 모양이 같게 한다.
- render(t) 는 t 를 루프 길이로 나눈 나머지에서 「지금 전환 중이면 그 전환 함수, 아니면 지금 장면 카드 하나」를 고른다. 장면 카드 그리기는 drawCard(장면, 제목배율) 하나로 모든 전환이 같이 쓴다.
- 제목 글꼴 크기·잉크 상자는 시작할 때 장면마다 한 번 measureText 로 계산해 둔다. 잡음 표도 시작할 때 한 번 만든다.
- 잉크 다각형의 꼭짓점은 매 프레임 계산한다(방울 셋 합쳐 720점 × fbm 3번 — 가볍다). 프레임 사이에 값을 쌓지 않는다.
- 키보드 L 로 전환 이름표를 켜고 끈다(CONFIG.showLabel 을 뒤집기).
- 스스로 대조: 시작할 때 한 번 console.table 로 [장면별 제목 글꼴 크기/H · 잉크 폭/W · 잉크 높이/H], [와이프 S0 · S1], [잉크 R_END/H · K], [잉크 단조 검사 — 전환 ②를 60fps 간격으로 미리 진행하며 방울별 꼭짓점 반지름이 앞 프레임보다 줄어든 횟수]를 찍는다.
  기본값이면 장면마다 제목이 잉크 폭 0.80W 와 잉크 높이 0.24H 중 하나에 맞고(차이 0.003 이내) 다른 하나는 그 이하, S0 −962.0 · S1 937.3, R_END 0.717H · K ≈ 23.9, 줄어든 횟수 0 이 정상이다. 어긋나면 console.warn 으로 어느 값이 얼마로 나왔는지 적는다.

[하지 말 것]
- 크로스 디졸브나 페이드로 장면을 넘기지 않는다 — 세 전환은 각자의 모양(사선·번짐·날)으로만 읽혀야 하고, 반투명 프레임이 섞이면 편집자가 소스로 잘라 쓸 수 없다. 불투명도가 변하는 것은 이름표뿐이다.
- 잉크 가장자리를 각도에 대한 사인 몇 개(sin(5θ) 같은 꼴)로 만들지 않는다 — 각도 변조는 꽃잎이나 별 모양으로 읽힌다. 가장자리는 화면 위치에서 읽은 fbm 잡음으로만 만든다.
- 잉크 잡음을 매 프레임 새로 뽑거나 시간으로 흘리지 않는다 — 경계가 지글지글 끓고, 번지던 곳이 도로 오그라든다. 잡음은 화면에 고정된 한 장이다.
- 잉크 주변에 튀는 먹 점·물보라·장식 입자를 더하지 않는다 — 방울은 정해진 셋뿐이다. 늘어난 점은 화면이 다 덮인 뒤에도 남거나 경계에서 깜빡여 반복 이음매를 깬다.
- 경계를 흐리게(블러·그라디언트·그림자) 하지 않는다 — 편집자가 녹화본을 매트나 키로 쓸 때 가장자리가 칼같이 선명해야 한다. 납작한 단색 면만 쓴다.
- 장면 카드나 화면 전체를 옆으로 밀어내지 않는다 — 밀기는 네 번째 전환이 되어 세 전환의 구분을 흐리고, 밀린 화면 가장자리에 빈 띠가 드러난다. 장면은 제자리에 있고 경계만 움직인다.
- 와이프 띠를 세 겹 이상으로 늘리거나 띠에 줄무늬·그라디언트를 넣지 않는다 — 「두 겹이 시차를 두고」가 이 전환의 전부다. 겹이 늘면 앞선의 시차가 읽히지 않는다.
- 셔터 날에 입체 음영·하이라이트·회전 원근을 넣지 않는다 — 날은 납작한 사각형이 두꺼워졌다 얇아지는 것만으로 블라인드로 읽힌다. 음영은 날 경계를 흐려 닫힌 순간의 「화면 전체 한 색」을 깬다.
- 머무는 구간에 숨쉬기 확대·반짝임·배경 무늬 같은 움직임을 더하지 않는다 — 편집자는 머무는 구간을 잘라 버리고 전환만 쓴다. 머묾이 움직이면 전환의 시작과 끝이 어디인지 흐려진다.
- 전환을 박 밖에서 시작하거나 0.8초보다 길게·짧게 하지 않는다 — 음악에 맞춰 바로 얹어 쓰는 소스라, 시작과 끝이 박 위에 있어야 한다(와이프는 띠가 화면 가운데를 지나는 순간, 셔터는 완전히 닫히는 순간도 박 위다. 잉크는 지수로 번져 덮인 면적 절반이 τ≈0.56 에 온다).
- 와이프 곡선을 easeInOutCubic 이상으로 양끝이 납작한 곡선으로 바꾸지 않는다 — 모서리에서 자라는 면적은 이동 거리의 제곱이라, 곡선 양끝 20%가 화면에서 정지로 보여 0.8초 전환이 0.45초로 읽힌다.
- 방울이 맞붙는 자리의 V자 홈을 블러·둥근 다리·추가 원으로 메우지 않는다 — 합집합의 꺾임은 0.07초 뒤 번짐이 덮고, 메운 자리는 경계가 흐려지거나 방울이 넷 이상으로 읽힌다.
- 카드에 번호·진행 막대·모서리 글자·로고를 넣지 않는다 — 소스로 쓸 때 지워야 할 군더더기다. 화면 위 글자는 제목과 (켜져 있으면) 이름표뿐이다.
- 렌즈 플레어·발광·파티클·3D 회전을 넣지 않는다 — 단색 면의 경계가 볼거리인 작품이고, 효과가 붙으면 흔한 템플릿 전환처럼 보인다.
- 반복 이음매에서 화면을 비우거나 다른 화면을 끼우지 않는다 — 7.2초 프레임은 0초 프레임과 같은 「A 가득」이어야 한다. 빈 화면 한 장이 끼면 반복 재생에서 깜빡임으로 보인다.