Claude Code와 Remotion으로 브랜드에 맞는 제품 영상 만들기

product-film이란?

product-film은 코드로 쇼릴 수준의 제품 영상을 제작하는 Claude Code 스킬입니다. Remotion을 사용해 랜딩 페이지용 반복 영상, 출시 영상, 홍보 영상 또는 데모 릴을 만들 수 있습니다.

이 스킬은 일반적인 시각 스타일을 적용하는 대신 제품 저장소를 분석합니다. 디자인 규칙, 토큰, 컴포넌트, 로고, 실제 사이트, 제품이 내세울 수 있는 주장을 살펴봅니다. 그런 다음 제품 팀이 직접 만든 것처럼 보이고 들리는 영상을 제작하는 데 이러한 자료를 활용합니다.

워크플로는 협업 방식으로 진행됩니다. Claude는 영상의 사용 위치, 길이, 음악, 기능, 텍스트, 전환 효과, 선택적 시각 요소에 대해 질문합니다. 이어서 결정된 브랜드 사항을 videos/BRAND.md에 기록하고, 비트 시트를 만들며, 스타일 프레임을 제시하고, 애니메이션을 제작하고, 검토 자료를 생성한 뒤, 검증된 결과물을 렌더링합니다.

주요 기능

• 디자인 시스템 탐색: 규칙 파일, 디자인 토큰, 컴포넌트, 로고, 실제 제품, 승인된 주장을 검토합니다.
• 제품 맞춤형 인터뷰: 일반적인 자리 표시자 대신 실제 기능과 컴포넌트를 기반으로 선택지를 제시합니다.
• 지속형 브랜드 키트: 결정 사항을 videos/BRAND.md에 저장하며, 이 파일의 내용은 스킬의 기본값보다 우선합니다.
• 스토리 및 스타일 기획: 비트 시트를 만들고, 제작을 완료하기 전에 세 가지 스타일 프레임을 확인합니다.
• 음악을 고려한 편집: 비트 그리드를 측정하고, 마디 단위로 음악을 편집하며, 효과음을 최고점에 배치합니다.
• Remotion 기반 애니메이션: 모든 프레임이 시간의 순수 함수로 결정되는 하나의 컴포지션을 제작합니다.
• 구조화된 검토: 인계 시점의 스틸 이미지, 콘택트 시트, 절반 해상도의 초안을 생성합니다.
• 검증된 납품: 모션 블러가 적용된 240 fps 마스터를 렌더링하고, 디코딩된 파일의 색상, 길이, seamless loop 여부를 확인합니다.
• 다양한 출력: 음소거된 랜딩 페이지용 반복 영상, 음악이 포함된 버전, WebM 파일, 포스터를 생성합니다.

요구 사항

스킬을 설치하기 전에 다음 요구 사항을 충족하는 환경인지 확인하세요:

• Claude Code. 이 스킬은 로컬 도구 체인에서 실행되며 Claude 채팅 애플리케이션에서는 작동하지 않습니다.
• Node.js 및 Bun.
• Python 유틸리티를 실행하기 위한 uv.
• 합법적으로 사용할 권리가 있는 음악.

이 스킬은 프로젝트에 Remotion을 추가합니다. Remotion은 개인 및 소규모 팀에는 무료이지만, 대규모 기업에는 기업용 라이선스가 필요합니다. 자세한 약관은 remotion.dev/license에서 확인하세요.

Python 스크립트는 필요할 때 imageio-ffmpeg를 통해 NumPy와 완전한 FFmpeg 빌드를 설치하므로 이러한 종속성이 시스템 전체에 설치되지는 않습니다.

스킬 설치

옵션 1: Claude Code 플러그인 마켓플레이스를 통해 설치

Claude Code에서 product-film 마켓플레이스를 추가하고 플러그인을 설치하세요:

/plugin marketplace add Rieranthony/product-film-skill
/plugin install product-film@product-film-skill

Claude Code 환경에서 스킬을 사용할 수 있게 하려면 이 방법이 가장 직접적입니다.

옵션 2: 스킬 수동 설치

저장소를 복제한 후 개인 Claude Code 스킬 디렉터리에 스킬을 복사할 수도 있습니다:

git clone https://github.com/Rieranthony/product-film-skill
mkdir -p ~/.claude/skills
cp -R product-film-skill/plugins/product-film/skills/product-film ~/.claude/skills/

복사된 폴더에는 제작 전반에서 사용하는 워크플로 지침, 참고 자료, 템플릿, 애니메이션 유틸리티, 오디오 도구, 검토 스크립트, 렌더링 스크립트가 포함되어 있습니다.

옵션 3: 팀과 스킬 공유

