쓰일 상황을 평소 말투로 설명하면 AI가 완성된 애니메이션 SVG를 써 줍니다.
웹사이트, 앱, SNS 소재, 제품 데모까지. 내려받고, 복사하고, 계속 고칠 수 있습니다.
이미 로고가 있으신가요? "내 SVG 움직이기"로 전환해 올려 주세요.
예시를 클릭하면 실제 코드를 볼 수 있습니다. 위에 직접 아이디어를 적어도 됩니다.
영상도 GIF도 아닙니다. 하나하나가 자동 재생되고 용량은 몇 KB뿐입니다.
한 문장으로 새 애니메이션을 만들거나, 가지고 있는 SVG에 움직임을 더하거나. 두 방식 모두 반복해서 쓰는 상업용 템플릿을 만들기에 좋습니다.
도해, 로고, 로딩 아이콘, 지도. 만들고 싶은 것을 평소 말로 설명하면 몇 초 만에 움직이는 SVG가 돌아옵니다.
정지된 SVG가 이미 있다면 올린 뒤 "내 SVG 움직이기"로 전환하세요. 패스는 그대로 두고 움직임만 더합니다.
아래 데모는 상업적으로 값어치가 큰 SVG 애니메이션 유형입니다. 앱 출시, 제품 패키지, 로고 인트로, 주문 상태, SNS 소재. 진짜 기회는 이미지·문구·로고·브랜드 컬러·길이·내보내기 형식을 사용자가 직접 바꿀 수 있는 템플릿 체계로 만드는 데 있습니다.
여러 모바일 화면과 메시지 층위로 제품 기능을 빠르게 설명합니다. 공식 사이트 첫 화면, 유료 광고, 앱스토어 미리보기에 적합합니다.
패키지, 과일 장식, 궤도 선, 은은한 부유감이 정지된 제품 카드를 다시 쓸 수 있는 이커머스 메인 비주얼로 바꿔 줍니다.
기능을 카드로 나누고 슬라이드와 겹침, 강조로 가치를 전달합니다. 추상적인 앱 기능이 훨씬 이해하기 쉬워집니다.
로고 리빌은 템플릿 상품으로 만들기 가장 쉬운 분야입니다. 브랜드 마크만 올리면 인트로와 아웃트로가 만들어집니다.
상태 표현은 상업적 가치가 큽니다. 주문, 배송, 배포, 승인, 결제 완료 모두 분명한 피드백이 필요합니다.
SNS 템플릿은 업종과 규격별로 정리한 라이브러리로 만들 때 가장 잘 작동합니다. 이미지, 헤드라인, 태그만 바꿔 내보내면 됩니다.
"보기 좋은 애니메이션 하나"로 시작하지 마세요. 쓰일 상황을 먼저 정하고, 그다음에 대상·브랜드 컬러·문구·속도를 바꾸세요. 그래야 결과물이 바로 쓸 수 있는 SVG에 가까워집니다.
타임라인 편집 프로그램은 익히는 데만 몇 시간이 걸리고, 영상으로 내보내면 확대할 때 흐려집니다. 여기서는 한 문장이면 진짜 애니메이션 SVG가 돌아옵니다. 읽을 수 있는 코드라서 고치기도, 어디에 넣기도 자유롭습니다.
무엇이 움직이고 어떤 느낌이면 좋을지 적기만 하면 됩니다. AI가 도형을 설계하고 키프레임을 전부 써 냅니다. 대부분의 애니메이션은 1분도 걸리지 않습니다.
로고, 아이콘, 일러스트를 올리고 움직임을 설명하세요. 선이 그려지는 연출, 은은한 부유, 장식의 회전 같은 것들. 원본 도형은 그대로 두고 애니메이션만 더해집니다.
언제든 코드 보기로 전환할 수 있습니다. CSS 키프레임이 들어 있는 깔끔한 SVG 마크업. 프로젝트에 그대로 붙여 넣어도 되고, 타이밍과 색을 직접 손봐도 됩니다.
여기서 만드는 애니메이션 SVG는 보통 수십 킬로바이트입니다. 어떤 해상도로 키워도 흐려지지 않고, 영상 플레이어 없이 계속 반복됩니다.
사이트 마무리부터 수업용 도해까지. 똑같은 한 문장 흐름이 실제로 마주치는 애니메이션 작업을 두루 덮습니다.
결제 진행 단계, 가입 단계, 로딩, 빈 상태, 움직이는 404 페이지. 사용자가 기다리거나 망설이는 순간을 위한 표현입니다. img 태그에 넣기만 하면 알아서 재생되고, 연결할 것도 관리할 것도 없습니다.
도는 태양계, 움직이는 타임라인, 작동 원리 도해, 자라나는 막대 그래프. 개념을 설명하기만 하면 슬라이드·글·강의 페이지에 그대로 넣을 수 있는 결과가 나옵니다. 영상 플레이어가 필요 없습니다.
스스로 쓰이는 손글씨, 움직이는 헤드라인, 로고 리빌, 천천히 흐르는 hero 배경. 어떤 화면에서도 벡터의 선명함을 지키고, 가벼워서 곧바로 뜹니다.
GitHub README, Notion 페이지, 공유 문서, 슬라이드. 대부분의 애니메이션 파일은 만들어진 사이트를 벗어나는 순간 멈춥니다. 이건 움직임을 지닌 채로 옮겨 다닙니다.
고르는 건 모델 ID가 아니라 등급입니다. 엔진을 바꿔 같은 프롬프트를 다시 돌리면 차이를 직접 확인할 수 있습니다.
속도 우선, 10 크레딧. 문구를 이리저리 다듬으면서 다음 결과를 빨리 보고 싶을 때 좋습니다.
기본 등급이며 10 크레딧. 저희 애니메이션 프롬프트로 처음부터 끝까지 검증한 유일한 엔진입니다. 깔끔한 마크업, 안정적인 CSS 키프레임, 보통 12~32초.
15 크레딧, 추론을 켠 상태. 느리고 비싸지만 요소가 많고 동선이 복잡한 장면에 맞춰져 있습니다.
SVG가 본래의 결과물입니다. GIF와 MP4는 브라우저 안에서 바로 만들어집니다. 추가 크레딧도, 업로드도 없습니다.
진짜 결과물입니다. CSS 키프레임이 파일 안에 들어 있어 실행용 라이브러리 없이 재생됩니다. img 태그에 넣어도, 인라인으로 붙여 넣어도 됩니다.
SVG 업로드를 받지 않는 곳, 이를테면 메신저와 SNS 피드를 위해 클릭 한 번으로. 사용자 기기에서 애니메이션을 한 프레임씩 그려 냅니다.
숏폼 영상, 발표 슬라이드, 강의 자료를 위해. 지원하는 브라우저에서는 로컬에서 인코딩되며, 지원하지 않아도 SVG와 GIF는 그대로 쓸 수 있습니다.
움직이는 그림 하나로 끝나지 않습니다. 프롬프트, 미리보기, 소스 코드, 내보내기, 재사용까지 하나의 흐름으로 이어집니다.
로딩, 스스로 그려지는 로고, 타자기 텍스트, 파도 배경, 선 그리기 연출, 자라나는 그래프. 템플릿을 고르고 문구만 바꿔 생성하면 됩니다.
자바스크립트 없음, 외부 파일 없음, 실행용 라이브러리 없음. 애니메이션은 SVG 자체에 쓰인 선언형 CSS입니다. 인라인으로 넣어도 안전하고, 캐시도 잘 되며, img 태그 안에서도 재생됩니다.
벡터이기 때문에 같은 파일이 16px 아이콘이든 전체 화면 hero든 완벽하게 또렷합니다. 크기별로 다시 내보낼 필요가 없습니다.
AI가 쓴 내용을 그대로 확인할 수 있습니다. 마크업을 코드베이스에 붙이고, 재생 시간을 바꾸고, 색을 교체하세요. 꼼꼼한 사람이 쓴 코드처럼 읽힙니다.
SVG에서 애니메이션으로 가는 경로입니다. 가지고 있는 SVG를 올리고 움직임만 설명하세요. 이미 배포한 로고나 아끼는 아이콘에 잘 맞습니다.
기본값은 Claude Sonnet 5가 마크업을 씁니다. 정밀한 벡터 코드는 이 계열이 특히 잘하는 영역입니다. 더 빠르게 또는 더 묵직하게 처리하고 싶다면 등급을 바꾸거나, 고급 설정에서 엔진을 직접 지정하세요.
애니메이션 SVG 생성에 관해 자주 받는 질문입니다. 더 궁금한 점은 support@imagesv2.ai 로 보내 주세요.
가장 잘 맞는 건 미리 정해진 동선을 재생하는 선언형 모션입니다.
(1) 웹·UI 소재 — 로딩, 스스로 그려지는 로고, 파도 배경, 움직이는 404 페이지.
(2) 텍스트 연출 — 타자기, 키네틱 타이포그래피, 스스로 쓰이는 손글씨.
(3) 설명용 도해 — 도는 행성, 타임라인, 자라나는 그래프, 작동 원리 반복 도해.
맞지 않는 것: 자바스크립트 기반 시뮬레이션이나 게임(수치가 실시간으로 변하는 물리 표현, 상호작용 애플릿). 정지된 로고와 일러스트는 GPT Image 2 SVG 생성기를, 순서도와 다이어그램은 AI SVG 다이어그램 생성기를 사용하세요.
네, 이 페이지가 기본적으로 바로 그렇게 작동합니다. Anthropic의 Claude Sonnet 5가 SVG 마크업과 CSS 키프레임을 도형 단위, 프레임 단위로 직접 씁니다. 텍스트 설명에서 벡터 코드를 써 내는 일은 최전선 모델들이 눈에 띄게 잘하게 된 영역이고, Claude는 그중에서도 꾸준히 상위권입니다. 다만 선택지가 이것 하나는 아닙니다. 등급 전환으로 Gemini 3.6 Flash와 Kimi K3도 쓸 수 있고, 고급 설정에서는 GPT-5.6, DeepSeek V4 Flash, MiniMax M3를 직접 지정할 수 있습니다. 위에 한 문장을 적고 코드 보기를 열어, 선택한 엔진이 무엇을 썼는지 직접 확인해 보세요.
웹사이트에 올리는 것이라면 모든 면에서 애니메이션 SVG가 낫습니다. 메가바이트가 아니라 수십 킬로바이트, 어떤 배율에서도 선명함, 매끄러운 무한 반복, 구워진 픽셀이 아니라 고칠 수 있는 코드. GIF의 장점은 딱 하나, SVG 업로드를 받지 않는 플랫폼(일부 메신저와 SNS 피드)에서 재생된다는 점입니다. 기준을 정하자면 자사 사이트·슬라이드·문서에는 SVG, 플랫폼 사정으로 어쩔 수 없을 때만 GIF. 미리 정해 둘 필요는 없습니다. 생성 결과는 모두 같은 결과물에서 GIF와 MP4로 내보낼 수 있고, 브라우저 안에서 처리되므로 추가 크레딧도 들지 않습니다.
두 가지 방법이 있습니다.
(1) 이미지로 — .svg를 올리고 일반 img 태그로 불러오면 됩니다. 파일 안의 CSS 키프레임이 자동으로 재생됩니다.
(2) 인라인으로 — 코드 보기에서 코드를 복사해 HTML에 붙여 넣습니다. 마우스를 올렸을 때 반응하게 하려면 인라인을 쓰세요. 상호작용은 SVG가 페이지 안에 있을 때만 동작합니다.
어느 쪽이든 불러올 스크립트도, 따로 설치할 것도 없습니다.
아니요. 출력물은 순수한 선언형 애니메이션, 즉 SVG 파일 자체에 쓰인 CSS 키프레임(가끔 SMIL)입니다. GSAP도, Lottie 플레이어도, 실행용 라이브러리도 없습니다. 그래서 인라인으로 넣어도 안전하고, 빠르게 로드되며, 현대 브라우저 전반에서 동작합니다. 한 가지만 솔직히 덧붙이면, 대부분의 메일 클라이언트는 SVG 애니메이션을 멈춰 버리므로 뉴스레터에는 GIF가 더 안전합니다.
네, 그게 두 번째 모드입니다. SVG를 올리고 원하는 움직임(외곽선을 한 획씩 그리기, 은은하게 떠다니기, 강조색을 맥박치게 하기 등)을 설명하면, 원본 도형은 그대로 둔 채 애니메이션만 더해집니다. 로고가 PNG나 JPG밖에 없다면 먼저 GPT Image 2 SVG 생성기로 변환한 뒤 여기서 움직이게 하세요.
네, 둘 다 무료입니다. SVG가 본래의 결과물이고, GIF와 MP4는 사용자의 브라우저 안에서 애니메이션을 한 프레임씩 재생하며 만들어집니다. 어디에도 업로드되지 않고 추가 크레딧도 청구되지 않습니다. SVG 업로드가 안 되는 곳에는 GIF를, 숏폼 영상·슬라이드·강의 자료에는 MP4를 쓰세요. MP4 인코딩에는 WebCodecs를 지원하는 브라우저(Chrome, Edge, 최신 Safari)가 필요합니다. 지원하지 않는 환경에서는 SVG와 GIF가 그대로 동작하고 MP4 버튼만 비활성화됩니다.
생성 1회당 10 크레딧으로, 이 사이트의 다른 SVG 도구와 같습니다. 신규 가입자에게는 무료 크레딧을 드리니 먼저 사용해 보세요.
대부분의 애니메이션은 1분도 걸리지 않습니다. 요소가 많은 장면이나 긴 연출은 2분까지 걸릴 수 있습니다. AI가 도형과 키프레임을 하나씩 직접 쓰고 있기 때문입니다.
네. 생성한 애니메이션은 사용자의 것이며 상업적 이용도 무료입니다. 클라이언트 작업에도, 제품 안에도, 유료 콘텐츠에도 쓸 수 있습니다.
