Communitygithub.com

모션 필름 스튜디오

Chrome이 프레임 단위로 그리는 코드로, 사운드 디자인과 노트북 목업, 수치로 잠그는 품질 관문을 갖춘 완성 모션 그래픽 영상을 만든다.

모션 필름 스튜디오란 무엇인가요?

이 스킬은 모션 그래픽, 런치 필름, 제품 설명, 앱 프로모, 숏폼을 코드만으로 끝냅니다. HTML, Canvas, CSS를 Chrome이 프레임마다 렌더합니다. 실제 사운드 디자인, 화면이 노트북에 들어간 목업, 취향이 아니라 측정된 숫자의 품질 관문을 포함합니다. After Effects, Remotion, 유료 도구에 의존하지 않습니다.

지원 대상~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/whatever0148-cmd/motion-film-studio/tree/HEAD

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

Motion Film Studio

모션 디자인 배경이 없는 사람을 위해 모션 그래픽 영상을 제작합니다. 모든 것은 코드로 이루어지며, 사용자 컴퓨터에서 실행되고 비용이 들지 않으며, 추측 대신 스캐너로 검증됩니다. 이 방법으로 제작된 영상은 시청자의 주의를 사로잡고, 측정된 품질 게이트를 통과하여 Instagram에 노트북 화면 릴로 배포됩니다.

모든 보고서에서 정직하세요: 스캐너는 측정할 뿐, 보거나 듣지 않습니다. 영상이 '시청되었다', '듣기 좋았다', '바이럴 될 것'이라고 절대 말하지 마세요. 무엇이 측정되었고, 사람이 여전히 보고 들어야 할 것이 무엇인지 말하세요.

0단계: 항상 첫 실행 검사 수행 (건너뛰지 말고 추측하지 마세요)

  1. 워크스페이스를 찾거나 생성합니다(기본값 ~/motion-studio). <workspace>/direct-engine/node_modules가 없으면 scripts/setup.sh <workspace>를 실행합니다(Node 20+, ffmpeg, Chrome 필요; 스크립트가 정확히 무엇이 누락되었는지 알려줍니다). 그런 다음 python3 scripts/doctor.py <workspace>를 실행하고 결과를 일반 언어로 사용자에게 알려줍니다.
  2. 그런 다음 무엇이든 빌드하기 전에 사용자를 인터뷰합니다(references/onboarding.md 로드). 다음 순서대로, 한 번에 하나의 짧은 메시지로 번호를 매겨 질문해야 합니다:
    • 영상의 목적은 무엇이며, 누가 시청하고, 시청 후 무엇을 하길 바라나요(댓글, 클릭, 구매)?
    • 마음에 드는 레퍼런스 영상이 있나요? 있다면 파일을 <workspace>/references/에 넣어 달라고 하고 분석합니다(references/reference-analysis.md 로드). 없다면 그렇게 말하고 하우스 스타일을 사용하며, 링크를 붙여넣으면 살펴보겠다고 제안합니다.
    • 사운드 효과, 음성(자체 녹음 또는 텍스트 음성 변환) 및 음악이 있나요? 없다면 어떤 무료 옵션이 있는지 알려주고 설정을 도와드리겠다고 제안합니다(references/sound-and-music.md 로드). 사운드는 선택적 옵션이 아닙니다: 실제 녹음된 사운드가 없는 영상은 싸구려로 느껴집니다.
    • 화면에 실제 증거: 실제 숫자, 스크린샷, 터미널 출력, 제품 UI. 숫자를 절대 지어내지 마세요.
    • 플랫폼과 비율: 16:9 또는 9:16(references/social-ship.md 로드; Instagram Reels는 9:16입니다).
  3. 계획을 5줄로 요약해서 말하고, 승인을 기다린 후 빌드합니다.

