YYL Remotion 비디오

YYL Remotion 비디오은(는) 무엇을 하나요?

기사, 스크립트, 노트 또는 명확한 개요를 Remotion 비디오 프로젝트로 변환합니다. 이 스킬은 비디오 중심입니다: 클릭 기반 웹 플레이어, 웹 presentation/, TTS 합성은 이 워크플로우 내에서 포함되지 않습니다.

핵심 출력

my-video/
├── article.md
├── script.md
├── outline.md
├── notes.md
└── remotion/
    ├── src/Root.tsx
    ├── src/Composition.tsx
    ├── src/chapters/<NN>-<id>/
    │   ├── <Chapter>.tsx
    │   ├── narrations.ts
    │   └── timing.ts
    ├── public/assets/
    ├── preview-stills/
    └── out/

번들된 스킬 리소스:

themes/       # 색상 / 타이포그래피 시스템
templates/    # 복사 가능한 Remotion TSX 시작점
references/   # 제작, 테마 및 템플릿 가이드

실행 강도

파일을 작성하기 전에 결정하세요:

강도	사용 시기	동작
빠름	<= 450 자 중국어, <= 60초, 테스트용, 드래프트 데모	1개 챕터, 적은 비트, 직접 구현
표준	1-4분, 일반 게시 가능한 설명 영상	스크립트 + 개요, 첫 번째 챕터 앵커 후 계속
엄격	> 4분, 브랜드/상업/고위험 콘텐츠	더 완전한 계획, 더 많은 스틸 확인, 느린 챕터 검토

한 줄로 보고:

길이/위험/대상에 따라 <빠름/표준/엄격>을 사용하겠습니다.

워크플로우

1. 입력 게이트

   • 사용자가 원본 텍스트, 스크립트, 노트 또는 명확한 개요를 제공한 경우에만 진행합니다.
   • 주제만 제공하는 경우 자료를 요청하세요. 전체 비디오를 임의로 만들지 마세요.

2. 콘텐츠 파일

   • 제공된 경우 원본 자료를 article.md에 저장합니다.
   • 최종 발화 텍스트를 script.md에 저장합니다.
   • 개발 계획을 outline.md에 저장합니다.
   • outline.md는 챕터, 비트, 화면 콘텐츠, 정보 풀, 에셋을 계획합니다.
   • outline.md는 정확한 애니메이션 구현을 규정하지 않습니다.

3. 테마 선택

   • 이 스킬에 번들된 테마만 사용하세요: themes/command-film, themes/studio-white, themes/research-desk.
   • web-video-presentation의 테마를 재사용하거나 가져오지 마세요.

4. 템플릿 선택

   • 사용자가 알려진 레이아웃이나 애니메이션 메커니즘을 요청하는 경우, references/TEMPLATES.md를 읽으세요.
   • 럭셔리 다크 포트폴리오, 3D 퍼스펙티브 수평 캐러셀 또는 프리미엄 에이전시 갤러리 요청에는 templates/luxury-perspective-gallery를 사용하세요.

5. Remotion 프로젝트

   • 기존 remotion/이 있으면 재사용하세요.
   • 누락된 경우에만 생성:

     npx create-video@latest --yes --blank --no-tailwind remotion
     

   • 선택한 템플릿이 Tailwind를 요구하는 경우, Tailwind 지원으로 프로젝트를 생성하거나 템플릿 파일을 복사하기 전에 Tailwind를 추가하세요.
   • remotion/node_modules가 없거나 Remotion 명령이 종속성 부재로 실패하는 경우에만 종속성을 설치하세요.

6. 타이밍

   • 오디오를 합성하지 마세요.
   • 내레이션 및 시각적 복잡성으로부터 지속 시간을 추정하세요.
   • 기본 fps = 30, width = 1920, height = 1080.
   • 텍스트를 narrations.ts에 저장하고, 추정 durationFrames를 timing.ts에 저장하세요.

7. 구현

   • 각 챕터 전에 references/REMOTION-CRAFT.md를 읽으세요.
   • useCurrentFrame(), interpolate(), Easing, Sequence로 애니메이션을 구현하세요.
   • 기본 애니메이션에 CSS 전환 / CSS 애니메이션 / GSAP를 사용하지 마세요.
   • Tailwind는 정적 레이아웃을 스타일링하는 데 사용할 수 있지만, Tailwind 애니메이션 유틸리티는 허용되지 않습니다.

8. 검증

   • 실행:

     cd remotion
     npm run lint
     

   • 챕터당 최소 한 장의 스틸을 렌더링하거나, 짧은 전체 비디오의 경우 2-4장의 스틸을 렌더링:

     npx remotion still <composition-id> --frame=<frame> --scale=0.5 --output=preview-stills/<name>.png
     

   • 스틸이 올바르게 보이면 mp4 렌더링:

     npx remotion render <composition-id> out/<name>.mp4
     

9. 노트

   • notes.md에 fps, 해상도, 총 프레임, 예상 지속 시간, 확인된 스틸, 렌더링된 mp4 경로, 오디오/자막은 후반 작업이라는 점을 업데이트하세요.

테마 선택

테마	최적 용도	느낌
command-film	에이전트, 터미널, 자동화, 개발자 도구	어둡고 영화적인 명령실
studio-white	SaaS 데모, 출시, 강좌, 제품 튜토리얼	깨끗한 화이트 제품 스튜디오
research-desk	에세이, 보고서, 논문, 비즈니스 분석	차분한 분석 책상

전체 테마 노트는 references/THEMES.md를 읽으세요.

템플릿 선택

템플릿	최적 용도	느낌
luxury-perspective-gallery	프리미엄 포트폴리오, 제품 쇼케이스, 3D 수평 캐러셀	어두운 사이버 미니멀 에이전시 슬라이더
charity-doodle-poster	비영리 포스터, 손으로 그린 동물 영웅, 라인 보일 편집 웹 효과	레트로 잉크 브러시 스톱모션 포스터

전체 템플릿 노트는 references/TEMPLATES.md를 읽으세요.

Remotion 규칙

• Root.tsx에서 Composition을 사용하세요.
• Sequence를 사용하여 타임라인에 비트를 배치하세요.
• 모션에는 useCurrentFrame() + interpolate()를 사용하세요.
• 정적 에셋을 remotion/public/assets/에 배치하고 staticFile()로 참조하세요.
• 최종 렌더링 전에 스틸 확인이 필요합니다.
• 최종 mp4는 사용자가 나중에 후반 작업에서 오디오를 제공하지 않는 한 무음입니다.