코딩 AI에게 영상까지 맡기자, 제품 홍보 영상부터 기능 설명 영상, 강연 도입부까지 만들어 왔어요

HeyGen이 무료로 공개한 HyperFrames를 Claude Code나 Codex에 깔면, AI가 내 사이트와 코드를 읽고 장면을 지어 MP4 영상으로 뽑아 줘요. 결과가 프로젝트 폴더로 남아 문구 하나, 장면 하나를 다시 고칠 수 있어요. JetBrains부터 1인 개발자, 한국 유튜버까지 실제로 쓴 사례를 모아 봤어요.

2026.10.06·사례 4

JetBrains의 Kotlin 홍보 영상 첫 장면. 마스코트 옆에 Kotlin 로고와 'Concise. Multiplatform. Fun.' 문구 — JetBrains가 공식 계정에 올린 Kotlin 홍보 영상이에요. 출처: JetBrains X

JetBrains — Claude Opus 5.5와 HyperFrames 스킬로 만든 Kotlin 홍보 영상, 2026-09-22

heygen-com/hyperframes — Write HTML. Render video. Built for agents.(10월 6일 별 57,380)

npm hyperframes — 9월 28일 주 내려받기 813,101(최고)

맨 위 영상은 JetBrains가 9월 22일 공식 X 계정에 올린 Kotlin 홍보 영상이에요. JetBrains는 "This product video was generated entirely by Claude Opus 5.5.(이 제품 영상은 전부 Claude Opus 5.5가 만들었다)"라고 적었어요. 직원이 Opus 5.5에게 HyperFrames 스킬을 주고 kotlinlang.org를 가리켰을 뿐이라고요.

Opus 5.5로 만든 홍보 영상이 쏟아지면서, 그 뒤에서 쓰인 HyperFrames도 다시 뜨고 있어요. GitHub 별은 10월 들어 하루 500개꼴로 늘어 5만 7천 개를 넘었고, npm 내려받기는 9월 28일 주에 81만 번으로 가장 많았어요. 10월 5일에는 AI와 같은 타임라인에서 영상을 고치는 데스크톱 앱도 나왔어요.

HyperFrames는 영상을 그려 내는 생성 모델이 아니에요. AI가 장면을 HTML로 지으면, HyperFrames가 그 페이지를 한 프레임씩 멈춰 찍어 MP4로 묶어요. 결과가 프로젝트 폴더로 남아서 문구 하나, 장면 하나를 다시 고칠 수 있어요. Opus 5.5 홍보 영상 편이 프롬프트 하나로 만든 한 편이었다면, 여기 사례들은 한 번 깔아 둔 도구를 다음 영상에도 다시 써요.

Reference 01Social SDK를 만든 15살 개발자 Leo

장면마다 무엇을 넣을지 직접 정해 주자, AI가 만든 출시 영상이 X에서 12만 번 넘게 조회됐어요

앱에 SNS 게시 기능을 쉽게 붙이는 오픈소스 Social SDK를 내면서, 56초 출시 영상을 HyperFrames로 만들었어요. 영상은 X에서 12만 번 넘게 조회됐어요. 그는 Opus 5.5를 주로 쓰고 어려운 장면은 다른 모델에 오래 맡겼다며, 만드는 요령을 따로 올렸어요. "tons of bugs(버그가 많다)"라는 단점도 숨기지 않았어요.

Leo가 올린 만드는 요령(일곱 가지 중 넷)

1DO NOT LET THE AGENT CHOOSE WHAT TO PUT. I told specifically about each part of the video by myself.
2Give the agent access to your codebase and make the project there. This let's the agent find existing components, and reuse them, or change them for the video.
3Give your agent a component library of animations.
4Have a good landing page. This is one of the best references for a launch video your agent can have.

첫 장면의 슬랙 같은 대화도 "I want the first part to have a chat thread like slack"(첫 부분은 슬랙 같은 대화로 해 줘)이라고 직접 시킨 결과예요.

Reference 02오픈소스 TanStack AI 관리자 Alem Tuzlak

PR 하나를 넘기면, AI가 그 기능의 30초 설명 영상을 만들어 와요

