Start Chatting Now
제미니 3 프론트엔드 프로토타이핑 UI 디자인 AI

Gemini 3.1 로 몇 분 만에 애니메이션 SVG 만들기

Gemini3 Team · 2026년 8월 14일 · 12 min read

MidassAI Chat에서 Gemini 3 체험하기
Gemini 3.1 로 몇 분 만에 애니메이션 SVG 만들기

왜 코드 기반 애니메이션이 다시 GIF 를 이기는가

Google 의 2026 년 코드 네이티브 비주얼 추진은 디자이너를 배제하려는 것이 아닙니다. 작고 무한한 해상도의 자산을 프롬프트에서 바로 배포하려는 것입니다. Gemini 3.1 클래스 모델은 CSS 또는 SMIL 애니메이션이 포함된 유효한 SVG 마크업도 출력할 수 있습니다. 결과는 픽셀이 아닌 수학이기 때문에, 하나의 파일로 모바일 아이콘부터 히어로 섹션까지 재내보내기 없이 확장됩니다.

이 튜토리얼에서는 MidassAI Chat에서 세 가지 단계별 프로젝트를 진행합니다. 피그마 타임라인도, 애프터 이펙트도, 최종 스니펫을 붙여넣기 전까지 로컬 IDE 도 필요 없습니다.

이런 분들에게 추천합니다

  • 마이크로 인터랙션을 프로토타이핑하는 프론트엔드 개발자
  • 랜딩 페이지에 가벼운 로더와 아이콘이 필요한 마케터
  • 상호작용 다이어그램 (물리, 화학, 프로세스 흐름) 을 만드는 교육자
  • otherwise 빠른 사이트에서 2 MB GIF 로더에 지친 모든 분
MidassAI Chat에서 Gemini 3 체험하기

프롬프트 입력 전: 잘못된 출력을 방지하는 세 가지 제약 조건

첫 메시지에 항상 다음을 포함하세요:

  1. 출력 형식: "Return only raw SVG code, starting with <svg and ending with </svg>. No markdown fences."
  2. 애니메이션 엔진: "Use CSS @keyframes inside a <style> block within the SVG" (또는 SMIL 만 필요한 임베드의 경우 "use <animateTransform>")
  3. 뷰포트: "viewBox=0 0 100 100", width/height=100%, preserveAspectRatio=xMidYMid meet."

#1 이 없으면 CMS 편집기에서 마크다운 래퍼와 싸우게 됩니다. #2 가 없으면 모델이 일관되지 않은 애니메이션 API 를 선택할 수 있습니다. #3 이 없으면 모바일에서 반응형 레이아웃이 깨집니다.

프로젝트 1: 세 점 로딩 스피너 (초급)

MidassAI Chat 을 열고 다음을 전송하세요:

다음 프롬프트를 입력하세요:

Write a single self-contained SVG loading indicator: three circles in a row, staggered bounce animation, 1.2s loop, colors #4F46E5 / #6366F1 / #818CF8. Output only raw SVG. Include CSS keyframes inside the SVG. viewBox 0 0 120 40.

60 초 내 검증하기:

  1. 출력을 복사하여 빈 .html 파일의 <body> 안에 붙여넣습니다.
  2. 크롬에서 열기—애니메이션이 부드럽게 루프되어야 합니다.
  3. 파일 크기 확인—3 KB 미만이어야 합니다.

일반적인 수정: 원이 상단에서 잘리면 답장하세요: "Increase viewBox height by 20% and reduce bounce amplitude by 15%."

프로젝트 2: 인터랙티브 버튼 호버 상태 (중급)

목표: 호버 시 스트로크 색상이 변하는 SVG 아이콘—순수 CSS, 자바스크립트 없음.

프롬프트 템플릿:

다음 프롬프트를 입력하세요:

Create an SVG icon (24×24 logical size, scalable) of a chat bubble. On :hover via CSS inside the SVG, transition stroke from #64748B to #2563EB over 200ms ease-out. Include role="img" and <title>Chat</title>. Output raw SVG only.

사이트의 아이콘 슬롯에 붙여넣거나 HTML 에 인라인으로 삽입하세요. 호버는 CSS 기반이므로 정적 페이지와 대부분의 CMS HTML 블록에서 작동합니다.

