HTML 애니메이션을 영상으로 변환

코드를 붙여넣거나 파일을 끌어다 놓으세요. 브라우저에서 한 프레임씩 렌더링하므로 어디에도 업로드되지 않습니다. 계정도, 워터마크도 없고, 한 편에 최대 2분까지 만들 수 있습니다.

예시로 시작하기:

AI에게 코드를 받을 건가요?

미리보기

붙여넣으면 여기에서 애니메이션이 재생됩니다.

렌더링하는 동안 이 탭을 전면에 유지해 주세요.

다운로드
형식
화면 비율
초

사용자의 기기에서 처리합니다. 파일은 업로드되지 않습니다.

AI가 내보내기 좋은 HTML을 쓰게 하기

요청 내용 뒤에 붙여넣거나, 이미 받은 코드와 함께 보내세요. 한 번에 문제없이 렌더링되는 HTML을 받을 수 있습니다.

세 단계로 끝납니다
  1. 1
    붙여넣기
    HTML을 붙여넣거나 .html 또는 .zip 파일을 끌어다 놓습니다. 미리보기가 바로 시작됩니다.
  2. 2
    확인
    올릴 곳에 맞는 화면 비율을 고릅니다. 길이는 애니메이션에서 읽어 오며, 직접 바꿀 수도 있습니다.
  3. 3
    내보내기
    MP4, GIF, 투명 WebM, PNG 프레임 중에서 골라 파일을 내려받습니다.
AI가 내보내기 좋은 HTML을 쓰게 하기
요청 내용 뒤에 붙여넣거나, 이미 받은 코드와 함께 보내세요. 한 번에 문제없이 렌더링되는 HTML을 받을 수 있습니다.
이 애니메이션을 htmlto.video에서 영상으로 내보낼 수 있도록, 단독으로 동작하는 HTML 파일 하나로 다시 작성해 주세요.
- 16:9 프레임에 맞춰 디자인합니다. 브라우저 창을 정확히 채워야 하며(100vw × 100vh, 스크롤 없음), 어떤 해상도에서도 크기가 맞도록 모든 크기를 vw와 vh로 지정합니다.
- 페이지가 로드되면 스스로 시작하고, 마우스, 키보드, 스크롤 조작이 필요 없어야 합니다.
- 길이는 고정합니다. 첫 줄에 <!-- duration: 8s --> 와 같은 주석으로 길이를 적습니다.
- 애니메이션은 CSS 애니메이션, Web Animations API, GSAP, 또는 타임스탬프 인자를 사용하는 requestAnimationFrame으로 구현합니다. video, audio, iframe은 사용하지 않습니다.
- CSS와 JavaScript는 모두 인라인으로 넣습니다. 이미지는 인라인 SVG나 데이터 URL로 포함합니다. 글꼴과 라이브러리는 Google Fonts, cdnjs, jsDelivr처럼 교차 출처 로딩을 허용하는 CDN에서만 가져옵니다.
- 전체 HTML을 코드 블록 하나에 담아 답해 주세요.
렌더링할 수 있는 것
  • CSS 애니메이션과 트랜지션
  • GSAP, anime.js, Motion 등 JavaScript 라이브러리
  • Canvas 2D
  • CSS 또는 JavaScript로 움직이는 SVG
  • WebGL과 Three.js
  • Web Animations API와 requestAnimationFrame
아직 할 수 없는 것
  • Safari, iPhone, iPad에서는 내보낼 수 없습니다. 미리보기는 됩니다.
  • 페이지 안의 영상, 오디오, iframe은 결과물에서 빠집니다.
  • 교차 출처 읽기를 막는 서버의 이미지와 글꼴은 나타나지 않습니다.
  • 클릭, 마우스 오버, 스크롤을 기다리는 애니메이션은 진행되지 않습니다.
  • <animate> 같은 SMIL 태그로 움직이는 SVG는 캡처되지 않습니다.
  • 매우 무거운 WebGL 장면은 느린 컴퓨터에서 실패할 수 있습니다.