TanStack AI는 새 기능을 낼 때마다 짧은 설명 영상을 공식 계정에 올려요. 어떻게 만들었냐는 질문에 관리자 Alem Tuzlak은 "It uses this skill(이 스킬로 만든다)"이라며 직접 만든 스킬을 공개했어요. 스킬은 PR과 코드를 읽고 브랜드 색·글꼴·로고를 찾아 쓰며, 중간 단계마다 사람의 승인을 받아요. 그는 결과를 처음부터 끝까지 보고 마음에 안 드는 곳을 말하면, AI가 고쳐서 다시 렌더한다고 설명했어요.

Alem이 공개한 스킬(PR을 홍보 영상으로)

https://github.com/AlemTuzlak/skills/tree/main/skills/hyperframes-video

스킬의 첫 줄은 "Turn a PR into a rendered short-form promo video with a hook, code moments, and CTA, using HyperFrames."예요. PR 하나를 훅, 코드 장면, 행동 유도로 짜인 짧은 홍보 영상으로 바꾸라는 뜻이에요.

Reference 03비트코인 유튜버 네딸바 · 구독 2.7만

강연 번역 영상 앞에, 원화 가치 그래프가 움직이는 한국어 도입부를 붙였어요

사이페딘 아모스의 서울 강연을 번역해 올리면서, 영상 앞 1분 30초를 HyperFrames로 만든 한국어 모션 그래픽으로 채웠어요. 본인은 X에 "클로드 + 하이퍼프레임 = 비트코인 강연 영상"이라고 적었고, 클로드를 괴롭혀서 뽑아낸 거냐는 답글에 "계속 패고 있습니다"라고 답했어요.

도입부의 한 장면. '₩0.974' 숫자 옆으로 해마다 줄어드는 원화 가치 막대가 늘어서 있다

시청자들은 HyperFrames를 언급하지 않고 "네딸바님 영상 퀄리티가 점점 높아지네요"라는 댓글을 남겼어요.

Reference 04에미상 수상 영상 제작자 Sam Wasserman

앱 사용법 녹화 위에, 단계 카드와 단어 자막을 얹어 튜토리얼을 만들었어요

AI 영화를 찍기 전에 동선과 카메라를 미리 짜는 자기 오픈소스 앱 Blockout을 공개한 다음 날, 3분 26초짜리 사용법 영상을 올렸어요. 실제 앱 화면 녹화 위에 단계 카드, 패널 이름, 단어별로 강조되는 자막이 얹혀 있어요. 본인은 HyperFrames가 이 영상을 만드는 데 도왔다(help make)고 적었어요.

써 본 사람들의 평

Remotion 같은 다른 영상 코드 도구에서 갈아탄 사람들이 결과물과 고치기 쉬운 점을 반겼어요. 아쉬움은 버그와 느린 렌더, 미리보기와 다른 렌더 결과, 비슷비슷해 보이는 영상에 몰렸어요.

좋았다는 평

“I just found hyperframes better in the last few months of constant usage, although remotion code animations do seem nicer because of all the plugins etc.”
TanStack 영상에 몇 달 동안 써 보니 HyperFrames가 낫다고 했어요. 다만 플러그인이 많은 Remotion 쪽 코드 애니메이션이 더 보기 좋긴 하다고 덧붙였어요.
Alem Tuzlak · Xx.com
“15분쯤 지났을 때 결과가 기존 리모션보다 자막 싱크와 전환이 더 좋아서 바로 갈아타기로 결정했습니다.”
두 달 쓴 Remotion에서 갈아탄 한국 유튜버예요. 같은 영상을 두 도구로 뽑아 보니 파일 크기가 21.6MB에서 14.5MB로 줄었다고 했어요(본인 측정).
코딩 못하는 문과 개발자 · 유튜브youtube.com
“It was so great to have a studio UI for the last-mile video fine-tuning.”
어린이 동화 플랫폼 창업자가 예산 없이 회사 소개 영상을 만들면서, 마지막 손질은 편집 화면에서 직접 할 수 있어 좋았다고 했어요.
Feifei Qiu · Xx.com
“i tried it and edited my reel without any 3rd party paid service and results are seriously shocking”
따로 돈 내는 서비스 없이 릴스를 편집했는데 결과가 정말 놀라웠다고 해요.
@fahadmughal9795 · 유튜브 댓글youtube.com

아쉬웠다는 평

