사용 가이드로 건너뛰기
HyperFrames작성자 HeyGen

HyperFrames 스킬.

애니메이션 도구 더미가 아니라 필요한 영상에서 출발하세요. HyperFrames는 프로젝트 상태를 읽고, 알맞은 제작 워크플로를 고르며, HTML 컴포지션을 영상으로 만드는 데 필요한 기능을 불러오는 진입점 스킬입니다.

  • HTML-to-Video
  • 워크플로 라우팅
  • 영상 제작
소스 검토 · hyperframesSKILL.md
작업 영상 제작 생성물 • 새로 만들 때 선택된 워크플로와 브리프 • 해당 워크플로를 통한 HTML 컴포지션과 미리보기 • 렌더링을 요청하고 완료한 경우 렌더링된 영상 시작하기 전에 CLI에는 Node.js 22+와 FFmpeg가 필요합니다. 핵심 스킬부터 시작하며, 제작 워크플로는 필요할 때 설치됩니다. 미디어 서비스와 클라우드 렌더링은 추가 요구 사항이 있을 수 있습니다.
편집 요약 · 소스 검토일 2026-10-12 · 생성된 예시 아님

01 기능

하나의 진입점, 다양한 제작 워크플로

메인 스킬은 작업을 어떻게 진행할지 정합니다. 실제 컴포지션, 미디어, 렌더링은 선택된 워크플로와 도메인 스킬이 처리합니다.

소스 기반 워크플로실행 벤치마크 아님

작동 방식

제품 런치 영상, 자막 작업, 인터랙티브 덱은 모두 모션이 있더라도 서로 다른 결과물입니다. HyperFrames는 요청한 결과에 따라 경로를 정합니다. 웹사이트 기반 프로모, 기존 영상에 단순 자막 추가, 비트에 맞춘 음악, 짧은 모션 그래픽, 커스텀 컴포지션은 각각 별도 경로를 따릅니다. 소스에는 Remotion 소스를 이식하는 명시적 경로도 있습니다.

기존 프로젝트를 빈 상태에서 시작하는 것으로 취급하지 않습니다. 라우터는 브리프와 프로젝트 산출물을 확인하고, 기록된 워크플로를 재개하거나 요청된 작업만 수행합니다. 새로 만들 때는 BRIEF.md에 의도를 정리하고, 선택한 워크플로를 설치하며, 전문 기능은 필요할 때만 불러옵니다.

예상 결과물

  • 새로 만들 때의 워크플로 선택과 BRIEF.md
  • 편집 가능한 HTML 컴포지션과, 워크플로에 필요한 미리보기 및 지원 프로젝트 파일
  • 요청 시 렌더링된 영상. 탐색 가능한 덱이나 검토된 스토리보드는 다른 종착점일 수 있음
예시 브리프 보기

요청에서 제작까지

  1. 01
    프로젝트 상태 파악

    새로 만들기, 편집, 렌더링 전용 작업, 이미 브리프가 있는 프로젝트를 구분합니다. 기록된 선호를 재사용하고 인터뷰를 처음부터 다시 하지 않습니다.

  2. 02
    결과물 기준으로 선택

    요청한 결과를 워크플로 계약에 맞춥니다. 자막이 필요한 기존 영상은 새 설명 영상이 아니며, 배경 음악만 있다고 음악 중심 프로젝트가 되는 것도 아닙니다.

  3. 03
    필요한 기능 불러오기

    선택한 제작 워크플로를 필요할 때 설치합니다. 모든 워크플로를 기본으로 설치하지 않고, 실제 작업에 필요한 컴포지션, 모션, 미디어, 오디오, CLI 안내만 불러옵니다.

  4. 04
    신중하게 검토하고 렌더링

    워크플로의 미리보기와 검사를 사용한 뒤 합의된 결과물을 렌더링합니다. HTML 검증은 결과를 직접 보는 것을 대체하지 않으며, 명시적인 렌더링 전용 요청은 그 작업으로 유지됩니다.

02 사용 시점

사용 시점

영상 요청에 알맞은 제작 경로가 필요하거나, 기존 HyperFrames 프로젝트를 맥락 손실 없이 이어가고 싶을 때 라우터를 사용하세요.

