사용 시점
Remotion 코드를 다룰 때 도메인별 지식을 얻기 위해 이 스킬을 사용하세요.
새 프로젝트 설정
빈 폴더나 기존 Remotion 프로젝트가 없는 작업 공간에서 다음과 같이 새 프로젝트를 스캐폴딩하세요:
npx create-video@latest --yes --blank --no-tailwind my-video
my-video를 적절한 프로젝트 이름으로 바꾸세요.
미리보기 시작
비디오를 미리보기 위해 Remotion Studio를 시작하세요:
npx remotion studio
선택 사항: 단일 프레임 렌더링 확인
CLI로 단일 프레임을 렌더링하여 레이아웃, 색상 또는 타이밍을 확인할 수 있습니다. 사소한 편집, 순수 리팩터링, 또는 Studio나 이전 렌더링을 통해 이미 충분한 확신이 있는 경우에는 건너뛰세요.
npx remotion still [컴포지션-id] --scale=0.25 --frame=30
30fps에서 --frame=30은 1초 지점입니다. (--frame은 0부터 시작합니다.)
자막
자막이나 캡션을 다룰 때는 ./rules/subtitles.md 파일을 불러와 자세한 정보를 확인하세요.
FFmpeg 사용
비디오 트리밍이나 무음 감지와 같은 일부 비디오 작업에는 FFmpeg를 사용해야 합니다. ./rules/ffmpeg.md 파일을 불러와 자세한 정보를 확인하세요.
무음 감지
비디오 또는 오디오 파일에서 무음 구간을 감지하고 트리밍해야 할 때 ./rules/silence-detection.md 파일을 불러오세요.
오디오 시각화
오디오를 시각화(스펙트럼 막대, 파형, 베이스 반응 효과)해야 할 때 ./rules/audio-visualization.md 파일을 불러와 자세한 정보를 확인하세요.
사운드 효과
사운드 효과를 사용해야 할 때 ./rules/sfx.md 파일을 불러와 자세한 정보를 확인하세요.
사용 방법
개별 규칙 파일을 읽어 자세한 설명과 코드 예제를 확인하세요:
- rules/3d.md - Three.js 및 React Three Fiber를 사용한 Remotion의 3D 콘텐츠
- rules/animations.md - Remotion의 기본 애니메이션 기술
- rules/assets.md - 이미지, 비디오, 오디오 및 글꼴을 Remotion으로 가져오기
- rules/audio.md - Remotion에서 오디오 및 사운드 사용 - 가져오기, 트리밍, 볼륨, 속도, 피치
- rules/calculate-metadata.md - 컴포지션 지속 시간, 크기 및 props 동적 설정
- rules/can-decode.md - Mediabunny를 사용하여 브라우저에서 비디오를 디코딩할 수 있는지 확인
- rules/charts.md - Remotion의 차트 및 데이터 시각화 패턴 (막대, 파이, 선, 주식 차트)
- rules/compositions.md - 컴포지션, 스틸, 폴더, 기본 props 및 동적 메타데이터 정의
- rules/extract-frames.md - Mediabunny를 사용하여 특정 타임스탬프에서 비디오 프레임 추출
- rules/fonts.md - Remotion에서 Google Fonts 및 로컬 글꼴 로드
- rules/get-audio-duration.md - Mediabunny로 오디오 파일의 길이(초) 가져오기
- rules/get-video-dimensions.md - Mediabunny로 비디오 파일의 너비와 높이 가져오기
- rules/get-video-duration.md - Mediabunny로 비디오 파일의 길이(초) 가져오기
- rules/gifs.md - Remotion의 타임라인과 동기화된 GIF 표시
- rules/images.md - Img 컴포넌트를 사용하여 Remotion에 이미지 포함
- rules/light-leaks.md - @remotion/light-leaks를 사용한 라이트 릭 오버레이 효과
- rules/lottie.md - Remotion에 Lottie 애니메이션 포함
- rules/measuring-dom-nodes.md - Remotion에서 DOM 요소 크기 측정
- rules/measuring-text.md - 텍스트 크기 측정, 컨테이너에 텍스트 맞추기 및 오버플로 확인
- rules/sequencing.md - Remotion 시퀀싱 패턴 - 항목 지연, 트리밍, 기간 제한
- rules/tailwind.md - Remotion에서 TailwindCSS 사용
- rules/text-animations.md - Remotion의 타이포그래피 및 텍스트 애니메이션 패턴
- rules/timing.md - interpolate 및 Bézier 이징, 스프링을 사용한 타이밍
- rules/transitions.md - Remotion의 장면 전환 패턴
- rules/transparent-videos.md - 투명도가 있는 비디오 렌더링
- rules/trimming.md - Remotion 트리밍 패턴 - 애니메이션 시작 또는 끝 자르기
- rules/videos.md - Remotion에 비디오 포함 - 트리밍, 볼륨, 속도, 루핑, 피치
- rules/parameters.md - Zod 스키마를 추가하여 비디오를 매개변수화하기
- rules/maps.md - Mapbox를 사용하여 지도 추가 및 애니메이션 적용
- rules/silence-detection.md - FFmpeg loudnorm 및 silencedetect를 사용한 적응형 무음 감지
- rules/voiceover.md - ElevenLabs TTS를 사용하여 Remotion 컴포지션에 AI 생성 음성 해설 추가하기