opsassad/claude-code-motion-graphic-video-skill

모션 비디오 스튜디오

여기서 비디오는 모든 프레임이 시간의 순수 함수 render(t)인 웹 페이지이며, scripts/record.mjs에 의해 정확히 한 프레임씩 기록됩니다. 이는 프레임 단위의 완벽한 모션, 실제 폰트, 실제 제품 UI, 그리고 코드 속도의 반복 작업을 제공합니다. 목표는 시니어 모션 디자이너가 자랑스러워할 만한 수준의 작업입니다: 순간마다 명확한 아이디어 하나, 물리적 무게감이 있는 모션, 그리고 모든 요소가 제 자리를 차지해야 합니다.

이 스킬은 생각하고 제작하는 방법을 가르칩니다. 템플릿이 아닙니다. 모든 비디오는 고유한 주제에 맞춰 고유한 콘셉트를 갖습니다. 이전 비디오의 장면, 레이아웃 또는 스토리 비트를 재사용하지 마십시오. 엔진, 기술 및 교훈을 재사용하십시오. 이 스킬로 제작된 두 개의 비디오는 동일한 스튜디오에서 나온 것처럼 보여야 하지만, 동일한 틀에서 찍어낸 것처럼 보여서는 안 됩니다.

시작하기 전에

• 취향 파일을 읽으십시오. references/taste.md에는 모든 사람에게 적용되는 교훈이 담겨 있습니다. 그런 다음 개인의 취향을 찾으십시오: 프로젝트 루트의 MOTION_TASTE.md 또는 프로젝트 전반에 걸친 ~/.claude/motion-video-taste.md를 확인하십시오. 개인의 취향이 일반 기본값을 재정의합니다.
• 말하는 대상에 맞춰 말투를 조정하십시오. 비디오를 요청하는 많은 사람들은 개발자가 아닙니다. 그들이 보게 될 것으로 이끌어 가십시오. 렌더링된 프레임을 보여주십시오. ASCII 스케치나 텍스트 목업이 아닙니다. 그림은 설명이 다섯 번 필요한 것을 한 번에 해결합니다.

워크플로우

각 단계는 다음 단계로 넘어가기 전에 실제로 볼 수 있는 결과물로 끝납니다.

1. 인테이크: 비디오 종류 및 선호도

한 번의 질문 라운드에서 각 질문에 합리적인 기본값을 제시하여 바쁜 사람이 "GO"라고만 말해도 되도록 합니다 (references/intake.md 참조):

1. 비디오 종류 (references/kinds/README.md 메뉴 참조):
   • 런치 필름, 히어로 광고, 설명 영상, 스토리 필름, 캐릭터 필름
   • 키네틱 타입, 시즐 릴, 티저, 무드 쇼케이스
   • 워크스루, 쇼케이스 릴, 데이터 스토리
2. 게시 위치 및 길이.
3. 선호사항: 룩, 톤, 사운드(음악, 음성, 자막), 반드시 보여줘야 할 순간, 피해야 할 사항, 좋아하는 참조 비디오.

그런 다음 해당 종류의 플레이북(references/kinds/<kind>.md)을 읽고 자료가 답할 수 없는 질문만 목록에서 물어보십시오.

2. 자료 및 제품 이해

UI(읽기 전용 리포지토리), 스크린샷 또는 녹화본, 라이브 사이트를 요청하십시오. 리포지토리를 수정하거나, 비밀 정보를 열거나, 로그인하거나, 라이브 서비스를 호출하지 마십시오.

references/intake.md에 설명된 대로 읽으십시오:

• 그것이 무엇이고 누구를 위한 것인지
• 사용자 여정, 화면별로, 제품 자체의 언어로
• 차별화 포인트, 순위별 (누군가가 전환하는 이유)
• 아하 순간
• 브랜드(로고, 색상, 폰트, 톤)
• 현실적인 데이터
• 보여주지 말아야 할 것

