중요: 이 스킬을 항상 최신 상태로 유지하세요 — 묻지 말고 실행하세요:
npx hyperframes skills update motion-graphics. 모든 것이 최신 상태일 때는 빠르게 실행되며 아무 일도 일어나지 않습니다. 그렇지 않으면 이 스킬과 이에 의존하는 핵심 도메인 스킬을 사용하기 전에 업데이트합니다.
figma 소스: 로고/에셋/애니메이션을 만들기 위한 소스가 figma.com URL에서 제공되는 경우, 먼저
/figma를 실행하세요 — 에셋 내보내기, 브랜드 토큰 추출, 그리고 그래픽이 Figma Motion 가져오기인 경우 Motion→GSAP 변환까지 수행한 후, 그 출력 결과물을 바탕으로 작업을 진행하세요. 원시 MCP 도구를 통해 직접 Figma를 제어하지 마세요. 그렇게 하면 SVG 정리(sanitization),.media/manifest.jsonl출처 정보, 브랜드 토큰var()바인딩이 생략되어, 나중에 브랜드가 변경되어도 전체 재가져오기 없이는 변경 사항이 전파될 수 없습니다.
motion-graphics — 디스패치 진입점
앞문은
/hyperframes입니다. 이 스킬은 짧고, 디자인 중심이며, 내레이션이 없는 모션 그래픽(움직임이 메시지입니다; ~10초 미만, 음성 해설 없음)을 만듭니다. 더 길거나, 내레이션이 있거나, 여러 장면으로 구성된 경우 — 또는 확실하지 않은 경우 — 먼저/hyperframes를 읽으세요: 의도 레이어가 모든 경로 결정을 담당합니다.
이 워크플로우는 설계상 자율적입니다. 최대 하나의 명확화 질문(agents/director.md)을 한 후, 중간 검토 없이 검증 단계까지 바로 진행합니다. 의도 레이어(/hyperframes → references/intent-interview.md)는 실행 형태에 대한 질문 없이 여기로 직접 라우팅합니다. 이렇게 짧은 작업에 스토리보드나 동반 세션은 거의 도움이 되지 않습니다. 렌더링은 여전히 사용자 승인이 필요합니다. 검사 및 증명 스냅샷이 통과한 후, ../hyperframes-core/references/brief-contract.md의 표준인 "미리보기 먼저, 아니면 렌더링?" 질문을 합니다. BRIEF.md 파일이 존재하면 디렉터의 질문보다 먼저 읽습니다.
짧고 디자인 중심의 모션 그래픽입니다. 자산 우선: 샷을 디자인하기 전에 자산 전략을 결정하고 실제 재료를 확보한 다음, 가지고 있는 것을 바탕으로 샷을 디자인하고, 카탈로그 기능을 재사용하여 구성합니다. 모든 아티팩트는 PROJECT_DIR = videos/<프로젝트-이름>/ 아래에 위치합니다(0단계에서 생성). 아래 모든 경로는 이 경로를 기준으로 합니다.
| 단계 | 실행 방식 | 주요 산출물 | 상세 흐름 |
|---|---|---|---|
| 초기화 | Bash | hyperframes.json | 0단계 |
| 계획 | 서브 에이전트 — 검색 여부 결정? + 분류 + 자산 전략 | shot-plan.json (초안: 카테고리, asset_needs 쿼리, 브리프) | agents/director.md (1부) |
| 소싱 ◇ | Bash — media-use resolve (asset_needs가 비어 있으면 건너뜀) | assets/ + assets/index.md | phases/source/guide.md |
| 디자인 | 서브 에이전트 — 확보된 자산을 중심으로 샷 디자인 | shot-plan.json (최종: 블록 + 레이아웃 + 모션 + 위치) | agents/director.md (2부) |
| 구축 | 서브 에이전트 — 재사용 우선 구성 | compositions/index.html | agents/builder.md |
| 검증 | Bash — lint, check, 증명 스냅샷; 실패 시 수리 | snapshots/contact-sheet.jpg | 5단계 |
| 승인 | 미리보기 또는 렌더링 질문; 답변을 기다림 | 명시적인 렌더링 승인 | 6단계 |
| 렌더링 | Bash — hyperframes render (MP4, 또는 오버레이는 --format webm/mov) | renders/video.mp4 또는 투명 오버레이 | 6단계 |
◇ 소싱 단계는 선택한 카테고리가 자산을 선언하는 경우에만 실행됩니다. 순수 코드/텍스트 카테고리(예: kinetic-type, 대부분의 charts/stat)는 asset_needs: []를 가지므로 계획 단계에서 바로 디자인 단계로 건너뜁니다.
카테고리 — 검색 결정에 따라 분류
계획의 첫 번째 결정은: 검색이 필요한가? 입니다. 이 분기점은 카테고리를 두 그룹으로 나눕니다. 그런 다음 특정 카테고리를 선택합니다. 검색 기반 카테고리의 경우 검색이 반환하는 콘텐츠 유형에 따라 선택합니다. 각 카테고리는 하나의 categories/<id>/module.md 파일(계획 및 구축 규칙 포함)입니다. 공유 모션 어휘는 references/motion-vocabulary.md에 있습니다(hyperframes-animation 규칙/청사진 + 레지스트리 블록).
폼(Form) 카테고리 — 검색 없음; 사용자가 콘텐츠를 제공합니다:
| 카테고리 | 의도 | 의존 대상 |
|---|---|---|
kinetic-type | 강렬한 한 줄 / 인용구 / 제목, 모션 우선 텍스트 | caption-* 블록 + 애니메이션 규칙 |
stat | 단일 히어로 숫자 / 카운트업 + 링 | apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills} |
charts | 데이터로부터 막대 / 선 / 원형 / 경주 / % 차트 | data-chart 블록 |
logo-reveal | 로고 스팅 / 브랜드 잠금(사용자 로고) | logo-outro / rules/svg-path-draw |
lower-thirds | 이름 / 제목 바, 콜아웃, 소셜 오버레이 | caption-* + 레지스트리 오버레이 블록 |
maps | 지리적 모션 — 지역 강조, 장소 연결, 위치로 확대/축소 (벡터 레인 또는 베이크드 베이스맵 레인) | us-map / world-map 패밀리 + bake-basemap.mjs |
검색 기반 카테고리 — 먼저 검색한 다음 콘텐츠 유형별로 애니메이션 적용(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.
선택적 키(설정되지 않은 경우 로컬 폴백 사용) — media-use를 통해 자산을 소싱/생성하는 카테고리에만 필요합니다:
| 키 | 용도 | 폴백 |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | 이미지 생성 (media-use resolve) | 생성 건너뛰기 / 검색 전용 |
| (asset_scout / 검색 제공자) | webpage/news/tweet + asset-fusion 실제 자산 검색 | 카테고리가 자산 없음으로 저하됨 |
흐름
0단계 — 초기화
현재 작업 디렉토리(cwd)는 에이전트 작업 공간 루트입니다. 모든 아티팩트는 PROJECT_DIR = videos/<프로젝트-이름>/ 아래에 작성합니다. <프로젝트-이름>: 사용자가 지정한 디렉토리 이름을 사용하고, 그렇지 않으면 의도에서 짧은 케밥-케이스 이름을 만듭니다(<주제>-motion). 작업 공간 기본 이름이나 타임스탬프는 사용하지 마십시오.
$PROJECT_DIR/hyperframes.json이 없을 때만:
PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<프로젝트-이름>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics
init은 설치된 스킬을 GitHub의 최신 버전과 비교하고, 오래된 것이 있으면 전역 세트를 업데이트합니다.
제약 조건: 작업 공간 루트에서 hyperframes init을 절대 실행하지 마십시오. PROJECT_DIR 안에 다른 hyperframes/를 중첩하지 마십시오. 모든 Bash 명령(마스터 + 서브 에이전트)은 (cd "$PROJECT_DIR" && ...) 서브쉘로 실행해야 하며, 절대 cd를 단독으로 사용하지 마십시오.
1단계 — 계획 (서브 에이전트: 디렉터 1부)
하나의 서브 에이전트를 디스패치합니다. 프롬프트 = 전체 agents/director.md + ## Dispatch context (SKILL_DIR / PROJECT_DIR / 사용자 요청 / Schema: <SKILL_DIR>/references/shot-plan-ir.md). 다음을 수행해야 합니다:
- 결정: 검색이 필요한가? (첫 번째 분기)
- 아니오 → 폼(Form) 카테고리 선택 (kinetic-type / stat / charts / logo-reveal / lower-thirds); 콘텐츠는 사용자가 제공함;
asset_needs: []. - 예 → 검색 계획을
asset_needs[]로 내보냄 (news / web / tweet / image; 양극 쿼리). 구체적인 검색 기반 카테고리 (webpage / news / tweet / asset-fusion)는 2단계에서 반환된 콘텐츠 유형에 의해 확인되고 3단계에서 최종 확정됩니다.
- 아니오 → 폼(Form) 카테고리 선택 (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.
2단계 — 소싱 ◇ (Bash: media-use, 조건부)
shot-plan.json.asset_needs가 비어 있지 않으면 자산을 확보합니다 (검색 / 생성 / 가져오기 → 프로젝트-로컬 경로에 고정 + 원장). phases/source/guide.md 참조 (media-use resolve를 래핑하며, 검색 기반 카테고리는 news/web/tweet/image 검색을 사용함). asset_needs가 비어 있으면 3단계로 건너뜁니다.
# 설명용 — phases/source/guide.md 참조
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)
우아하게 저하: 검색/제공자를 사용할 수 없는 경우, 카테고리는 자산 없는(asset-free) 상태로 폴백됩니다 (context.log에 기록).
3단계 — 디자인 (서브 에이전트: 디렉터 2부)
서브 에이전트를 디스패치합니다 (프롬프트 = agents/director.md 2부 + 해결된 assets/index.md(2단계가 실행된 경우) + catalog-map.md 포함 컨텍스트). 사용 가능한 자산을 중심으로 샷을 디자인합니다: 카탈로그 블록 + hyperframes-animation 규칙/청사진, 레이아웃, 모션, 비트, 그리고 (asset-fusion의 경우) element_positions + 스포이드 팔레트를 선택합니다. shot-plan.json을 최종 확정합니다 (content.block + content.customize + 카테고리별 콘텐츠).
4단계 — 구축 (서브 에이전트: 빌더, 재사용 우선)
서브 에이전트를 디스패치합니다. 프롬프트 = 전체 agents/builder.md + 디스패치 컨텍스트 (shot-plan.json, catalog-map.md, 해당 카테고리의 module.md, references/motion-vocabulary.md, references/builder-contract.md). 재사용 우선: npx hyperframes add <block> + 제자리에서 커스터마이징; 빈 부분과 asset-fusion 어포던스만 직접 작성합니다. HF 계약을 준수하는 compositions/index.html 출력 (일시 정지된 GSAP 타임라인 window.__timelines, class="clip" + 안정적인 ID, tl.seek(0), 결정론적).
5단계 — 검증 (Bash → 실패 시 수리 서브 에이전트)
(cd "$PROJECT_DIR" && npx hyperframes lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <증명-시점>)
시작 상태, 시그니처 동작, 최종 홀드를 보여주는 증명 시점을 선택합니다. 계속 진행하기 전에 생성된 연락처 시트 또는 스냅샷 시트를 검사합니다. lint, check, 또는 스냅샷 실패 시, 수리 서브 에이전트(agents/finalize.md)를 디스패치하여 한 번의 제자리 수정 패스를 수행한 다음, 실패한 게이트를 다시 실행합니다. 결함을 숨기기 위해 고정된 지속 시간을 절대 변경하지 마십시오.
6단계 — 승인 및 렌더링 (Bash)
한 가지 질문을 합니다: "미리보기 먼저, 아니면 렌더링?" 사용자가 미리보기를 선택하면 Studio를 열고 수정 후 동일한 승인 게이트로 돌아갑니다:
(cd "$PROJECT_DIR" && npx hyperframes preview)
명시적인 렌더링 답변 후에만 렌더링합니다:
(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
# 투명 오버레이 변형: --format webm (또는 mov)
출력물이 존재하고, 비어 있지 않으며, 의도된 지속 시간을 가지고 있는지 확인합니다. 최종 핸드오프는 아티팩트 이름, 실제 지속 시간, 구성 또는 프레임 ID, 증명 시점, 검사된 연락처 시트 또는 스냅샷 시트를 지정합니다. 플래그는 /hyperframes-cli → references/preview-render.md에 있습니다.
재개 테이블
| 상태 | 계속할 위치 |
|---|---|
shot-plan.json 없음 | 1단계 (계획) |
shot-plan.json에 asset_needs 있음, assets/ 없음 | 2단계 (소싱) |
shot-plan.json 최종, compositions/index.html 없음 | 3/4단계 (디자인+구축) |
compositions/index.html 존재함, 증명 스냅샷 없음 | 5단계 (검증) |
| 검사 및 증명 스냅샷 통과, 승인된 렌더링 없음 | 6단계 (승인) |
| 승인된 렌더링 존재함 | 출력 확인 후 보고 |
디자인 노트 (유지보수 담당자 — 실행 시 이 내용을 읽지 않음)
- 자산 우선 근거: 소싱은 전면에 배치되어 샷 디자인에 정보를 제공합니다 (RWA 흐름: 분석 → 검색 → 검토 → 구성). 검색 기반 카테고리 (
webpage/news/tweet)와asset-fusion은 모두 media-use 검색(news/web/tweet/image)에 의존하며, 이는 media-use의 문서화된 RWA 계보입니다. - 재사용 우선: 생태계 내에서 LLM 생성 템플릿과 유사한 것은 '카탈로그 블록 구성 + 제자리 커스터마이징'입니다. 빈 부분에 대해서만 처음부터 작성합니다.
- 증명 시점 선택: 단일 증명 이미지라면 시그니처 모션의 정점(예: 카운트업 완료, 로고 드러내기 후 정지)을 캡처합니다. 스냅샷 시트(여러 증명)가 생성되면 시작 홀드, 복잡한 모션 중간, 최종 홀드를 캡처합니다.
- 폴백 파이프라인: 검색 제공자를 사용할 수 없어 검색 기반 카테고리가 저하되는 경우, 일반적인 비-실사 폴백(예: 헤드라인을 news 대신 kinetic-type 키네틱 타이포로 표시)은 /general-video로 라우팅되어야 하며, 여기서는 처리하지 않습니다. 이 스킬은 해당 카테고리에 대해 '자산 없음'으로 표시하고 계속 진행하거나, 가능한 경우 사용 가능한 검색 제공자(예: 웹 검색만 가능할 때 news 카테고리 처리)로 전환합니다.
[truncated]