HTML 70줄이 20초 영상이 됐다, hyperframes로 블로그 요약 영상을 만드는 데 21.5초

HTML로 화면을 짜면 그대로 MP4 영상으로 만들어 주는 도구 hyperframes를 직접 설치해서 써 봤습니다. 이번 주 GitHub 주간 인기 목록에 올라 있던 프로젝트입니다. 결론부터 적으면 HTML 약 70줄로 쓴 20초짜리 요약 영상이 21.5초에 만들어졌습니다. 같은 영상을 5번 만든 평균이고, 범위는 21.1~22.1초입니다.

• 설치는 4초, 129MB였습니다. 계정이나 API 키 없이 내 PC에서만 돌아갑니다. 라이선스는 Apache 2.0입니다.
• 영상 길이와 거의 같은 시간이 걸립니다. 10초 예제는 11.5초, 20초 영상은 21.5초였습니다. 4K로 바꾸면 41.6초입니다.
• 그래픽카드가 아니라 CPU가 일합니다. 시간의 72%는 화면을 한 장씩 찍는 데 쓰였습니다.
• 한글은 글꼴을 한 줄 선언해야 합니다. 선언하지 않으면 내장 검사기가 오류로 알려 줍니다.
• 사용 정보 수집이 기본으로 켜져 있습니다. 명령 한 줄로 끌 수 있습니다.

이 글의 숫자는 테스트용 RTX 5090 PC에서 2026년 10월 6일에 직접 잰 값입니다. 아래 영상이 이 도구로 만든 결과물입니다. Unsloth 기본값과 MTP를 다룬 글의 맨 위에 실제로 넣은 요약 영상입니다.

hyperframes로 만든 20초 요약 영상입니다(소리 없음). 장면 네 개를 HTML 파일 하나에 썼습니다.

RTX 5090 PC에서 잰 핵심 숫자입니다.

hyperframes는 무엇인가

AI 아바타 영상 서비스를 하는 HeyGen이 공개한 도구입니다. 영상 편집 프로그램처럼 타임라인에 조각을 끌어다 놓는 방식이 아니라, 웹 페이지를 쓰듯 HTML과 CSS로 장면을 씁니다. 글자나 그림이 몇 초에 나오고 몇 초 동안 보일지를 태그에 숫자로 적습니다. 그러면 프로그램이 화면에 보이지 않는 Chrome을 띄워 한 장씩 찍고, FFmpeg로 묶어 영상 파일로 만듭니다.

AI가 영상을 그려 내는 도구가 아닙니다. 그래서 LTX-2.5 같은 영상 생성 모델과는 쓰임이 다릅니다. 영상 생성 모델은 질문을 주면 장면을 새로 만들고, hyperframes는 정해 준 글자와 숫자를 정확히 그대로 보여 줍니다.

테스트 PC와 측정 방법

테스트 PC의 사양은 소개 페이지에도 있습니다.

설치: 4초, 129MB

빈 폴더를 만들고 그 안에만 설치했습니다. PC 전체에 설치하지 않았기 때문에, 지울 때는 폴더 하나만 지우면 됩니다.

mkdir hyperframes-test
cd hyperframes-test
npm init -y
npm install hyperframes@0.8.137

패키지 74개가 4초 만에 받아졌고, 폴더 크기는 129MB였습니다. 화면을 찍는 데 쓰는 Chrome은 이 PC에 이미 받아 둔 것이 있어서 새로 받지 않았습니다. 처음 쓰는 PC라면 Chrome을 따로 받게 됩니다.

설치 뒤에는 준비 상태를 한 번에 확인하는 명령이 있습니다. Node.js, FFmpeg, Chrome, 메모리, 디스크를 점검해 줍니다.

npx hyperframes doctor

먼저 꺼 둘 것: 사용 정보 수집

안내 문서에는 적혀 있지 않았는데, 명령 목록을 보니 익명 사용 정보를 모으는 기능이 기본으로 켜져 있었습니다. 프로그램 설명에는 파일 경로와 영상 내용은 모으지 않는다고 적혀 있습니다. 영상을 만들기 전에 껐습니다.

npx hyperframes telemetry disable

이 밖에 HeyGen 계정 로그인, 클라우드에서 만들기, 만든 영상을 올려 주소를 받는 기능도 들어 있습니다. 이 글에서는 쓰지 않았고, 내 PC에서 만드는 기능만 시험했습니다.

첫 영상: 예제 10초가 11.5초에

예제 하나를 골라 프로젝트를 만들고 바로 영상으로 뽑았습니다.

npx hyperframes init demo1 --example warm-grain --non-interactive
cd demo1
npx hyperframes render -o out.mp4

10초짜리 1080p 영상이 나왔습니다. 3번 만든 평균은 11.5초(11.3~11.6초)이고, 파일 크기는 6.2MB였습니다.

손대지 않은 예제(warm-grain)를 그대로 만든 영상입니다(10초, 소리 없음). 예제 안의 글자는 제작사가 넣어 둔 것입니다.

직접 써 본 영상: HTML 70줄

