상품 소개 영상을 세 개 만들 때 매번 AI에게 새 디자인을 부탁하면 글자 크기와 등장 순서까지 달라질 수 있습니다. 같은 형식으로 보여줄 상품이라면 영상 틀 하나와 상품 입력표 하나를 나누는 편이 관리하기 쉽습니다.
이 글은 HyperFrames의 공식 문서와 소스를 읽고 만든 작은 팀용 제작 설계 예시입니다. 상품과 가격은 모두 가상이며, 설치하거나 영상을 렌더링해 확인한 후기는 아닙니다.
위 이미지는 제작 흐름을 설명하는 개념도입니다. 아래 예시는 상품 사진 없이 문자와 색상만 사용하도록 설계했습니다.
어떤 도구이고, 왜 살펴봤을까
HeyGen의 HyperFrames는 HTML로 영상을 구성하는 Apache 2.0 오픈소스 프로젝트입니다. 로컬 실행에는 Node.js 22 이상과 FFmpeg가 필요합니다. 로컬 렌더링은 HeyGen 크레딧을 쓰지 않지만, 함께 사용하는 AI 코딩 도구나 선택적인 미디어 생성 서비스 비용은 별도입니다. 공식 시작 안내
WhatsTrending의 10월 18일 집계는 10월 13~18일 별 4,184개 증가와 누적 65,986개를 보고했습니다. 이후 확인한 GitHub의 66.6k 표시는 다른 시점의 누적값입니다. 별 증가는 사용 성과를 증명하지는 않습니다.
로컬 렌더링이어도 AI 코딩 도구의 처리는 외부 서비스에서 이뤄질 수 있습니다. 첫 시도에는 공개 상품 정보나 가상 데이터만 쓰고, AI 서비스의 데이터 처리 조건도 확인합니다.
한 템플릿으로 묶을 상품부터 고릅니다
이번 제작 조건은 세로 9:16, 1080×1920, 6초입니다. 상품명·가격·짧은 설명을 같은 자리에서 보여주는 카드형 영상으로 정했습니다. 노트, 연필 세트, 트레이를 각각 한 문장으로 소개한다면 같은 틀로 묶기 좋습니다.
반면 한 상품은 사용 과정, 다른 상품은 전후 비교가 핵심이라면 별도 템플릿이 낫습니다. 긴 할인 조건 때문에 한 편만 10초가 필요해지는 경우도 마찬가지입니다. 바뀌는 것이 내용인지, 설명 순서인지가 선택 기준입니다. 설명 순서가 달라지는데 글씨만 줄여 같은 화면에 밀어 넣으면 템플릿을 유지하는 이점이 작아집니다.
고정할 화면과 바꿀 입력을 나눕니다
- 고정: 화면 비율, 6초 길이, 글꼴, 글자 위치, 배경, 등장 효과, 마지막 안내 문구
- 변경 가능: 상품명, 표시 가격, 짧은 설명, 포인트 색상
- 파일 관리용: 화면에 나오지 않는 고유 이름 name
처음 1초에는 상품명이 등장하고, 1~4초에는 설명과 가격을 보여줍니다. 마지막 2초에는 상품명과 가격을 유지하며 ‘자세히 보기’를 표시합니다. 이는 이번 예시에서 정한 연출안입니다. 가독성은 첫 시안에서 확인합니다.
HTML에는 name, productName, displayPrice, message를 문자열로, accent를 색상 변수로 선언하고 기본값을 둡니다. 개발 담당자에게는 다음 연결도 함께 넘깁니다.
- productName → 제목 요소의 data-var-text
- displayPrice → 가격 요소의 data-var-text
- message → 설명 요소의 data-var-text
- accent → 포인트색에 사용하는 CSS var(--accent)
- name → 출력 파일명에만 사용
변수 선언과 화면 연결은 별개입니다. 같은 이름으로 선언해도 해당 요소에 연결하지 않으면 기대한 글자가 바뀌지 않습니다. 공식 문서는 선언 배열과 값 객체의 형태, 텍스트 연결, CSS 변수 적용을 구분해 설명합니다. 변수·바인딩 규칙
가상 상품 세 행을 전달합니다
아래는 데이터 파일로 전달할 JSON 배열입니다. 가격은 화면에 그대로 보여줄 문자열로 정해 통화나 쉼표의 자동 변환을 기대하지 않습니다. name은 한국어 상품명과 분리한 짧고 고유한 영문·숫자 식별자입니다.
[
{
"name": "note-01",
"productName": "하루 노트",
"displayPrice": "5,000원",
"message": "생각을 한 장씩 담아요",
"accent": "#5B6C9B"
},
{
"name": "pencils-02",
"productName": "선 연필 세트",
"displayPrice": "8,000원",
"message": "손에 익는 여섯 가지 선",
"accent": "#8A624A"
},
{
"name": "tray-03",
"productName": "모서리 트레이",
"displayPrice": "18,000원",
"message": "책상 위 자리를 정리해요",
"accent": "#4D7565"
}
]출력 경로를 renders/{name}.mp4로 정하면 예상 대응은 다음과 같습니다. 아직 생성된 파일은 아닙니다.
- note-01 → renders/note-01.mp4
- pencils-02 → renders/pencils-02.mp4
- tray-03 → renders/tray-03.mp4
배치 렌더링은 각 행을 한 편의 변수 묶음으로 사용합니다. 단일 영상용 variables-file과 batch는 한 실행에 함께 쓰지 않습니다. 이름이 겹치거나 출력 경로에 필요한 값이 빠지면 오류가 됩니다. 공식 배치 입력·파일명 규칙
홍보 담당자와 개발 담당자의 확인 범위
홍보 담당자는 내용과 첫 시안을 승인합니다. 상품명·가격·문구·색상을 확정하고, 가장 긴 이름과 설명이 들어간 시안을 봅니다. 이번 작업에서는 상품명 한 줄, 설명 최대 두 줄처럼 기준을 정합니다. 추가 조건 때문에 이를 넘으면 글씨를 계속 줄이기 전에 별도 템플릿으로 나눌지 결정합니다.
개발 담당자는 입력과 출력의 연결을 확인합니다. 화면에 보이지 않는 name도 변수 목록에 선언합니다. 엄격한 변수 검사는 선언되지 않은 키나 자료형 오류 등을 잡지만, 문자열이 화면에 잘 맞는지까지 보증하지는 않습니다. 그래서 첫 시안에 가장 긴 입력을 넣는 확인은 여전히 필요합니다. 공식 변수 검사 구현
생성 후에는 manifest.json의 행별 상태와 출력 경로를 대조합니다. 실패한 행이 있어도 다른 행의 처리는 계속될 수 있습니다. 수정 요청은 name과 바꿀 값으로 받고, 디자인 수정은 템플릿에서 한 번 반영한 뒤 필요한 행을 다시 생성합니다. 입력표를 넘겨받은 사람도 같은 기준을 유지하는 것이 목적입니다.
검토 기준
기능 설명은 v0.8.171 태그 기준입니다. GitHub 릴리스 공개일은 2026년 10월 18일이며, 배치 기능의 최초 도입일을 뜻하지 않습니다. npm 최신 배포 버전은 별도로 확인하지 않았습니다. 렌더링 결과와 처리 속도도 측정하지 않았으므로, 실제 적용은 한 편의 시안부터 시작하는 것이 좋습니다.
댓글
댓글 쓰기