Official비디오 & 애니메이션github.com

remotion-best-practices

모든 Remotion 스킬의 라우터 역할을 하며, 사용자 요청에 따라 적절한 Remotion 참조 문서를 로드합니다.

remotion-best-practices란 무엇인가요?

이 스킬은 Remotion 에이전트의 중앙 허브 역할을 합니다. 사용자가 비디오 생성, 프로젝트 설정, React 마크업, 맵, 멀티미디어 처리, 상호작용성 향상, 렌더링, 캡션, SaaS 애플리케이션 개발 등 다양한 작업을 요청할 때 해당하는 구체적인 참조 문서를 자동으로 로드합니다. Cursor, 일반 에이전트 클라이언트 등 다양한 플랫폼에서 동작하며, 사용자 변경 사항을 의도치 않게 덮어쓰지 않도록 주의하고, Studio 미리보기 사용을 권장하는 등 Remotion 개발의 모범 사례를 지침으로 제공합니다. 이 스킬은 Remotion 문서 조회, 업그레이드 등에도 연결되어 있어 일관된 개발 경험을 보장합니다.

지원 대상~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/remotion-dev/skills/tree/main/skills/remotion-best-practices

Installed? Explore more 비디오 & 애니메이션 skills: steipete/video-frames, steipete/summarize, openclaw/openclaw · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

사용자 변경 사항 보존

사용자가 대화 외부에서 코드를 편집할 수 있습니다.

그 사이에 놀라운 변경 사항이 감지되면 덮어쓰지 말고, 의도적인 것으로 간주하거나 확인을 요청하세요.

비디오 생성

사용자가 새 비디오나 컴포지션을 만들거나, 생성하거나, 제작하도록 요청하면, Remotion 프로젝트가 이미 존재하는지 여부와 관계없이 새 Remotion 비디오 생성을 로드하세요.

새 프로젝트 설정

현재 Remotion 프로젝트가 존재하지 않으면, 새 Remotion 프로젝트 생성을 로드하세요.

React 마크업 모범 사례

Remotion React 마크업을 작성 중이라면, Remotion 마크업 모범 사례를 로드하세요.

맵

정적 맵, 애니메이션 경로 및 마커, 지리적 설명, Mapbox, MapLibre, MapTiler, GeoJSON 또는 3D 지리적 비행 시에는 Remotion 맵을 로드하세요.

멀티미디어

브라우저에서 멀티미디어 작업(예: 비디오 트리밍, 자르기, 메타데이터 가져오기)을 수행하려면 Remotion 멀티미디어를 로드하세요.

상호작용성 향상

Remotion 마크업을 잘 구조화하면 사용자가 스튜디오에서 대화형으로 항목을 변경하고 코드에 다시 쓸 수 있습니다. 관련된 경우: 상호작용성 모범 사례

미리보기 열기

사용자가 비디오를 "만들거나", "생성"하라고 요청한 경우 등에 해당합니다.

명시적으로 요청하지 않는 한 기본적으로 비디오를 렌더링하지 마세요. 대신 대화형 미리보기를 보기를 원할 것입니다.

프로젝트가 실행될 수 있게 되면, 컴포지션을 빌드하거나 편집하기 전에 Studio를 시작하고 브라우저에서 미리보기를 여세요. 작업 중에는 계속 열어두어 사용자가 진행 상황을 보고 방향을 제시할 수 있도록 하세요.

Cursor를 사용하는 경우

--no-open 없이 Studio를 실행하여 브라우저가 자동으로 열리도록 하세요:

npx remotion studio

인앱 브라우저가 있는 다른 에이전트 클라이언트를 사용하는 경우

위 명령을 사용하여 Studio가 브라우저를 열도록 하거나, 다음을 실행할 수 있습니다:

npx remotion studio --no-open

이렇게 하면 장기 실행 프로세스가 시작되고 미리보기 서버 URL이 출력됩니다.

서버가 이미 시작된 경우 URL이 출력됩니다. --no-open을 사용하는 경우, 정확히 출력된 URL을 인앱 브라우저에서 열고 Studio가 로드되는지 확인하세요. 컴포지션이 존재하면 비디오 미리보기가 로드되는지 확인하세요. 인앱 브라우저에서 열 수 없는 경우 --no-open 없이 Studio를 실행하세요.

/[composition-id]로 이동하여 특정 컴포지션을 방문할 수 있습니다. 예: http://localhost:3000/MapAnimation

:::note Studio는 WebMCP 도구를 지원합니다. :::

인앱 브라우저가 없는 경우

이 명령은 브라우저에서 Studio를 열거나 이미 열려 있는 경우 포커스를 다시 가져옵니다.

npx remotion studio

추가 옵션

Remotion Studio에서 프로젝트를 시작하거나, 정확한 로컬 URL을 열거나, Studio CLI 플래그를 구성하려면 Remotion Studio를 로드하세요.

비디오 렌더링

사용자가 명시적으로 요청한 경우에만 렌더링하세요.

예: "비디오 렌더링", "내보내기", "MP4 파일 주세요".

미리보기에는 더 직관적인 렌더링 인터페이스도 있으므로, 렌더링 시 명령줄 대신 미리보기를 사용하는 것을 고려하세요.

npx remotion render

더 많은 옵션은 렌더링을 참조하세요.

단순한 npx remotion render를 넘어서는 고급 렌더링에 대해서는 렌더링 모범 사례를 참조하세요.

캡션

캡션 작업 시 Remotion 캡션을 로드하세요.

SaaS, 자동화 또는 애플리케이션 생성

Remotion SaaS 스킬을 사용하여 <Player>, Lambda, Vercel, Cloudflare, Express.js를 통한 렌더링, 클라이언트 측 렌더링, 또는 적절한 SaaS 템플릿 찾기 등 Remotion 기반 SaaS 앱에 대한 지식을 얻으세요.

Remotion API 및 문서 조회

최신 Remotion 문서를 찾아 읽으려면 Remotion 문서를 로드하세요.

업그레이드

Remotion, 관련 패키지, 호환 가능한 Mediabunny 패키지, 설치된 Remotion 에이전트 스킬을 업그레이드하려면 Remotion 업그레이드를 로드하세요.

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

관련 스킬