Motion Craft Pro · 动效工坊 Pro은(는) 무엇을 하나요?

프로그래매틱 모션 그래픽스. Claude Opus 5.5가 코드로 영상을 만드는 미학과 습관을 기준으로 합니다: 스토리보드 먼저, 더빙 다음, 스틸 프레임 검사, 마지막으로 전체 렌더링.

Kling / Jimeng 같은 AI 생성 비디오가 아닙니다. 모든 장면은 코드가 Canvas에 프레임 단위로 그려냅니다.

먼저 스킬 디렉토리 확인 (매번 필수)

engine.js / scenes.js / render.js / compose.py / tts.py / film.html / storyboard.json 모두 이 SKILL.md와 같은 디렉토리에 위치 (플랫 구조, 하위 폴더 없음).

<스킬 디렉토리> = 이 파일의 상위 디렉토리 절대 경로.

# 경로 자가 진단
python "<스킬 디렉토리>/compose.py" --check

상대 경로 python scripts/compose.py 사용 금지 — 검증 환경에서 찾을 수 없습니다.

의존성

의존성	용도
Node 18+	render.js
puppeteer-core	로컬 Chrome 구동
Chrome / Chromium	렌더링
Python 3.9+	tts / compose
edge-tts	`pip install edge-tts`
FFmpeg 전체 버전	합성 (Playwright 경량 버전 제외)

품질 기준 (이대로 만들면 'Pro')

기본 1920×1080 (1440×1080 / 1080×1920 / 1080×1080 지원)
한 화면에 한 가지 내용; 장면 전환은 페이드 아웃; 길게 유지, 짧게 등장
Spring 미세 오버슈트 (damping≈16–18, 과도한 탄성 금지)
여백: 바깥 여백 ≥ 짧은 변의 8%; 본문은 따뜻한 흰색 #f4f1ea, 강조색은 절제 (기본 청동색 #c4a574)
제목에 자간 추가; 계층별 글꼴 크기 차이 ≥ 1.5배
더빙 우선 + 가능한 WordBoundary 자막 내보내기
먼저 ≥4장 스틸 프레임 검수 후 전체 길이 렌더링
renderFrame(t) 순수 함수: Date.now() / Math.random() 사용 금지

워크플로우 (엄격한 순서)

1. 스토리보드 JSON 작성 (모든 코드보다 먼저)

storyboard.json을 복사하여 storyboard.schema.json에 맞춰 작성:

meta: 화면비, 길이, 내레이션 전문, 음색
beats[]: id, start, end, type, copy, visual
장면 유형: TitleBeat / BulletReveal / StatCounter / CompareBars / QuoteCard / EndCard

숫자로 말하고, 형용사는 쓰지 마세요. 예: 제목 86px, 등장 0.9s, 유지 2.2s — '좀 더 웅장하게' 같은 표현 금지.

2. TTS → 실제 길이 → 타임라인 재작성

python "<스킬 디렉토리>/tts.py" \
  --text-file narration.txt \
  --out "<작업 디렉토리>/voice.mp3" \
  --voice zh-CN-YunxiNeural \
  --rate=-6% \
  --captions-json "<작업 디렉토리>/captions.json" \
  --captions-vtt "<작업 디렉토리>/captions.vtt"

실제 voice.mp3 길이로 beats[].start/end와 meta.duration을 수정하세요. 시간을 먼저 고정하고 더빙하지 마세요.

자막 설명: Edge TTS가 WordBoundary를 반환하면 글자 단위로 집계합니다. 현재 대부분의 중국어 음색은 SentenceBoundary만 제공하므로, 스크립트가 쉼표/마침표 비율에 따라 구절 단위 VTT로 변환합니다.

3. film.html 채우기 (또는 템플릿 기반 수정)

동일 디렉토리 참조: engine.js, scenes.js (../assets/ 사용 금지)
스토리보드를 페이지에 포함하거나 storyboard.json과 동기화 유지
MCScenes.drawScene(...) 호출; 오른쪽 장식은 직접 작성 가능, 내용은 가급적 장면 컴포넌트 사용

4. 스틸 프레임 품질 검사 (필수)

먼저 짧은 샘플을 렌더링하거나 브라우저에서 t를 드래그하거나, 1fps로 주요 지점을 렌더링합니다. 최소한: 시작, 중간, 데이터/비교, 끝을 확인.

확인 항목: 겹침, 텍스트 넘침, 너무 어두운 부분, 정렬, 자막 가독성.

5. 전체 프레임 렌더링

node "<스킬 디렉토리>/render.js" \
  "<작업 디렉토리>/film.html" \
  "<작업 디렉토리>/frames" \
  30 \
  18

6. 합성

python "<스킬 디렉토리>/compose.py" \
  --frames "<작업 디렉토리>/frames" \
  --voice-file "<작업 디렉토리>/voice.mp3" \
  --captions "<작업 디렉토리>/captions.vtt" \
  --out "<작업 디렉토리>/out.mp4" \
  --duration 18 \
  --width 1920 --height 1080

선택 사항: --bgm music.mp3 (내레이션 덕킹), --burn-captions, 또는 --text로 compose가 인라인 TTS를 수행.

7. qa-report.json + 4장 qa-stills 확인

통과하지 못하면 스토리보드/레이아웃을 수정하고 다시 렌더링 — 억지로 제출하지 마세요.

엔진 API (engine.js)

const {
  Ease, spring, springSeg, seg, lerp, beatAlpha,
  glow, beam, drawBackdrop, createParticles, drawParticles,
  drawGrain, drawVignette, drawColorGrade,
  drawTracked, wrapCN, camera, transition, applyWipe,
  divider, card, ring, bars,
  drawCaptions, captionsFromWordBoundaries, layoutGrid, Palette
} = MC;

const { TitleBeat, BulletReveal, StatCounter, CompareBars, QuoteCard, EndCard, drawScene } = MCScenes;

Spring 권장 파라미터 (Claude 미학 기준)

용도	damping	stiffness	overshootClamping
제목 등장	16–18	140–160	false (매우 가벼운 바운스 허용)
목록 항목	18	145	true
숫자 애니메이션	14	120	false

화면비

용도	크기
기본 가로	1920×1080
강의 / 4:3	1440×1080
세로	1080×1920
정사각형	1080×1080

layoutGrid(W,H)를 사용하여 여백과 2단 레이아웃을 구하세요.

인도물

storyboard.json
film.html (재렌더링 가능)
voice.mp3 + captions.vtt / captions.json
out.mp4 (1080p 등급)
qa-report.json + qa-stills/*.png ≥ 4

범위 제한

모션 그래픽스를 제작하며, 실사 촬영이나 확산 모델 비디오가 아님
복잡한 3D / 캐릭터 퍼포먼스 / 유체는 범위 밖
Edge TTS는 실제 음성이 아니며, 감정 표현에 한계가 있음
완전한 Remotion 프로젝트(React 생태계, 서버 렌더링 클러스터)는 본 패키지에 포함되지 않음; 본 패키지는 출시 가능한 경량 디렉터 스택

Motion Craft Pro · 动效工坊 Pro