상품 소개 영상, 문장 한 줄로 MP4까지 뽑아 주는 HyperFrames 써 보기

상세페이지에 넣을 영상은 필요한데 편집 프로그램을 열 엄두가 안 나는 셀러분들 많죠. 상품 소개 영상을 문장 한 줄로 시키고, 결과를 MP4 파일로 받는 방법이 있어서 직접 써 봤어요. 헤이젠(HeyGen)이 깃허브(GitHub)에 공개한 HyperFrames입니다.

HyperFrames는 HTML·CSS로 짠 화면을 영상으로 굽는 오픈소스 프레임워크(Framework)예요. 사람이 HTML을 몰라도 클로드 코드(Claude Code) 같은 코딩 에이전트(Coding Agent)가 대신 쓰고 렌더까지 돌립니다. 아래 기능 설명은 공식 README와 문서를 2026년 10월 15일에 받아 확인했고, 시험은 같은 날 가상 상품 하나로 했어요.

상품 소개 영상을 HTML로 만드는 HyperFrames

README 첫머리 문장은 “Write HTML. Render video. Built for agents.”입니다. HTML을 쓰면 영상이 되고, 그 HTML은 에이전트가 쓰도록 만들었다는 뜻이에요. 영상 한 편이 index.html 파일 하나이고, 글자와 그림이 언제 나타나고 사라지는지는 태그에 붙인 시간 값으로 정합니다.

렌더는 헤드리스 크롬(Headless Chrome)이 프레임을 하나씩 찍고 FFmpeg가 그 그림을 영상으로 묶는 방식이라고 README에 적혀 있어요. 그래서 같은 입력이면 같은 영상이 나온다고 설명합니다. 손으로 하는 편집이 아니라 파일이 결과를 정하니까, 문구만 바꿔서 다시 굽기도 쉽죠.

README에 따르면 HeyGen이 실제 서비스에서 이 엔진을 쓰고 있어요. 이 블로그의 쇼츠 엔진도 HyperFrames로 렌더합니다. 장면을 HTML로 짜 두고 HyperFrames CLI의 render 명령을 불러 MP4를 받는 구조예요.

설치는 에이전트에 따라 두 갈래

클로드 코드를 쓰면 플러그인(Plugin)으로 넣습니다. README에 적힌 명령 두 줄을 터미널에 붙여 넣으면 돼요.

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

설치한 뒤에는 대화창에서 /hyperframes:hyperframes로 부릅니다. 코덱스(Codex), 커서(Cursor), 제미나이 CLI(Gemini CLI) 같은 다른 에이전트는 npx skills add heygen-com/hyperframes로 스킬(Skills)만 넣으면 되고요. 고르는 창이 뜨면 Core Skills 묶음이면 충분하다고 README가 안내합니다.

가상 상품 ‘구름요거트’로 직접 시험해 봤어요

2026-10-15 새벽, 맥(Apple M1 Pro)에서 클로드 코드에 문장 한 줄을 넣었습니다. 상품도 이름도 지어낸 가상 상품이에요. 실제 브랜드가 아니고, 그림도 HTML과 CSS로만 그렸습니다.

시험은 플러그인 대신 따로 받아 둔 HyperFrames CLI 0.8.157과 그 안의 스킬 문서로 했어요. 에이전트는 스킬 문서의 안내대로 이 요청을 짧은 모션 그래픽(Motion Graphics)으로 분류했고, HTML을 쓴 뒤 검사와 장면 그림(snapshot) 확인을 거쳐 렌더했습니다.

문장을 넣고 세로 상품 소개 영상 MP4가 나올 때까지 3분 39초가 걸렸어요. 그중 렌더 자체는 CLI 표시로 22.2초였고요. 세로판은 장면을 보고 고친 곳이 한 군데도 없었습니다. 영상은 1080×1920 크기에 10초, 초당 30프레임으로 나왔어요.

10초 안에 들어간 움직임은 이랬어요. 시험 기록에 남은 순서 그대로 옮깁니다.

