작업 방식
Remotion Markup은 컴포지션 작성에 초점을 둡니다. 타이밍은 컴포지션 프레임 레이트에서 계산하고, 애니메이션은 현재 프레임으로 구동하며, 미디어 요소는 영상 타임라인에 참여합니다. 소스는 일반 CSS 전환과 애니메이션 클래스가 프레임 기반 렌더링을 대체할 수 없다고 명확히 경고합니다.
자막과 지도부터 텍스트 측정, 효과, 오디오까지 더 전문적인 작업을 위한 참조 허브이기도 합니다. 핵심 가치는 기본 규약에 있습니다. 타이밍을 작성한 요소 가까이에 두고, 독립적인 편집 대상을 유지하며, 모든 시각 요소를 임의의 DOM 래퍼로 다루지 않고 적절한 미디어 또는 효과 컴포넌트를 사용하는 것입니다.
예상 결과물
- 프레임 기반 React 컴포지션 마크업
- 명시적인 타이밍과 에셋 참조를 가진 미디어 레이어
- 지원되는 효과 및 편집 구조를 갖춘 미리보기 가능한 장면
브리프에서 검토까지
- 01컴포지션 설정 읽기
초를 프레임으로 환산할 때 기존 프레임 레이트를 사용하고, 의도한 길이와 크기를 유지합니다.
- 02타이밍 레이어 작성
독립적으로 편집할 수 있는 미디어와 장면은 별도의 JSX 노드로 두고, 지원하는 컴포넌트에는 타이밍을 직접 지정합니다. 검토한 소스는 중첩 항목을 포함해 지원되는 타이밍 컴포넌트에 premountFor={fps}로 1초 사전 마운트를 적용하도록 요구하므로, 적용 전에 설치된 API를 확인하세요.
- 03모션과 효과 추가
모션은 현재 프레임 보간으로 구동합니다. 전문 효과는 해당 참조 문서와 호환되는 컴포넌트를 통해 적용합니다.
- 04영상 프레임 점검
Studio 재생과 대표 렌더링 프레임을 검토해 텍스트 넘침, 미디어 준비 상태, 타이밍을 확인합니다.