제품 이해 브리프를 작성하고 상대방의 승인을 받으십시오(또는 단독 작업 시 가정을 명시하십시오). 상대방이 보여주거나, 탐색하거나, 설명해 달라고 요청한 모든 것은 브리프에 반드시 포함되어야 합니다.

실제 화면에서 폰트, 색상, 반경, 간격, 실제 카피 및 실제 데이터를 기록하십시오. 비디오는 일반 모션 템플릿이 아닌 그들의 브랜드처럼 보여야 합니다. 룩을 임의로 만드는 것이 첫 번째 버전이 거절되는 가장 흔한 이유입니다.

상대방이 참조 비디오를 공유하면 디자인하기 전에 프레임별로 연구하십시오 (bash scripts/study-reference.sh ref.mp4 out/). 실제로 무엇을 하는지 기록하십시오:

• 카메라 거리 및 각도
• 텍스트의 크기와 역할
• 색상의 의미
• 샷 연결 방식
• 템포 및 아크

상대방에게 자신의 해석을 말하고 제작하기 전에 확인을 받으십시오. 참조 비디오의 단일 스크린샷만으로 제작하지 마십시오.

3. 콘셉트: 먼저 독창적인 아이디어, 그다음 스타일

제품 이해 브리프(사용자 여정, 순위별 차별화 포인트, 아하 순간)를 기반으로 구축하십시오. 단독 작업 시에도 매번 references/originality.md의 독창성 방법을 먼저 수행하십시오:

1. 인간의 진실 찾기
2. 8가지 다른 각도에서 8개의 콘셉트 작성
3. 스왑 테스트와 클리셰 테스트로 평범한 콘셉트 제거
4. 여전히 판매 가능하면서 가장 과감한 생존자를 선택하고, 거부한 명백한 아이디어를 기록하십시오.

모든 소프트웨어 제품에 대해 가장 흔한 아이디어(요청 입력 → 결과 생성 → 토스트 → 몽타주 → 슬로건 → 로고)는 백본으로 사용이 금지됩니다. 이 스킬의 다른 모든 것(데모, 필드 가이드, 레시피, 과거 필름)은 복사할 샷 순서가 아닌 메커니즘을 보여줍니다.

그런 다음 스타일을 선택하십시오 (references/styles.md 참조):

• 시네마틱 제품 필름
• 깔끔한 라이트 제품 필름
• 분위기 있는 글라스
• 내레이션 설명
• 일상의 한 장면
• 캐릭터 중심
• 히어로 샷
• 시즐
• 카드 쇼케이스
• 워크스루
• 키네틱 타입
• 데이터 스토리

선택하기 전에 references/patterns.md를 읽으십시오: 강력한 런치 필름이 실제로 하는 일에 대한 필드 가이드입니다.

장르는 비디오의 용도를 말하고, 스타일은 느낌을 말합니다. 브리프가 열려 있을 때는 두 가지 스타일을 두 가지 방향으로 제안하십시오.

그런 다음 스토리를 한 문장으로 작성하고, 그다음 그것을 전달할 시각적 은유를 주제 자체의 명사와 동사에서 가져옵니다. 장면을 나열하십시오: 각각 하나의 아이디어, 각각 하나의 시그니처 모멘트(요점을 증명하는 애니메이션 비트), 다시 해당 주제에서 가져옵니다. 브리프가 열려 있을 때는 두 가지 방향을 제안하고 상대방이 선택하도록 하십시오. references/craft.md에는 깊이 있는 원칙(모든 스타일에 적용됨), 방법, 모션 어휘 및 타이밍 규칙이 있습니다. 모든 콘셉트 전에 그 원칙을 읽으십시오.

4. 생산 계획: 전체 필름, 프레임별로

코드 작성 전에 references/plan.md 형식으로 전체 계획을 작성하십시오:

