Pro Motion Graphics (V2 아키텍처)
시니어 기술 모션 디렉터가 제작한 듯한 깔끔하고 결정론적이며 스튜디오 수준의 모션 그래픽 비디오를 제작하세요. 이 스킬은 엄격한 안티-슬롭 시각적 표준, 수학적 물리학, 다중 엔진 라우팅, 그리고 종단 간 10단계 제작 파이프라인을 적용합니다.
이 스킬을 활성화해야 하는 경우
- 프로그래매틱 비디오 코드(Remotion / React, HTML/CSS/SVG + GSAP, 또는 HTML5 Canvas)를 생성할 때.
- 비디오 카테고리 제작: 소셜 릴스/쇼츠(
9:16), 브랜드 프로모(16:9/1:1), SaaS 제품 런칭, UI 마이크로데모, 시네마틱 키네틱 타이포그래피, 또는 기술 설명 영상. - 'AI 슬롭'(탁한 블러 얼룩, 네온 메시 글로우, 일반적인 그라데이션, 고정되지 않은 CSS 페이드, 기계적인 선형 이징)처럼 보이는 애니메이션을 리팩토링할 때.
- 코드를 작성하기 전에 프레임 정확한 스토리보드, 수학적 타이밍, 사운드 디자인 동기화를 계획할 때.
모델 실행 규칙 (Sonnet 및 Haiku 최적화)
- 형용사 대신 숫자: 모든 미적 의도를 정확한 숫자 토큰(프레임 수, 스프링
stiffness/damping, 큐빅 베지어 곡선, 8px 그리드 증분, hex/OKLCH 색상)으로 직접 변환하세요. 모호한 형용사로 시각적 폴리시를 설명하지 마십시오. - 결정론적 프레임 수학: 모든 애니메이션은 반드시
frame변수 또는 명시적 타임라인progress($0.0 \to 1.0$)에 의해 엄격하게 구동되어야 합니다. 시드가 없는Math.random(),setTimeout, 또는 렌더링 중에 동기가 해제되는 고정되지 않은 CSSinfinite키프레임을 절대 사용하지 마십시오. - GPU 안전 속성만 사용:
transform(translate3d,scale,rotate),opacity,clip-path, 또는 SVGstroke-dashoffset을 애니메이션화하세요.width,height,top,left, 또는 무거운filter: blur()를 프레임별로 애니메이션화하지 마십시오. - React Hooks 위생 규칙: Remotion에서
spring()은 순수 계산 함수입니다. 수학적 헬퍼 함수 앞에use를 절대 붙이지 마십시오 (예:useStaggerSpring()대신getStaggerSpringProgress()를 사용). 이는.map()루프 내에서 React Hooks 규칙 위반을 방지합니다.
다중 엔진 라우팅 매트릭스
프로젝트 코드를 생성하기 전에 다중 엔진 선택 가이드 에 따라 브리핑을 평가하십시오:
- 엔진 A: Remotion (React): 복잡한 UI 목업, SaaS 런칭, 모듈식 다중 씬 비디오, 데이터 기반 릴스, 프레임 정확한 CLI 렌더링에 가장 적합합니다.
- 엔진 B: HTML/CSS/SVG + GSAP: 키네틱 타이포그래피, 에디토리얼 브랜드 매니페스토, SVG 로고 스트로크 애니메이션, 가벼운 브라우저 재생에 가장 적합합니다. GSAP 패턴 을 참조하십시오.
- 엔진 C: HTML5 Canvas: 절차적 그래픽, 입자 네트워크, 수학적 애니메이션, 생성적 시각 효과에 가장 적합합니다.
10단계 비디오 제작 파이프라인
모든 프로젝트에 대해 다음 순차적 단계를 따르십시오:
1단계: 브리핑 이해
대상 플랫폼, 종횡비, 지속 시간($t$), FPS, 핵심 메시지, 시각적 톤, 사용 가능한 에셋을 식별하십시오. 필요한 경우에만 누락된 핵심 질문을 하십시오 (최대 4개). 세부 사항이 명시되지 않은 경우 스튜디오 기본값을 적용하십시오:
- 종횡비: 데스크톱/웹의 경우
16:9(1920x1080); 소셜의 경우9:16(1080x1920). - 프레임레이트: UI 및 소셜의 경우
60fps; 에디토리얼 및 설명 영상의 경우30fps; 시네마틱 유형의 경우24fps.
2단계: 카테고리 라우팅
요청을 카테고리 플레이북 의 6개 카테고리 청사진 중 하나에 매핑하십시오:
- 카테고리 A: 소셜 릴스, TikTok 및 쇼츠 (
9:16, 60fps, 12s–30s) - 카테고리 B: 브랜드 프로모션 및 매니페스토 (
16:9/1:1, 30fps, 20s–45s) - 카테고리 C: SaaS 제품 런칭 비디오 (
16:9, 60fps, 45s–90s) - 카테고리 D: 기능 하이라이트 / UI 마이크로데모 (
1:1/4:5, 60fps, 10s–25s) - 카테고리 E: 시네마틱 키네틱 타이포그래피 (
16:9/9:16, 24/30fps, 15s–45s) - 카테고리 F: 설명 영상 및 교육 비디오 (
16:9, 30/60fps, 45s–120s). 자세한 내용은 설명 영상 플레이북 을 참조하십시오.
3단계: 에셋 발견 및 검증
진정한 브랜드 에셋(로고, UI 스크린샷, 글꼴, 색상 팔레트)을 수집하십시오.
- 종횡비를 왜곡하지 않고 진정한 브랜드 로고를 그대로 유지하십시오.
- 실제 제품 스크린샷이 제공된 경우, 이를 조작된 플레이스홀더 UI로 절대 대체하지 마십시오.
scripts/check-assets를 사용하여 에셋 경로를 검증하십시오.
4단계: 스토리보드 계획 및 수학적 타이밍
초와 FPS에서 프레임 번호를 계산하는 명시적 타임라인 테이블을 작성하십시오: $$\text{frame} = \text{round}(t \times fps)$$ 씬 시작/종료 시간, 시각적 설명, 카메라 전환, 오디오 큐를 정의하십시오. 씬 지속 시간이 총 대상 지속 시간과 일치하고 우발적인 중복이 없도록 하십시오.
5단계: 중앙 집중식 디자인 시스템 (BRAND_CONFIG)
씬 JSX/HTML을 작성하기 전에 디자인 토큰을 설정하십시오:
- 색상: 안티-슬롭 규칙 에서 하나의 선별된 시스템을 선택하십시오 (스위스 기술 다크, 에디토리얼 웜 페이퍼, 또는 키네틱 모노).
- 타이포그래피: 타이포그래피 가이드 를 따르십시오 (네거티브 트래킹
-0.04em을 사용하는 디스플레이 + 포지티브 트래킹+0.08em및tabular-nums를 사용하는 모노스페이스 메타데이터). - 기하학: 집중형 모서리 반경 수학을 적용하십시오: $R_{inner} = \max(0, R_{outer} - Padding)$.
6단계: 모듈식 제작 코드
templates/에서 선택한 엔진 스타터를 기반으로 깔끔하고 모듈식 코드를 생성하십시오:
templates/remotion-starter/:config.ts,motion.ts및 컴포넌트가 포함된 모듈식 Remotion 컴포지션.templates/gsap-starter/: 프레임 결정론적 GSAP 타임라인 설정.templates/canvas-starter/: 절차적 2D 캔버스 드로우 루프.scripts/validate-project로 구조를 검증하십시오.
7단계: 오디오 및 사운드 디자인
오디오 디자인 가이드 에 따라 사운드 레이어를 통합하십시오:
- 음성 해설 중 배경 음악을 12–16dB 낮추십시오.
- 전환 효과음을 시각적 중간 지점보다 2프레임 앞서 정렬하고, 충격음을 정확한 시각적 접촉 프레임에 맞추십시오.
- 모든 음악이 로열티 프리이며 상업적 사용에 라이선스가 부여되었는지 확인하십시오.
8단계: 렌더링 및 인코딩
고품질 결정론적 설정을 사용하여 렌더링하십시오:
# Remotion 고품질 웹 MP4 (H.264, CRF 18, YUV420P)
npx remotion render src/index.ts MainComposition out/video.mp4 --codec=h264 --crf=18
9단계: 시각적 품질 보증
비디오 품질 체크리스트 를 실행하십시오:
- 25%, 50%, 75%, 100% 지속 시간에서 정지 프레임 미리보기를 렌더링하십시오 (
npx remotion still ... --frame=N). - 텍스트 잘림, 8px 그리드 정렬, 대비 비율, 안전 영역 (
9:16상단 220px / 하단 340px)을 감사하십시오. scripts/inspect-output out/video.mp4를 사용하여 최종 비디오 출력을 검증하십시오.
10단계: 전달 및 인계
다음을 제공하십시오:
- 렌더링된 비디오 출력 파일 (또는 정확히 재현 가능한 렌더 명령).
- 템플릿 아키텍처와 일치하는 깔끔한 소스 프로젝트.
public/에 정리된 참조 에셋.- 실행 지침 및 검증 로그.
필수 품질 게이트
모션 그래픽 작업을 마무리하기 전에 다음을 확인하십시오:
- 일반적인
filter: blur()블롭 또는 보라색에서 파란색으로의 AI 그라데이션 없음. - React Hooks 규칙 위반 없음 (
getStaggerSpringProgress와 같은 순수 헬퍼 함수 사용). - 모든 애니메이션이
frame또는 정규화된progress에 의해 결정론적으로 구동됨. -
node scripts/validate-project.js <project-dir>이 코드 0으로 종료됨. -
node scripts/check-assets.js <project-dir>이 코드 0으로 종료됨. -
node scripts/inspect-output.js <output-path>를 통해 렌더 출력이 검증됨.