도구별 실전 가이드 · 공식 정보 확인 2026-08-20

html-video Apache-2.0 오픈소스 조건과 시작 절차

작성: gentive · 편집·검수 책임: 신유빈 · 지원 환경: CLI · 페이지 갱신: · 운영·편집 기준

21개 템플릿과 교체 가능한 렌더러로 웹 레이아웃·데이터를 노트북에서 영상으로 만들고 AI 사운드트랙을 선택해 붙인다.

21개 템플릿과 교체 가능한 렌더러로 웹 레이아웃·데이터를 노트북에서 영상으로 만들고 AI 사운드트랙을 선택해 붙인다. html-video의 첫 실전 과제는 “정적 HTML 카드 세 장을 10초 무음 MP4로 렌더링한다”이며, 이 흐름을 직접 통제할 사람에게 맞습니다.

이럴 때 맞습니다

  • “로컬 HTML/CSS, 1920x1080, 카드당 3초, 외부 URL과 AI 음악은 사용하지 않기” 같은 입력으로 html-video의 핵심 기능을 시험하려는 사람
  • 세 카드가 지정 순서·시간에 나오고 결과 해상도·길이가 정확하며 네트워크 요청이 없다. 기준으로 html-video 결과를 직접 검수할 수 있는 경우
  • CLI 환경에서 Apache-2.0 코드를 직접 설치·관리하려는 작업

이럴 때는 멈추세요

  • HTML·CSS·데이터를 MP4로 렌더링하는 에이전트용 CLI 설치·모델 준비·업데이트를 관리하지 않고 즉시 완성된 서비스를 원하는 경우
  • 다음 위험을 사람이 확인할 수 없는 작업: 신뢰하지 않는 HTML·스크립트를 렌더러에서 실행하면 로컬 자원에 접근할 수 있고 AI 사운드트랙을 쓰면 음악 권리와 공급자 비용을 확인해야 한다.

참고 시작점

팩트시트 · 작업 근거 확인 필요: 아래 문구는 공식 제품 사실을 정리한 참고 시작점이며, 성공 결과를 보장하는 검증 절차가 아닙니다.

정적 HTML 카드 세 장을 MP4로 렌더링하기

Hyperframes가 HTML·CSS를 headless Chromium과 ffmpeg로 10초 MP4로 만든다.

참고 시작점: html-video CLI에서 로컬 HTML 카드 세 장을 Hyperframes로 렌더링하고 AI soundtrack은 끄고 real MP4를 만들어 달라.

  1. HTML·CSS 카드 세 장의 순서와 각 프레임 시간을 content-graph에 지정한다.
  2. Hyperframes가 headless Chromium에서 각 프레임을 기록하고 ffmpeg libx264로 합치게 한다.
  3. real MP4의 1920×1080 해상도와 10초 길이, 카드 순서를 확인한다.

21 templates에서 데이터 설명용 화면 고르기

template gallery의 패턴 하나가 multi-frame storyboards에 일관된 시각 규칙을 적용한다.

참고 시작점: 21 templates 중 data chart 계열을 골라 세 장짜리 multi-frame storyboards를 만들고 per-frame text만 편집해 달라.

  1. template gallery에서 data chart 후보를 미리 보고 콘텐츠 성격과 맞는 하나를 선택한다.
  2. content-graph에 세 장의 관계를 배치해 multi-frame storyboards 순서를 만든다.
  3. studio에서 per-frame text를 확인하고 template의 폰트·전환이 모든 장면에 유지되는지 본다.

완성 영상에 선택형 사운드트랙 섞기

AI soundtrack의 background music과 narration이 MP4 export에서 지정 음량으로 합쳐진다.

참고 시작점: Settings → Audio에 테스트 키를 넣고 Soundtrack panel에서 짧은 background music만 생성하며 narration은 비활성화해 달라.

  1. 무음 렌더가 완성된 뒤 Settings → Audio에 최소 권한의 MiniMax API key를 등록한다.
  2. Soundtrack panel에서 background music 길이와 음량을 정하고 narration을 끈 채 한 번 생성한다.
  3. MP4 export의 음성 길이·클리핑·API 사용량을 확인하고 MiniMax API key를 제거한다.

무료 조건과 주의점

Apache-2.0 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도. 로컬 경로 외에 선택형 외부 AI 공급자 연결 지원

Apache-2.0 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도. 로컬 경로 외에 선택형 외부 AI 공급자 연결 지원

Apache-2.0 저장소 코드는 상업적으로 사용할 수 있지만, 모델 가중치·입력 자료·생성물·번들 자산의 권리는 각각 따로 확인해야 합니다.

신뢰하지 않는 HTML·스크립트를 렌더러에서 실행하면 로컬 자원에 접근할 수 있고 AI 사운드트랙을 쓰면 음악 권리와 공급자 비용을 확인해야 한다.

공식 근거와 확인일

html-video 가이드의 주장별 공식 출처
확인 항목확인한 내용공식 출처·확인일
제품 정보21개 템플릿과 교체 가능한 렌더러로 웹 레이아웃·데이터를 노트북에서 영상으로 만들고 AI 사운드트랙을 선택해 붙인다.html-video 공식 사이트
무료 조건Apache-2.0 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도. 로컬 경로 외에 선택형 외부 AI 공급자 연결 지원공식 무료 정책·요금 안내
공식 코드 라이선스오픈소스 코드의 사용·수정·재배포 조건공식 코드 라이선스
공식 제품 페이지21개 템플릿과 교체 가능한 렌더러로 웹 레이아웃·데이터를 노트북에서 영상으로 만들고 AI 사운드트랙을 선택해 붙인다.공식 제품 페이지