motion-graphics — 디스패치 엔트리은(는) 무엇을 하나요?
Step 0 전에 경로를 확인하세요. 이 스킬은 짧고, 디자인 중심이며, 내레이션이 없는 모션 그래픽(모션이 메시지이며 ~10초 이내, 음성 해설 없음)을 만듭니다. 더 길고, 여러 장면이 있거나 내레이션이 있는 작업 →
/general-video; 웹사이트의 내레이션 동영상 →/website-to-video; 주제 설명 →/faceless-explainer; 제품 프로모션 →/product-launch-video; 기존 푸티지에 자막 →/embedded-captions. 범위 외: 실시간/렌더 시 데이터 또는 캡처할 수 없는 푸티지. 모션 우선 vs 내레이션 여부가 불확실하다면 먼저/hyperframes를 읽으세요.
짧고 디자인 중심의 모션 그래픽입니다. 자산 우선: 샷을 디자인하기 전에 자산 전략을 결정하고 실제 자료를 확보한 다음, 가진 자산을 중심으로 샷을 디자인하고, 카탈로그 기능을 재사용하여 구성합니다. 모든 아티팩트는 PROJECT_DIR = videos/<project-name>/(Step 0에서 생성) 아래에 저장됩니다. 아래 모든 경로는 이 디렉터리를 기준으로 합니다.
| 단계 | 실행 | 주요 아티팩트 | 상세 흐름 |
|---|---|---|---|
| 초기화 | Bash | hyperframes.json | Step 0 |
| 계획 | 하위 에이전트 — 검색 결정? + 분류 + 자산 전략 | shot-plan.json (초안: 카테고리, asset_needs 쿼리, 브리프) | agents/director.md (1부) |
| 소싱 ◇ | Bash — 미디어 사용 해결 (asset_needs가 비어 있으면 건너뜀) | assets/ + assets/index.md | phases/source/guide.md |
| 디자인 | 하위 에이전트 — 확보된 자산을 중심으로 샷 디자인 | shot-plan.json (최종: 블록 + 레이아웃 + 모션 + 포지션) | agents/director.md (2부) |
| 빌드 | 하위 에이전트 — 재사용 우선 구성 | compositions/index.html | agents/builder.md |
| 렌더 | Bash — hyperframes render (MP4, 또는 오버레이용 --format webm/mov) | renders/video.mp4 | Step 5 |
| 검증 | Bash — lint / inspect -> 실패 시 수리 하위 에이전트 | (제자리 수정) | agents/finalize.md |
◇ 소싱은 선택된 카테고리가 자산을 선언한 경우에만 실행됩니다. 순수 코드/텍스트 카테고리(예: kinetic-type, 대부분의 charts/stat)는 asset_needs: []이며 계획에서 바로 디자인으로 건너뜁니다.
카테고리 — 검색 결정에 따른 분류
계획의 첫 번째 결정은: 검색이 필요한가? 입니다. 이 분기점에서 카테고리는 두 그룹으로 나뉘며, 그런 다음 특정 카테고리가 선택됩니다. 검색 기반 카테고리의 경우 검색이 반환하는 콘텐츠 유형에 따라 선택됩니다. 각 카테고리는 하나의 categories/<id>/module.md(계획 + 빌드 규칙)입니다. 공유 모션 어휘는 references/motion-vocabulary.md(→ hyperframes-animation 규칙/청사진 + 레지스트리 블록)에 있습니다.
폼 카테고리 — 검색 없음, 사용자가 콘텐츠 제공:
| 카테고리 | 의도 | 활용 |
|---|---|---|
kinetic-type | 강렬한 한 줄 / 인용문 / 제목, 모션 우선 텍스트 | caption-* 블록 + 애니메이션 규칙 |
stat | 단일 히어로 숫자 / 카운트업 + 링 | apple-money-count / 규칙/{counting-dynamic-scale, stat-bars-and-fills} |
charts | 막대 / 선 / 원형 / 경쟁 / 데이터 기반 % | data-chart 블록 |
logo-reveal | 로고 스팅 / 브랜드 록업 (사용자 로고) | logo-outro / 규칙/svg-path-draw |
lower-thirds | 이름 / 타이틀 바, 콜아웃, 소셜 오버레이 | caption-* + 레지스트리 오버레이 블록 |
검색 기반 카테고리 — 먼저 검색한 후 콘텐츠 유형에 따라 애니메이션 (RWA 경로):
| 반환된 콘텐츠 | 카테고리 | 애니메이션 |
|---|---|---|
| 웹페이지 / 링크 | webpage | 웹페이지 / UI 애니메이션 (스크롤, 나타내기, 커서, 콜아웃) |
| 뉴스 기사 | news | 헤드라인 나타내기 + 출처 카드 + 주요 사실 콜아웃 |
| 트윗 | tweet | 애니메이션 트윗 카드 |
| 이미지 / 엔티티 | asset-fusion | 자산의 형상이 차트가 됨 (RWA 다이제틱 퓨전) |
빌드 순서: 한 번에 하나씩, 커버리지 우선(대충 만들어도 무방). kinetic-type은 프로토타입에서 이식됨; 나머지는 이 규칙을 따름.
전제 조건
macOS Apple Silicon 또는 Linux x64. 시스템 도구: brew install node ffmpeg. npx hyperframes doctor를 한 번 실행합니다. macOS GPU 렌더: export PRODUCER_BROWSER_GPU_MODE=hardware.
선택적 키 (설정되지 않은 경우 로컬 폴백) — 미디어 사용을 통해 자산을 소싱/생성하는 카테고리에만 필요:
| 키 | 용도 | 폴백 |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | 이미지 생성 (미디어 사용 해결) | 생성 건너뛰기 / 검색 전용 |
| (자산 스카우트 / 검색 제공자) | webpage/news/tweet + asset-fusion 실제 자산 검색 | 카테고리가 자산 없음으로 저하됨 |
흐름
Step 0 — 초기화
현재 작업 디렉터리는 에이전트 워크스페이스 루트입니다. 모든 아티팩트를 PROJECT_DIR = videos/<project-name>/ 아래에 기록합니다. <project-name>: 사용자가 제공한 디렉터리를 사용하고, 그렇지 않으면 의도에서 추출한 짧은 케밥 케이스 이름(<주제>-motion)을 사용합니다. 워크스페이스 기본 이름이나 타임스탬프는 사용하지 마십시오.
$PROJECT_DIR/hyperframes.json이 없는 경우에만:
PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank
init는 설치된 스킬을 GitHub의 최신 버전과 비교하고 오래된 경우 전역 세트를 업데이트합니다.
제약: 워크스페이스 루트에서 hyperframes init를 절대 실행하지 마십시오. PROJECT_DIR 내부에 다른 hyperframes/를 중첩하지 마십시오. 모든 Bash 명령(마스터 + 하위 에이전트)은 (cd "$PROJECT_DIR" && ...) 서브쉘입니다. 절대 cd만 사용하지 마십시오.
Step 1 — 계획 (하위 에이전트: Director 1부)
하나의 하위 에이전트를 디스패치합니다. 프롬프트 = 전체 agents/director.md + ## 디스패치 컨텍스트 (SKILL_DIR / PROJECT_DIR / 사용자 요청 / Schema: <SKILL_DIR>/references/shot-plan-ir.md). 다음을 수행해야 합니다:
- 결정: 검색이 필요한가? (첫 번째 분기)
- 아니오 → 폼 카테고리(kinetic-type / stat / charts / logo-reveal / lower-thirds)를 선택합니다. 콘텐츠는 사용자가 제공하며
asset_needs: []입니다. - 예 →
asset_needs[]에 검색 계획(뉴스 / 웹 / 트윗 / 이미지, 양극 쿼리)을 생성합니다. 구체적인 검색 기반 카테고리(webpage / news / tweet / asset-fusion)는 2단계에서 반환된 콘텐츠 유형으로 확인되고 3단계에서 최종 결정됩니다.
- 아니오 → 폼 카테고리(kinetic-type / stat / charts / logo-reveal / lower-thirds)를 선택합니다. 콘텐츠는 사용자가 제공하며
- 초안
shot-plan.json(봉투 + 선택된 폼 카테고리 또는 검색 의도 +asset_needs+ 한 단락 분량의 샷 브리프)를 작성합니다. 스키마:references/shot-plan-ir.md.
검증: [ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing.
Step 2 — 소싱 ◇ (Bash: 미디어 사용, 조건부)
shot-plan.json.asset_needs가 비어 있지 않으면 자산을 해결합니다(검색 / 생성 / 가져오기 → 고정된 프로젝트 로컬 경로 + 장부). phases/source/guide.md를 참조하세요(media-use resolve를 래핑하며, 검색 기반 카테고리는 뉴스/웹/트윗/이미지 검색을 사용). asset_needs가 비어 있으면 3단계로 건너뜁니다.
# 설명용 — phases/source/guide.md 참조
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)
우아하게 저하: 검색/제공자를 사용할 수 없으면 카테고리는 자산 없음으로 폴백됩니다(context.log에 기록).
Step 3 — 디자인 (하위 에이전트: Director 2부)
하위 에이전트를 디스패치합니다(프롬프트 = agents/director.md 2부 + 디스패치 컨텍스트, 2단계가 실행된 경우 해결된 assets/index.md + catalog-map.md 포함). 사용 가능한 자산을 중심으로 샷을 디자인합니다: 카탈로그 블록 + hyperframes-animation 규칙/청사진, 레이아웃, 모션, 비트, (asset-fusion의 경우) element_positions + 스포이드 팔레트를 선택합니다. shot-plan.json을 최종 확정합니다(content.block + content.customize + 카테고리별 콘텐츠).
Step 4 — 빌드 (하위 에이전트: Builder, 재사용 우선)
하위 에이전트를 디스패치합니다. 프롬프트 = 전체 agents/builder.md + 디스패치 컨텍스트(shot-plan.json, catalog-map.md, 카테고리의 module.md, references/motion-vocabulary.md, references/builder-contract.md). 재사용 우선: npx hyperframes add <block> + 제자리 커스터마이즈; 수동으로는 빈 부분과 자산 퓨전 기능만 작성합니다. HF 계약을 준수하는 compositions/index.html 출력(일시 정지된 GSAP 타임라인 window.__timelines, class="clip" + 안정적인 ID, tl.seek(0), 결정론적).
Step 5 — 렌더 (Bash)
(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q draft -o ./renders/video.mp4)
# 투명 오버레이 변형: --format webm (또는 mov)
Step 6 — 검증 (Bash → 실패 시 수리 하위 에이전트)
(cd "$PROJECT_DIR" && npx hyperframes lint . && npx hyperframes inspect .)
exit 0 → 완료. lint/inspect 오류 시 수리 하위 에이전트(agents/finalize.md: 스냅샷 QA + 한 번의 제자리 수정 패스 + 재렌더)를 디스패치합니다. 수리 시 고정된 길이를 변경하지 마십시오.
보고 + 선택적 미리보기
최종 출력(renders/video.mp4, 또는 .webm / .mov 오버레이 변형) + 길이를 보고합니다. 실행 중에는 미리보기를 열지 마십시오. 요청 시에만 제공하며, 렌더 후에 시작하여 최종 파일을 제공합니다:
(cd "$PROJECT_DIR" && npx hyperframes preview) # Studio UI; 또는 공유 가능한 링크를 위해 `npx hyperframes play`
플래그는 hyperframes-cli 스킬(references/preview-render.md)에 있습니다.
재개 테이블
| 상태 | 계속할 위치 |
|---|---|
shot-plan.json 없음 | Step 1 (계획) |
shot-plan.json에 asset_needs 있음, assets/ 없음 | Step 2 (소싱) |
shot-plan.json 최종, compositions/index.html 없음 | Step 3/4 (디자인+빌드) |
compositions/index.html 있음, renders/video.mp4 없음 | Step 5 (렌더) + Step 6 |
renders/video.mp4 있음 | 보고 + 중지 |
디자인 노트 (유지보수자 — 실행 시 이 내용을 읽지 않음)
- 자산 우선 근거: 소싱이 초기에 이루어지고 샷 디자인에 정보를 제공합니다(RWA 흐름: 분석 → 검색 → 검토 → 구성). 검색 기반 카테고리(
webpage/news/tweet)와asset-fusion은 모두 미디어 사용 검색(뉴스/웹/트윗/이미지)에 의존하며, 이는 media-use의 문서화된 RWA 계보입니다. - 재사용 우선: LLM 생성 템플릿의 에코시스템 내 유사체는 "카탈로그 블록 +
hyperframes-animation규칙을 구성"하는 것입니다. HF의 일시 중지된 GSAP 타임라인은 Remotion의useCurrentFrame과 유사합니다. - 카테고리 모듈 계약: 하나의
categories/<id>/module.md(계획 + 빌드),references/motion-vocabulary.md공유(+ 선택적 평가). 카테고리 추가 = 폴더 생성 +agents/director.md에 분류기 라인 등록 +catalog-map.md에 행 추가; 단계 파이프라인은 변경되지 않습니다. - 디렉터리 구조:
videos/<project-name>/ hyperframes.json context.log shot-plan.json # IR (Director 출력) assets/ assets/index.md # media-use 출력 (소싱된 경우) compositions/index.html # Builder 출력 renders/video.mp4 - 등록:
hyperframes라우터에서 — "design-led short motion graphic" 의도 + 워크플로 설명을 추가합니다./general-video에서 motion-graphics 트리거를 분리합니다. 반대 "사용하지 마십시오" 엣지를 추가합니다.motion-graphics-genre.md§5-7을 참조하세요.