83.3K+다운로드
사용 가이드로 건너뛰기
remotion작성자 Google Labs

Remotion 스킬.

모션 및 비디오를 위한 Claude Code 및 Codex 스킬: Stitch 프로젝트에서 Remotion 전환 효과와 줌을 적용한 워크스루 비디오를 생성합니다.

  • Motion & Video
  • Video
OpenDesign 다운로드사용 가이드 보기
google-labs-code/stitch-skills · plugins/stitch-build/skills/remotion/SKILL.mdSKILL.md
--- name: remotion description: Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays --- ## Prerequisites ## Retrieval and Networking ## Video Composition Strategy ## Execution Steps ## Advanced Features ## File Structure
2026-09-14 업스트림 파일에서 읽은 전면 메타데이터 및 섹션 제목 · 전체 12,764자

01 기능

remotion 스킬이 Claude Code와 Codex에서 수행하는 작업

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

기존 Stitch 프로젝트를 워크스루 비디오로 전환합니다. 에이전트는 Stitch 프로젝트와 화면 목록을 가져오고, 각 화면의 screenshot.downloadUrl을 assets/screens/에 다운로드하고, 너비, 높이, 제목, 설명을 screens.json 매니페스트에 기록한 다음, 페이드, 슬라이드, 스프링 기반 줌 전환과 텍스트 오버레이를 사용해 ScreenSlide.tsx와 WalkthroughComposition.tsx로부터 Remotion 컴포지션을 빌드합니다.

이 스킬은 Stitch에서 이미 화면을 디자인했고 Node.js와 React에 익숙한 디자이너와 개발자를 대상으로 합니다. Remotion이 React 컴포넌트를 렌더링하기 때문입니다. 프레임은 기본적으로 30fps, 화면은 3-5초이며, 결과물은 MP4로 렌더링하기 전에 Remotion Studio에서 미리 봅니다.

산출물

  • 프로젝트 이름, 화면 id, 제목, 설명, 이미지 경로, 크기, 화면별 재생 시간을 담은 screens.json 매니페스트
  • 워크스루를 위해 생성된 Remotion 컴포넌트 파일
  • 업데이트된 Remotion 프로젝트 구성
예시 프롬프트 보기 ↗

작동 방식

  1. 01
    MCP 서버 찾기

    list_tools를 실행하고 Stitch와 Remotion 서버 프리픽스를 확인하여 이후 호출을 올바르게 지정할 수 있도록 합니다.

  2. 02
    Stitch에서 화면 가져오기

    프로젝트를 찾고, 화면 목록을 나열한 다음, 스크린샷 URL, 크기, 설명을 얻기 위해 각 화면의 메타데이터를 가져옵니다.

  3. 03
    스크린샷 준비하기

    web_fetch 또는 curl로 각 스크린샷을 워크스루가 진행되어야 할 순서대로 스테이징 디렉터리에 다운로드합니다.

  4. 04
    Remotion 프로젝트 스캐폴딩

    기존 Remotion 프로젝트가 있으면 재사용하고, 없으면 video/ 디렉터리에 빈 TypeScript 프로젝트를 생성합니다.

  5. 05
    컴포지션 빌드하기

    화면별 애니메이션을 위한 ScreenSlide.tsx, 시퀀스와 전환을 위한 WalkthroughComposition.tsx, fps와 크기를 위한 config.ts를 작성합니다.

  6. 06
    미리 보고 렌더링하기

    Remotion Studio에서 타이밍과 스프링 값을 반복해서 조정한 다음, CLI 또는 Remotion 렌더 도구를 통해 최종 파일을 렌더링합니다.

02 적합성 확인

remotion Skill 사용 시점

Claude Code 또는 Codex에서 이런 종류의 모션 및 비디오 작업에 remotion 스킬을 사용합니다. 적합성과 제한사항은 스킬 자체 파일에서 가져왔습니다.

적합한 경우

  • 이미 워크스루할 디자인된 화면이 포함된 Stitch 프로젝트가 있습니다
  • 애니메이션 포인터와 핫스팟 링으로 특정 UI 요소를 강조하고 싶습니다
  • 단순한 슬라이드 쇼가 아니라 단계별 사용자 여정 비디오를 제작하는 경우
  • Remotion의 비디오 기능에 이미 익숙하며 그 관용적 방식을 존중받고자 하는 경우

