HyperFrames로 HTML 기반 영상 만들기부터 MP4 내보내기까지

HyperFrames는 HTML과 CSS로 만든 화면을 실제 MP4 영상으로 변환하는 오픈소스 도구입니다. 웹페이지처럼 장면을 구성하고, 브라우저에서 미리 본 다음 렌더링 명령으로 영상 파일을 만들 수 있습니다. 코딩이 익숙하지 않다면 Claude Code 같은 AI 코딩 도구를 활용할 수도 있습니다.

🎬 핵심 요약

• HTML·CSS로 제목, 이미지, 자막과 애니메이션을 배치합니다.

• 로컬 실행에는 Node.js 22 이상과 FFmpeg가 필요합니다.

• npx hyperframes init my-video 명령으로 프로젝트를 생성합니다.

• npx hyperframes preview로 확인한 뒤 npx hyperframes render --output output.mp4로 저장합니다.

💻 HyperFrames는 어떤 방식으로 영상을 만들까요?

HyperFrames는 일반적인 영상 편집 프로그램처럼 타임라인에 클립을 끌어다 놓는 방식이 아닙니다. HTML 요소마다 시작 시간과 표시 시간을 지정하고, CSS나 GSAP 같은 도구로 움직임을 설정합니다.

예를 들어 여행 소개 영상이라면 배경 사진 위에 도시 이름을 표시하고, 잠시 뒤 여행 팁이 나타나도록 구성할 수 있습니다. 화면의 각 순간을 프레임으로 캡처한 다음 FFmpeg로 인코딩해 MP4 파일을 생성합니다.

HTML 구성 → 미리보기 → 프레임 렌더링 → MP4 내보내기

🛠️ 설치부터 첫 프로젝트 만들기

먼저 Node.js 22 이상과 FFmpeg가 설치되어 있는지 확인하세요. 터미널에서 node -v와 ffmpeg -version을 실행하면 확인할 수 있습니다.

npx hyperframes init my-video
cd my-video

프로젝트에는 영상의 중심이 되는 index.html과 이미지·음악 등을 담는 assets 폴더가 포함될 수 있습니다. HTML 파일에서 화면 크기, 장면 구성, 표시 시간을 수정할 수 있습니다.

🧩 HTML 장면을 구성하는 방법

기본 화면에는 영상의 크기를 나타내는 data-width와 data-height, 구성을 식별하는 data-composition-id가 필요합니다. 시간에 따라 나타나는 요소에는 data-start, data-duration, data-track-index 등의 속성을 사용합니다.

처음에는 제목 한 줄과 배경색만 넣은 짧은 영상부터 만들어 보세요. 여러 이미지와 복잡한 효과를 한꺼번에 추가하면 오류가 발생했을 때 원인을 찾기 어려울 수 있습니다.

👀 미리보기에서 무엇을 확인해야 할까요?

npx hyperframes preview

이 명령을 실행하면 브라우저에서 영상을 미리 볼 수 있습니다. 장면 전환, 글씨 크기, 이미지 비율, 자막 표시 시간을 확인하고 필요하면 HTML을 수정합니다. 특히 세로형 숏폼 영상이라면 작은 화면에서의 자막 가독성도 점검하세요.

📤 MP4 파일로 내보내기

npx hyperframes render --output output.mp4

완성된 프로젝트 폴더에서 명령을 실행하면 HyperFrames가 화면을 프레임 단위로 처리하고 FFmpeg를 통해 MP4 파일을 생성합니다. 출력 파일을 재생해 화면 잘림, 애니메이션 타이밍, 오디오 동기화 등을 확인하세요.

클로드 코드가 HTML 제작을 도와주더라도 최종 영상 검수는 필요합니다. 먼저 터미널에서 node -v와 ffmpeg -version을 실행해 제작 환경이 준비되어 있는지 확인해 보세요.