텍스트로 만드는 Lottie 애니메이션, Diffusion Studio 'text-to-lottie' 출시

Diffusion Studio의 오픈소스 혁신: 자연어로 Lottie 애니메이션을 만드는 'text-to-lottie'

새로운 오픈소스 'text-to-lottie'란?

UI 개발의 필수 요소가 된 Lottie 애니메이션을 생성하는 방식이 완전히 새로워졌습니다. 이번에 Diffusion Studio가 전격 공개한 text-to-lottie는 Claude Code나 Codex 등 스킬(Skills)을 지원하는 모든 AI 코딩 에이전트와 연동하여 작동하는 오픈소스 도구입니다.

복잡한 키프레임이나 SVG 그래픽 요소를 직접 수정하며 고군분투할 필요 없이, 에이전트에게 자연어 텍스트로 지시를 내리면 프로덕션 수준의 고품질 Lottie 애니메이션을 즉시 생성해 줍니다.

Quick Start: 단 몇 초 만에 시작하기

설치 과정과 에이전트를 이용한 구동 방법은 놀라울 정도로 단순합니다.

1. 스킬 설치하기

npx skills add diffusionstudio/lottie

2. 에이전트에게 구현 요청하기

스킬이 준비되면 사용 중인 코딩 에이전트에게 text-to-lottie를 사용해 필요한 움직임을 텍스트로 요청해 보세요.

사용 예시 프롬프트:

Create a Lottie animation from the SVG path in https://github.com/JaceThings/SF-Hello/blob/main/SVG/hello-en.svg. Reveal the path with an animation that follows the natural path direction. Apply a premium apple themed gradient to the path. Use ease-in-out timing, a transparent background, and preserve the original SVG geometry.

위와 같은 자연어 지시사항을 통해 코딩 에이전트가 테스트 및 편집을 지원하는 자체 하네스 플레이어를 빌드하여 제공하고, 개발자는 이를 통해 애니메이션을 손쉽게 확인하고 수정할 수 있게 됩니다.

실패 없는 결과물을 얻기 위한 프롬프트 가이드 5가지

AI 에이전트가 의도에 알맞은 고해상도 Lottie 파일을 정교하게 생성할 수 있도록 작성할 때 아래 5가지 팁을 적극 활용해 보세요.

• 1. 구체적인 리소스 제공 (Ground the model): 가급적 사용할 실제 SVG 파일 경로, 실데이터 소스, 또는 기준이 될 수 있는 이미지(스크린샷)를 제공해 주세요. 구체적인 에셋이 주어졌을 때 모델이 훨씬 완성도 높은 아웃풋을 생성합니다.
• 2. 전문 모션 그래픽 용어 사용: 움직임의 가속도나 리듬을 설명할 때 단순히 '느리게 움직여줘'라고 하기보다는 ease-in, ease-out, ease-in-out 같은 모션 전용 전문 타이밍 용어를 사용하는 것이 훨씬 정확하게 반영됩니다.
• 3. 카메라 감독처럼 시야 상상하기: 줌인(Zoom), 패닝(Pan), 푸시(Push) 등 정적인 일러스트를 동적으로 비추는 카메라 워크 요소를 프롬프트에 녹여내세요. 에이전트가 그룹 변환(Group Transforms)을 통해 이러한 깊이감 있는 움직임을 아주 자연스럽게 시뮬레이션해 줍니다.
• 4. 커스텀을 위한 컨트롤러 요청하기: 기본적으로 출력물은 배경색 조절 기능만 노출되지만, 런타임에 다이나믹하게 속성을 변경하고 싶다면 특정 매개변수를 직접 수정할 수 있는 커스텀 제어 장치(Control)를 요구하면 됩니다.
• 5. 정밀한 FPS와 재생 시간 명시: 특정 프레임 레이트나 러닝타임이 고정되어야 하는 프로젝트의 경우, 원하는 프레임 수(total frame count)와 FPS를 프롬프트에 직접 지정해 오차 없이 설계하세요.

개발 플랫폼별 애니메이션 활용 코드 가이드

생성된 Lottie 파일은 표준 JSON 형식으로 바로 저장해 사용하거나, 필요 시 Adobe After Effects로 가져가 정밀하게 다듬을 수 있습니다. 아래의 코드 구현 형태를 참조해 즉시 통합을 진행해 보세요.

1. Web / Vanilla HTML

<script src="https://unpkg.com/lottie-web/build/player/lottie.min.js"></script>
<div id="anim"></div>
<script>
  lottie.loadAnimation({
    container: document.getElementById("anim"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "/animations/my-animation.json"
  });
</script>

2. React Native

import LottieView from "lottie-react-native";

export default function Loader() {
  return (
    <LottieView
      source={require("./animation.json")}
      autoPlay
      loop
      style={{ width: 200, height: 200 }}
    />
  );
}

3. React Native Skia (Skottie)

Skottie 라이브러리를 사용하면 런타임 도중 셰이더, 마스킹, 효과 등 화려한 시각적 효과와 결합하고 애니메이션 매개변수를 실시간으로 훌륭하게 바인딩할 수 있습니다.

import { Skia, Canvas, Skottie, useClock } from "@shopify/react-native-skia";
import { useDerivedValue } from "react-native-reanimated";

const animation = Skia.Skottie.Make(JSON.stringify(require("./animation.json")));

export default function Loader() {
  const clock = useClock();
  const frame = useDerivedValue(
    () => ((clock.value / 1000) % animation.duration()) * animation.fps()
  );
  return (
    <Canvas style={{ width: 200, height: 200 }}>
      <Skottie animation={animation} frame={frame} />
    </Canvas>
  );
}

4. iOS Swift

import Lottie

let animationView = LottieAnimationView(name: "animation")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
view.addSubview(animationView)
animationView.play()

5. Android Kotlin

val view = findViewById<LottieAnimationView>(R.id.animationView)
view.setAnimation(R.raw.animation)
view.loop(true)
view.playAnimation()

6. Flutter

먼저 프로젝트 pubspec.yaml 파일에 라이브러리 종속성을 추가해 줍니다.

dependencies:
  lottie: ^latest

그리고 위젯 내에서 아래와 같이 Lottie 정적 자산을 호출하면 즉시 화면에 렌더링됩니다.

import 'package:lottie/lottie.dart';

Lottie.asset('assets/animation.json')

출처 및 공식 프로젝트 레포지토리 : Diffusion Studio - lottie (GitHub)