“I tried it. It takes forever to render and the result is so mid. I could've just edited by myself and save so much more time”
렌더가 한없이 걸리고 결과는 그저 그래서, 직접 편집했으면 시간이 훨씬 덜 들었겠다고 했어요.
@miltonnolan · 유튜브 댓글youtube.com
“I've found hyperframes is too prescriptive and restrictive for Opus 5.5. It gets better outputs by itself”
Opus 5.5에게는 HyperFrames의 규칙이 너무 빡빡해서, 모델 혼자 만들 때 결과가 더 좋았다고 해요. HeyGen은 반대로, 규칙을 줄 때 렌더 횟수와 토큰 비용이 줄었다는 자체 실험을 냈어요.
@adityah8717 · 유튜브 댓글youtube.com
“In the browser preview every caption was there. The audio was fine. The render said success.”
31초 영상을 렌더했더니 미리보기에 있던 자막이 하나도 없었다고 해요. 렌더러는 영상을 재생하지 않고 프레임마다 건너뛰며 찍기 때문이라며, 애니메이션의 시작값과 끝값을 모두 적는 방식으로 고쳤다고요.
Ayo · Xx.com
“I have been testing HyperFrames with AG and Codex, but no avail so far as it just doesn't suit me for anything other than graphs and overlays.”
여러 에이전트로 시험해 봤지만, 그래프와 오버레이 말고는 자기 작업에 맞지 않았다고 해요.
u/Little-Specialist286 · Redditreddit.com

시작하는 법

1
Node.js 22 이상과 FFmpeg를 깔고, Claude Code나 Codex를 여세요
HyperFrames 자체는 무료 오픈소스이고, 내 컴퓨터에서 렌더하면 HeyGen 크레딧도 들지 않아요. 돈이 드는 곳은 코딩 AI 요금제예요. Claude Code, Codex, Cursor, Gemini CLI 같은 코딩 에이전트에서 써요.
HyperFrames 저장소 ↗
2
영상을 만들 폴더에서 공식 요청을 붙여 넣으세요
AI가 스킬을 설치하고, 방향을 제안하고, 빠진 것을 물어본 뒤 영상을 만들어요.
HyperFrames 공식 문서의 첫 요청
Set this folder up for HyperFrames and make me a video. 1. If the HyperFrames plugin is installed, use its bundled skills and launcher. Otherwise run: npx hyperframes skills update 2. Then, using /hyperframes, make a 10-second product intro for https://example.com 3. Open the local preview when it is done and tell me the project folder.
https://example.com 자리에 내 서비스 주소를 넣어요.
3
첫 판을 끝까지 보고 고칠 곳을 말하세요
공식 문서도 첫 결과물은 완성본이 아니라며 이야기, 사실, 글자, 소리를 한 번씩 확인하라고 해요. 10월 5일 나온 데스크톱 앱 HyperFrames Studio(macOS·Linux, HeyGen 계정 로그인)에서는 화면을 가리키거나 그려서 고칠 곳을 알려 줄 수 있어요.
HyperFrames Studio 내려받기 ↗

세로 출시 영상을 만든 요청

생산성 도구 모음 사이트를 운영하는 Shushant Lakhyani는 마음에 드는 출시 영상 하나를 참고로 붙이고 이 요청을 썼어요. 프롬프트를 통째로 공개한 몇 안 되는 사례예요.

Shushant Lakhyani가 쓴 요청

/hyperframes use the hyperframes skill. I've attached a good launch video here. I want you to go through it perfectly and completely and take inspiration from it perfectly and completely and create a new better and different launch video in 9:16 aspect ratio perfectly and completely for my best productivity resources directory website: https://bestproductivityresources.com/ Make it fast paced for best and high audience retention. Add transitions, effects, SFX, VFX, and background music as required and wherever required.

사이트 주소를 내 것으로 바꾸고, 참고할 출시 영상 파일을 함께 붙여요.

필요한 것

Node.js 22 이상, FFmpeg
Claude Code·Codex 같은 코딩 AI
내 서비스 사이트나 코드 폴더

이 레퍼런스 공유하기

매주 1회 · 무료

이 레퍼런스가 도움이 되셨나요?

매주 쏟아지는 AI 소식 중 BEST
딱 3개만, 메일함에 꽂아 드릴게요

Work Smarter with AI

구독 완료 다음 호부터 메일함에서 만나요.