HTML 영상 변환, 브라우저에서 한 프레임씩

작동 방식

세 단계, 모두 브라우저에서

도구가 페이지의 시계를 넘겨받아 한 프레임씩 진행하며 그립니다. 그래서 느린 노트북에서도 빠른 컴퓨터와 똑같은 영상이 나옵니다.

1. <style>

   h1 { animation: rise 1.2s }

   @keyframes rise { … }

   </style>

   <h1>Hello</h1>

   HTMLanimation.html
   01

   붙여 넣거나 파일 끌어다 놓기

   CSS와 JavaScript가 포함된 전체 페이지, .html 파일, 또는 이미지와 글꼴이 담긴 .zip 내보내기 파일. CDN 라이브러리도 평소처럼 불러옵니다.

2. 16:9

   9:16

   1:1

   ⏱ 4.5 s · auto
   02

   형식과 크기 고르기

   MP4, GIF, WebM 또는 PNG 프레임. 16:9, 9:16, 1:1. 720p~4K, 24·30·60fps. 애니메이션에 끝이 있으면 길이가 자동으로 정해집니다.

3. 142 / 180

   →

   MP4GIF60 fps
   03

   렌더링하고 다운로드

   각 프레임을 내 컴퓨터에서 그리고 인코딩한 뒤 바로 다운로드할 수 있습니다. 화면 공유 요청도, 업로드도 없습니다.

지원 범위

브라우저에서 움직이는 것이라면 무엇이든

브라우저 탭에서 움직이면 영상으로 만들 수 있습니다. 도구가 CSS, Web Animations API, 타이머, requestAnimationFrame의 시간을 제어하는데, 모든 애니메이션 라이브러리가 이 위에서 동작합니다.

• CSS 애니메이션과 트랜지션

  키프레임, 트랜지션, @property, 필터를 작성한 그대로의 타이밍으로.

• GSAP와 anime.js

  CDN에서 불러온 타임라인과 트윈. GSAP 타임라인의 길이는 자동으로 찾습니다.

• SVG 애니메이션

  stroke-dashoffset 선 그리기, 모핑, 그라데이션 애니메이션.

• Canvas 그리기

  requestAnimationFrame으로 움직이는 2D 캔버스 드로잉과 파티클 시스템.

• Three.js와 WebGL

  3D 장면과 셰이더를 어떤 크기로든 한 프레임씩.

• p5.js 크리에이티브 코딩

  제너러티브 스케치와 크리에이티브 코딩 작품을 프레임 손실 없이 내보냅니다.

• Tailwind와 UI 목업

  클래스, 타이머, Web Animations API로 움직이는 제품 히어로와 앱 화면.

• AI가 만든 페이지

  Claude, ChatGPT, Gemini가 HTML 파일 하나로 작성한 애니메이션, 설명 자료, 차트.

형식

한 번 붙여 넣고 모든 형식으로

쓸 곳에 맞는 파일을 고르세요. 같은 페이지를 어떤 형식으로든, 세 가지 화면 비율 어디로든 렌더링할 수 있습니다.

• MP4

  H.264 · 720p/1080p/4K · 24/30/60fps

  소셜 게시물, 슬라이드, 영상 편집 프로그램용. 어디서나 재생됩니다.

• GIF 애니메이션

  360p~720p · 10/15/25fps · 반복 재생

  README, Slack 메시지, 이메일, 문서용.

• 투명 WebM

  알파 채널 VP9 · 720p~4K

  페이지 배경을 뺀 오버레이로 Premiere, DaVinci Resolve, Final Cut, CapCut에서 사용하세요.

• PNG 이미지

  1080p 또는 4K · 원하는 순간 · 투명 가능

  한 프레임을 정지 이미지로. 포스터, 썸네일, 슬라이드 이미지에.

활용

애니메이션을 활용하는 곳

• 소셜

  게시물과 스토리

  X와 LinkedIn에는 16:9, TikTok·Reels·Shorts에는 9:16, 피드에는 1:1. 플랫폼은 HTML이 아니라 영상을 받습니다.

• 슬라이드

  PowerPoint, Keynote, Google Slides

  프레젠테이션은 MP4나 GIF는 재생하지만 HTML 애니메이션은 재생하지 못합니다.

• 편집

  영상 편집 프로그램의 타이틀과 오버레이

  하단 자막이나 로고 애니메이션을 투명 WebM으로 만들어 영상 위에 바로 얹으세요.

• 문서

  README와 문서

  컴포넌트나 차트의 GIF를 사람들이 읽는 바로 그 자리에.

• 포트폴리오

  Dribbble, Behance, 케이스 스터디

  CodePen이나 내 프로젝트의 모션 작업을 깔끔하고 선명한 영상으로.

• 제품

  출시와 데모

  HTML로 만든 제품 히어로나 앱 화면 애니메이션을 출시 게시물용 클립으로.

AI 채팅에서

Claude, ChatGPT, Gemini의 애니메이션을 영상으로

1. 01

   HTML 파일 하나로 요청하기

   "CSS와 JavaScript가 안에 들어 있는 단독 실행 HTML 파일 하나"를 창을 꽉 채우는 크기로 요청하세요. 애니메이션에 끝이 생기도록 원하는 길이도 알려 주세요.

2. 02

   코드 복사 또는 파일 다운로드

   채팅에서 페이지 전체를 복사하거나 .html 파일을 다운로드하세요. 폴더나 .zip으로 내보내는 도구라면(Claude Design처럼) .zip을 그대로 두세요.

3. 03

   여기에 붙여 넣거나 끌어다 놓고 렌더링

   미리보기에서 재생됩니다. MP4, GIF, WebM 중 하나를 골라 렌더링하세요. 수정하려면 AI에게 요청하고, 새 버전을 붙여 넣고, 다시 렌더링하면 됩니다.

왜 한 프레임씩인가

어떤 컴퓨터에서도 부드럽고, 안전하게

화면 녹화는 컴퓨터가 보여 준 화면을 그대로 남기므로 끊긴 프레임도 함께 남습니다. 여기서는 각 프레임을 다 그릴 때까지 페이지의 시간이 멈춰 있습니다.

• 프레임 단위로 정확

  모든 프레임을 각자의 순간에 그리므로 60fps면 1초에 서로 다른 60개의 프레임이 나옵니다. 느린 노트북에서도 마찬가지입니다.

• 업로드 없음

  페이지는 브라우저 안의 샌드박스 프레임에서 실행되고 파일도 그 안에서 인코딩됩니다. 코드가 서버에 닿지 않습니다.

• 무료, 워터마크 없음

  계정도, 크레딧도, 영상 위의 로고도 없습니다.

HTML을 영상으로 만드는 방법 비교

다음

한 걸음 더