제품 소개 영상을 올렸는데 버튼 이름이 바뀌고, 마지막 안내 문구도 다시 써야 한다. 작은 팀에서는 그때마다 편집 파일을 찾아 담당자에게 수정 내용을 전달하고 새 MP4를 기다린다. 장면 구성이 비슷한 영상을 계속 만든다면, 문구와 화면 자료를 파일로 남겨 고친 뒤 다시 렌더링하는 방식이 맞을 수 있다.
HeyGen의 HyperFrames는 HTML·CSS·이미지·영상과 시간 제어 가능한 애니메이션을 영상으로 바꾸는 오픈소스 도구다. PM은 바꿀 문구와 유지할 장면을 지정하고, 코딩 에이전트나 개발자가 소스를 수정한다. Studio에서 결과를 눈으로 조정하고 검사한 뒤 MP4를 뽑는다. 매번 새 영상을 생성하는 것보다 같은 원본을 반복 수정하는 업무에 초점을 맞춘다.
HyperFrames 설치 방법: 프로젝트를 만들고 미리보기까지 확인한다
로컬 CLI에는 Node.js 22 이상과 npm, MP4 출력에는 FFmpeg가 필요하다. 터미널에서 node --version과 ffmpeg -version을 먼저 확인한다. 이미 Claude Code를 쓰는 팀은 공식 플러그인부터 설치하면 된다. 아래 마지막 명령으로 플러그인 목록에 hyperframes, general-video, media-use가 포함됐는지 확인한다.
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
claude plugin details hyperframes새 세션을 열거나 /reload-plugins를 실행한 뒤, /hyperframes:hyperframes를 지정해 제품 URL과 원하는 영상 길이를 전달한다. 다른 에이전트에서 스킬만 쓰려면 프로젝트 폴더에서 npx skills add heygen-com/hyperframes를 실행하고 선택 창의 Core Skills를 고른다. 이 경로의 호출 이름은 /hyperframes다. 플러그인과 스킬을 둘 다 설치할 필요는 없다. 스킬을 어떻게 프로젝트 규칙으로 연결하는지는 에이전트 스킬 설치와 활용 가이드에서 이어 읽을 수 있다.
에이전트 없이 CLI부터 확인할 수도 있다. 다음은 공식 README의 프로젝트 생성 경로다. 생성된 index.html이 입력 파일이며, 아직 제품 영상이 아니라 수정할 출발점이다.
npx hyperframes init my-video
cd my-video
npx hyperframes doctor
npx hyperframes preview터미널에 표시된 로컬 주소를 브라우저에서 열어 Studio와 기본 장면이 보이면 미리보기 연결을 확인한 것이다. doctor에서 Node.js·Chrome·FFmpeg를 확인한다. 음성 인식, TTS, 배경음악 모델은 해당 기능을 쓸 때만 필요하다. 이 글의 로컬 실행은 CLI 0.8.151, Node.js 22.23.0, FFmpeg 8.0.1로 진행했다.
Studio는 파일 목록, 영상 화면, 타임라인을 함께 보여 준다
브라우저 Studio는 중앙에 현재 영상 프레임, 왼쪽에 Code·Comps·Assets·Catalog, 아래에 시간축과 트랙을 둔다. Code는 원본 파일을 편집하고, Comps는 장면 구성을 찾아 연다. Assets는 이미지·음성·영상 파일, Catalog는 재사용할 블록을 다룬다. 타임라인에서는 클립을 옮기거나 가장자리를 끌어 노출 시간을 조정한다. 아래 공식 화면은 Comps 목록과 프레임, 타임라인을 보여 준다.
선택한 요소의 속성은 Inspector의 Design·Layers 같은 패널에서 다룬다. 패널을 닫았으면 Window 메뉴에서 다시 열 수 있다. 문구 하나나 위치 수정은 화면에서 요소를 선택해 바꾸고, 여러 장면의 이야기 순서를 바꿀 때는 에이전트에 요청하는 편이 낫다. 일반적인 위치 교정에서는 기본으로 켜진 자동 키프레임을 끈다. 켜 둔 채 고치면 현재 시점의 변경이 애니메이션으로 기록될 수 있다. 데스크톱 Studio 앱은 왼쪽 에이전트 채팅과 오른쪽 파일 영역을 추가한 별도 화면이므로, 브라우저 Studio의 메뉴 위치와 혼동하지 않는다.
문구와 미디어를 고친 뒤 검사, 미리보기, MP4를 반복한다
제품팀은 첫 제작 때 제품 화면 캡처, 로고, 내레이션 같은 자료와 장면별 문구를 프로젝트에 모아 둔다. 예를 들어 “첫 장면의 버튼 이름만 바꾸고, 내레이션과 마지막 장면은 유지하라”처럼 수정 범위를 좁힌다. HTML의 텍스트와 미디어 경로를 바꾸면 같은 프로젝트를 Studio에서 다시 열 수 있다. Code는 자동 저장하므로 다른 편집기와 같은 파일을 동시에 고치지 않는다.
수정 후에는 lint로 구성 규칙을 검사하고, check로 브라우저 실행·레이아웃·동작·대비를 점검한다. 이어 미리보기에서 처음부터 끝까지 재생해 문구와 장면 전환을 확인한다. 검사 성공은 제품 설명이 맞다는 승인과 다르다. PM이 화면 속 버튼 이름, 가격, 출시 범위를 확인한 뒤 MP4를 만든다.
npx hyperframes lint
npx hyperframes check
npx hyperframes preview
# 미리보기를 확인한 뒤 별도 터미널에서 실행한다.
npx hyperframes render --output renders/product-v2.mp4이번에는 격리된 샘플 프로젝트에서 로컬 이미지 한 장과 HTML 문구, 0.5초 페이드인을 넣은 3초 영상을 만들었다. “문구 수정 전”을 “문구 수정 완료”로 고치고 검사와 렌더링을 다시 실행했다. 두 MP4에서 같은 1.5초 프레임을 추출한 결과가 아래 그림이다. 실제 서비스 화면을 흉내 낸 영상이 아니라, 파일 수정이 출력에 반영되는지 확인하기 위한 샘플이다.
수정 후 결과는 H.264 MP4, 960×540, 24fps, 3초, 72프레임이며 파일 크기는 42,439바이트였다. 해당 시점들을 검사한 check 결과는 오류·경고 0건이었다. 음성 트랙은 넣지 않았다. 긴 내레이션이나 복잡한 전환의 처리 시간을 이 작은 예제로 판단할 수는 없다. 렌더러는 헤드리스 Chrome에서 프레임을 캡처하고 FFmpeg로 인코딩한다. 단순한 HTML 페이지를 실시간으로 녹화하는 방식과는 다르다.
원본은 index.html, 설정은 hyperframes.json, 미디어는 프로젝트의 assets/에 남긴다. 내보낸 MP4만 보내면 다음 담당자는 문구를 다시 고칠 소스를 받지 못한다. 수정 인계에는 폰트와 이미지·음성까지 포함한 프로젝트를, 배포 담당자에게는 버전 이름이 붙은 MP4를 전달한다. 별도 장면 파일을 만들었다면 루트 index.html에서 연결됐는지도 확인한다. 공개 이슈 #5527에는 하위 폴더에 만든 장면을 기본 검사·렌더 명령이 읽지 않아 빈 시작 화면을 내보내는 사례가 보고됐고 수정 PR이 열려 있다.
내보내기 설정과 실제 출력 파일을 따로 확인한다
Studio 상단의 Export를 누르면 Renders 패널에서 형식, 해상도, 프레임률, 품질을 고른다. 공식 화면은 MP4, 원본 1920×1080, 30fps, Standard와 완료된 파일을 보여 준다. 일반 배포에는 MP4를 쓰고, 다른 편집기에서 후반 작업을 할 때는 MOV 같은 중간 형식을 고른다. 해상도를 올려도 작은 원본 화면 캡처의 글자가 더 선명해지지는 않는다.
완성한 파일 자체를 열어 시작과 끝, 자막, 소리, 전환을 확인한다. 미리보기에서 맞던 장면도 인코딩 결과까지 확인해야 납품할 수 있다. 파일 이름은 product-v1.mp4와 product-v2.mp4처럼 나눠 두면 검토자가 어느 수정본을 봤는지 구분하기 쉽다.
렌더러 비용과 에이전트 비용은 다른 항목이다
HyperFrames는 Apache 2.0 라이선스이며 로컬 렌더러의 건당 사용료와 상업 이용 기준에 따른 추가 요금은 없다. 로컬 렌더링은 HeyGen 크레딧을 소비하지 않는다. 이번 샘플은 에이전트나 유료 미디어 API를 호출하지 않아 렌더러 소프트웨어 이용료와 에이전트 호출료가 각각 0이었다. 컴퓨터 사용 시간과 전력은 별도다.
실제 팀이 Claude Code나 Codex에 영상 작성과 수정 요청을 맡기면 로그인한 계정의 구독·사용 한도 또는 연결한 API의 토큰 요금이 적용된다. HyperFrames가 무료라는 사실로 에이전트까지 무료가 되지는 않는다. 생성 음성·아바타·이미지·음악 서비스의 요금도 따로 계산한다. 원본을 고정하고 요청 범위를 좁혀야 불필요한 재작성과 유료 자료 재생성을 줄일 수 있다.
HeyGen 관리형 cloud render는 로컬 경로와 별도의 서비스다. 공식 문서는 업로드 아카이브를 200MB로 제한하고 4K를 1.5배로 과금하며, 4K 출력은 MP4만 지원한다고 설명한다. 이를 로컬 렌더링의 무료 조건과 섞지 않는다. AWS Lambda나 Google Cloud Run을 쓰면 해당 클라우드의 실행·저장 비용을 부담한다. 로컬에서도 프레임 수, 해상도, 미디어와 효과가 늘수록 CPU·메모리·디스크 작업이 늘어난다.
반복 수정에는 맞지만 촬영본 중심 작업은 편집기가 낫다
출시 때마다 문구와 제품 화면을 갈아 끼우는 짧은 소개 영상, 여러 고객에게 같은 구조로 만드는 안내 영상은 파일 기반으로 관리할 이유가 있다. 공식 활용 목록에는 tldraw의 PR 설명 영상과 Skyflo의 제품 출시 영상이 실려 있다. 이는 소스 변경에서 영상으로 이어지는 사용 사례이며, 이 글의 작은 샘플이 그 수준의 제작을 재현한 것은 아니다.
인터뷰 원본에서 좋은 대목을 찾거나 수많은 촬영 클립을 감각적으로 조합하는 일, 세밀한 음향·색보정이 중심이면 기존 영상 편집기가 편하다. HyperFrames에도 타임라인과 시각 편집 기능이 있지만 임의의 HTML과 애니메이션을 다루므로 소스를 이해할 사람이 필요하다. PM 한 명이 코드까지 모두 떠안기보다는 첫 프로젝트를 개발자와 함께 만들고, 이후 문구와 화면 교체를 반복할 수 있는지 먼저 살펴보는 편이 현실적이다.
출처: HyperFrames 저장소, Quickstart, 플러그인 설치, 소스와 검사, Cloud rendering, 에이전트 연결과 청구, 활용 사례, 이슈 #5527.