마케팅 영상 하나 만들려면 어디서부터 시작해야 할까요?
업체에 맡기면 시간과 돈이 모두 들고, 직접 만들자니 편집 프로그램이 낯섭니다. 그 사이 SNS에는 경쟁사가 올린 영상이 매일 쌓입니다.
올해 초, AI 영상 분야에서 유명한 HeyGen이 자사 핵심 렌더링 기술을 오픈소스로 공개했습니다. 이름은 HyperFrames. GitHub에서 스타 2만 7천 개를 받으며 개발자 커뮤니티가 주목했습니다. 핵심 아이디어는 한 줄로 요약됩니다.
"HTML을 쓰면 영상이 된다."
HTML을 몰라도 됩니다. AI한테 시키면 됩니다. 아래에서 그 방법을 바로 알려드립니다.
3분 안에 읽고 직접 따라 해볼 수 있습니다. 📧 AI 도입 문의: [email protected]
HyperFrames가 뭔지 — 초보자 설명
웹사이트를 만드는 언어인 HTML로 영상 화면 구성을 설계하면, HyperFrames가 그것을 MP4 파일로 바꿔 줍니다. 쉽게 비유하면 이렇습니다.
"파워포인트 슬라이드 만들듯이 화면 구성을 짜면, 도구가 알아서 영상으로 변환한다."
HTML을 직접 쓸 줄 몰라도 됩니다. Claude Code, Cursor 같은 AI 코딩 도구에게 "10초짜리 제품 소개 영상 만들어줘"라고 말하면 됩니다. AI가 HTML을 대신 작성하고, HyperFrames가 그것을 MP4로 변환합니다.
이게 가능한 이유는 HyperFrames 자체가 처음부터 "AI 에이전트를 위해" 설계됐기 때문입니다. GitHub 저장소 소개글도 그대로 옮기면 이렇습니다.
"Write HTML. Render video. Built for agents." — HyperFrames 공식 GitHub 설명
라이선스는 Apache 2.0. 무료이고 상업 이용도 가능합니다.
▲ HTML 설계 → 렌더링(헤드리스 Chrome) → MP4 출력(FFmpeg) · 출처: github.com/heygen-com/hyperframes README
그렇다면 실제로 쓰려면 뭐가 필요하고, 어떤 점을 조심해야 할까요?
사양·비용·한계 — 솔직하게
HyperFrames를 실행하려면 두 가지가 필요합니다.
- Node.js 22 이상 — nodejs.org에서 무료 다운로드
- FFmpeg — ffmpeg.org에서 무료 다운로드
둘 다 무료입니다. 설치는 10분이면 끝납니다.
잘하는 것과 못하는 것은 명확합니다.
잘하는 것: 텍스트 애니메이션, 데이터 시각화, 로고 모션, SNS 쇼츠용 슬라이드형 영상. AI가 HTML을 잘 작성하는 분야라 결과물 품질이 안정적입니다.
못하는 것: 사람 얼굴이 나오는 실사 영상, 복잡한 컷 편집, 자동 음성 더빙. 이런 작업은 HeyGen 유료 서비스나 별도 도구가 필요합니다.
비슷한 무료 도구와 비교하면:
MoneyPrinterTurbo는 텍스트를 입력하면 자동으로 영상이 만들어지지만, 디자인 선택지가 정해져 있습니다. Canva는 편집 UI가 직관적이지만 고급 기능은 유료입니다. HyperFrames는 HTML 기반이라 디자인 자유도가 가장 높고, AI와 연동하면 코딩 없이도 그 자유도를 활용할 수 있습니다.
▲ GitHub 기준 수치 (2026-06-13 조회) · 출처: github.com/heygen-com/hyperframes
그럼 우리 회사 업무에는 어떻게 붙일 수 있을까요?
중소기업·소상공인 적용 시나리오 3가지
신상품 SNS 쇼츠 — 혼자 매장 운영하는 사장님
새 메뉴나 제품이 나올 때마다 카드뉴스를 만들었다면, 이제 15초짜리 영상으로 바꿀 수 있습니다. AI에게 이렇게 말합니다.
"우리 카페 신메뉴 딸기라떼 15초 소개 영상 만들어줘. 배경은 핑크 계열, 텍스트 페이드인 효과 넣어줘."
AI가 HTML을 작성하고 HyperFrames가 MP4로 바꿉니다. 인스타그램·카카오스토리에 바로 올릴 수 있는 파일이 나옵니다.
이벤트 공지 영상 — 정기 할인 안내
매달 반복되는 할인 이벤트 공지 영상을 템플릿화할 수 있습니다. 날짜와 할인율만 바꾸면 같은 디자인의 영상을 매번 새로 뽑아낼 수 있습니다. 디자이너 없이, 비용 없이 됩니다.
제품 카탈로그 영상 — B2B 제조·도소매업체
제품이 많은 업체라면 제품별 소개 영상을 자동화할 수 있습니다. 엑셀에 있는 제품 정보를 AI에게 넘기고, HyperFrames로 제품마다 영상을 뽑아내는 파이프라인을 구성하는 것입니다.
데이터 연결과 자동화 워크플로우 구성은 초기 셋업이 핵심입니다. 처음 구성을 제대로 잡아두면 이후는 반복 작업이 됩니다.
중소기업 AI 솔루션 문의: 📧 [email protected] 🌐 https://www.visionc.co.kr/ai-solution
(주)비젼솔루션이 보는 시각
HTML이 영상이 되는 순간, 영상 제작의 기술 장벽이 사라집니다. 남는 건 "무엇을 말할 것인가"뿐입니다. 중소기업에서 영상 마케팅이 어려웠던 진짜 이유는 편집 기술이 없어서가 아닙니다. 매번 외주를 맡기거나 낯선 도구를 배워야 했기 때문입니다. AI가 그 중간 과정을 대신하기 시작한 지금, 영상 마케팅의 진짜 진입 장벽은 도구가 아니라 아이디어입니다. — (주)비젼솔루션
직접 해보기 — 5단계 실습
방법 1: CLI로 직접 시작하기
Node.js 22 이상과 FFmpeg를 먼저 설치한 뒤 아래 명령을 실행합니다.
# 1. 프로젝트 초기화
npx hyperframes init my-video
# 2. 프로젝트 폴더로 이동
cd my-video
# 3. 브라우저 미리보기 (저장 시 자동 갱신)
npx hyperframes preview
# 4. MP4 렌더링
npx hyperframes rendernpx hyperframes init을 처음 실행하면 필요한 패키지를 자동으로 설치합니다. 렌더링이 끝나면 같은 폴더에 MP4 파일이 생깁니다.
방법 2: AI 에이전트에게 맡기기 (Claude Code, Cursor 등)
AI 코딩 도구가 있다면 더 간단합니다.
# HyperFrames 에이전트 스킬 설치
npx skills add heygen-com/hyperframes설치 후 AI에게 원하는 영상을 말로 설명합니다.
"Using /hyperframes, 제품 소개 10초 영상 만들어줘. 제목은 '신제품 출시', 배경은 파란색 그라디언트, 텍스트 페이드인 효과 넣어줘."
AI가 HTML을 작성하고 렌더링까지 자동으로 처리합니다.
더 많은 예제 보기
- GitHub: github.com/heygen-com/hyperframes
- 브라우저 플레이그라운드: hyperframes.dev
- 컴포넌트 카탈로그: hyperframes.heygen.com/catalog
자주 묻는 질문
Q. HTML을 전혀 모르는데 써도 되나요? A. Claude Code나 Cursor 같은 AI 코딩 도구를 함께 쓰면 됩니다. 원하는 영상을 말로 설명하면 AI가 HTML을 대신 작성합니다. HTML 지식은 없어도 됩니다.
Q. 상업용으로 써도 되나요? A. 네. HyperFrames는 Apache 2.0 라이선스로 무료이고 상업 이용도 허용됩니다.
Q. 만들어진 영상 품질은 어느 정도인가요? A. 텍스트 애니메이션, 로고 모션, 데이터 차트 같은 슬라이드형 영상 품질은 높습니다. 단, 실사 촬영이나 얼굴 합성은 이 도구의 범위 밖입니다.
Vision Solution AI 솔루션 문의: 📧 [email protected] 🌐 https://www.visionc.co.kr/ai-solution