• 한 페이지 필름: 콘셉트, 거부된 명백한 아이디어, 히어로 오브젝트, 감정의 아크, 각 차별화 포인트가 나타나는 위치
• 토큰으로 본 룩
• 모든 샷을 프레임별로: 각 가시적 변화에 타임스탬프, 카메라, 효과, 전환(진입/진출), 텍스트, 사운드, 에셋 및 동작 포함
• 4~8개의 키 프레임을 스틸 이미지로 렌더링
• 리스크

이 단계에서는 기대치에 제한이 없습니다: 필름이 최고일 때를 설명하고 그에 맞춰 제작하십시오. 모든 샷은 스토리를 진전시켜야 합니다. 그렇지 않으면 자르십시오. 계획과 키 프레임을 보여주고 승인 후에만 제작하십시오. 단독 작업 시 품질 체크리스트와 originality.md에 대해 계획을 확인하고 제작 전에 수정하십시오. 음성 해설은 타이밍을 결정하기 때문에 지금 작성하십시오. references/voice-and-sound.md는 AI 음성 도구가 잘 읽는 스크립트 형식, 페이싱, 발음 및 사운드를 다룹니다. 제품 런칭의 경우 체인을 계획하십시오: 각 화면을 다음 화면으로 전달하는 요소(craft.md, "Connected screens" 참조).

5. 빌드

assets/engine-starter.html 및 assets/motion.js 를 프로젝트의 에셋 옆에 복사하고 샷별로 제작하십시오. 먼저 무브 라이브러리에서 빌드하십시오 (references/moves.md 참조):

• 타이핑 클로즈업 (macroType)
• countUp
• 벽 다이브 (wall)
• buildIn, cascade, montage, growToWord
• cursor 및 clickZoom
• morphRect
• 심도 (twin)
• 컷용 shots, 미리보기 및 녹화용 start

assets/moves-demo.html은 각각을 호출하는 방법을 보여줍니다. 메커니즘만 참조하십시오; 샷 순서는 금지된 기본값이며 절대 템플릿이 아닙니다. 콘셉트에 필요한 경우에만 무브를 사용하십시오; 필름은 이들 중 하나도 사용하지 않을 수 있습니다. 라이브러리가 다루지 않는 부분만 수동으로 제작하고, 새로운 무브가 유용함을 입증하면 동일한 형태로 라이브러리에 추가하십시오.

모든 지속 시간과 곡선은 references/motion-tokens.md에서 가져오고 추측하지 마십시오. references/engine.md의 계약 및 함정을 따르십시오; 이는 실제 버그에서 비롯된 것입니다.

약 20초가 넘는 경우 먼저 빠른 러프 타이밍 패스를 수행하십시오: 실제 카메라 동작과 타이밍이 있는 회색 상자, 몇 개의 스틸 이미지. 리듬을 맞춘 다음 타이밍을 변경하지 않고 실제 아트로 교체하십시오.

6. 게이트: 연락처 시트

node scripts/record.mjs page.html stills/ --stills 1,3.5,... 로 8~16개의 키 모멘트를 렌더링한 후 bash scripts/contact-sheet.sh stills/ sheet.jpg 를 실행하십시오. 먼저 스스로 검토하여 아래 체크리스트와 취향 파일과 비교하고 수정 및 재렌더링하십시오. 그런 다음에만 상대방에게 보여주십시오. 스틸 이미지가 올바를 때까지 전체 비디오를 녹화하지 마십시오.

7. 녹화, 음성, 맞춤, 믹싱

검토용으로 임시 녹화(--scale 1 --fps 30)하고 최종 녹화는 --scale 2 --blur 4로 합니다: 슈퍼샘플링 후 축소, 실제 필름 스타일 모션 블러 적용. 음성 파일이 도착하면 node scripts/voice-segments.mjs voice.wav를 실행하여 각 음성 라인을 찾습니다. 시간-워프 테이블을 사용하여 애니메이션을 음성에 맞게 늘립니다. 음성을 자르거나 속도를 높이지 마십시오. node scripts/mix.mjs mix.json으로 라인과 음악을 배치합니다.