파이프라인 (각 단계에는 레퍼런스가 있으며, 해당 단계에 도달하면 로드하세요)

  1. 브리프 한 문장 약속, 5~8개 장면, 장면당 하나의 포커스. 첫 장면은 훅으로.
  2. 대본 짧은 음성 대사(각 3~7단어)와 함께 음소거 상태에서도 메시지가 전달되는 화면상 텍스트. 불용어, 줄표, AI 말투("Unlock", "Elevate", "seamless") 금지.
  3. 룩 3가지 색상 팔레트, 하나의 폰트 패밀리, 깊이감(소프트 라이트, 보케, 비네트), 하나의 포컬 오브젝트. references/craft-rules.md 로드.
  4. 빌드 assets/starter를 <workspace>/projects/<name>/에 복사하고 scene/main.js를 편집. 장면을 작성하기 전에 references/scene-contract.md를 로드. 먼저 스틸 이미지를 렌더링한 다음 --scale 1로 드라이 렌더, 마지막으로 --scale 2로 최종 렌더.
  5. 사운드 장면 내 큐 시트, 실제 녹음된 사운드, 음성, 음악, -14 LUFS로 믹싱하고 음성은 모든 것보다 12 dB 높게. references/sound-and-music.md 로드.
  6. 검증 scripts/scan_all.sh 실행, 모든 P0 및 P1 수정, 재스캔, 반복. references/qa-and-fix-loop.md 로드.
  7. 출시 소셜 내보내기, 캡션, 게시 계획, 그리고 선택적 노트북 목업(references/laptop-mockup.md). references/social-ship.md 로드.

하드 룰 (취향이 아닌 측정된 숫자입니다)

  • 프레임 0은 완성된 구도여야 하며, 절대 검은색이 아님. 0.35초 내에 시각적으로 무언가 변하고 첫 1초 안에 움직임이 있어야 함. 최소 2.6초마다 하나의 가시적 이벤트. 최소 0.5초 간격으로 두 개의 필수 시청 이벤트.
  • 반드시 읽어야 할 텍스트는 1920px 프레임에서 최소 54px(휴대폰에서 약 11pt). 더 작은 텍스트는 텍스처로만 사용되며 메시지를 전달해서는 안 됨.
  • 어떤 것도 프레임당 45px 이상 움직이지 않음(순간 이동 금지). UI의 경우 오버슈트 최대 10%, 히어로 팝의 경우 15%. transform과 opacity만 애니메이션. 텍스트에 will-change 금지. 그레인은 미묘하게 유지.
  • 작은 강조 텍스트는 최소 3:1 이상의 대비가 필요. 밝은 라임이나 노란색을 크림색 배경에 사용 금지: 작은 텍스트에는 더 어두운 잉크 버전을 사용.
  • 오디오: -14 LUFS 통합, 트루 피크 -1 dBTP 이하, 음성은 배경음보다 최소 12 dB 높게, 히트 사운드는 500Hz 이상에서 에너지를 유지하여 휴대폰 스피커에서도 들리도록, 모든 가시적 히트는 해당 프레임에 사운드가 있어야 함.
  • 화면의 모든 숫자는 실제 데이터와 해당 출처에서 비롯되어야 함. 절대 통계를 지어내지 마세요.
  • 장면당 하나의 아이디어, 하나의 포컬 오브젝트, 세 개 이하의 움직이는 영역. 커서는 조용한 원형 오브; 장면 전환은 그것을 유발한 것에서 성장.

명령어 (워크스페이스 = ~/motion-studio)

node direct-engine/render_direct.mjs --scene projects/<name>/scene/index.html --out projects/<name>/out/<name>_silent.mp4 --scale 2 --workers 4
node direct-engine/render_direct.mjs --scene ... --out /tmp/x.mp4 --scale 1 --workers 1 --stills 1.0,4.0 --stills-out projects/<name>/stills
bash scripts/make_audio.sh <workspace> <silent.mp4> <final.mp4> [voice.wav] [music.wav]
bash scripts/scan_all.sh <workspace> <final.mp4> [payoff times] [1920x1080]
bash scripts/laptop_mockup.sh <workspace> <green_screen_laptop.jpg> <final.mp4> <out_9x16.mp4>

모션 린트: node qa/sample_scene.mjs --scene <index.html> --from 0 --to <frames> --out series.json 그 다음 node qa/motion_lint.mjs series.json.

효율적으로 작업하는 방법

작은 단계, 짧은 메시지, 스캔이 필요할 때만 다시 렌더링(전체 렌더링은 몇 분 소요). 많은 하위 에이전트를 실행하지 마세요. 렌더링 전에 스틸 이미지로 룩을 확인하세요. 각 수정 그룹 후에 재스캔하세요.

보고

다음으로 마무리: 측정한 것(실제 숫자), 사람이 여전히 보고 들어야 할 것, 파일 경로. 검사에 실패했고 그것을 면제했다면, 어떤 것인지와 이유를 말하세요.

관련 스킬