앱이나 서비스를 알리는 짧은 영상을 만들고 싶다면 Remotion 공식 스킬을 살펴볼 만합니다. 클로드 코드·코덱스 같은 AI 도구가 영상 코드를 작성할 때 참고하는 지침입니다. 글자와 제품 화면을 움직이고, 음악에 맞춰 장면을 전환하는 작업에 쓸 수 있습니다.

공식 완성 예제 바로 보기 — 4분 45초부터

위 영상은 Remotion 공식 채널의 시연입니다. CD 판매점을 소개하는 영상을 만들면서 에이전트 스킬을 추가하고, 요청문으로 장면을 구성합니다. 후반에는 음악에 반응하는 움직임도 붙입니다. 완성본을 먼저 보고, 만드는 과정이 궁금하면 2분 6초부터 이어 보면 됩니다. 영상은 2026년 2월 4일 공개됐으며 OpenCode로 진행합니다. 현재 공식 스킬은 클로드 코드와 코덱스도 지원합니다. 지원 도구·설치 안내

제품 소개에 어떻게 쓸 수 있나요?

예제에서는 CD 카드와 글자의 위치·등장 순서를 조정하고, 음악과 화면의 움직임을 맞춥니다. 이런 방식을 내 앱에 적용하면 첫 장면에서 앱을 보여 주고, 핵심 기능 두 가지를 짚은 뒤 이름과 이용 경로로 마무리할 수 있습니다. 기능을 바꿀 때도 해당 장면의 문구나 화면을 수정하는 식으로 접근합니다.

앱 소개 사례가 더 보고 싶다면 @Shpigford의 Presscut 제품 영상도 참고할 만합니다. Remotion 공식 갤러리에 영상과 제작 요청문이 함께 올라와 있습니다. 제품 화면을 어떤 순서로 보여 줄지 살펴보기 좋습니다.

이 소재는 Dumble이 11월 10일 X에 올린 스킬 모음에서 찾았습니다. 11월 12일 확인 당시 조회 108,599회, 북마크 2,634개가 보였습니다. 여러 도구 가운데 이번 글에서는 Remotion을 골라 공식 예제와 설치법을 정리했습니다.

설치는 이렇게 시작합니다

Node.js와 클로드 코드 또는 코덱스가 준비된 상태에서, 별도의 작업 폴더에 영상 프로젝트를 만듭니다. 아래 명령은 Remotion 공식 시작 안내를 기준으로 확인했습니다.

npx create-video@latest --yes --blank my-video
cd my-video
npx remotion skills add
npm run dev

설치 화면에서 사용하는 에이전트를 선택하고, npm run dev가 알려 주는 미리보기 주소를 엽니다. 클로드 코드나 코덱스에서도 같은 my-video 폴더를 엽니다. 사용할 앱 화면·로고와 사용 허락된 음악·효과음을 public/materials 폴더에 모아 두면 요청할 때 편합니다.

내 앱에 맞춰 요청해 봅니다

공식 예제를 참고하되, 내 제품의 화면과 기능을 넣어 요청합니다.

remotion-best-practices 스킬로 내 앱의 20초 홍보 영상을 만들어 주세요.
public/materials 안의 앱 화면·로고·음악·효과음을 사용합니다.
첫 장면에서 앱을 보여 주고 핵심 기능 2개를 소개한 뒤
앱 이름과 이용 경로로 끝내 주세요.
음악에 맞춰 장면을 전환하고 효과음은 동작에 맞춰 넣어 주세요.
먼저 3장면 구성을 정리하고 미리보기를 열어 주세요.

미리보기를 확인한 뒤에는 고칠 장면을 짚어 줍니다.

첫 장면에서 기능이 바로 보이도록 화면을 확대해 주세요.
작은 설명 글자는 줄이고, 음악보다 효과음이 튀지 않게 맞춰 주세요.
전체 길이는 유지하고 MP4로 내보내 주세요.

비용도 확인합니다

2026년 11월 12일 Remotion 공식 요금 안내 기준으로 개인과 3인 이하 회사는 무료 라이선스 적용 대상입니다. 그보다 큰 조직은 회사 라이선스 조건을 확인해야 합니다. 사용하는 AI 도구의 구독료와 외부 음원·이미지 비용은 별도입니다.

예제 영상은 각 제작자의 원본 페이지로 연결했습니다. 공식 튜토리얼의 제작·게시자는 Remotion이며, Presscut 예제는 공식 갤러리에 @Shpigford의 작업으로 소개되어 있습니다.