AI가 만든 HTML 애니메이션을 동영상으로 변환
ChatGPT, Claude, Gemini가 주는 건 코드지만, SNS나 슬라이드, 영상 편집 프로그램에 쓰려면 영상 파일이 필요합니다. 여기에 코드를 붙여넣고 영상 파일로 다운로드하세요.
채팅에서 영상까지
- 1
HTML 파일 하나로 요청
AI에게 무엇을 움직이게 할지 설명하고, HTML 파일 하나로 만들어 달라고 하세요. 아래 프롬프트를 함께 붙이면 바로 내보낼 수 있는 결과물을 받을 수 있습니다.
- 2
코드 복사
ChatGPT, Claude, Gemini에서 코드 블록의 복사 버튼을 누르세요. 코드 대신 실시간 미리보기가 보인다면 먼저 코드 보기로 바꾸세요.
- 3
붙여넣고 내보내기
이 페이지 맨 위에 붙여넣고, 올릴 곳에 맞게 화면 비율(Reels, Shorts, TikTok은 9:16, YouTube와 슬라이드는 16:9)을 고른 뒤 내보내세요.
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을 코드 블록 하나에 담아 답해 주세요.
화면 녹화나 명령줄 도구로는 안 될까요?
화면 녹화는 끊기고, 커서가 찍히고, 해상도도 맞지 않습니다. 명령줄 도구는 결과가 정확하지만 Node, 헤드리스 브라우저, FFmpeg를 설치해야 합니다. 이 페이지는 같은 방식의 프레임 단위 렌더링을 아무것도 설치하지 않고 해냅니다.
렌더링할 수 있는 것
- 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 장면은 느린 컴퓨터에서 실패할 수 있습니다.