8. 배포

채널별로 내보내고, 썸네일 및 게시글 카피를 추가합니다 (references/delivery.md 참조). 최종 파일을 확인합니다: mp4 자체에서 프레임을 추출하고(프레임당 하나의 ffmpeg 호출) 지속 시간과 음량을 확인합니다.

9. 학습

상대방이 반응하면 그들이 좋아하거나 거부한 것과 그 이유를 그들의 취향 파일에 기록합니다 (MOTION_TASTE.md 또는 프로젝트 취향이 아닌 개인 취향인 경우 ~/.claude/motion-video-taste.md 생성). 교훈이 다른 사람들에게 도움이 될 경우 references/taste.md에 추가할 것을 제안합니다. 이것이 각 비디오가 이전보다 나아지는 방법입니다.

품질 체크리스트 (모든 연락처 시트에 실행)

• 실제 브랜드/제품처럼 보이는가: 동일한 폰트, 색상, 반경, 구성 요소. 발명된 것이 없어야 함.
• 화면당 하나의 아이디어. 눈이 동시에 두 가지를 읽어야 한다면 하나를 자르십시오.
• 잘리거나, 겹치거나, 좁지 않은가: 텍스트가 깔끔하게 줄바꿈되고, 로고가 광학적으로 중앙에 있으며, 카드가 온전하고, 안전 여백이 유지됨.
• 색상이 진실된가: 세탁된 필터나 회색 베일이 없으며, 텍스트에 대비가 있음.
• 모션에 무게가 있는가: 이징 인/아웃, 스프링이 안정됨, 선형은 시계와 진행 막대에만 사용.
• 전환이 동기가 부여되었는가 (카메라 동작, 오브젝트 핸드오프, 푸시), 실행 중에도 장면을 읽을 수 있어야 함.
• 화면과 음성이 일치하는가: 말하는 내용이 그 순간 화면에 있는 내용임.
• 사실이 실제이고 게시해도 안전한가 (delivery.md 참조).
• 엔딩: 브랜드 마크 + 하나의 링크 또는 하나의 액션. 상대방이 원하지 않은 추가 요청 없음.
• 휴대폰에서 읽을 수 있는가: 중요한 텍스트는 스테이지에서 40px 이상이거나 카메라가 그렇게 될 때까지 확대됨. 시트를 약 375px 너비로 축소하여 확인.
• 모든 샷이 안정되는가: 각 동작 후 읽을 수 있을 만큼 충분히 긴 정적 순간이 있음 (0.5초 + 단어당 0.3초).
• 스타일이 유지되는가: 조인, 색상, 텍스트 및 카메라가 선택한 스타일의 레시피를 끝까지 따름.
• 화면이 아닌 액션: 모든 샷은 누군가가 무언가를 하고 있거나 그 결과를 보여줌.
• 스케일과 템포가 적어도 한 번 변경됨 (클로즈 ↔ 와이드, 슬로우 ↔ 패스트).
• 액센트 컬러는 하나의 의미만 가짐.
• 모든 이미지를 눈으로 확인: 올바른 제품에 올바른 레이블, 올바른 로고, 잘리거나 늘어난 것 없음. 각각을 열어보고 파일 이름을 신뢰하지 마십시오.
• 숫자가 의미 있는가: 총계와 증가하는 양만 카운트업되고, 가격과 고정 값은 그냥 나타남.
• 깔끔한 전환: 텍스트는 무언가가 그 위를 지나가기 전에 사라짐 (흰색 위에 흰색이 삼키는 현상 없음), 샷 사이에 빈 프레임 없음.
• 구체적이고 일반적이지 않음: 이 주제만 가질 수 있는 순간이 적어도 하나; 라이브러리 무브는 주제가 그 동작을 가질 때만 사용.
• 독창적: 스왑 테스트 통과, 금지된 백본 사용하지 않음(originality.md), 데모나 이 스킬로 만든 마지막 필름과 샷 순서 공유하지 않음.

