커트 더 커브 — 기술 카탈로그
5가지 SEAM 기술, 하나의 원칙: 최고 속도에서 자르고, 잘린 양쪽의 방향과 속도를 일치시킨다 — 더불어 두 가지 인-씬 기법(§6 도착, §7 슬라이드).
이음매 법칙(Seam LAW) — 벡터 법칙, 전류(current), 원장(ledger), 이음매 문(Seam Gate) — 은
motion-doctrine에 있습니다. 먼저 읽으십시오. 이 스킬은 매개변수와 메커니즘을 다룹니다.
모든 GSAP 코드 템플릿(워커 + 레지스트리): examples/gsap-implementation.md.
카탈로그
| # | 기술 | 범위 | 축 | 용도 |
|---|---|---|---|---|
| 1 | 줌-스루(Zoom-Through) (정방향) | 장면 내 텍스트 교체 | Z, 시청자 방향 | 동일한 생각을 더 깊이 파고들 때 |
| 2 | 인버스 줌-스루(Inverse Zoom-Through) | 도착/결정적 비트 | Z, 시청자 반대 방향 | 더 큰 것이 도착할 때 |
| 3 | 커트 더 커브(Cut the Curve) | 장면 간 | X / Y | 기본 경계, 영화의 현재 흐름 |
| 4 | 워터폴 컷(Waterfall Cut) | 텍스트 간 이음매 | X, 단어별 | 큰 텍스트 비트 간 단어 수준 핸드오프 |
| 5 | 랙-포커스 블러-컷(Rack-Focus Blur-Cut) | 동일 표면 상태 교체 | X / Y / Z | 보고 싶은 하나의 컷 — DSLR 포커스 풀 플로리시 |
| 6 | 워터폴 엔트리(Waterfall Entry) | 장면 내 도착(이음매 없음) | Y, 아래에서 위로 | 타이틀 카드, 세그먼트 오프너, 목록 인트로 |
| 7 | 너지 커브(Nudge Curve) | 장면 내 그룹 슬라이드(이음매 없음) | X / Y | 구성된 그룹을 재배치하여 공간 확보 |
Z 방향은 부호입니다
Z축에서는 "동일한 축"만으로는 충분하지 않습니다 — d(scale)/dt의 부호가 컷 양쪽에서 일치해야 합니다.
| Z 벡터 | 나가는(Exit) 스케일 | 들어오는(Entry) 스케일 | 변형(Variant) |
|---|---|---|---|
| 밀기(Push, 정방향) | 증가 1 → 1.2 | 증가 0.75 → 1 | 줌-스루(zoom-through) |
| 당기기(Pull, 역방향) | 감소 1 → 0.8 | 감소 1.25 → 1 | 인버스 줌-스루(inverse zoom-through) |
금지된 거울: 후퇴하는 나감이 작은 것에서 자라는 들어옴으로 응답되는 경우(당김이 밀기로 전환됨 — 작은 것에서 자라는 것이 기본 요소 진입이므로 흔한 경우)와, 밀어내는 나감이 과도한 크기로 수축하는 들어옴으로 응답되는 경우입니다. 이는 이음매 구간(컷 + 약 0.5초) 동안 들어오는 장면 자체의 진입을 제한하며, 단순히 래퍼 트윈만이 아닙니다: 들어오는 프레임을 구성된 상태로 유지하거나, 부호와 일치하도록 진입을 직접 작성하십시오. 이음매 문 규칙 7에 따라 확인하십시오.
블러 로직(모든 Z 변형)
| 대상 | 최대 블러 | 이유 |
|---|---|---|
| 텍스트 스케일(헤드라인, 단어 그룹) | 10px | 20px는 글자 형태를 번지게 만듦 — 컷이 속도가 아닌 결함으로 읽힘 |
| 전체 프레임 표면(윈도우, 카드, 스크린샷) | 18–20px | 큰 표면의 가벼운 블러는 렌더링 문제로 읽힘 |
교체 프레임에서 양쪽 동일한 최대 블러. 래퍼(WRAPPER)를 블러 처리하고, 절대 하위 요소(children)는 블러 처리하지 마십시오.
1. 줌-스루 (정방향)
Z축 속도 매칭 컷; 두 텍스트가 동시에 보이지 않음. 모든 것이 성장(GROW)합니다: 나가는 텍스트는 카메라 쪽으로 가속하고, 하드 스왑은 최대 블러에서 숨겨지며, 들어오는 텍스트는 초점 평면 안으로 계속 성장합니다. 헤드라인과 짧은 구문만 사용. 총 약 0.4초.
| 단계 | 스케일 | 블러 | 불투명도 | 이즈 | 지속 시간 |
|---|---|---|---|---|---|
| 나감(Exit) | 1 → 1.2 | 0 → 10px | 1 → 0.15 | power3.in (불투명도: 별도 none 트윈) | 0.2초 |
컷 (tl.set) | in: 0.75 | 10px | out: 0 / in: 0.15 | — | — |
| 들어옴(Entry) | 0.75 → 1 | 10 → 0px | 0.15 → 1 | expo.out | 0.5초 |
나감 불투명도는 반드시 자체 선형 트윈이어야 합니다 — power3.in은 불투명도를 1 근처에 너무 오래 유지합니다.
들어옴에서는 모든 속성이 expo.out을 공유합니다.
2. 인버스 줌-스루 (역방향)
당겨오기(pull-back) 거울: 나가는 요소는 후퇴(RECEDE)합니다; 들어오는 요소는 과장된 크기(OVERSIZED, 마치 카메라 바로 뒤에 있는 듯)로 도착하여 초점 평면 안으로 수축합니다. 모든 것이 축소(SHRINK)됩니다. 도착(ARRIVAL)/결정적 비트에 사용하십시오 — 결정적인 대사, 거대한 응답, 유지되는 최종 상태 — 절대 일반적인 경계에 사용하지 마십시오. 총 약 0.7초 (30% 나감 / 70% 들어옴).
| 단계 | 스케일 | 블러 | 불투명도 | 이즈 | 지속 시간 |
|---|---|---|---|---|---|
| 나감(Exit) | 1 → 0.8 | 0 → 10px | 1 → 0.15 | power3.in (불투명도: 별도 none 트윈) | 약 0.2초 |
컷 (tl.set) | in: 1.25 | 10px | out: 0 / in: 0.15 | — | — |
| 들어옴(Entry) | 1.25 → 1 | 10 → 0px | 0.15 → 1 | expo.out | 약 0.5초 |
블러는 텍스트 스케일 기준 10px입니다. 양쪽이 모두 전체 면(full-bleed) 표면인 경우에만 18–20px을 사용합니다.
부호 규율: 들어오는 장면은 수축하는 래퍼 안에서 구성된 프레임으로 도착합니다 — 이음매 구간에는 작은 것에서 자라는 인트로가 없습니다. 계단식 진입은 수축이 완료된 후에 발생하거나, ≥1에서 시작하여 수축합니다.
3. 커트 더 커브 (기본 장면 경계)
X/Y 속도 매칭 컷 — 모든 장면 간 경계의 기본값이며, 영화의 현재 흐름(current) 속에서, 액센트가 아닙니다. 나가는 주체(hero)가 한 방향으로 가속하고, 컷은 움직임 중간에 위치하며, 들어오는 주체는 동일한 방향으로 계속 이동하며 감속합니다. 총 약 0.6초; 방향: LEFT / RIGHT / UP / DOWN (기본값 LEFT).
부분 이동(Partial travel): 프레임의 약 12% (1920 기준 약 230px) — 절대 전체 화면 밖으로 이동하지 않습니다.
| 방향 | 나감(Exit) | 들어옴 시작 → 끝(Entry start → end) |
|---|---|---|
| 왼쪽(Leftward) | x: 0 → −230 | x: +230 → 0 |
| 오른쪽(Rightward) | x: 0 → +230 | x: −230 → 0 |
| 위쪽(Upward) | y: 0 → −230 | y: +230 → 0 |
| 아래쪽(Downward) | y: 0 → +230 | y: −230 → 0 |
메커니즘:
- 미러링된 이즈: 나감
power4.in+ 들어옴power4.out, 동일한 거리와 지속 시간 — 하나의power4.inOut의 두 절반이므로 컷 지점에서 속도가 정확히 일치합니다. - 페이드 트릭: 나감 불투명도는 이동의 약 25–30%에서 완료됩니다(페이드 ≈ 0.18–0.3초 vs 모션 0.3–0.34초); 들어옴은 경로 중간인 약 0.35 불투명도에서 점화됩니다. 마지막으로 페이드되는 요소가 컷 직전에 사라지도록 타이밍을 맞추십시오 — 아무것도 움직이지 않는 간격은 데드 에어로 읽힙니다.
- 나감 0.2–0.4초; 들어옴 ≥ 나감. 선택적 블러 8–10px.
- 스테이지 배경(Stage ground):
#root는 불투명해야 합니다 (background: var(--canvas-deep, var(--canvas, #000))) — 중간 구간 컷은 합산 불투명도 < 1인 창을 열어 그렇지 않으면 하얗게 번쩍입니다 (seam-craft참조).
push-slide는 존재하지만 부분 이동과 중간 모션 단계를 위반합니다. 커트 더 커브를 선호하십시오.
4. 워터폴 컷 (단어별 커트 더 커브)
단어(WORD) 단위의 커트 더 커브 — 텍스트 간 이음매를 위한 가장 강력한 왼쪽 방향 컷입니다. 나가는 단어들은 각각의 곡선을 따라 점차 사라지고(ramp out); 들어오는 단어들은 비행 중에 계단식으로 들어옵니다(cascade in) — 눈이 이음매를 가로질러 타고 가는 파도입니다.
범위: 하나의 멀티 비트 컴포지션(쌓인 전체 프레임 .beat 레이어) 내에서 워커가 작성합니다.
레지스트리/인젝터 유형이 아닙니다 — 클립 래퍼가 아닌 단어 스팬(span)을 트윈합니다. 텍스트 비트 블록으로의
경계와 블록 밖으로의 경계는 여전히 일반 레지스트리 전환을 얻습니다. 2–3 전환 예산에 포함되지 않습니다.
| 매개변수 | 값 | 이유 |
|---|---|---|
| 이동(Travel) | ±230px (~12% 프레임) | 부분 이동 + 속도 > 전체 프레임 밀기 |
| 나감(Exit) | 0.34초 power4.in | 가속 자체가 컷이 됨 |
| 나감 페이드(Exit fade) | 0.18초, x와 함께 시작 | 단어가 이동의 약 25–30% 지점에서 사라짐 — 번짐 없음 |
| 나감 계단식(Exit stagger) | +0.022초 읽기 순서 | 줄이 블록 슬라이드가 아니라 벗겨짐 |
| 들어옴(Entry) | 0.3초 power4.out | 복합체의 뒷부분 — 속도 일치 |
| 들어옴 시작 불투명도(Entry start opacity) | 0.35 | 경로 중간 점화; 이진 0→1은 튀어나옴(pop) |
| 들어옴 간격(Entry gaps) | 0.05초 × 0.84 감쇠 | 가속 계단식, 구성된 상태로 해소 |
규칙:
- 체인 당 하나의 방향, 현재 흐름을 탐. 인버스 줌은 체인의 도착 비트로만 사용합니다.
- 빌드 타임에 모든 단어를
x: +230, opacity: 0으로 사전 설정하십시오 —immediateRender: false만으로는 시작되지 않은 단어가 정지 상태에서 보입니다. - 짧은 첫 번째 비트는 전체 줄로 나갈 수 있습니다: 페이드가 컷보다 약 0.02초 먼저 끝나서 다음 단어가 점화될 때 여전히 빛나고 있게 하여 — 데드 갭이 없습니다.
- 변형/불투명도만 사용(seek-safe); 불투명 스테이지 배경이 적용됩니다.
5. 랙-포커스 블러-컷 (보이는 컷)
컷이 보이는 유일한 변형: 디포커스 블러 스파이크가 단일 프레임 하드 스왑을 숨깁니다 — 핸드헬드 DSLR 포커스-풀과 같습니다. 하나의 시각적 테마 내에서 동일한 표면의 상태 교체를 위한 가끔 사용하는 플로리시로 사용하십시오. 절대 기본 경계로 사용하지 마십시오.
다른 변형과의 차이점: 나감은 컷까지 완전히 불투명(FULLY OPAQUE)하게 유지됩니다(블러가
스왑을 숨깁니다 — 초기 페이드 없음); 이즈는 power2.in / power2.out (소프트 광학, 운동량 아님).
규칙:
- 내러티브 비트에서만 발동, 약 8초마다 ≤ 1회; 자막 중이나 유지 동안에는 절대 사용하지 마십시오.
- 최대 블러(≥6px; 최대 8–12px, ≤16–18px 최대)에서 컷을 수행하십시오 — 올라가는 도중에 교체하면 컷이 드러납니다.
- 미묘한 스케일(약 1.06 렌즈 브리딩)이 광학 효과를 만듭니다.
- 양쪽 동일한 방향 — 벡터 법칙은 여전히 유효합니다. 들어옴 ≥ 나감 지속 시간.
- 래퍼를 블러 처리하십시오; 하나의 요소에서 하나의 트윈으로 블러와 불투명도를 동시에 처리하지 마십시오(헤드리스
컴포지팅 버그);
<video>를 직접 블러 처리하지 마십시오(래핑하십시오).
6. 워터폴 엔트리 (장면 내 도착 — 이음매 아님)
계단식 도착(ARRIVAL) 캐스케이드: 단어/요소가 아래에서 휘몰아쳐 들어옵니다(일관된 한 방향), 각각은 이전 요소가 안정되기 전에 시작합니다 — 구성된 레이아웃으로 해소되는 가속 파도입니다. 타이틀 카드, 세그먼트 오프너, 목록/기능 인트로. 이음매 형제는 §4입니다. 규칙을 혼합하지 마십시오:
| §6 들어옴(Entry, 도착) | §4 워터폴 컷(Waterfall Cut, 이음매) | |
|---|---|---|
| 불투명도 | 진입 시 tl.set을 통한 이진(BINARY) 0→1 — 절대 페이드 없음 | 경로 중간 0.35에서 점화됨 — 페이드 자체가 속도 트릭임 |
| 축 기본값 | Y, 아래에서 위로 | X, 현재 흐름을 탐 |
| 나가는 쪽 | 없음 | 단어들이 미러링된 power4.in으로 빠져나감 |
안무(Choreography):
- 대기시키지 말고 겹치십시오(Overlap, don't queue) — 다음 요소는 이전 요소가 안정된 후 ±2 프레임 이내에 시작합니다; 캐스케이드 전반에 걸쳐 간격이 줄어듭니다(SHRINK); 마지막 요소는 스냅됩니다.
- 속도는 무게에 따라 달라집니다(Velocity varies by weight) — 무거운/앵커 요소는 더 멀리, 더 오래 이동합니다; 가벼운 단어/구두점은 좁게 스냅됩니다:
| 매개변수 | 앵커/무거운(Anchor/heavy) | 일반 단어(Normal word) | 가벼운/구두점(Light/punctuation) |
|---|---|---|---|
| Y 오프셋 | 60–80px | 40–50px | 30–48px |
| 지속 시간 | 0.16–0.20초 | 0.13–0.16초 | 0.10–0.13초 |
| 겹침 | 0–2프레임 간격 | 1프레임 겹침 | 1–2프레임 겹침 |
- 이즈
power4.out(추가 스냅을 위해 expo.out); 진입에.inOut은 절대 사용하지 마십시오. - 캐스케이드 당 하나의 방향.
- 마지막(FINAL) 단어를 조각으로 나누어 클라이막스를 연장하십시오. 조각은 더 멀리 이동합니다.
- 안정된 후, 그룹은 일반적으로 다음 비트를 위한 공간을 만들기 위해 슬라이드합니다 — 이것이 §7입니다.
7. 너지 커브 (장면 내 그룹 슬라이드 — 이음매 아님)
느림-빠름-느림으로 구성된 그룹(단어 행, 카드 스택, 목록)을 재배치하여
콘텐츠를 드러내거나 공간을 확보합니다. 단일 내장 이즈로는 이를 생성할 수 없습니다 —
power4.inOut은 급정지합니다. 하나의 속성에 세 개의 트윈을 연결하십시오:
| 단계 | 이즈 | 거리 | 시간 | 느낌 |
|---|---|---|---|---|
| 1 상승 | power3.in | ~10% | ~20% | 거의 움직이지 않음 — 모션이 등록되나 충격 없음 |
| 2 폭발 | none (선형) | ~65% | ~18% | 약 2배 평균 px/프레임 — 목적성 있음 |
| 3 꼬리 | power4.out | ~25% | ~62% | 감쇠하는 크립으로 정지 — 강한 멈춤을 제거함 |
규칙:
- 꼬리는 시간(TIME) 기준으로 상승 단계의 ≥3배입니다. 여전히 강하게 멈춘다면: 꼬리의 시간(거리 아님)을
늘리거나
power5.out을 사용하십시오. - 2단계는 선형으로 유지하십시오 — 이즈를 주면 폭발 대비 효과가 사라집니다.
- 2단계 중에 새 콘텐츠를 드러내십시오 — 폭발이 그 출현을 가립니다.
- 수직에서도 동일한 비율; 거리는 비례적으로 조정하고, 시간 비율은 유지하십시오.
변형 선택하기
| 줌-스루(Zoom-Through) | 인버스 줌(Inverse Zoom) | 커트 더 커브(Cut the Curve) | 워터폴 컷(Waterfall Cut) | |
|---|---|---|---|---|
| 범위 | 장면 내 텍스트 교체 | 도착/결정적 비트 | 장면 간 | 텍스트 간 이음매 |
| Z 부호 / 축 | 성장(밀기) | 축소(당김) | X / Y | X, 단어별 |
| 이동/스케일 | 1→1.2, 그 다음 0.75→1 | 1→0.8, 그 다음 1.25→1 | ±230px | ±230px |
| 최대 블러 | 텍스트 10px / 전체 프레임 18–20 | 텍스트 10px / 전체 프레임 18–20 | 8–10px 선택적 | 없음 |
| 이즈 | power3.in / expo.out | power3.in / expo.out | power4.in / power4.out | power4.in / power4.out |
| 느낌 | 통과하여 진행하는 | 도착하는 | 옆으로 운반되는 | 이음매를 가로지르는 파도 |
안티-패턴
| 하지 마세요 | ... |
|---|