공유 저장소의 일부로 스킬을 포함하려면 다음 위치에 해당 폴더를 커밋하세요:

.claude/skills/product-film/

이렇게 하면 Claude Code를 사용하는 팀원이 프로젝트와 함께 스킬을 사용할 수 있습니다.

첫 제품 영상 만들기

1단계: 제품 저장소 열기

소개하려는 제품의 저장소에서 Claude Code를 실행하세요. 이 단계가 중요한 이유는 스킬이 컴포넌트, 디자인 토큰, 규칙, 로고, 제품 콘텐츠와 같은 로컬 프로젝트 자료를 활용하기 때문입니다.

2단계: 영상 요청

목표 길이, 사용처, 음악을 포함해 Claude Code에 영상 제작을 요청하세요. README에는 다음 예시가 나와 있습니다:

이 제품을 위한 45초 랜딩 페이지 영상을 이 노래와 함께 만들어 주세요.

처음 요청에서 모든 창의적인 세부 사항을 정할 필요는 없습니다. 스킬은 전체 제작을 시작하기 전에 추가 인터뷰를 진행합니다.

3단계: 탐색 완료

Claude는 디자인 규칙, 토큰, 컴포넌트, 로고, 허용된 주장을 빠르게 검토합니다. 이 탐색 단계는 영상에 제품 맞춤형 시각 및 편집 기반을 제공합니다.

관련 프로젝트 파일을 저장소에서 확인할 수 있도록 유지하세요. 결과물의 품질과 정확성은 Claude가 실제 제품 자료를 검토할 수 있는지에 따라 달라집니다.

4단계: 창작 인터뷰 답변

스킬은 영상이 어디에서 재생될지, 길이는 얼마인지, 어떤 음악을 사용할지, 어떤 기능을 보여줄지 질문합니다. 또한 다음과 같은 선택적 요소도 제안합니다:

• 로고 애니메이션 또는 기존 마스코트.
• 단어별로 크게 강조되는 펀치라인, 캡션 또는 화면에 표시되는 문구 없음.
• 매직 무브 전환, 카메라 무브 또는 비트에 맞춰 동기화된 컷.
• 커서 상호작용, 파트너 로고, 증거를 보여 주는 순간 및 브랜드 텍스처.

이러한 선택 사항은 모두 선택적입니다. 제품과 의도한 시청 환경을 뒷받침하는 요소만 선택하세요.

5단계: 브랜드 키트 및 스토리 검토

Claude는 다음 위치에 탐색 결과와 인터뷰 답변을 작성합니다.

videos/BRAND.md

이 파일은 스킬의 기본적인 크리에이티브 선택보다 우선합니다. 또한 스킬은 전체 영상을 제작하기 전에 비트 시트를 준비하고 세 개의 스타일 프레임을 제시합니다.

스타일 프레임 검토를 통해 애니메이션 작업을 진행하기 전에 타이포그래피, 색상, 구성, 컴포넌트 처리 방식 및 전반적인 브랜드 적합성을 확인하세요.

6단계: 스킬이 음악을 처리하도록 하기

음악 워크플로는 비트 그리드를 측정하고, 음악 마디를 기준으로 선택한 곡을 자르며, 음향 효과를 피크에 맞춥니다. 이를 통해 장면 전환과 중요한 시각적 순간에 임의의 타이밍이 아닌 음악적 구조를 부여할 수 있습니다.

7단계: 영상 제작 및 검토

스킬은 하나의 Remotion 컴포지션을 만들고 모든 프레임을 시간의 순수 함수로 모델링합니다. 인터뷰 중 선택한 전환 방식으로 장면을 연결합니다.

검토 과정에서 Claude는 핸드오프 지점의 스틸 이미지, 콘택트 시트 및 절반 해상도 초안을 생성합니다. 이러한 결과물을 확인하고 수정을 요청한 후, 최종 렌더링 전에 방향을 승인할 수 있습니다.

8단계: 결과물 렌더링 및 검증

최종 과정에서는 모션 블러가 적용된 240 fps 마스터를 생성합니다. 그런 다음 다음을 포함한 요청된 전달 형식을 만듭니다.

• 제품 페이지에 적합한 무음 루프.
• 음악이 포함된 버전.
• WebM 버전.
• 포스터 이미지.

생성된 파일은 디코딩하고 색상, 재생 시간 및 매끄러운 반복 재생 여부를 검사합니다.

프로젝트 구조 이해하기

이 스킬은 워크플로 문서, 전문 참고 자료, 템플릿, 재사용 가능한 애니메이션 유틸리티 및 제작 스크립트로 구성됩니다.

