Remotion 비디오에서 Resolve 타임라인으로 변환은(는) 무엇을 하나요?
Remotion 프로젝트를 읽고, 장면 데이터를 resolve-screen-tutorial 스킬이 사용하는 film.json으로 변환하는 작은 어댑터를 작성한 후, 빌드를 실행하고 결과를 Remotion 렌더링과 비교합니다.
이는 Resolve의 도구를 사용한 재구축이며 픽셀 자체를 복사하는 것이 아닙니다. React는 무엇이든 그릴 수 있지만, 타임라인은 이미지, 키프레임 및 Fusion 타이틀을 사용합니다. 따라서 이 작업의 핵심은 사용자에게 어떤 요소가 깔끔하게 매핑되고, 어떤 요소가 근사되며, 어떤 요소가 변환되지 않는지 알려주는 것입니다.
시작하기 전에
resolve-screen-tutorial이 이 스킬의 폴더 옆에 있어야 합니다. 지금 해당 스킬의SKILL.md와references/film-format.md를 읽으십시오. 이 형식을 작성하고 빌드 단계를 따라야 하기 때문입니다. 만약 누락된 경우, 사용자에게 이 스킬이 필요하다고 알리십시오.- Remotion 프로젝트의 의존성이 설치되어 있어야 합니다. Remotion 코드 자체는 변경되지 않습니다. 어댑터는 읽기만 합니다.
단계
1. 비디오 읽기. src/Root.tsx에서 컴포지션의 id, fps, width, height 및 durationInFrames를 확인한 후, 장면 컴포넌트와 해당 데이터를 따라가십시오. 여러 컴포지션이 있고 요청에 명시되지 않은 경우 어떤 컴포지션인지 물어보십시오. public/ 아래의 모든 에셋을 찾으십시오.
2. 화면에 표시되는 요소 목록 작성 및 매핑. references/mapping.md에는 Remotion의 구성 요소에서 film.json으로의 매핑 테이블이 있습니다. 지금 읽으십시오. 각 요소를 세 그룹 중 하나로 분류하십시오:
- 직접 매핑: 전체 화면 스크린샷, 카메라 움직임, 커서, 링, 캡션, 타이틀 카드, 페이드.
- 근사: 기타 이징, 기타 전환, 설치되지 않은 웹 폰트, 정교한 캡션 스타일링.
- 변환 불가: 차트, 파티클, 3D, Lottie, 문자 단위 애니메이션.
세 번째 그룹에 중요한 요소가 있다면, 빌드 전에 사용자에게 알리고 references/mapping.md의 선택지를 제시하십시오. 비디오의 대부분이 해당 그룹에 속한다면, 이 접근 방식은 적합하지 않으므로, 형편없는 복사본을 만드는 대신 그렇게 말하십시오.
3. 참조 비디오 확보. out/에서 이 컴포지션의 렌더링을 찾으십시오. 컴포지션의 소스 파일보다 최신이고 durationInFrames 프레임 수를 가진 것이 좋습니다(ffprobe로 확인). 작은 웹 인코딩도 괜찮으며 점수가 약간 낮아질 뿐입니다. 그렇지 않으면 컴포지션 자체 설정으로 렌더링하십시오:
npx remotion render <composition id> out/<composition id>.mp4
4. 어댑터 작성. <project>/resolve/<composition id>/export-film.mjs에 배치하고, 그 옆에 film.json을 쓰도록 하십시오. 이 폴더는 빌드를 위한 필름 폴더입니다. 사용자가 이러한 파일을 저장소에 유지하려는 경우에만 build/를 프로젝트의 무시 목록에 추가하고, 요청하지 않는 한 커밋하지 마십시오.
어댑터는 비디오의 실제 데이터를 가져와야 하므로, 복사본이나 타이밍이 변경될 때 어댑터를 다시 실행하면 변경 사항이 반영됩니다. references/mapping.md에는 골격과 산술이 포함되어 있습니다. JSX 내부에 얽혀 있는 경우에만 값을 수동으로 복사하고, 사용자에게 어떤 값인지 알리십시오. 이후 코드 변경을 따르지 않기 때문입니다.
코드의 색상, 글꼴 및 로고에서 브랜드를 설정하십시오. 비디오가 로드하는 모든 글꼴을 나열하고 각각 fonts_available로 확인하십시오. 설치되지 않은 글꼴이 있으면 설치할지 아니면 유사한 설치된 글꼴을 사용할지 물어보십시오. 설치된 동일한 이름의 글꼴이라도 웹 글꼴과 다른 컷(폭이 약간 다름)일 수 있습니다.
5. 빌드. resolve-screen-tutorial의 SKILL.md 빌드 섹션을 1단계부터 4단계까지 따르되, WORK를 필름 폴더로 설정하십시오. 4단계의 review_frames는 렌더링 전 빠른 확인입니다. 그런 다음 비교에 전체 비디오가 필요하므로 5단계에 설명된 대로 렌더링하십시오. review.py 호출은 건너뛰십시오. 6단계에서 참조 비디오로 이 작업을 수행하기 때문입니다. 비교가 끝나면 렌더링 작업을 제거하십시오. 해당 단계의 결정 사항도 여기에 적용됩니다: 사용자에게 이 프로젝트가 어디에 배치되는지 알리고, 직접 빌드하지 않은 타임라인을 절대 교체하지 마십시오. fps를 프로젝트의 프레임 속도로 설정하십시오. film.json의 시간은 초 단위이므로 컴포지션의 것과 다르더라도 타이밍이 유지됩니다.
6. Remotion 렌더링과 비교. 참조 비디오를 review.py에 전달하십시오:
python "<resolve-screen-tutorial>/scripts/review.py" "<WORK>" "<WORK>/build/render/review.mp4" "<reference video>"
이는 필름과 각 장면에 대한 SSIM(1에 가까울수록 동일함을 나타내는 유사도 점수)을 출력하고, 각 장면이 가장 약한 프레임을 표시합니다. build/review/에 나란히 보기 시트(Resolve가 왼쪽)와 ssim-by-half-second.txt(장면의 최저 프레임이 숨기는 문제를 보여줌)를 작성합니다. 시트를 여십시오. 자세히 보려면 --at <seconds>를 추가하여 특정 순간을 전체 크기로 확인할 수 있습니다(Resolve가 위쪽).
가이드로서, 스크린샷 기반 필름을 충실히 재구축한 경우 전체 점수는 0.96~0.97입니다. 주변 장면보다 현저히 낮은 장면은 실제 차이가 있으므로, 해당 장면의 최저 프레임을 확인하십시오:
| 보이는 현상 | 일반적인 원인 |
|---|---|
| 모든 것이 오프셋되거나 잘못된 크기 | 어댑터의 스케일 또는 변환 원점 |
| 전체 필름 시간이 이동됨 | 어댑터의 장면 시작 또는 전환 오버랩 |
| 카메라 정지 시 정상, 움직임 시 잘못됨 | 이징 |
| 링이 약간 너무 큼 | CSS 테두리가 상자 내부에 위치함, film-format.md 참조 |
| 텍스트만 다름 | 글꼴: 대체되었거나, 동일한 이름의 다른 컷 |
일부 차이는 예상되며 수정할 필요가 없습니다:
- 하이라이트가 늦게 나타남(카메라가 멈출 때까지 기다리기 때문).
- 링의 글로우가 링 내부를 물들임(Fusion 블러가 양방향으로 퍼지기 때문).
- 캡션, 커서 및 링이 디졸브 중간에 종료되어 나가는 장면에 머물지 않음.
- 첫 번째 이후의 카드가 디졸브의 절반 늦게 애니메이션됨.
어댑터를 수정하고, 다시 실행한 후 plan.py와 build_film을 다시 실행하십시오. 남은 차이점을 설명할 수 있을 때까지 반복하십시오.
7. 보고. resolve-screen-tutorial의 마무리 섹션에 있는 모든 내용에 다음을 추가하십시오:
- SSIM 점수
- 6단계의 차이점 목록(각각 원인 포함)
- "변환 불가" 그룹의 항목과 그에 대한 조치
- 어댑터 위치, 다시 실행하는 방법, 재구축 시 타임라인이 교체되어 편집 내용이 손실된다는 점