HyperFrames — 여기서 시작하세요
HyperFrames는 HTML로부터 비디오를 렌더링합니다. 컴포지션은 data-* 속성으로 타이밍을 선언하고, 애니메이션 런타임이 탐색 가능하며, 미디어 재생이 프레임워크에 의해 관리되는 HTML 파일입니다. 전체 제작 계약은 /hyperframes-core에 있습니다. 컴포지션 HTML을 작성하기 전에 먼저 읽으세요.
아래는 기능 맵(요청 시 로드되는 도메인 스킬)과 의도 라우터("~ 만들어 줘" 요청에 대한 워크플로우 선택기, 일반적으로 비디오이지만 탐색 가능한 덱이나 컴포지션 포트일 수도 있음)입니다. 이 구분은 결과 유형이 아닌 소유권에 기반합니다. 워크플로우는 종단 간 결과물(자체 프로젝트 디렉토리, 단계별 게이트, 하위 에이전트, 최종 아티팩트)을 소유합니다. 도메인 스킬은 워크플로우가 중간에 가져와 사용하는 기능 계층이며, 작업을 소유하지 않습니다.
기능 맵 — 도메인 스킬
요청 시 로드하는 원자적 기능입니다. 전체 워크플로우가 아니며, 종단 간 작업을 소유하지 않습니다. "~ 만들어 줘" 의도는 아래 의도 라우터를 사용하세요.
| 원하는 작업 | 스킬 |
|---|---|
HTML 컴포지션 제작/편집 — data-* 계약, 클립, 트랙, 하위 컴포지션, 변수 | /hyperframes-core |
| 애니메이션 — 원자적 모션, 씬 청사진, 전환, 런타임 어댑터(GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU) | /hyperframes-animation |
탐색 가능한 키프레임 제작 — GSAP 타임라인, CSS 키프레임, Anime.js, WAAPI, FLIP, 패스, 마스크, SVG 모프/드로우, 3D 깊이, hyperframes keyframes 진단 | /hyperframes-keyframes |
크리에이티브 방향 — frame.md / design.md, 팔레트, 타이포그래피, 내레이션, 비트 계획, 오디오 반응 | /hyperframes-creative |
| 미디어 — BGM, SFX, 이미지, 아이콘, 브랜드 로고, 음성, 컬러 그레이딩, LUT 해결/생성; TTS 음성 해설, 자막 생성, 배경 제거, 캡션; 프로젝트 간 재사용 | /media-use |
| CLI 개발 루프 — 초기화, 린트, 검증, 미리보기, 렌더링, 게시, 진단 | /hyperframes-cli |
레지스트리 블록/컴포넌트 설치 (hyperframes add) | /hyperframes-registry |
| Figma 콘텐츠 가져오기 — 에셋, 토큰, 컴포넌트, 스토리보드→재구성된 모션(REST/CLI); 모션(MCP), 셰이더(MCP 소스/네이티브 내보내기) | /figma |
의도 라우팅 — 워크플로우 선택
이 섹션은 최상위 워크플로우만 알고 있습니다. 내부 참조나 위의 도메인 스킬은 로드하지 않습니다.
라우팅 전 — 명세가 아닌 입력 확인
라우팅은 비디오의 내용(입력과 주제)을 알아야 합니다. URL, 제품, 주제 또는 에셋 없이 "우리 회사 것에 대한 영상 만들어 줘"와 같이 지정되지 않은 경우, 워크플로우에 진입하기 전에 질문하세요. 워크플로우를 결정하는 것이 라우팅 결정입니다. 최대 두 가지 질문:
- 입력 — 제품(URL/브리프), 일반 웹사이트, GitHub PR, 설명할 주제, 또는 기존 토킹헤드 영상?
- Figma 소스 — 입력이 figma.com URL인 경우, 아래에서 선택된 워크플로우와 관계없이
/figma가 먼저 에셋/토큰/(컴포넌트/스토리보드)를 추출합니다. 해당 워크플로우는/figma의 출력물을 기반으로 구축됩니다. 원시 MCP 도구로 직접 Figma를 구동하지 마세요(SVG 정리, 출처, 브랜드 토큰 바인딩이 누락됨).
모드 — 요청에 지속적인 자율 신호("놀라게 해줘", "네가 결정해", "그냥 만들어")가 포함된 경우, 이를 기록하고 워크플로우에 전달하세요. 전체 실행이 자율 모드로 진행되며, 이후 단계에서 다시 묻지 않습니다. 신호가 없으면 워크플로우가 첫 번째 브리프 질문으로 모드를 묻습니다. 기본값은 협업 모드입니다. (/motion-graphics는 기본적으로 자율 모드입니다.) 의미 체계: hyperframes-core → references/brief-contract.md.
명세 기본값 — 상태를 묻지 마세요 (경로를 변경하지 않음): 종횡비는 대상에서 파생됩니다. 소셜 피드(X / LinkedIn / Instagram) → 정사각형 1:1, TikTok / Reels / Shorts → 9:16, YouTube / 임베드 / 알 수 없음 → 16:9; 내레이션/캡션 언어 = 사용자 언어. 선택된 워크플로우는 첫 번째 단계에서 자체 세부 사항을 재확인합니다(필드 의미 체계: hyperframes-core → references/brief-contract.md).
워크플로우 치트 시트
| 워크플로우 | 사용 목적 |
|---|---|
/product-launch-video | 제품 판매 (SaaS, 앱, 회사/제품 사이트) — URL, 브리프 또는 스크립트 → 프로모션. 사이트 이름만 언급된 경우에도 상업적 URL의 기본값. |
/website-to-video | 사이트 자체를 보여줌 — 사이트 스크린샷으로 구축된 투어/쇼케이스. 비상업적 사이트(포트폴리오, 블로그, 문서, 개인, 이벤트) 또는 사용자가 프로모션이 아닌 투어를 원할 때. |
/faceless-explainer | 텍스트로 주제/개념 설명 — 제품이나 URL 없음; 모든 시각 자료는 LLM이 창작 |
/pr-to-video | GitHub PR / 코드 변경 → 체인지로그 / 기능 공개 / 수정 / 리팩터 설명 영상 |
/embedded-captions | 기존 토킹헤드 영상에 캡션/자막 추가 (영상 자체는 수정하지 않음) |
/talking-head-recut | 기존 토킹헤드 영상을 디자인된 그래픽 오버레이 (로우어 서드, 데이터 콜아웃, 키네틱 타이틀, 풀인용구)로 패키징 |
/motion-graphics | 짧은(~10초 미만), 내레이션 없는 작품으로 모션 자체가 메시지인 경우 — 키네틱 타입, 통계/차트 히트, 로고 스팅, 애니메이션 지도, 애니메이션 트윗/헤드라인, 독립형 로우어 서드/오버레이(MP4 또는 투명 알파) |
/music-to-video | 음악 트랙 → 비트 동기화된 비디오 — 가사 비디오, 슬라이드쇼 또는 키네틱 프로모션; 음악이 페이싱을 주도합니다(선택적으로 사용자 이미지/비디오를 비트 그리드에 맞춤) |
/slideshow | 프레젠테이션 / 피치 덱 / 인터랙티브 덱 — 개별 슬라이드, 조각, 분기, 핫스팟; 출력은 렌더링된 비디오가 아닌 탐색 가능한 덱 |
/general-video | 그 외 모든 것 — 더 길거나 여러 장면의 작품, 정적 루프/포스터, 사용자 정의 컴포지션 |
/remotion-to-hyperframes | 기존 Remotion(React) 컴포지션을 HyperFrames로 이전 (마이그레이션이며, 새로 생성하는 것이 아님) |
혼동 가능한 경우 구분:
- 모션 우선 & 내레이션 없음 (~10초 미만, 모션 자체가 메시지) → 입력에 관계없이
/motion-graphics. - URL 또는 스크립트 — 한 가지 질문: 사이트가 제품을 판매합니까? 예 (SaaS / 앱 / 제품 / 회사 사이트) →
/product-launch-video— 프로모션, 사이트 이름만 언급된 경우에도 상업적 URL의 기본값입니다. 아니요, 또는 사용자가 사이트를 있는 그대로 보여주기만 원하는 경우(포트폴리오 / 블로그 / 문서 / 개인 / 이벤트) →/website-to-video— 투어. GitHub PR 링크 →/pr-to-video; 제품이나 사이트가 없는 개념 →/faceless-explainer. - 기존 영상 — 일반 구어체 자막 →
/embedded-captions; 디자인된 오버레이 카드 →/talking-head-recut. 둘 다 영상 자체를 편집하지 않습니다(재타이밍/재색상/재프레임/재정렬/오디오는 NLE 편집 — 범위 밖). - 음악 트랙이 입력인 경우 (오디오 파일 또는 오디오를 추출할 비디오) 내레이션 없음 →
/music-to-video— 음악의 비트/에너지가 페이싱을 주도합니다. (내레이션이 있는 작품은 위의 입력 매칭 워크플로우에 유지됩니다./motion-graphics는 음악 기반이 아닌 짧은 내레이션 없는 모션용입니다.) - 프레젠테이션 / 피치 덱 / 인터랙티브 덱 (개별 슬라이드, 탐색, 발표자 모드) →
/slideshow— 출력은 탐색 가능한 덱이며, 렌더링된 비디오가 아닙니다. 명시적인 "슬라이드쇼" 요청은 직접 진행됩니다. 유사 트리거("덱 / 슬라이드 / 프레젠테이션 / 이 페이지 변환")는/slideshow가 제작 전에 슬라이드쇼인지 확인하고, 그렇지 않은 경우 적절한 비슬라이드쇼 워크플로우로 전환하도록 합니다. - 길이는 기준이지 제한이 아닙니다 — 의도가 워크플로우를 선택합니다. 작품이 명확하게 ~3분보다 길거나 정적/루프/사용자 정의 형식인 경우에만
/general-video로 이동하세요.
선택 후 — 워크플로우가 설치되었는지 확인
워크플로우를 선택했으면 해당 스킬을 읽기 전에 업데이트 단계를 실행하세요. 워크플로우 스킬은 요청 시 설치되므로, 일치시킨 스킬이 이 머신에 아직 없을 수 있습니다(트리거 문구가 이 라우터에 있는 이유가 정확히 설치되지 않은 스킬로 라우팅하기 위함입니다):
npx hyperframes skills update <워크플로우-이름>
/ 없이 이름만 사용하세요(예: npx hyperframes skills update pr-to-video). 스킬 이름을 지정하면 해당 스킬 그리고 모든 워크플로우가 의존하는 핵심 도메인 스킬이 설치되고 최신 상태임을 보장합니다. 이미 모두 설치된 경우 빠른 no-op이고, 그렇지 않은 경우 누락/오래된 스킬만 대상으로 설치합니다(전체 세트가 아님). 그런 다음 워크플로우의 스킬을 읽고 계속 진행하세요. 동일한 명령어는 기능 맵의 요청 시 도메인 스킬에도 사용할 수 있습니다(예: npx hyperframes skills update figma).
명령어가 실패하면, 기억에서 워크플로우를 즉석에서 구현하지 말고 사용자에게 오류를 표시하세요. 수동 대체(HyperFrames CLI를 사용할 수 없는 경우): npx skills add heygen-com/hyperframes --skill <워크플로우-이름>; 한 번에 모두 설치: npx skills add heygen-com/hyperframes --all.
스킬을 최신 상태로 유지하기
HyperFrames 스킬은 버전이 관리되며 **지연 설치(lazy install)**됩니다. 핵심 세트는 즉시, 워크플로우는 첫 번째 사용 시 설치됩니다.
- 핵심 세트 — 이 라우터,
hyperframes-*도메인 스킬 및media-use.npx hyperframes init(모든 생성 워크플로우가 스캐폴딩 시 실행)은 GitHub를 확인하고 핵심 세트와 이미 설치된 다른 모든 것을 새로 고칩니다. 설치를 _확장_하지는 않습니다. 사용하지 않은 워크플로우 스킬은 가져오지 않습니다. 최신 머신에서 init을 다시 실행하는 것은 no-op입니다. 오프라인(또는 속도 제한)인 경우 정상적으로 저하되며 하드 실패하지 않습니다.--skip-skills플래그는 현재 비활성화되어 있습니다(skills.sh 레지스트리가 따라잡는 동안 임시 조치). CI/테스트는HYPERFRAMES_SKIP_SKILLS=1환경 변수를 통해 옵트아웃합니다. - 워크플로우 스킬 — 위의 업데이트 단계(
skills update <워크플로우-이름>)에 의해 트리거 시 설치 및 새로 고쳐집니다.
작업이 예상치 못하게 동작하거나 긴 빌드 전에 설치된 스킬이 최신 상태인지 확인하세요:
- 확인:
npx hyperframes skills check(--json을 추가하면 기계 판독 가능한 결과를 반환합니다. 설치된 항목이 오래되었거나 핵심 세트가 불완전하면 0이 아닌 종료 코드로 종료됩니다. 아직 설치되지 않은 워크플로우 스킬은 실패가 아닌 _요청 시 사용 가능_으로 보고됩니다.) - 업데이트:
npx hyperframes skills update— 핵심 세트와 설치된 모든 항목을 최신 버전으로 새로 고치고 더 이상 게시되지 않은 스킬을 제거합니다. 이름 없이 실행하면 사용하지 않은 워크플로우를 설치하지 않습니다. 스킬 이름을 지정하면(skills update <이름...>) 해당 스킬을 추가로 설치합니다. - 전체 세트, 명시적으로:
npx hyperframes skills(또는npx skills add heygen-com/hyperframes --all).
CLI는 render / lint / validate 실행이 오래된 스킬을 감지하면 한 줄 알림도 표시합니다.
워크플로우 세부 정보
/product-launch-video
- 입력: 마케팅 중인 제품 — (a) 제품 URL(헤드리스 Chrome으로 크롤링하여 에셋 + 브랜드 토큰 획득), (b) 링크 없이 제품 사이트를 언급하는 스크립트/브리프(PLV가 해결 및 크롤링, 사용자가 거부하지 않는 한), 또는 (c) 파생 가능한 사이트가 없거나 "스크래핑하지 마세요"인 스크립트(노캡처 모드 — 팔레트 + 디자인 시스템을 제공하는 스타일 프리셋 선택). 제공된 스크립트는 그대로 음성 해설 또는 씬별로 재구성될 수 있습니다. PLV가 질문합니다.
- 출력: HyperFrames 컴포지션으로서의 제품 출시 / SaaS 프로모션 → MP4(최적 30–90초). 제품의 가치가 주제이며, 사이트 둘러보기가 아닙니다. 단순한 사이트 투어는
/website-to-video를 사용하세요. - 트리거: "X의 런칭 영상", "우리 사이트 프로모션", "1분 안에 내 SaaS 설명", "스크립트를 60초 프로모션으로", "텍스트
…
[번역을 위해 잘렸습니다]