빈 프로젝트에서 시작해 블로그 글의 숫자로 요약 영상을 썼습니다. 장면 하나는 아래처럼 생겼습니다. data-start가 시작하는 시각(초), data-duration이 보이는 시간(초)입니다.

<div id="s1" class="scene clip" data-start="0" data-duration="3.6">
  <div class="kicker">UNSLOTH STUDIO · 기본값(AUTO)</div>
  <h1 id="t1">같은 모델, 같은 기본값<br>속도는 4배 차이</h1>
</div>

움직임은 GSAP이라는 애니메이션 도구로 적습니다. 아래 두 줄이 "막대가 1.6초 동안 차오르고, 그동안 숫자가 0에서 232.9까지 올라간다"입니다. 끝의 5.2는 영상 5.2초 지점에서 시작한다는 뜻입니다.

tl.to("#b2", { width: "70%", duration: 1.6 }, 5.2)
  .to(v, { b: 232.9, duration: 1.6,
           onUpdate: () => n2.textContent = v.b.toFixed(1) }, 5.2);

이미 찍어 둔 영상도 태그 하나로 넣을 수 있습니다. 화면 녹화로 만든 비교 영상을 셋째 장면에 넣었습니다.

<video class="clip" data-start="9.2" data-duration="7.5"
       src="assets/v_mtp_compare.mp4" muted></video>

영상에서 뽑은 장면 네 개입니다. 오른쪽 위의 블로그 이름은 모든 장면에 계속 보이도록 따로 한 줄을 넣었습니다.

한글 글꼴은 선언해야 한다

처음에는 CSS에 글꼴 이름만 적었습니다. 내장 검사기(npx hyperframes lint)가 이것을 오류로 잡았습니다. 선언하지 않은 글꼴은 영상에서 다른 글꼴로 바뀐다는 설명이었습니다. PC에 설치된 글꼴을 쓰겠다고 한 줄을 넣으니 오류가 사라졌고, 한글이 깨지지 않고 나왔습니다.

@font-face { font-family: 'Noto Sans KR'; src: local('Noto Sans KR'); }

이 방법은 그 글꼴이 설치된 PC에서만 통합니다. 다른 PC에서도 똑같이 나오게 하려면 글꼴 파일을 프로젝트에 넣고 그 파일을 가리켜야 합니다.

얼마나 걸리나: 20초 영상에 21.5초

같은 영상을 5번 만들었습니다.

이 표가 뜻하는 것은, 다섯 번의 차이가 1초 안쪽이라 값이 일정하다는 점입니다. 시스템 램은 PC 전체가 쓰는 양이고, 만들기 전 18.2GB에서 1.4GB 늘었습니다. 명령을 치고 끝날 때까지의 시간은 프로그램이 켜지는 시간이 더해져 평균 23.6초였습니다.

화면을 한 장씩 찍는 일이 대부분의 시간을 씁니다. 20초 영상은 30fps라서 600장입니다.

설정을 바꾸면

이 표가 뜻하는 것은 세 가지입니다. 첫째, 장수가 늘거나 화면이 커지면 그만큼 오래 걸립니다. 60fps와 4K는 둘 다 약 두 배였습니다. 둘째, RTX 5090의 인코딩 기능을 써도 빨라지지 않았습니다. 묶는 시간이 원래 2.7초뿐이기 때문입니다. 셋째, 블로그에 올릴 영상은 MP4가 가장 빠르고 작습니다. GIF는 세 배 넘게 걸리고 파일도 세 배 넘게 큽니다.

동시에 찍는 수를 늘리면

hyperframes는 Chrome을 여러 개 띄워 화면을 나눠 찍습니다. 이 PC에서 기본값은 6개였습니다. 이 수를 바꿔 봤습니다.

12개까지는 빨라졌고, 24개는 CPU만 더 쓰고 시간은 거의 같았습니다.

이 표가 뜻하는 것은, 24코어 PC에서는 --workers 12가 기본값보다 약 21% 빠르다는 점입니다. 안내 문서는 4개를 권하지만 이 PC에서는 4개와 6개가 같았고, 12개가 더 나았습니다. 24개로 올리면 CPU 사용률만 36%로 늘고 시간은 0.4초 줄었습니다. 코어 수가 적은 PC에서는 결과가 다를 수 있습니다.

일부러 틀리게 만들어 보면

글꼴 선언 한 줄을 지우고, 장면에 넣은 영상 파일도 지운 뒤 검사기와 만들기 명령을 돌렸습니다.

검사기가 두 가지를 모두 오류로 알려 줬고, 만들기 명령은 영상 파일이 없어서 멈췄습니다.

• 검사기는 둘 다 잡았습니다. 어떤 파일의 몇째 줄인지, 어떻게 고치면 되는지도 함께 알려 줍니다.
• 영상 파일이 없으면 만들기가 멈춥니다. 빈 화면이 들어간 영상이 조용히 나오지 않습니다.
• 오류가 아닌 권고(경고)도 5개 나왔습니다. 장면을 파일 하나에 모두 쓰지 말고 장면마다 파일을 나누라는 내용입니다. 따르지 않아도 영상은 정상으로 나왔습니다.

