언어: 한국어

HTML 애니메이션을 GIF로 변환

README, Pull Request, 문서, 메신저 등 영상이 재생되지 않는 곳이라면 어디든 쓸 수 있습니다. 코드를 붙여넣고 해상도를 고른 뒤 GIF를 다운로드하세요.

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

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을 코드 블록 하나에 담아 답해 주세요.
좋은 GIF를 만드는 요령
짧게 만들기
GIF는 용량이 금방 커집니다. README나 메신저용이라면 480p로 3~8초 정도가 적당합니다.
이음매 없는 반복
반복 애니메이션은 정확히 한 주기만큼 잘라 내므로 GIF가 튀지 않고 자연스럽게 반복됩니다.
단색일수록 깔끔합니다
GIF는 프레임마다 256색까지만 담을 수 있습니다. 단색 도형과 글자는 선명하게 나오지만, 부드러운 그라데이션이나 사진에는 색 띠가 생깁니다.
화질이 더 중요하다면
같은 코드로 MP4를 내보내세요. 영상을 올릴 수 있는 곳이라면 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 장면은 느린 컴퓨터에서 실패할 수 있습니다.