모션 교리 (게이트웨이)
애니메이션을 구성하기 전에 먼저 읽으세요. 이 문서는 모든 이음새에서 무슨 일이 일어날지, 각 장면이 어떻게 수행될지를 결정합니다. 기술 스킬은 이를 구현합니다. 이 규칙들은 일반적인 / 상위 모션 지침을 대체합니다. 이 규칙이 방지하는 실패: 장면이 고립되어 제작되어 — 눈의 운동량이 모든 컷에서 죽고, 장면이 진입과 종료 사이에서 제자리에서 흔들립니다.
경로 맵
| 결정 (이 스킬) | 구현 스킬 |
|---|---|
| 이음새 전환 선택 + 매개변수 + 코드 | cut-the-curve §1–5 (카탈로그) |
| 텍스트 / 요소 진입 캐스케이드 | cut-the-curve §6 (폭포 진입) |
| 장면 내 그룹 재배치 (컷 없음) | cut-the-curve §7 (넛지 커브) |
| 커서 주도 액션 / 장면 시작 / 모프 점화 | oversized-cursor |
| 이음새 렌더링 메커니즘 / 흰색 플래시 방지 | seam-craft |
| 제품 출시 / 설명 / 캡션 작업 | 상위 스킬 위에 text-beat-economics, brand-faithful, captions-overlay 오버레이 |
제작 순서: 벡터 원장 (ledger.json) → 여기서 마스터 이음새를 스탬프 (scripts/seam-stamp.mjs --ledger ledger.json --write index.html) → 단계별 지속 모션 경로 → 캐리어 및 원인 → 빌드 컴포지션 → 검증 (scripts/seam-gate.mjs).
Tier-A 모프/매치 컷만 수동 제작합니다. 스탬프된 이음새는 게이트를 통과합니다.
파트 1 — 이음새 법칙
벡터 법칙
장면 A가 종료되는 방식이 장면 B가 진입하는 방식을 결정합니다: 동일한 축, 동일한 방향, 일치하는 속도, 양쪽에서 중간 동작에서 컷.
- 축 — x는 x, y는 y, Z는 Z를 유지합니다. 컷을 가로질러 축을 교환하지 마십시오.
- 방향 — 절대 반전하지 마십시오. Z에서 방향 = 스케일 변화의 부호: 커짐 = 푸시(카메라 전진), 작아짐 = 풀(카메라 후퇴). 후퇴하는 종료가 작은 것에서 커지는 진입으로 응답되는 경우 반전된 벡터입니다 — 가장 흔한 위반입니다. 작은 것에서 커지는 것은 기본 요소 진입이기 때문입니다.
- 속도 — 진입 초기 속도 ≈ 종료 최종 속도, 반전된 이징을 통해 (종료
power4.in+ 진입power4.out, 동일한 거리와 기간, 진입 측은 가상 경로의 ≥50% 지점에서 시작). 메커니즘은cut-the-curve에 있습니다. - 위상 — 컷은 양쪽에서 중간 동작에 도달합니다. 컷 전에 정지하거나 컷 후에 정지에서 시작하는 것은 데드 비트입니다.
전류
모든 영화는 하나의 지배적인 방향을 선택합니다 (기본값: 왼쪽). 모든 일반적인 이음새는 이를 사용합니다. 다른 벡터는 예약되어 있습니다 — 하나를 사용하는 것은 무언가를 의미합니다:
| 벡터 | 의미 |
|---|---|
| 전류 (왼쪽) | "다음 비트" — 중립적인 전진 진행 |
| 위쪽 | 고양 — 결론 또는 공개가 이전 것 위로 상승 |
| Z 전진 (줌-스루) | 동일한 생각 안으로 더 깊이 밀어 넣기 |
| Z 후진 (역 줌) | 도착 — 더 큰 무언가가 착륙 |
| 스케일 버스트 (폭발 밖) | 세계를 떠나기 — 표면이 카메라를 지나 폭발 |
- 반대 방향으로 연속적인 이음새를 실행하지 마십시오 — 핑퐁은 오류로 읽힙니다.
- 방향 변경은 가시적인 원인(클릭 / 바운스 / 충돌) 또는 챕터 경계가 필요합니다.
벡터 원장
마스터 타임라인을 제작하기 전에 기록하십시오 — 프로젝트 루트의 ledger.json (스키마: references/seam-gate.md). 이음새당 한 행: 컷 시간, 종료 및 진입 벡터 (축 + 부호 있는 방향; Z 행은 스케일 부호를 포함), 선택자, 기법. 종료와 진입은 일치해야 합니다. 행이 불일치하면 계획을 수정하고, 이징을 수정하지 마십시오. 검증기는 런타임 샘플링 전에 행 일관성을 정적으로 확인합니다.
캐리어
눈은 추상이 아닌 객체를 따릅니다. 가장 강한 이음새는 일치하는 위치와 속도로 컷을 가로질러 구체적인 캐리어를 전달합니다: 중간 경로의 커서, 다음 레이아웃으로 축소/도킹되는 컨테이너, 정확한 슬롯으로 날아가는 마크, 폭포 컷의 단어 그룹. 자연적인 캐리어가 없는 경우 장면의 주인공이 이를 전달합니다 (부분 이동 + 조기 페이드, 중간 비행 진입). 크로스페이드는 절대 안 됩니다 — 전혀 캐리어가 없습니다.
인과적 모션
각 움직임이 이전 움직임에 의해 명확히 시작되도록 모션을 연결하십시오: 클릭 → 스쿼시 → 스프링 해제 → 비행 → 충돌 → 반동 → 공개.
- 효과는 원인이 되는 프레임에서 시작합니다 — 동일한 타임라인 위치, 절대 "잠시 후"가 아닙니다.
- 반응은 암시된 질량에 비례합니다: 큰 요소는 느리게 반동하고, 작은 요소는 빠르게 튕깁니다.
- 힘은 방향을 변경할 수 있는 자격입니다. 원인 없는 반전은 핑퐁입니다.
이음새 게이트 (빌드 게이트 — 검증기를 실행하고, 종료 코드 0이 아니면 이음새가 완료되지 않은 것)
node <SKILL_DIR>/scripts/seam-stamp.mjs --ledger ledger.json --write index.html # 생성
node <SKILL_DIR>/scripts/seam-gate.mjs verify --ledger ledger.json --project . # 검증
스크립트 (사용법 + 원장 스키마: references/seam-gate.md)는 이음새당 다음을 숫자로 강제합니다: 원장 행 일관성, 종료가 컷에서 여전히 움직이는지, 진입이 중간 비행인지(절대 정지가 아닌), 측정된 방향 = 원장 방향, 진입/종료 속도 일치 (WARN), 제로 오버랩 (프레임당 한 쪽만 보임 — 컷은 디졸브가 아님), Z 부호 규칙 (d(scale)/dt가 양쪽에서 동일한 부호, 들어오는 장면의 자체 진입이 부호 싸움을 위해 스캔됨), 조상 스케일을 포함한 캐리어 직사각형 연속성. 원장을 제작할 때 각 이음새의 실제 캐리어 선택자를 찾으려면 seam-gate.mjs probe --t <cut>를 사용하십시오.
스크립트가 확인할 수 없는 규칙 — 여전히 당신의 책임:
- 편집은 이음새를 다시 엽니다. 장면의 처음/마지막 ~1초에 대한 변경(새 VO에 맞춘 재타이밍 포함)은 해당 경계의 감사를 무효화합니다 — 검증기를 다시 실행하십시오.
- 오디오는 시계입니다. 장면을 VO의 실제 단어 타임스탬프에 맞춰 재타이밍하십시오. 슬롯에 맞추기 위해 읽기를 서두르지 마십시오. VO 재생성은 이음새를 다시 엽니다.
- 클립 게이팅 문제 (제로 오버랩 실패의 일반적인 원인):
data-start가 진입 트윈보다 앞서는 클립은 초기 불투명도에서 숨겨지지 않습니다 — 초기autoAlpha: 0을 설정하고data-start= 컷 시간으로 설정하십시오. 절대 더 이르게 설정하지 마십시오.
파트 2 — 성능 (장면은 계속 수행)
유휴 흔들림 없음
유휴 사인 루프 (숨쉬기, 뜨기, 표류, 광택 펄스)는 지속 모션으로 금지됩니다 — "비디오가 기다리고 있다"로 읽힙니다. 몇 초가 남은 상태에서 진입을 마친 장면은 계획 버그입니다: 흔들림이 아닌 이야기를 추가하십시오. 진입과 종료 사이의 모든 단계는 다음 경로 중 하나가 소유합니다 (계획에서 경로 이름을 지정하십시오):
| 경로 | 설명 |
|---|---|
| 단계적 공개 | 콘텐츠를 보류하고 내레이션 비트에서 공개 — 프레임은 계속 정보를 얻습니다 (≥2개의 콘텐츠 그룹에 대한 기본값) |
| 의도가 있는 카메라 | 매핑된 스케일+팬 경로: 넓게 설정 → 이동 → 주제에 도착 |
| 순차적 UI 수명 | 제품이 시간이 지남에 따라 동작: 진행률 증가, 하이라이트 단계, 카운트 틱 |
| 애니메이션 시퀀스 | 요소가 비트를 연기: 카드가 스택에 정리, 항목이 드래그됨, 결과가 조립됨 |
| 커서 주도 액션 | 큰 커서가 눈을 트리거로 안내; 클릭이 다음 비트를 점화 (oversized-cursor) |
테스트: 임의의 초에서 일시 중지 — 의미 있는 무언가가 중간 비행 중이어야 합니다 (공개 착륙, 카메라 이동, 내레이션이 말하는 대로 UI가 수행).
클라이맥스 전 정지
주요 액션과 결과 사이에 0.3–0.75초의 일시 중지를 예약하십시오 — 극적인 쉼표. 액션에서 결과로 바로 점프하는 장면은 그 효과를 잃습니다.
타이밍 의도
- 단일 진입 ≤ ~800ms; 더 긴 빌드업 = 여러 요소 스태거, 하나의 느린 요소가 아닙니다.
- 종료 ≈ 진입의 75%. 예외: cut-the-curve는 이를 반전시킵니다 (진입 ~127%의 종료).
- 총 스태거 ≤ 500ms; 8개 이상의 요소의 경우 항목당 지연을 좁히거나 처음 몇 개만 스태거하십시오.
- 금지된 이징:
bounce.out/elastic.out. 진입 오버슈트back.out(1.4–1.7)는 괜찮습니다. - 유사한 요소는 하나의 이징+기간 의도를 공유합니다 — 요소당 고유한 쌍을 절대 사용하지 마십시오.
전환 어휘
영화당 2–3개의 장면 간 전환만 사용하고 반복하십시오. 기본 경계는 전류 방향의 cut-the-curve입니다. 수동으로 작성된 공유 요소 모프 (intent: morph)는 예산에 포함되지 않습니다.
안티 패턴
| 하지 말아야 할 것 | 대신 |
|---|---|
| 각 장면의 진입을 고립되어 제작 | 먼저 벡터 원장을 작성 |
| 장면 간 크로스페이드 | 전류 방향의 cut-the-curve |
| 종료가 완료된 후 장면 변경 | 양쪽에서 중간 동작에서 컷 |
| 컷 후 정지에서 진입 시작 | 가상 경로의 ≥50% 지점에서 진입 |
| 역 줌 종료 → 작은 것에서 커지는 진입 (또는 푸시 → 큰 수축) | 스케일-속도 부호 일치 (이음새 게이트 7) |
| Z-이음새 핸드오프 아래 들어오는 장면의 자체 팝인 인트로 | 열리는 프레임을 구성하거나 부호를 일치시킴 |
| 시간을 채우기 위한 유휴 흔들림 / 숨쉬기 / 뜨기 | 지속 모션 경로 할당 또는 이야기 추가 |
| 원인 없는 방향 반전 | 힘을 사용하거나 전류 유지 |
| 다양성을 위해 사용된 예약 벡터 | 전류를 기본으로 사용하고 의미에 사용 |
| 원인보다 몇 프레임 늦은 반응 | 같은 프레임 점화 |
| 액션이 결과로 바로 점프 | 클라이맥스 전 정지 예약 (0.3–0.75초) |