새로운 Remotion 프로젝트와 컴포지션을 만들기 위한 지침입니다. 이 작업이 다음 작업이 아니라면 Remotion 모범 사례를 참조하세요.
프로젝트 스캐폴딩
프로젝트가 이미 존재한다면 이 단계를 건너뜁니다. Node.js와 Git이 설치되어 있고 현재 폴더가 새 프로젝트를 시작하기에 적합한지 확인합니다.
숨김 파일을 포함하여 현재 폴더를 검사한 후 스캐폴딩할 위치를 결정합니다.
빈 폴더
폴더가 비어 있거나 .DS_Store와 같은 폐기 가능한 운영체제 메타데이터만 포함된 경우, 현재 폴더에 직접 프로젝트를 생성합니다.
create-video는 비어 있지 않은 폴더를 거부하므로 먼저 해당 메타데이터 파일만 제거합니다.
모든 숨김 파일을 폐기 가능한 것으로 취급하지 마세요: .env 파일이나 .git 디렉터리 같은 것은 의미 있는 내용물입니다.
기존 폴더에 스캐폴딩:
npx create-video@latest --yes --blank --no-tailwind .
npm i
비어 있지 않은 폴더
현재 폴더에 의미 있는 내용물이 있고 프로젝트가 아직 존재하지 않는다면, 새 하위 폴더에 스캐폴딩합니다.
my-video를 적절한 프로젝트 이름으로 바꾸세요.
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i
비디오 빌드 전 미리보기 열기
프로젝트가 실행 가능해지면, 컴포지션을 작성하거나 변경하기 전에 브라우저에서 Remotion Studio를 엽니다. 새 프로젝트의 경우 스캐폴딩과 의존성 설치 직후에 바로 수행합니다. 기존 프로젝트의 경우 비디오를 편집하기 전에 수행합니다. 작업 중에는 Studio를 계속 실행 상태로 두어 사용자가 변경 사항을 실시간으로 확인하고 결과를 조정할 수 있도록 합니다.
비디오 디자인
스캐폴드를 유지하고 React 마크업을 추가합니다. 비디오 우선 레이아웃과 텍스트 크기 조정 지침을 위해 Remotion React 마크업 모범 사례와 비디오 레이아웃 규칙을 따르세요.
<Composition> 또는 <Still> 요소를 등록하는 루트를 작성하기 전에
Compositions and stills를 참조하세요.
클립 타임라인인가요?
비디오가 여러 비디오 또는 오디오 클립을 타임라인에 배열한다면, 타임라인을 작성하기 전에 비디오 편집을 참조하세요. 독립적으로 편집되어야 하는 각 클립에 대해 자체적인 JSX 노드를 작성하세요.
다중 장면 비디오인가요?
여러 연속 장면이 있는 비디오라면, 다중 장면 비디오의 지침을 따르세요.
상호작용성 모범 사례
Remotion 상호작용성 모범 사례에 따라 React 마크업을 구성하면, 사용자가 Studio에서 편집하여 코드에 다시 쓸 수 있습니다.
TailwindCSS
Tailwind가 요청된 경우, Remotion에서 TailwindCSS를 사용하는 방법은 tailwind.md를 참조하세요.
후속 작업
비디오 생성 프로세스가 완료되었습니다. 후속 프롬프트는 Remotion 모범 사례를 사용하세요.