plugins/product-film/skills/product-film/
├── SKILL.md
├── reference/
├── templates/
│   ├── BRAND.md
│   ├── film-prompt.md
│   └── kit/
└── scripts/
    ├── beats.py
    ├── audio-edit.py
    ├── stills.ts
    ├── render.ts
    └── verify.py

• SKILL.md에는 워크플로, 기본 제작 방식 및 알려진 함정이 포함되어 있습니다.
• reference/에는 탐색, 인터뷰, 크리에이티브 요소, 스토리텔링, 애니메이션 엔진, 음악, 검토 및 렌더링에 대한 내용이 담겨 있습니다.
• templates/BRAND.md는 제품에 맞게 작성할 수 있는 디자인 키트를 제공합니다.
• templates/film-prompt.md는 재사용 가능한 영상 브리프를 제공합니다.
• templates/kit/에는 타이밍 그리드, 스프링, 카메라, 커서, 매직 무브, 펀치라인, 디더링 및 디버깅 오버레이를 위한 도구가 들어 있습니다.
• beats.py는 NumPy를 사용해 곡에서 비트 그리드를 도출합니다.
• audio-edit.py는 음악 마디를 기준으로 곡을 자릅니다.
• stills.ts는 검토용 스틸 이미지를 생성합니다.
• render.ts는 최종 렌더링과 전달 결과물을 생성합니다.
• verify.py는 출력 파일을 디코딩하고 검증합니다.

고급 팁

BRAND.md를 크리에이티브의 단일 기준으로 삼기

videos/BRAND.md가 스킬의 기본 설정을 재정의하므로, 신중하게 검토하세요. 제품의 시각적 규칙, 말투, 승인된 주장 및 인터뷰 중 결정한 크리에이티브 선택이 정확히 담겨 있는지 확인하세요.

형식을 사용 목적에 맞추기

영상이 어디에서 재생될지 Claude에게 알려 주세요. 랜딩 페이지 루프는 출시 영상이나 데모 릴과 요구 사항이 다릅니다. 사용 목적에 따라 최종 경험을 무음으로 할지, 음악 중심으로 할지, 텍스트를 많이 사용할지 또는 문구 없이도 이해할 수 있게 할지도 결정할 수 있습니다.

실제 제품 자료 사용하기

실제 토큰, 컴포넌트, 로고, 기능 및 주장에 기반해 스킬을 구성하세요. 이는 프로젝트 목적의 핵심입니다. 제품 자체가 만든 것처럼 보이는 영상을 제작하기 위해서입니다.

검토 체크포인트에서 결정하기

세 개의 스타일 프레임을 사용해 초기에 방향을 평가하세요. 이후 비용이 많이 드는 최종 렌더링을 승인하기 전에 핸드오프 스틸 이미지, 콘택트 시트 및 절반 해상도 초안을 확인하세요. 이러한 체크포인트는 수정이 아직 현실적으로 가능한 단계에서 시각적 문제와 타이밍 문제를 발견하도록 설계되었습니다.

선택 요소를 신중하게 고르기

로고 애니메이션, 마스코트, 펀치라인, 캡션, 카메라 무브, 커서 상호작용, 파트너 로고, 증거를 보여 주는 순간 및 텍스처는 모두 선택 사항입니다. 이를 체크리스트처럼 다루지 마세요. 선택한 제품 기능을 가장 명확하게 전달하는 요소를 고르세요.

제작 전에 음악 사용 권한 확인하기

이 도구는 곡을 분석하고 편집할 수 있지만 해당 음악을 사용할 권한을 부여하지는 않습니다. 공개 랜딩 페이지, 출시 영상, 프로모션 또는 데모 릴에 트랙을 포함하기 전에 필요한 권리를 보유하고 있는지 확인하세요.

Remotion 라이선스 확인하기

product-film 스킬 자체의 텍스트와 코드는 MIT 라이선스로 제공됩니다. Remotion에는 별도의 라이선스 조건이 있으므로, 규모가 큰 회사는 프로덕션에서 사용하기 전에 필요한 회사 라이선스를 보유하고 있는지 확인해야 합니다.

결론

product-film은 Claude Code를 구조화된 제품 영상 제작 워크플로로 전환합니다. 저장소 탐색, 제품별 인터뷰, 지속적으로 관리되는 브랜드 키트, 비트를 고려한 음악 편집, Remotion 애니메이션, 단계별 검토 및 검증된 렌더링을 결합합니다. 실제 디자인 시스템에서 시작하고 각 체크포인트에서 작업을 검토하면 제품의 정체성과 일관성을 유지하는 완성도 높은 영상 자산을 제작할 수 있습니다.