johnalbertini14-glitch Remotion Video Production (MiniPC)
MiniPC의 Remotion으로 프로그래밍 방식의 영상 제작.
환경
- 프로젝트:
$HOME/remotion-videos(MiniPC) - 실행:
npx remotion render <CompositionId> out/video.mp4 - ffmpeg: 설치됨
- 전송: MiniPC HTTP 서버(9877) + curl로 맥 스튜디오 전송
핵심 개념
Composition = 영상의 단위
<Composition
id="MyVideo"
component={MyComponent}
durationInFrames={150} // 30fps × 5초 = 150프레임
fps={30}
width={1920}
height={1080}
/>
시간 제어
const frame = useCurrentFrame(); // 현재 프레임
const { fps, durationInFrames } = useVideoConfig();
// 보간 (interpolate)
const opacity = interpolate(frame, [0, 30], [0, 1], {
extrapolateRight: 'clamp'
});
// 스프링 애니메이션
const scale = spring({ frame, fps, config: { damping: 200 } });
시퀀싱
<Sequence from={0} durationInFrames={60}>
<IntroScene />
</Sequence>
<Sequence from={60} durationInFrames={90}>
<MainContent />
</Sequence>
주요 패턴
에셋 사용
- 이미지:
<Img src={staticFile('logo.png')} /> - 비디오:
<OffthreadVideo src={staticFile('clip.mp4')} /> - 오디오:
<Audio src={staticFile('bgm.mp3')} volume={0.5} /> - 폰트: Google Fonts —
loadFont("Noto Sans KR") - 로컬 폰트: public/ 폴더에 배치
자막/캡션
@remotion/captions패키지 사용- JSON/SRT 자막 파일 로드 → 타임스탬프 동기화
트랜지션
@remotion/transitions— slide, fade, wipe 등<TransitionSeries>컴포넌트로 장면 전환
Tailwind CSS
@remotion/tailwind설정 후 className 사용 가능
3D 콘텐츠
@react-three/fiber+@remotion/three- Three.js 씬을 Remotion 타임라인에 동기화
렌더링
# 기본 렌더링
cd $HOME/remotion-videos
npx remotion render MyVideo out/video.mp4
# 고품질
npx remotion render MyVideo out/video.mp4 --codec h264 --crf 18
# 투명 배경 (WebM)
npx remotion render MyVideo out/video.webm --codec vp8
# GIF
npx remotion render MyVideo out/animation.gif --every-nth-frame 2
제작 워크플로우
- 기획: 장면 구성, 길이, 해상도 결정
- 에셋 준비: 이미지, 음악, 폰트 → public/ 폴더
- 컴포넌트 코딩: React로 각 장면 제작
- 프리뷰:
npx remotion studio(MiniPC 브라우저) - 렌더링: headless 렌더링 → MP4/WebM
- 전송: HTTP 서버로 맥 스튜디오에 전달
⚠️ 주의사항
- 서브에이전트 위임 — 영상 렌더링은 시간 소모적
- 30fps 기본 — 필요 시 60fps로 변경
- 메모리 주의 — 고해상도 + 긴 영상은 MiniPC RAM 한계 주의
- GitHub push 불가 (MiniPC) — 맥 스튜디오에서 push