Revideo Scene 컴포넌트 논리적 분리

씬이 커지면 한 파일의 제너레이터 함수가 수백 줄이 된다. 이 페이지에서는 큰 씬을 작은 제너레이터 함수로 쪼개는 패턴과 Motion Canvas와의 차이점을 다룬다.

🧩 왜 분리해야 하나

상태	결과
한 씬에 모든 코드	디버깅 어려움, 재사용 불가, 협업 곤란
제너레이터 함수로 분리	각 컴포넌트 독립 테스트, 코드 재사용, HMR 효율

📐 `yield` vs `yield*` — 함수 호출 시 핵심 구분

function* displaySubtitles() {
  // 자막 표시 로직
  yield view.add(<Txt text="Hello" />);
  yield* waitFor(2);
}

yield displaySubtitles();   // ❌ 자막 끝나기 전에 다음 줄 실행됨
yield* displaySubtitles();  // ✅ 자막 끝날 때까지 기다린 후 다음 줄

패턴	의미	프레임
`yield func()`	`func()`을 호출만, 기다리지 않음 — 자막 + 메인 코드 동시 진행	0 frames
`yield* func()`	`func()`이 끝날 때까지 대기 후 다음 줄	func의 frame 수
`yield* all(g1(), g2())`	`g1` + `g2`를 병렬 실행, 둘 다 끝날 때까지 대기	max(g1, g2)의 frame 수
`yield* chain(g1(), g2())`	`g1` 끝나면 `g2` 시작 (순차)	g1 + g2 frame 합

💡 yield는 "fire and forget", yield*는 "wait for finish". Motion Canvas 가이드가 강조하는 핵심 차이.

🛠️ Custom Component 패턴

// src/scenes/components.ts
import {Txt, View2D} from '@revideo/2d';
import {waitFor} from '@revideo/core';

export function* addText(view: View2D, displayText: string) {
  yield view.add(
    <Txt fill="red" y={300} text={displayText} />,
  );
  yield* waitFor(5);
}

// src/scenes/main.tsx
import {makeScene2D} from '@revideo/2d';
import {waitFor} from '@revideo/core';
import {addText} from './components';

export default makeScene2D('scene', function* (view) {
  yield view.add(
    <Img ref={logoRef} src="logo.png" />,
  );
  yield addText(view, 'Hello World!');
  yield* waitFor(5);
});

장점:

addText를 다른 씬에서 재사용 가능
자막 길이/색 등을 인자로 조절
코드 줄 수 1/3로 축소

⚠️ Revido 고유 — Custom Component의 `draw()`

Motion Canvas에서는 draw()가 sync지만, Revideo에서는 async도 지원한다 (이전 페이지 Revideo Motion Canvas 기초 참고).

대부분은 직접 draw()를 작성할 필요 없고, 내장 컴포넌트 + 커스텀 제너레이터 함수 조합이 일반적이다. draw()를 직접 만져야 한다면:

// Revideo — async draw
class MyImage {
  protected async draw(context: CanvasRenderingContext2D) {
    const blob = await fetch('https://example.com/img.png').then(r => r.blob());
    const bitmap = await createImageBitmap(blob);
    context.drawImage(bitmap, 0, 0);
  }
}

Motion Canvas 가이드의 Custom Components는 Revideo에서도 90% 그대로 작동. 차이는 draw()가 async가 된다는 점뿐.

💡 실전 분리 팁

기준	분리 단위
재사용 가능한 컴포넌트	`function* addXxx(view, ...args)` 제너레이터
한 번만 쓰는 코드	메인 씬에 그대로
외부 의존성 있는 데이터	컴포넌트 함수에 인자로 주입 (`variables.get()`)
큰 장면 (30초+)	씬을 `src/scenes/part-1.tsx`, `part-2.tsx` 등으로 파일 분리

🎯 다음 단계

이모지·Rive·3D: 후속 손자 페이지
씬 작성 패턴: Revideo Scene Flow 이해하기 → Revideo 시작하기 → 이전 hub
커스텀 컴포넌트 더 깊이: Motion Canvas Custom Components

상위 문서: ← Revideo 애니메이션 & 디자인 출처: Revideo 공식 문서 — Logical Separation of Scene Components + Motion Canvas Guide 한글화 (2026-07-29) 공급사: Revideo (현 Midrender)

변경 이력

날짜	변경
2026-07-29	초안 작성 — yield vs yield* 핵심 구분 + addText 제너레이터 패턴 + draw() 비동기 차이점 한글화
2026-07-29	메타데이터 블록을 본문 하단으로 이동