함정: 일부 샌티타이저는 <style> 태그를 제거합니다. CMS 가 스타일을 제거하면 후속 질문에서 Gemini 에게 "move animation to inline style attributes on each element"라고 요청하세요.

프로젝트 3: 트리거가 있는 교육용 시뮬레이션 (고급)

Gemini 를 상호작용 다이어그램에 사용하는 화학 및 물리 교육자에서 영감을 받아 단일 파일 시뮬레이션을 구축하세요:

다음 프롬프트를 입력하세요:

Generate a single-file interactive SVG illustrating a simple state machine: Idle → Loading → Success. Include a <button> inside <foreignObject> labeled "Run". On click, animate a progress arc from 0° to 360° over 2s, then show a green checkmark. Use CSS classes toggled via minimal inline JS inside <script> within SVG (CDATA wrapped). Output only the SVG document.

테스트 체크리스트:

  • 버튼 클릭은 사이클당 정확히 한 번 발생
  • 두 번째 클릭 시 애니메이션이 깔끔하게 리셋
  • 외부 자산 또는 폰트 없음

타겟 플랫폼에서 <foreignObject> 가 실패하면 Gemini 에게 "replace foreignObject button with an <a> trigger using href='#run' and :target CSS pseudo-class."라고 요청하세요.

반복 루프: 처음부터 다시 시작하지 않고 다듬는 법

각 답변을 일회성이 아닌 버전으로 Treat 하세요:

  1. 현재 SVG 붙여넣기.
  2. 시각적 변경 사항 하나 설명 ("slower easing", "flat design, no gradients").
  3. 질문: "Return full updated SVG; preserve viewBox and accessibility title."

Gemini 3 는 좌표를 고정할 때 공간 편집을 잘 처리합니다 ("move the center dot from (50,50) to (50,45)").

SVG 작업에서 Gemini 3.1 대 구형 모델

구형 모델은 종종:

  • 깨진 XML 출력 (닫히지 않은 경로)
  • HTML 과 SVG 네임스페이스 혼합 오류
  • 대체 수단 없이 폐기된 SMIL 로 애니메이션

Gemini 3.1 클래스 출력은 일반적으로 로더 및 아이콘 작업에서 현대 브라우저에서 첫 시도 만에 렌더링됩니다—하지만 임베드 컨텍스트 (WordPress, Notion, 이메일 클라이언트는 스크립트를 공격적으로 제거함) 에서 항상 검증하세요.

comparison-table {"headers":["Output type","File size vs GIF","Scales to 4K?","Editable?"],"rows":[["Animated GIF","Large (100KB–2MB)","No (pixel blur)","No"],["Gemini SVG + CSS","Often <10KB","Yes","Yes — text edit"]]}}

배포 전 프로덕션 체크리스트

  • 출력을 W3C SVG validator 또는 동등한 도구로 실행
  • Safari + Chrome 에서 테스트 (CSS 애니메이션 타이밍이 약간 다름)
  • CMS 가 <style> / <script> 를 제거하지 않는지 확인
  • prefers-reduced-motion 미디어 쿼리 추가—후속 질문에서 Gemini 에게 생성 요청
  • 조직 정책에 따라 AI 지원 자산 표기

이 워크플로우를 사용하지 말아야 할 때

다음의 경우 AI 생성 SVG 애니메이션을 건너뛰세요:

  • 브랜드 가이드라인에서 잠긴 디자인 시스템 구성 요소 필요
  • 피그마에 이미 있는 복잡한 이징 곡선과 Lottie 통합 필요
  • 타겟 환경이 이메일 (SVG 지원 일관성 없음)

마케팅 사이트, 문서 포털 및 내부 도구의 경우 프롬프트 투 SVG 가 아이디어에서 임베드까지 가장 빠른 경로 중 하나입니다.

다음 단계

프로젝트 1 을 실행하고 스피너를 스테이징 페이지에 붙여넣은 다음 브랜드 색상으로 반복하세요. MidassAI Chat 은 브라우저에서 Gemini 3 클래스 코드 생성을 제공합니다—AI Studio 프로젝트 설정이 필요 없습니다.

summary-box {"title":"Tutorial recap","rows":[["Tool","MidassAI Chat + Gemini 3"],["Output","Self-contained animated SVG"],["Key prompt rule","Raw SVG only, CSS keyframes inside"],["Validate","Browser + file size under 10KB"]]}}

관련 글

MidassAI Chat에서 Gemini 3 체험하기