적합한 경우

  • 주제가 명확한 새 영상웹사이트, PR, 주제, 영상 소스, 음악 트랙을 가져와 원하는 결과를 설명하세요. 라우터가 전문 워크플로 또는 일반 워크플로 중 무엇을 적용할지 결정합니다.
  • 기존 프로젝트로 복귀저장된 브리프, 프로젝트 설정, 스토리보드가 있으면 에이전트가 같은 질문을 반복하지 않고 정해진 방향을 이어갈 수 있습니다.
  • 여러 제작 레이어 결합작품에는 HTML 타이밍, 탐색 가능한 모션, 미디어, 오디오가 모두 필요할 수 있습니다. 라우터는 하나의 애니메이션 기법을 전체 작업으로 취급하지 않고 이러한 기능을 연결합니다.

확인할 한계

  • 독립형 애니메이션 프리셋이 아님이 스킬은 오케스트레이션 진입점입니다. 지침을 설치해도 선택된 워크플로, CLI, 렌더링 의존성, 미디어 자산을 대체하지 않습니다.
  • 모든 요청이 MP4로 끝나지는 않음탐색 가능한 프레젠테이션, 승인된 스토리보드, 미리보기 전용 작업은 종착점이 다릅니다. 렌더링된 파일이 실제로 필요한지 명시하세요.
  • 외부 서비스에는 별도 요구 사항이 있음소스는 제작 중 사용량을 확인합니다. 미디어 생성과 호스팅 서비스에는 계정, 사용 가능 한도 또는 추가 인증이 필요할 수 있으며, 오픈소스 라이선스가 모든 서비스를 무제한으로 만드는 것은 아닙니다.

준비할 입력

  • 원하는 결과물대상, 주제, 화면 비율, 대략적인 길이, 최종 형식을 알려주세요. 프로모, 자막 작업, 덱, 설명 영상, 커스텀 편집 중 무엇인지 분명히 하세요.
  • 사용할 수 있는 소스 자료승인된 카피, 영상 소스, 제품 스크린샷, 음악 또는 소스 URL을 제공하세요. 주장과 자산 권리를 구분해 알려주세요. 생성된 미디어는 사실에 근거한 제품 증거를 대체하지 않습니다.
  • 기존 프로젝트와 검토 한도작업을 이어갈 때는 BRIEF.md와 관련 프로젝트 파일을 공유하세요. 승인 체크포인트, 로컬 전용 제약, 렌더링 또는 게시가 승인되었는지도 명시하세요.

03 중요한 결정

중요한 결정

  1. 브리프가 경로를 이어간다

    새 작업에서는 의도 파악 과정이 BRIEF.md로 끝납니다. 이후 제작은 원래 요청을 반복해서 재해석하지 않고 기록된 선택을 따라야 합니다.

  2. HTML 타이밍은 탐색 가능해야 함

    프레임워크는 타이밍이 지정된 컴포지션에서 개별 프레임을 렌더링합니다. 모션과 미디어는 일반 브라우저 재생에서 맞아 보이는 것만으로는 부족하며, 작성 규약을 따라야 합니다.

  3. 워크플로 설치는 필요한 것에 집중

    문서화된 독립 실행형 설정은 핵심 세트를 설치하고, 선택 시 제작 워크플로를 추가합니다. 플러그인 패키지에는 자체 번들 카탈로그와 업데이트 관리자가 있으며, 두 설치 경로는 서로 바꿔 쓸 수 없습니다.

04 집중된 브리프로 시작하기

집중된 브리프로 시작하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬 설정을 확인하세요.

핵심 스킬 설치

아래 명령은 에이전트 및 비대화형 사용을 위한 README의 핵심 세트 설치 경로입니다.

문서화된 핵심 세트 설치
npx hyperframes skills update

CLI에는 Node.js 22+와 FFmpeg가 필요합니다. 대화형 대안은 npx skills add heygen-com/hyperframes 실행 후 Core Skills를 선택하는 것입니다. Claude Code에는 별도로 문서화된 플러그인 설치 방법도 있습니다. 제작 워크플로는 필요할 때 불러오며, 이 페이지는 설치 테스트를 거쳤다고 주장하지 않습니다.

