시임 크래프트(Seam Craft) — 씬 간 전환을 위한 렌더 전제 조건
이것은 **PLV 씬 간 시임(scene-to-scene seam)**을 위한 **렌더 정확성 원칙(render-correctness doctrine)**입니다: 특정 전환(transition)에 관계없이 모든 전환이 올바르게 합성되기 위한 전제 조건과 마스터 타임라인 메커니즘입니다. 개별 전환 카탈로그(크로스페이드, 푸시-슬라이드, 줌-스루, 컷-더-커브 등)는 전환 레지스트리(transition registry)에 있으며 — 이 페이지는 그 모든 전환 아래에 위치하는 원칙입니다.
이 원칙이 규율하는 전환은 Tier-B-ready입니다: 두 씬 클립 래퍼(clip wrapper)(#el-<sid>)에 대한 순수 transform / opacity / filter이며, 주입된 오버레이 DOM이나 씬별 협력이 없습니다. 오버레이 계열(스태거 블록, 블라인드, 라이트 릭, 그리드 디졸브, 페이지 번) 및 셰이더 전환은 이후 단계로 연기됩니다.
무대 배경 전제 조건 (흰색 섬광 방지)
여러 템플릿은 두 래퍼의 합산 불투명도가 1 미만이 되는 창(window)을 엽니다(컷-더-커브의 중간 창 컷, 줌-스루의 0.15 바닥, 일반 크로스페이드의 파워 커브 딥). 이 창 동안 래퍼 뒤에 있는 것이 드러납니다. 조립된 index.html #root에 불투명한 배경이 없으면 렌더러는 딥(dip)을 기본 흰색 페이지 위에 합성하여 — 모든 시임에서 흰색 섬광이 발생하고, 특히 어두운 필름에서 눈에 띕니다(수정 전 두 번의 Spotify 실행에서 관찰됨).
어셈블러는 무대를 칠해야 합니다: #root { background: var(--canvas-deep, var(--canvas, #000)) } — assemble-index.mjs가 이를 내보냅니다; 이 템플릿을 사용하는 다른 소비자도 동일한 보증을 부담합니다.
인젝터가 전환을 적용하는 방법
씬 i (from)와 씬 i+1 (to) 사이의 break 경계에서 인젝터는:
#el-<from>래퍼data-duration을duration_s만큼 연장합니다(최종 프레임 유지 — 확인됨:core/src/runtime/init.ts:1393-1410external-slot 분기).#el-<to>래퍼data-start를duration_s만큼 당깁니다(오버랩 창 생성).- 모든 클립
data-track-index를 0/1 핑퐁으로 재할당하여 두 오버랩 래퍼가 동일한 트랙을 공유하지 않도록 합니다(동일 트랙 오버랩은 불법 —core/src/lint/rules/composition.ts). 더 높은 트랙이 위에 합성됩니다. gsap_template을T = overlap-start에서window.__timelines["main"]에 스탬프합니다.
프로토타입 렌더로 확인됨(2026-05-31): 마스터 타임라인 래퍼 트윈이 탐색 및 렌더링되며(서브-컴포지션의 자체 일시 중지된 타임라인과 이중 탐색되지 않음 — 런타임이 독립적으로 구동), 연장된 래퍼는 씬 _i_의 최종 프레임을 유지하며, 더 높은 트랙의 들어오는 래퍼가 나가는 래퍼 위에 합성되고 블렌딩됩니다.
템플릿 플레이스홀더
인젝터는 각 gsap_template 라인에서 다음 토큰을 대체합니다:
| 토큰 | 의미 |
|---|---|
__OLD__ | "#el-<from>" — 나가는 클립 래퍼 선택자 (따옴표 포함) |
__NEW__ | "#el-<to>" — 들어오는 클립 래퍼 선택자 (따옴표 포함) |
__T__ | 오버랩 시작 시간(초, 마스터 클록) |
__DUR__ | 이 경계에 대한 duration_s |
__DX__ | 방향 유형에 대한 수평 이동: -1920 (LEFT) / 1920 (RIGHT) |
__DY__ | 수직 이동: -1080 (UP) / 1080 (DOWN) |
__ORIGIN_OUT__ / __ORIGIN_IN__ | squeeze를 위한 transformOrigin 쌍 |
filter / scaleX / transformOrigin은 마스터 타임라인에서 린트-클린합니다(확인됨: core/src/lint/rules/gsap.ts에는 속성별 화이트리스트가 없으며 data-composition-id 범위로 검사를 한정함; x/y/scale/rotation/opacity 화이트리스트는 씬-워커(scene-worker) 프롬프트 규칙일 뿐 — index.html을 바인딩하지 않음).