HTML 애니메이션을 GIF로 변환

README, 풀 리퀘스트, 문서, 메신저처럼 영상이 재생되지 않는 곳에 씁니다. 코드를 붙여넣고 크기를 고른 뒤 GIF를 내려받으세요.

예시로 시작하기:

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을 코드 블록 하나에 담아 답해 주세요.
좋은 GIF를 만드는 법
짧게 만들기
GIF는 용량이 금방 커집니다. README나 메신저에 쓴다면 480p로 3~8초 정도가 적당합니다.
반복이 자연스럽게 이어집니다
반복되는 애니메이션은 정확히 한 주기로 잘리므로 GIF가 끊김 없이 반복됩니다.
단순한 색면이 가장 잘 표현됩니다
GIF는 프레임당 256색까지 담습니다. 단순한 색면의 도형과 글자는 선명하게 표현되지만, 부드러운 그라데이션과 사진에는 띠가 생깁니다.
화질이 더 중요하다면
같은 코드로 MP4를 내보내세요. 영상을 쓸 수 있는 곳이라면 더 선명하고 용량도 훨씬 작습니다.
렌더링할 수 있는 것
  • 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 장면은 느린 컴퓨터에서 실패할 수 있습니다.