그릇·요거트·블루베리·구름은 모두 HTML과 SVG 도형으로 그린 것이고, 사진이나 AI 이미지는 쓰지 않았어요. 렌더 전에 돌린 check는 글자와 배경의 대비를 42곳 모두 웹 접근성 기준(WCAG AA)에 맞는다고 표시했습니다. 세로판 렌더 22.2초는 화면을 찍는 데 14.6초, 영상으로 묶는 데 4.6초가 든 것으로 나왔어요.

한글이 제일 걱정이었는데 깨진 글자가 하나도 없었어요. 프로젝트 폴더에 Pretendard 글꼴 파일을 넣고 HTML에서 그 파일을 불러 쓰게 했거든요. 제목 ‘구름요거트’가 글자마다 흐릿했다가 또렷해지며 올라오는 움직임도 요청한 “부드럽게 나타나는 제목”대로 들어갔습니다.

미리보기 화면에서 확인하고 MP4로 받기

에이전트가 쓰는 명령은 몇 개 안 됩니다. README가 CLI 설명에 적은 명령 가운데 영상 한 편을 만드는 데 쓰는 건 init, lint, check, snapshot, preview, render예요. 시험에서도 이 명령들로 만들었습니다.

preview를 돌리면 브라우저에 스튜디오(Studio) 화면이 열려요. 가운데에서 영상이 돌고, 아래 타임라인(Timeline)에는 Bg, Clouds, Stage, Tag Layer 트랙 네 줄이 나뉘어 보였습니다. README는 스튜디오를 미리보고 편집하는 브라우저 화면이라고 소개하면서, 아직 다듬는 중(evolving)이라고 표시해 뒀어요. 설명대로라면 상품 소개 영상을 이 화면에서 바로 고칠 수도 있는데, 이번 시험에서는 재생해 보는 데까지만 썼습니다.

가로 영상도 하나 받았어요. 다만 가로판은 세로판 HTML을 가로 크기에 맞게 다시 고쳐서 따로 렌더한 것이고, 글과 그릇 배치를 화면 보고 두 번 손봤습니다. 세로·가로 두 편이 다 나오기까지는 4분 9초였어요.

상품 소개 영상, 이렇게 시키면 됩니다

HyperFrames에는 만들려는 영상에 따라 고르는 작업 흐름(Workflow)이 여럿 있어요. 상품 소개 영상을 만들 때 셀러에게 맞는 건 두 가지예요.

스마트스토어 상품 페이지 주소가 있다면 앞의 것, 상세페이지 맨 위에 넣을 짧은 영상이라면 뒤의 것이 맞아요. 시작 안내 문서는 “10초짜리 제품 소개를 이 주소로 만들어 줘”처럼 짧게 말하면 에이전트가 방향을 먼저 제안하고, 빠진 게 있으면 되묻는다고 설명합니다. 제작 명세서까지 쓸 필요는 없다고 해요.

상세페이지 문구를 정리하는 일은 스마트스토어 상품명 최적화 글을 같이 보면 좋아요. 받은 MP4를 자르고 붙이는 편집은 오픈소스 영상 편집기 OpenCut 글에서 다뤘습니다.

쓰기 전에 알아 둘 점

README는 HyperFrames가 리모션(Remotion)에서 영감을 받았다고 밝히고 둘의 차이를 표로 정리해 뒀어요. 둘 다 헤드리스 크롬과 FFmpeg로 렌더하는데, 만드는 방식과 라이선스가 다릅니다.

이번 시험은 소리 없는 10초 영상이었어요. 화면 문구에는 가격이나 효능 같은 내용을 넣지 않았고요. 실제 상품 소개 영상이라면 화면에 뜨는 문구도 상세페이지 문구처럼 한 번 더 확인해야 합니다. 처음 만든 결과를 그대로 올리기보다 미리보기로 한 번 보고 문구가 상품 정보와 맞는지 확인하는 게 좋습니다. PDF로 설명 영상을 만드는 다른 방법이 궁금하면 Gemini Notebook 동영상 오버뷰 글도 함께 보면 돼요.

글에 나온 규칙 파일과 에이전트는 Claude Code에서 쓰는 방식이고, 공식 안내는 Claude Code 공식 문서에 있습니다.

이 글은 직접 만들고 운영하며 남긴 기록입니다. 적힌 수치는 작성 시점의 제 계정 기준이며, 같은 결과나 수익을 보장하지 않습니다.