언어: 한국어

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

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

또는 예시로 시작해 보세요:

AI에게 코드를 받고 있나요?

미리보기

코드를 붙여넣으면 바로 여기에서 애니메이션이 재생됩니다.

렌더링하는 동안 이 탭을 화면에 띄워 두세요.

다운로드
형식
화면 비율
초

내 기기에서 실행됩니다. 파일은 어디에도 업로드되지 않습니다.

AI에게 내보내기용 HTML 요청하기

요청 뒤에 붙여넣거나, 이미 받은 코드와 함께 보내세요. 결과물이 깔끔하게 렌더링될 가능성이 가장 높아집니다.

세 단계면 끝
  1. 1
    붙여넣기
    HTML을 붙여넣거나 .html, .zip 파일을 끌어다 놓습니다. 미리보기가 바로 시작됩니다.
  2. 2
    확인
    영상을 올릴 곳에 맞춰 화면 비율을 고릅니다. 길이는 애니메이션에서 읽어 오고, 직접 바꿀 수도 있습니다.
  3. 3
    내보내기
    MP4, GIF, 투명 WebM, PNG 프레임 중 하나를 골라 파일을 다운로드합니다.
AI에게 내보내기용 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프레임을 지원합니다. SNS, 프레젠테이션 앱, 영상 편집 프로그램 대부분에서 쓸 수 있습니다.
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을 지원하는 편집 프로그램이라면 알파 채널이 그대로 유지됩니다.