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

remotion-saas

Remotion으로 애플리케이션 구축하기

remotion-saas란 무엇인가요?

이 스킬은 Remotion을 사용하여 SaaS 애플리케이션을 빌드하는 방법에 대한 포괄적인 가이드를 제공합니다. Remotion은 React를 기반으로 비디오를 프로그래밍 방식으로 생성하는 라이브러리로, 간단한 양식으로 연결된 렌더링부터 복잡한 비디오 편집기까지 다양한 애플리케이션을 구현할 수 있습니다. 이 스킬은 템플릿 선택 안내, `<Player>` 컴포넌트를 사용한 Remotion 미리보기 임베딩, Lambda, Vercel, Node.js, Cloudflare 등 다양한 서버-사이드 및 클라이언트-사이드 렌더링 옵션을 다룹니다. 또한 Vue, Angular, Svelte와 같은 다른 프레임워크와의 통합 방법까지 안내하여, Remotion을 활용한 비디오 생성 앱 개발을 지원합니다.

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

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

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

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

문서

Remotion을 사용하여 애플리케이션을 구축할 수 있습니다. 간단한 양식을 렌더링에 연결하거나 복잡한 비디오 편집기를 만드는 것이 가능합니다.

템플릿 또는 프레임워크 선택하기

SaaS를 위한 여러 템플릿이 준비되어 있으며, 이를 복제하거나 참조 자료로 사용할 수 있습니다. 템플릿이나 프레임워크 선택에 도움이 필요하면 프레임워크 선택하기를 참조하세요.

<Player>

이 컴포넌트는 Remotion 미리보기를 React 앱에 임베드할 수 있게 해줍니다. Player에 대한 자세한 내용은 Player를 참조하세요.

렌더링

클라이언트-사이드 및 서버-사이드 렌더링 옵션을 사용할 수 있습니다. 선택 방법과 Lambda, Vercel, Node.js, Cloudflare 옵션에 대한 조언은 렌더링을 참조하세요.

Vue와 함께 사용하기

Remotion을 Vue와 함께 사용하는 방법은 https://www.remotion.dev/docs/vue.md 를 참조하세요.

Angular

Remotion을 Angular와 함께 사용하는 방법은 https://www.remotion.dev/docs/angular.md 를 참조하세요.

Svelte

Remotion을 Svelte와 함께 사용하는 방법은 https://www.remotion.dev/docs/svelte.md 를 참조하세요.

Individual skills in this repo

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

관련 스킬