범위가 정해진 영상 요청으로 시작

아래의 테스트되지 않은 브리프로 주제, 자산, 출력, 중단 지점을 명확히 하세요. 기존 프로젝트라면 현재 브리프와 설정을 포함해야 합니다.

예시 브리프
HyperFrames 진입점을 사용해 제가 제공하는 승인된 스크린샷과 카피로 20초 길이의 16:9 제품 소개 영상을 계획해 주세요. 해당 자산과 주장만 사용하고 음악, 내레이션, 추가 미디어는 생성하지 마세요. 먼저 이 폴더에 BRIEF.md 또는 hyperframes.json이 이미 있는지 확인하고 기록된 결정을 유지하세요. 새 작업이라면 대상과 워크플로를 확인하고 브리프를 작성한 뒤 HTML 컴포지션과 로컬 미리보기를 준비하세요. 프로젝트는 로컬에 유지하세요. 렌더링 전에 미리보기를 보여주고 실제로 실행한 검사를 보고하세요. 게시하거나 유료 서비스를 사용하지 마세요. 필요한 워크플로, 의존성 또는 사용량 확인을 사용할 수 없다면 완료한 척하지 말고 한계를 설명하세요.

최종 렌더링 전 검토

선택된 경로, 자산 사용, 미리보기, 보고된 검사를 확인하세요. 렌더링된 파일이 생성되면 직접 보고, 렌더링과 게시는 분리하세요.

  • 선택된 워크플로가 요청한 결과물과 일치하고 기존 프로젝트 결정을 유지합니다.
  • 미리보기는 제공된 주장과 자산을 사용하며, 텍스트가 읽기 쉽고 탐색 시에도 타이밍이 맞습니다.
  • 의존성, 사용량, 렌더링 결과가 명확하며, 로컬 미리보기를 게시되었거나 렌더링된 영상처럼 설명하지 않습니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 제공된다는 뜻이 아니며, 외부 도구, 자격 증명, 소프트웨어 의존성이 포함된다는 뜻도 아닙니다.

05 소스 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 변경될 수 있습니다.

소스 소유자
HeyGen
라이선스
Apache-2.0
검토한 스냅샷
2026-10-12 · 2905162d925f
편집 소스 요약
HyperFrames는 HTML 네이티브 영상 워크플로 계열의 라우팅 및 프로젝트 재개 진입점입니다. 제작 경로를 선택하고 도메인 기능을 불러오며, 그 자체로 단일 애니메이션 효과나 기록된 결과물이 아닙니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 원문 요약입니다. 저장소 스타 수는 날짜가 있는 인기 지표이며 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

메인 스킬은 hyperframes-animation과 어떻게 다른가요?

메인 스킬은 프로젝트 상태를 파악하고 제작 워크플로를 선택합니다. 애니메이션 스킬은 해당 워크플로에 필요할 때 모션 규칙과 런타임 안내를 제공합니다. 엔드투엔드 영상 요청은 메인 진입점으로 시작하세요.

React나 게시된 모든 스킬이 필요한가요?

React는 필요하지 않습니다. HyperFrames는 탐색 가능한 애니메이션과 함께 HTML로 컴포지션을 작성합니다. 독립 실행형 README는 핵심 세트를 먼저 설치하고 제작 워크플로는 필요할 때 설치하도록 권장하며, 플러그인 설치에는 자체 카탈로그가 번들로 포함됩니다.

기존 프로젝트를 렌더링만 할 수도 있나요?

예. 소스는 특정 렌더링, 검사, 검증 또는 미리보기 요청을 새로 만들기 인터뷰를 다시 시작하지 않는 한정된 작업으로 취급합니다. 프로젝트에는 여전히 필요한 CLI와 렌더링 환경이 필요합니다.

HyperFrames

필요한 영상에서 시작하세요

범위가 정해진 브리프나 기존 프로젝트를 가져오세요. 알맞은 워크플로를 고르고 미리보기를 확인한 뒤, 렌더링 또는 게시 시점을 명시적으로 결정하세요.

문서화된 핵심 세트 설치
npx hyperframes skills update