어떤 형식을 고를까요
MP4
SNS 게시물, 슬라이드, 영상 편집 프로그램에 씁니다. H.264, 720p, 1080p, 4K, 초당 24, 30, 60프레임을 지원합니다. 어디서나 재생됩니다.
GIF
README, 문서, 메신저, 이메일에 씁니다. 스스로 반복 재생되고 플레이어가 필요 없습니다. 짧고 작게 만드는 것이 좋습니다.
투명 WebM
편집 프로그램에서 위에 얹는 소재에 씁니다. 타이틀, 하단 자막, 스티커 등에 맞습니다. 페이지 배경은 투명하게 유지됩니다.
PNG 프레임
선택한 시점의 정지 화면 한 장입니다. 썸네일과 표지에 씁니다.
요약
htmlto.video는 HTML 애니메이션을 영상 파일로 변환하는 무료 온라인 도구입니다. 붙여넣은 HTML, .html 파일, .zip 압축 파일을 받아 MP4(H.264, 최대 4K 60 fps), GIF, 배경이 투명한 WebM, PNG 프레임 한 장으로 내보냅니다. 렌더링은 한 프레임씩, 방문자의 브라우저에서 이루어집니다. 파일은 업로드되지 않으며, 컴퓨터 속도와 관계없이 프레임 속도가 정확합니다. 가입, 워터마크, 요금이 없습니다. 길이는 최대 120초(GIF는 30초)입니다. 데스크톱의 Chrome, Edge, Firefox와 Android의 Chrome에서 동작합니다. Safari와 iPhone, iPad에서는 동작하지 않으며, 삽입된 영상, iframe, 교차 출처 접근을 막는 서버의 이미지와 글꼴은 캡처하지 않습니다.
자주 묻는 질문
ChatGPT나 Claude가 만든 HTML 애니메이션을 MP4로 바꾸려면 어떻게 하나요?
AI가 작성한 HTML을 복사해 이 페이지 위쪽 입력 상자에 붙여넣고, 미리보기를 확인한 뒤 내보내기 버튼을 누릅니다. 렌더링이 끝나면 MP4가 다운로드됩니다. 10초짜리 애니메이션이면 보통 1분 안에 끝납니다.
파일이 어딘가에 업로드되나요?
아니요. 영상 렌더링과 인코딩은 사용자의 기기에서 이루어집니다. HTML과 완성된 파일은 저희 서버로 전송되지 않습니다.
정말 무료인가요? 워터마크나 길이 제한이 있나요?
무료이고, 워터마크와 계정이 없습니다. 길이는 최대 120초, GIF는 30초까지입니다.
화면 녹화보다 나은 점이 무엇인가요?
화면 녹화는 컴퓨터가 바쁘면 프레임이 빠지고, 커서가 찍히며, 창 크기 그대로 저장됩니다. 이 도구는 선택한 크기와 프레임 속도에 맞춰 모든 프레임을 하나씩 따로 그립니다.
Safari나 iPhone에서는 왜 안 되나요?
Safari는 페이지가 HTML 콘텐츠를 이미지로 다시 읽어 오는 것을 허용하지 않는데, 이 도구는 그 방식에 의존합니다. 같은 링크를 컴퓨터의 Chrome, Edge, Firefox에서 여세요.
영상에서 이미지나 글꼴이 빠졌습니다. 왜 그런가요?
해당 파일이 다른 웹사이트에서 읽는 것을 허용하지 않는 서버에 있기 때문입니다. 이미지는 데이터 URL로 HTML에 포함하고, 글꼴은 Google Fonts처럼 이를 허용하는 곳의 것을 사용하세요.
렌더링은 얼마나 걸리나요?
컴퓨터와 페이지에 따라 다릅니다. 1080p, 초당 60프레임의 일반적인 10초 영상은 20~40초가 걸립니다. 4K와 무거운 WebGL은 더 오래 걸립니다.
배경이 투명한 영상을 내보낼 수 있나요?
네. WebM(투명)을 선택하고 페이지 배경은 지정하지 않은 채로 두세요. 알파가 포함된 WebM을 지원하는 편집 프로그램에서는 알파 채널이 유지됩니다.