한계 인지하기

  • 필수 전제 조건인 Stitch MCP Server에 접근할 수 없는 경우
  • Remotion이 React 컴포넌트를 조합하는 방식이므로, 팀 내에 React를 아는 사람이 없는 경우
  • 스크린샷을 전체 해상도로 가져올 수 없어, 파일에서 이를 결과물이 흐릿해지는 원인으로 지목하는 경우

제공할 사항

  • Stitch 프로젝트 식별자이미 알고 있는 프로젝트 ID이거나, ID가 제공되지 않을 때 에이전트가 조회할 수 있는 제목입니다.
  • 비디오에 포함할 화면다운로드 전에 워크스루에 필요한 모든 화면을 파악할 수 있도록 프로젝트의 화면 목록을 검토합니다.
  • 화면 크기구성이 스크린샷을 올바르게 확장할 수 있도록 각 화면의 너비와 높이가 필요합니다.
  • 제목과 설명화면 제목과 설명은 각 프레임 위에 표시되는 맥락 텍스트가 됩니다.
  • 의도된 워크스루 순서산출물은 Stitch가 반환하는 순서가 아니라, 시청자가 접해야 할 순서대로 정리됩니다.

03 스킬 내부

remotion 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

  1. 화면은 기본적으로 3~5초

    각 화면은 설정 가능한 시간 동안 유지되며, 기본값은 화면당 3~5초로 명시되어 있습니다.

  2. 30 FPS로 구성

    config.ts에서 프레임 속도를 설정하며, 기본값은 30fps입니다.

  3. 모션이 끊길 때는 60fps로 전환

    애니메이션이 끊기게 보이면 디자인을 바꾸는 대신 프레임 속도를 60fps로 높이고 스프링 감쇠를 조정합니다.

  4. Spring()으로 확대

    확대 효과는 강조하려는 주요 UI 요소에 적용된 스프링 애니메이션으로 구동되어야 합니다.

  5. 원본 종횡비 유지

    실제 Stitch 화면 크기를 사용하거나 비례적으로 축소·확대하며, 레이아웃을 절대 왜곡하지 않습니다.

  6. 매니페스트로 빌드 구동

    화면 데이터는 매니페스트 파일에 저장되므로, 컴포넌트 코드를 건드리지 않고도 순서, 제목, 지속 시간을 업데이트할 수 있습니다.

  7. 타이밍을 일정하게 유지

    워크스루 전체에서 화면 표시 시간은 특정 화면을 강조하는 경우가 아니라면 일관되게 유지됩니다.

  8. 페이드로 시작하기

    기본적인 페이드 전환으로 시작하고, 단순한 컷이 제대로 작동한 뒤에만 복잡한 애니메이션을 추가하십시오.

04 활용하기

Claude Code 또는 Codex에 remotion 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용 중인 에이전트에 remotion 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion

plugins/stitch-build/skills/remotion/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소에서 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 번째 모션 및 비디오 작업 제공

이 프롬프트를 자신의 콘텐츠와 제약 조건으로 수정한 다음 Claude Code 또는 Codex에서 실행하십시오.

Example prompt
Look up the screens in my Stitch project "Calculator App" and build a remotion video that shows a walkthrough of the screens.

출처: SKILL.md 예시(원문 그대로).

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

  • 렌더링을 확정하기 전에 Remotion Studio에서 구성을 미리 확인하십시오
  • 제공된 완료 체크리스트를 차례로 진행하십시오
  • 각 화면에서 텍스트 오버레이가 올바른 시점에 표시되는지 확인하십시오
  • 화면 크기가 구성 크기와 일치하는지 확인하고, 실제 화면 크기에 맞춰 텍스트 위치를 재조정하십시오
  • 첫 프레임뿐 아니라 전체 구간에서 오버레이 텍스트가 계속 읽기 쉬운지 확인하십시오
  • 모션이 끊기는 것처럼 보인다면, 스프링 감쇠 값을 조정한 60fps 경로를 테스트해 보십시오

OpenDesign에서는 remotion이 기본 제공됩니다: Plugins → Skills에서 상단 바에서 선택하십시오.

