AI가 만든 애니메이션을 영상 파일로
ChatGPT, Claude, Gemini는 코드를 주지만, SNS와 슬라이드, 편집 프로그램에는 영상 파일이 필요합니다. 코드를 여기에 붙여넣고 영상을 내려받으세요.
채팅에서 영상까지
- 1
HTML 파일 하나로 요청하기
AI에게 무엇을 움직이게 할지 설명하고 HTML 파일 하나로 달라고 요청합니다. 아래 프롬프트를 덧붙이면 바로 내보낼 수 있는 결과를 받습니다.
- 2
코드 복사하기
ChatGPT, Claude, Gemini에서 코드 블록의 복사 버튼을 누릅니다. 실시간 미리보기가 대신 표시된다면 먼저 코드 보기로 전환하세요.
- 3
붙여넣고 내보내기
이 페이지 위쪽에 붙여넣고, 올릴 플랫폼에 맞는 화면 비율(Reels, Shorts, TikTok은 9:16, YouTube와 슬라이드는 16:9)을 골라 내보냅니다.
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을 코드 블록 하나에 담아 답해 주세요.
화면 녹화나 명령줄 도구를 쓰지 않는 이유
화면 녹화는 끊기고, 커서가 찍히고, 크기도 맞지 않습니다. 명령줄 도구는 결과가 정확하지만 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 장면은 느린 컴퓨터에서 실패할 수 있습니다.