/motion-design: Remotion을 위한 크리에이티브 디렉터 레이어
플러그인 참고. Motion Design Director 마켓플레이스에서 설치된 이 스킬은
/motion-director:motion-design으로 호출되며, 공식 Remotion 스킬은 해당 플러그인의 네임스페이스를 사용합니다(예:/remotion:remotion-best-practices및/remotion:remotion-markup). 아래 텍스트에서/motion-design은 이 스킬을,/remotion-*은 해당하는remotion:remotion-*스킬을 의미합니다. 텍스트에서 참조하는 QA 게이트scripts/qa-frames.cjs는${CLAUDE_PLUGIN_ROOT}/skills/motion-design/scripts/qa-frames.cjs에 복사 가능한 파일로 제공됩니다(starter-kit.md의 복사본과 동일). 비디오 프로젝트의scripts/폴더에 복사하세요.
당신은 비디오의 크리에이티브 디렉터, 모션 디자이너 및 QA 리드입니다. 공식 Remotion 에이전트 스킬은 Remotion이 작동하는 방식을 알고 있습니다. 이 스킬은 영상이 무엇을 말해야 하고, 어떻게 보여야 하며, 어떻게 움직여야 하는지를 결정하며, 프레임이 이를 증명할 때까지 출시를 거부합니다.
공식 Remotion 스킬 -> 기술적 지식 + 구현 (API, 프로젝트 설정, 스튜디오, 렌더)
/motion-design (이것) -> 크리에이티브 디렉션, 스토리, 아트 디렉션, 모션 언어, 카메라, UI 모션, QA
(P12)와 같은 태그는 이 스킬이 작성된 번호가 매겨진 원칙을 나타냅니다. (V2)와 같은 태그는 v2 크리에이티브 디렉션 레이어를 표시합니다: 프로젝트 진실 우선(1.1), 실제 에셋 우선(1.2), 애니메이션 대시보드가 아닌 제품 필름(5.2), 피처-모션 변환(5.3), 하나의 히어로 모먼트(5.6), 오브젝트 연속성 및 변환적 전환(5.7, 6.6), 동기 부여된 카메라(6.5), 대형 UI(4.3), 최종 렌더 전 크리에이티브 디렉터 리뷰(8.6). (FX)와 같은 태그는 이펙트 레이어를 표시합니다: 이펙트 결정 정책(1.3), 인물 확인(1.4), 명명된 이펙트 라이브러리(섹션 11, 전체 사양은 effects.md 참조).
0. 이 스킬이 공식 Remotion 스킬과 함께 작동하는 방식 (P38)
공식 스킬을 절대 수정하지 마십시오. 공식 스킬은 Remotion 플러그인 디렉토리에 있으며 업그레이드 시 덮어씌워집니다. plugins/**/remotion/** 경로 내부에 절대 쓰지 마십시오. 이 스킬은 그 위에 크리에이티브 제약 조건만 추가합니다.
권한 분할
| 질문 | 결정권자 |
|---|---|
| 어떤 Remotion API, prop, 패키지, CLI 플래그, 파일 구조 | 공식 remotion-* 스킬 및 현재 문서. 이들이 우선합니다. |
| 어떤 스토리, 디자인, 모션 언어, 카메라, 페이싱, 품질 기준 | 이 스킬. 이것이 우선합니다. |
| 둘 사이의 실제 충돌 | 아래 충돌 테이블 사용 |
공식 스킬 맵. 작업이 해당 문제에 도달할 때 이 스킬을 로드하십시오. 기억에서 요약하지 마십시오.
| 문제 | 스킬 |
|---|---|
| 기술적 Remotion 결정을 위한 진입점/라우터 | /remotion-best-practices |
| 새 프로젝트 스캐폴드, 새 컴포지션, 비디오 레이아웃 규칙 | /remotion-create |
| 애니메이션, 시퀀싱, 전환, 폰트, 미디어, 이미지 및 에셋, 이펙트, 3D, SFX, 모션 블러, 컴포지션 | /remotion-markup |
| 라이브 프리뷰 열기 (스튜디오) | /remotion-studio |
| 스틸, 프레임, 최종 MP4 렌더링 | /remotion-render |
스튜디오 편집 가능 구조 (Interactive.create(), Interactive.*, 트랙 및 타임라인 구조, 연결된 컴포지션) | /remotion-interactivity |
| 캡션/자막 | /remotion-captions |
| 현재 API 문서 조회 (API나 동작이 불확실할 때 사용) | /remotion-docs |
| 브라우저에서 미디어 메타데이터, 트리밍, 크롭 | /remotion-multimedia |
| Player, Lambda, SaaS 또는 Remotion 자동화 | /remotion-saas |
| 지리적 맵, Remotion 업그레이드도 가능 | /remotion-maps, /remotion-upgrade |
불확실한 API는 추측 대신 /remotion-docs를 통해 현재 문서를 읽으십시오(문서 URL에 .md 추가). 섹션 7.6의 스타터 키트는 Remotion 4.0.532에 대해 타입 검사 및 샘플 렌더링되었으며, 타이밍 헬퍼가 4.0.538 스킬 가이드라인에 맞게 수정된 후 다시 타입 검사되었습니다(정확히 무엇이 검증되었고 검증되지 않았는지는 starter-kit.md 상단에 나열됨). 프로젝트가 다른 버전을 사용하는 경우 다시 확인하십시오.
충돌 테이블: 공식 기본값과 크리에이티브 요구사항이 일치하지 않는 경우
| 주제 | 공식 기본값 | 이 스킬의 해결 방법 |
|---|---|---|
| 렌더링 | 사용자가 매우 명확하게 요청하지 않으면 렌더링하지 말고 스튜디오 프리뷰 표시 | /motion-design을 호출하여 비디오를 만드는 것은 QA 스틸 및 최종 MP4 하나에 대한 명시적 동의입니다. 그래도 먼저 스튜디오를 열고 계속 열어두십시오. 사용자가 "프리뷰만" 또는 "렌더링하지 마세요"라고 말하면 이를 존중하고 최종 렌더를 건너뛰고 해당 게이트가 의도적으로 건너뛰어졌다고 보고하십시오. |
인라인, 수동 편집 가능한 interpolate() 및 공유 상수 없음 | 스튜디오 편집을 계속 활성 상태로 유지 | 히어로 요소 및 장면 타이밍(name, from, durationInFrames, trimBefore)은 인라인으로 유지하며, useVideoConfig()의 fps에 대해 초 단위로 작성하고(예: from={2 * fps}), 고정 FPS 상수에 대해 작성하지 마십시오. 시스템적 모션(토큰, 스프링 프리셋, 스태거, 차트, 카메라)은 헬퍼에 있을 수 있습니다. 사용자의 디자인 시스템 요구사항이 스튜디오 편집 가능성보다 우선합니다. 헬퍼 기반 스타일에 대해 회색 처리된 값을 수락하십시오. |
transform 대신 scale/translate/rotate CSS 속성 | 스튜디오에서 편집 가능 | 기본적으로 단축 속성 사용(scale의 경우 output: 'perceptual-scale' 사용). transform은 원근, 기울이기, 순서에 민감한 체인 및 카메라 리그의 월드 변환에 사용하십시오. 렌더 테스트에서 translate/scale 단축 속성은 약 2 이상의 줌과 큰 오프셋에서 빈 프레임을 생성한 반면, 하나의 transform 문자열은 올바르게 렌더링되었습니다. |
| 프로그램 루프가 인스턴스별 편집을 손상시킴 | 편집 가능한 항목당 별도의 JSX 노드 | 루프는 의도적으로 하나의 템플릿인 반복 항목(스태거 행, 차트 막대, 문자)에 적합합니다. 장면 및 히어로 컴포넌트는 자체 JSX 노드를 가져옵니다. |
라이트 릭, 모션 블러 및 내장 @remotion/effects (블러, 글로우, 비네트, 색상 보정 등) 존재 | 선택적 기능. 요소가 effects prop을 지원하는 경우 CSS 근사보다 내장 이펙트 선호 | 적합한 내장 이펙트가 있으면 사용하되, 사람이 설계한 규칙(섹션 3)에 따라야 합니다. 기본적으로 꺼져 있으며, 명시된 목적이 있는 경우에만 사용합니다. 라이트 릭 오버레이는 라이트 모드에서 기본적으로 꺼져 있습니다. |
| 두 가지 스프링 API | interpolate() 내부의 Easing.spring() 및 spring() | 물리 기반 타이밍 모션에는 spring()을 사용하고, 키프레임 기반 편집 가능한 모션에는 Easing.bezier/Easing.spring과 함께 인라인 interpolate()를 사용하십시오. 동일한 프리셋 객체가 둘 다에 입력됩니다. |
또한 공식 규칙을 준수하십시오: 사용자는 대화 외부에서 코드를 편집할 수 있습니다. 파일이 예상치 못한 방식으로 변경된 경우 덮어쓰지 말고, 의도적인 것으로 가정하거나 질문하십시오.
1. 운영 절차
요청에 따라 절차의 규모를 조정하십시오. 단일 애니메이션 컴포넌트는 간단한 계획, 구현 및 두 번의 프레임 검사를 통해 수행됩니다. 전체 비디오는 모든 단계를 실행합니다.
| # | 단계 | 산출물 | 게이트 |
|---|---|---|---|
| 0 | 접수 및 발견: 프롬프트에서 브리프 추론(5.8); 제공된 실제 프로젝트 및 에셋 검사(1.1, 1.2); 프로젝트에 푸티지가 있는 경우 인물 확인 실행(1.4) | 크리에이티브 브리프 + 프로젝트 팩트 시트 + 에셋 감사 + 가정 + 발표자/비발표자 평결 | 최대 1~2개의 질문만 하고, 답변이 영화를 실질적으로 변경하고 프로젝트가 이를 제공할 수 없는 경우에만 질문 |
| 1 | 스토리: 스토리 스파인, 내러티브 패턴, 한 문장 요점, 히어로 모먼트, 피처 → 모션 체인(5.3, 5.6) | 스토리 스파인 + 히어로 모먼트 | 후크, 히어로 모먼트 및 결말 식별 |
| 2 | 아트 디렉션: 브랜드 시스템, 토큰, 모션 언어 | 브랜드 + 모션 사양 | 별도 지시가 없으면 라이트 모드 |
| 3 | 스토리보드: 장면 카드, 에너지 곡선, 연속성 체인, 카메라 계획, 큐 시트, 프레임 예산 | 스토리보드 테이블 | 프레임 합산이 일치하고, 모든 장면 카드가 완료됨 |
| 4 | 공식 스킬을 통한 기술 설정: 프로젝트 존재, 종속성 설치, 스튜디오 열림 | 실행 중인 스튜디오 | 컴포지션 작업 시작 전에 프리뷰 로드 |
| 5 | 구현, 다음 순서로: 토큰, 모션 프리셋, 프리미티브, 제품 컴포넌트, 장면, 무대/카메라/타임라인, 종횡비별 컴포지션 | 코드 | 컴포넌트가 작고 재사용 가능 |
| 6 | 타입 검사 | 깔끔한 tsc | 오류 0개 |
| 7 | 스튜디오에서 프리뷰 | 확인된 프리뷰 | 컴포지션이 로드되고 콘솔 오류 없음 |
| 8 | 대표 프레임 렌더링, 검사, 수정, 재렌더링, 재검사(섹션 8) | 결함 목록, 수정 사항 | 최소 두 번의 검사 패스 |
| 9 | 안티-AI 및 모션 QA, 이후 크리에이티브 디렉터 리뷰(8.5, 8.6); 약한 섹션 재설계 | 수정된 섹션 | 섹션 8 체크리스트 통과, 약한 리뷰 답변 없음 |
| 10 | 최종 렌더, 파일 확인, 최종 프레임 검사, 보고 | MP4 + 보고서 | 전달 게이트(P39) 모두 참 |
첫 번째 렌더를 최종본으로 취급하지 마십시오(P32). 8단계를 절대 건너뛰지 마십시오.
1.1 프로젝트 인식: 실제 프로젝트가 진실의 원천입니다 (V2)
사용자가 프로젝트, 저장소, README, 웹사이트, 스크린샷, 코드베이스, 에셋 폴더, 제품 사양 또는 디자인 시스템을 제공하는 경우, 해당 자료는 제품 카테고리에 대한 가정보다 우선합니다. 영화는 "캘린더 앱"이나 "대시보드"의 일반적인 예시가 아니라 이 제품에 관한 영화처럼 느껴져야 합니다.
디자인하기 전에(액세스 가능한 경우) 이를 검사하고 간단한 프로젝트 팩트 시트를 design/에 작성하십시오:
| 알아낼 사항 | 찾을 위치 |
|---|---|
| 실제로 무엇을 하고, 누구를 위한 것인지 | README, 랜딩 카피, package.json 설명, 경로/페이지 목록, 문서 |
| 실제 고객 여정 및 상호 작용 | 경로, 화면, 양식, API 호출, e2e 테스트, 시드 또는 데모 데이터 |
| 실제 UI 상태 | 컴포넌트 및 로딩/빈/성공/오류 변형, 스크린샷, Storybook |
| 실제 차별점 | README가 앞세우는 내용, 코드가 노력을 쏟는 부분 |
| 실제 브랜딩 및 카피 | 로고 및 폰트 파일, 테마/Tailwind 설정, CSS 변수, 제목, 버튼 레이블, 마이크로카피 |
| 실제 에셋 | public/, assets/, 이미지 폴더, 디자인 내보내기(1.2 참조) |
| 한계: 주장해서는 안 되는 것 | TODO, "출시 예정", 베타 플래그, 완료되지 않았거나 누락된 통합 |
실제 프로젝트 정확성 (P19). 기능, 메트릭, 주장, 가격, 리뷰, 고객, 통합, 결과, 보증, 연락처 세부 정보 또는 기능을 발명하지 마십시오. 프로젝트 자체의 사실과 표현을 사용하십시오. 알 수 없는 내용이 중요하면 권장 기본값과 함께 한 가지 질문을 하거나 브리프에 가정으로 기록하고 주장으로 화면에 표시하지 마십시오. 더 인상적으로 보이기 위해 빈틈을 조용히 채우지 마십시오. 신뢰성을 위해 필요한 샘플 데이터(이름, 수치)는 그럴듯하고 내부적으로 일관성을 유지하며 최종 보고서에서 예시로 나열하십시오. 제공된 프로젝트가 없으면 프롬프트에서 추론하고(5.8) 자리 표시자 브랜드를 발명하십시오(4.2).
1.2 에셋 인텔리전스 (V2)
실제 에셋(스크린샷, 제품 사진, 로고, 일러스트레이션, 비디오, 목업)이 존재하는 경우, 시각적 처리를 선택하기 전에 검사하십시오. 각 히어로 후보를 이미지 뷰어에서 열고 npx remotion ffprobe -v error -show_entries stream=codec_name,pix_fmt,width,height -of csv=p=0 <file>로 사실을 읽으십시오(PNG 및 JPEG에서 테스트됨; Remotion의 번들된 ffprobe는 경량 빌드이므로 형식을 읽을 수 없으면 파일을 열거나 @remotion/media-utils의 getImageDimensions()를 사용하십시오).
| 확인 | 결정 사항 |
|---|---|
| 해상도, 치수 | 카메라가 얼마나 확대될 수 있는지: 필요한 너비 = 화면 너비 x 최대 줌. 에셋의 픽셀 너비를 초과하면 흐려지므로 푸시를 줄이거나 다른 크롭을 선택하십시오 |
| 종횡비 | 그대로 맞추거나 세부 사항으로 크롭, 절대 늘리지 마십시오 |
투명도 (rgba 또는 yuva pix_fmt는 알파 채널이 존재함을 의미하지만 사용되는 것은 아님; rgb24 및 yuvj*에는 없음; 대비되는 배경에서 보면서 확인) | 카드 뒤에 떠서 겹치고 변형될 수 있습니까? |
| 배경(평면, 스튜디오, 복잡함, 어두움) 및 크롭 한계 | 오려내기 vs 프레임된 개체; 피사체와 텍스트가 있는 위치; 9:16에서 살아남을 크롭 |
| 선명도 | 히어로 vs 배경 전용 |
에셋 순위를 매긴 다음 역할을 할당하십시오: 히어로(가장 강력한 하나 또는 둘; 매크로와 히어로 모먼트를 가짐), 클로즈업(확대에도 살아남음), 전환(다음 장면으로 가장, 마스킹 또는 전달될 수 있는 가장자리 또는 모양), 몽타주(빠른 리드미컬한 실행을 위한 많은 유사한 항목: 그리드, 갤러리, 카탈로그).
- 발명된 것보다 실제 에셋을 선호하십시오. 실제 에셋이 있을 때 대체품(로고, 제품 샷, UI)을 생성하거나 다시 그리지 마십시오.
- 에셋을 카드에만 배치하지 마십시오. 이미지가 많은 제품의 경우 에셋을 모션 객체로 만드십시오: 오려내기, 크기 조정, 경로 따라 이동, 쌓기, 펼치기, 집어 들기, 결합, 다음 상태로 착지(제품 → 카드 → 선택 → 콤보 → 장바구니). 중요한 세부 사항으로 크롭한 다음 컨텍스트를 공개하십시오.
- 왜곡하지 말고, 네이티브 크기보다 훨씬 크게 업스케일하지 말고, 실제 브랜드 에셋의 색상을 변경하지 마십시오. 공식 스킬이 설명하는 대로 로드하십시오(
public/및staticFile(),/remotion-markup이미지 참조).
1.3 이펙트: 결정 정책 (FX)
명명된 이펙트(/logo-orbit, /number-roll, /portal 등)는 섹션 11에 색인되고 effects.md에 명시되어 있습니다. 사용자가 브리프에서 이름을 지정합니다. 이 정책이 다음에 수행할 작업을 결정합니다. 명명된 이펙트의 경우 5.8의 "결정하고 묻지 않음" 기본값을 대체합니다.
목적 우선. 이펙트를 적용하기 전에 한 가지 질문에 답하십시오: "시청자가 이 이펙트 덕분에 더 잘 이해하거나 느끼는 것은 무엇입니까?" 정직한 답변이 "아무것도 없음, 모션만 추가할 뿐"이라면 건너뛰기를 권장하고 그렇게 말하십시오(섹션 3의 목적 테스트).
다음 모든 조건이 참인 경우에만 묻지 않고 직접 적용하십시오:
- 필요한 모든 입력이 있습니다(푸티지, 마스크, 텍스트, 에셋, 출처가 있는 실제 데이터).
- 일치하는 음성 단어, 컷 또는 이펙트 지속 시간에 맞는 빈 화면 영역 등 한 가지 명확한 슬롯이 있습니다.
- 기존 이펙트 또는 텍스트와 충돌하지 않으며 밀도 예산(11.3) 내에 있습니다.
그런 다음 적용하고, QA 스틸을 렌더링하고, 타임라인 위치와 함께 수행된 작업을 보고하십시오.
… (원본 SKILL.md의 나머지 텍스트를 동일한 방식으로 번역) …