OpenDesign 다운로드빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills 브랜치 main
스킬 파일
plugins/stitch-build/skills/remotion/SKILL.md 검증 시 기록된 콘텐츠 체크섬; 커밋 0337446
License
Apache-2.0 LICENSE에서 확인.
리포지토리 스타
8,304 이 카탈로그에 12개의 스킬을 포함하는 google-labs-code/stitch-skills 저장소 전체에 대해 2026-09-14에 촬영한 GitHub 스냅샷입니다. remotion에 대한 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨
2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 별 개수가 확인되었습니다. OpenDesign 메인에 번들로 포함됨(2026-08-28 확인됨); 이 페이지에 실시간 실행이 기록되지 않았습니다.

SKILL.md 내부

  1. 개요Stitch와 Remotion을 결합한 워크스루 워크플로가 전체적으로 무엇을 만들어내는지
  2. 필수 조건필요한 MCP 서버, Node.js, npm, 그리고 화면이 있는 Stitch 프로젝트
  3. 조회 및 네트워킹MCP 프리픽스 탐색, 프로젝트와 화면 조회, 에셋 다운로드
  4. 영상 구성 전략ScreenSlide, WalkthroughComposition, 설정의 구조, 그리고 전환과 오버레이
  5. 실행 단계에셋 수집, 매니페스트 생성, 컴포넌트 생성, 미리보기, 렌더링
  6. 고급 기능인터랙티브 핫스팟, 보이스오버 통합, Stitch HTML에서의 자동 텍스트 추출
  7. 파일 구조영상 프로젝트와 매니페스트의 예상 디렉터리 구조
  8. Remotion 스킬과의 통합애니메이션과 성능 관련 지침을 위한 Remotion 자체 에이전트 스킬 설치
  9. 일반적인 패턴세 가지 방식: 단순 슬라이드 쇼, 기능 강조, 사용자 흐름
  10. 문제 해결흐릿한 스크린샷, 어긋난 텍스트, 끊기는 애니메이션, 빌드 실패, 타이밍 문제 해결
  11. 모범 사례화면 비율, 일관된 타이밍, 읽기 쉬운 텍스트, 부드러운 전환, 미리보기, 에셋 최적화
  12. 성공을 위한 팁단순하게 시작하기, Remotion 패턴 재사용, 매니페스트 활용, 자주 미리보기, 접근성, 플랫폼별 크기 조정
스킬 자체 설명
"부드러운 전환, 확대/축소, 텍스트 오버레이를 사용하여 Remotion으로 Stitch 프로젝트의 안내 비디오 생성"

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 12,764자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

remotion 스킬에 대한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

이 기능을 실행하려면 무엇이 설치되어 있어야 하나요?

Stitch MCP Server에 대한 액세스와 Remotion MCP Server 또는 Remotion CLI 중 하나, 그리고 Node.js와 npm, 이미 디자인된 화면이 있는 Stitch 프로젝트가 필요합니다. Remotion과 React 컴포넌트에 대한 이해가 권장되지만 필수는 아닙니다.

Remotion MCP server를 반드시 사용해야 하나요, 아니면 CLI만으로 충분한가요?

CLI만으로 충분합니다. Remotion Studio에서 미리 본 후 npx remotion render WalkthroughComposition output.mp4로 렌더링할 수 있으며, 해당 서버가 사용 가능하다면 Remotion render 도구를 composition 세부 정보와 함께 호출할 수도 있습니다.

각 화면은 얼마나 오래 표시되나요?

기본적으로 화면당 3~5초이며, 매니페스트에 화면별 지속 시간으로 저장되어 개별 화면을 조정할 수 있습니다. 지속 시간은 매니페스트에서 설정되며 Remotion Studio에서 미리 볼 수 있습니다.

Remotion

실제 모션 및 비디오 작업에서 remotion 실행.

remotion 스킬은 OpenDesign에 포함되어 있습니다. 앱을 다운로드하고, Plugins → Skills에서 스킬을 선택한 다음, 위 프롬프트를 붙여넣고 결과 전에 계획을 확인합니다.

OpenDesign 다운로드모든 스킬 보기
터미널
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion