모션 도메인 (게이트웨이)
애니메이션을 구성하기 전에 이 문서를 먼저 읽으세요. 이 문서는 모든 이음새에서 무엇이 발생하고 각 장면이 어떻게 수행되는지를 결정합니다. 기술 스킬은 이를 구현합니다. 이 규칙은 일반적이거나 상위 수준의 모션 지침을 대체합니다. 이 규칙이 방지하는 문제: 개별적으로 작성된 장면에서 시선의 운동량이 모든 컷에서 죽고, 장면이 입구와 출구 사이에서 제자리에서 흔들리는 현상입니다.
경로 맵
| 결정 (이 스킬) | 구현 스킬 |
|---|---|
| 이음새 전환 선택 + 매개변수 + 코드 | 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에 있습니다. - 위상 — 컷은 양쪽에서 움직이는 도중에 위치합니다. 컷 전에 정지하거나 컷 후에 정지 상태에서 시작하는 것은 데드 비트입니다.
전류
모든 영화는 하나의 지배적인 방향을 선택합니다(기본값: LEFT). 모든 일반적인 이음새는 이 방향을 사용합니다. 다른 벡터는 예약되어 있습니다 — 이를 사용하면 의미가 있습니다:
| 벡터 | 의미 |
|---|---|
| 전류 (LEFT) | "다음 비트" — 중립적인 전진 진행 |
| 위쪽 | 고양 — 결론 또는 공개가 이전보다 위로 떠오름 |
| 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)는 이음새당 다음을 수치적으로 강제합니다: 원장 행 일관성, 컷에서 계속 움직이는 출구, 비행 중 입구(정지 상태에서 시작하지 않음), 측정된 방향 = 원장 방향, 입구/출구 속도 일치 (경고), 0 오버랩 (프레임당 한쪽만 보임 — 컷은 디졸브가 아님), Z 부호 규칙 (d(스케일)/dt 양쪽 동일 부호; 들어오는 장면의 자체 입구에서 부호 충돌 검사), 조상 스케일을 포함한 캐리어 사각형 연속성. 원장을 작성할 때 각 이음새의 실제 캐리어 선택자를 찾으려면 seam-gate.mjs probe --t <cut>을 사용하십시오.
스크립트가 확인할 수 없는 규칙 — 여전히 사용자의 책임입니다:
- 편집은 이음새를 다시 엽니다. 장면의 처음/마지막 약 1초에 대한 변경(새 VO에 맞춘 재타이밍 포함)은 해당 경계의 감사를 무효화합니다 — 검증기를 다시 실행하십시오.
- 오디오는 시계입니다. 장면을 VO의 실제 단어 타임스탬프에 맞게 재타이밍하십시오; 슬롯에 맞추기 위해 읽기를 서두르지 마십시오. VO 재생성은 해당 이음새를 다시 엽니다.
- 클립 게이팅 문제 (0 오버랩 실패의 일반적인 원인):
data-start가 항목 트윈보다 앞서는 클립은 초기 불투명도에서 숨김 해제됩니다 — 초기autoAlpha: 0및data-start= 컷 시간으로 설정하고, 절대 더 일찍 설정하지 마십시오.
파트 2 — 성능 (장면은 계속 수행됨)
유휴 흔들림 없음
유휴 사인 루프(숨쉬기, 떠다니기, 표류, 광택 펄스)는 지속적인 모션으로 금지됩니다 — "비디오가 기다리고 있다"로 읽힙니다. 초가 남은 상태에서 입구를 마친 장면은 계획 버그입니다: 흔들림이 아닌 스토리를 추가하십시오. 입구와 출구 사이의 모든 단계는 다음 경로 중 하나에 의해 소유됩니다(계획에서 경로 이름을 지정):
| 경로 | 무엇인가 |
|---|---|
| 단계적 공개 | 콘텐츠를 보류; 내레이션 비트에서 지불 — 프레임이 계속 정보를 얻음 (≥2 콘텐츠 그룹의 기본값) |
| 의도가 있는 카메라 | 매핑된 스케일+팬 경로: 광각 설정 → 이동 → 주제에 도착 |
| 순차적 UI 생애 | 제품이 시간에 따라 동작: 진행률 증가, 단계 강조, 카운트 틱 |
| 애니메이션 시퀀스 | 요소가 비트를 연기: 카드가 스택으로 파일링, 항목이 드래그됨, 결과가 조립됨 |
| 커서 주도 동작 | 큰 커서가 눈을 트리거로 안내; 해당 CLICK이 다음 비트를 점화 (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초) |