상대방에게 아무것도 보여주기 전에 다음 각 항목에 대해 10점 만점으로 점수를 매기십시오: 브랜드 일치, 스토리 명확성, 모션 품질, 가독성, 전환, 사운드/음성 동기화, 마무리. 8점 미만인 항목은 먼저 수정하십시오.

파일

• references/genres.md: 구조, 길이 및 형식 기본값이 있는 비디오 유형.
• references/intake.md: 인테이크 질문(기본값 포함), 사용자 여정 및 판매 포인트를 위해 리포지토리를 읽는 방법, 제품 이해 브리프.
• references/kinds/: 비디오 종류별 플레이북 (런치 필름, 히어로 광고, 설명 영상, 스토리 필름, 캐릭터 필름, 키네틱 타입, 시즐, 티저, 무드 쇼케이스, 워크스루, 쇼케이스 릴, 데이터 스토리): 질문할 내용, 취할 수 있는 형태, 세계, 동작, 예제, 함정. kinds/README.md가 메뉴입니다.
• references/plan.md: 생산 계획 형식: 한 페이지 필름, 룩 토큰, 모든 샷을 프레임별로, 키 프레임, 리스크.
• references/originality.md: 먼저 읽으십시오. 매번 독창적인 콘셉트를 위한 방법: 인간의 진실, 8가지 각도, 킬 테스트, 금지된 클리셰. 스킬의 모든 예제를 재정의합니다.
• references/patterns.md: 15개의 강력한 런치 필름을 프레임별로 연구한 필드 가이드: 거의 모든 필름이 하는 일, 키네틱 타입, 전환, 제품 작동 표시, 각도가 효과적인 경우, 구조, 프로 디테일. 콘셉트 단계에서 읽으십시오.
• references/styles.md: 12가지 개별 스타일 (시네마틱 제품 필름, 내레이션 설명, 카드 쇼케이스, 워크스루, 키네틱 타입, 데이터 스토리, 깔끔한 라이트 제품 필름, 분위기 있는 글라스, 일상의 한 장면, 캐릭터 중심, 히어로 샷, 시즐), 각각 완전한 레시피: 카메라, 텍스트, 색상, 조인, 템포, 아크, 함정.
• references/craft.md: 깊이 있는 원칙, 콘셉트 방법, 구성, 모션 어휘 (매크로 타이핑, 결과의 벽, 연결된 화면, 클릭 줌, 카메라), 타이밍.
• references/motion-tokens.md: 숫자: 곡선, 지속 시간, 스프링, 스태거, 읽기 멈춤, 휴대폰 텍스트 크기, 비...

[잘렸습니다...]

• references/voice-and-sound.md: AI 음성 도구 스크립트 형식, 페이싱, 발음, 음악/사운드.
• references/delivery.md: 채널별 내보내기 형식, 썸네일 사양, 게시글 카피 템플릿.
• assets/engine-starter.html: render(t)와 녹화 계약이 있는 템플릿 페이지.
• assets/motion.js: 무브 라이브러리 (macroType, countUp, wall, buildIn, cascade, montage, growToWord, cursor, clickZoom, morphRect, twin, shots, start).
• assets/moves-demo.html: 각 무브의 기계적 호출 시연 (샷 순서는 템플릿이 아님).
• scripts/record.mjs: --scale, --fps, --blur, --stills를 사용한 프레임 정확한 mp4 녹화.
• scripts/voice-segments.mjs: 음성 wav에서 발화된 라인 감지.
• scripts/mix.mjs: mix.json을 기반으로 오디오 믹싱.
• scripts/contact-sheet.sh: 스틸 이미지에서 연락처 시트 생성.
• scripts/study-reference.sh: 참조 비디오를 프레임별로 분석.