소리 넣기와 미리보기 화면

소리 파일을 태그 하나로 넣어 봤습니다. FFmpeg로 만든 20초짜리 시험음을 넣고 다시 만들었더니, 영상 파일에 소리(AAC, 48kHz, 2채널)가 함께 들어갔습니다. 만드는 시간은 23.0초로 1.5초 늘었습니다.

<audio class="clip" data-start="0" data-duration="20"
       data-volume="0.6" src="assets/bgm.mp3"></audio>

브라우저에서 보는 미리보기 화면(Studio)도 있습니다. 왼쪽에 장면 목록, 가운데에 미리보기, 아래에 타임라인이 나옵니다.

npx hyperframes preview

미리보기 화면입니다. 아래 타임라인에 직접 쓴 장면 네 개(S1~S4)와 넣은 영상(Clip)이 보입니다.

한 가지 알아 둘 점이 있습니다. 미리보기 화면을 한 번 띄운 뒤 HTML 파일을 열어 보니, 태그마다 data-hf-id라는 값이 새로 붙어 있었습니다. 화면에서 고친 내용을 파일에 되돌려 쓰려고 프로그램이 넣는 표시입니다. 영상 결과는 달라지지 않지만, 내가 쓴 파일이 바뀐다는 점은 알고 쓰는 편이 좋습니다.

다른 곳의 측정과 견주면

이 표가 뜻하는 것은, 영상 1초를 만드는 데 걸리는 시간이 측정마다 1.1초에서 5초까지 다르다는 점입니다. 다른 두 글은 해상도, 프레임 수, 버전, 동시에 찍는 수를 모두 적지 않았습니다. 그래서 차이가 PC 때문인지, 장면 내용 때문인지, 버전 때문인지는 가릴 수 없습니다. andrew.ooo 리뷰는 5월에 쓴 글이라 그 사이 프로그램이 빨라졌을 가능성도 있습니다. gennaroautomates 글은 같은 영상을 Remotion이라는 다른 도구로 만들면 298초가 걸렸다고 적었습니다. 그 글 스스로 한 PC에서 한 번 한 시험이라고 밝히고 있습니다.

화면 녹화와 무엇이 다른가

이 표가 뜻하는 것은, 세 가지가 서로를 대신하지 않는다는 점입니다. 이 글의 요약 영상도 화면 녹화로 찍은 비교 영상을 hyperframes 장면 안에 넣어서 만들었습니다.

정리

• hyperframes는 HTML로 쓴 장면을 영상으로 만드는 도구입니다. 계정 없이 내 PC에서 돌아가고, 라이선스는 Apache 2.0입니다.
• Core Ultra 9 285K PC에서 20초 1080p 영상이 21.5초에 만들어졌습니다. 영상 길이와 거의 같습니다.
• 그래픽카드보다 CPU 코어 수가 중요합니다. 24코어 PC에서는 --workers 12로 17.0초까지 줄었습니다.
• 한글을 쓰려면 글꼴을 선언해야 하고, 빠뜨리면 검사기가 알려 줍니다.
• 설치한 뒤 npx hyperframes telemetry disable로 사용 정보 수집을 끌 수 있습니다.
• 웹 페이지를 만들 줄 아는 사람에게는 배우기 쉽습니다. HTML과 CSS를 모르는 사람에게는 영상 편집 프로그램보다 어렵습니다.

이 글의 한계

• PC 한 대(Core Ultra 9 285K)에서만 쟀습니다. 코어 수가 적은 PC에서는 더 오래 걸릴 것입니다.
• 영상 두 편(10초 예제, 직접 쓴 20초 영상)으로 잰 값입니다. 3D나 무거운 효과가 든 장면은 시험하지 않았습니다.
• 동시에 찍는 수와 60fps, 4K 등 설정별 값은 2번씩, WebM과 GIF는 한 번씩 잰 값입니다.
• 음성 합성(Kokoro), 자막 자동 만들기(whisper), 배경 지우기 기능은 추가 모델을 받아야 해서 시험하지 않았습니다. 소리는 시험음 파일 하나를 넣어 본 것이 전부입니다.
• Docker로 만들기, 클라우드와 AWS Lambda로 만들기, AI 코딩 도구용 스킬은 쓰지 않았습니다.
• 예제와 직접 쓴 영상 모두 애니메이션 도구(GSAP)를 인터넷에서 불러옵니다. 인터넷이 끊긴 상태에서 만들어지는지는 확인하지 않았습니다.
• Remotion 등 비슷한 도구와 직접 견줘 재지 않았습니다. 다른 글의 값을 옮긴 것입니다.
• 2026년 10월 6일, 0.8.137 기준입니다. 이 프로젝트는 새 버전이 자주 올라옵니다.

출처

• 저장소: heygen-com/hyperframes (GitHub)
• andrew.ooo: HyperFrames Review (2026년 5월 28일)
• gennaroautomates: HyperFrames vs Remotion