Text-to-Lottie: 코딩 에이전트로 프로덕션급 Lottie 애니메이션을 만드는 에이전트 스킬

읽을거리&정보공유
, , , , , ,
1

Text-to-Lottie: 코딩 에이전트로 Lottie 애니메이션을 만드는 프레임워크

Text-to-Lottie 소개

Text-to-Lottie는 Claude Code, Codex처럼 스킬을 지원하는 코딩 에이전트에게 프롬프트를 주어 프로덕션급 Lottie 애니메이션을 생성하는 오픈소스 프레임워크입니다. Lottie는 웹과 모바일에서 가볍게 재생되는 벡터 애니메이션 포맷으로, 보통 디자이너가 After Effects에서 만들어 개발자에게 JSON으로 넘기는 방식으로 제작됩니다. Text-to-Lottie는 그 제작 과정을 코딩 에이전트와의 대화로 옮겨, 텍스트 설명만으로 애니메이션 JSON을 만들어 내는 데 초점을 둡니다.

이 프레임워크의 특징은 특정 모델에 묶이지 않는다는 점입니다. 별도의 전용 앱이 아니라 코딩 에이전트용 스킬(skill) 형태로 배포되므로, 스킬을 지원하는 어떤 에이전트에서도 같은 방식으로 불러 쓸 수 있습니다. 에이전트는 작업 공간과 내장 플레이어를 자동으로 구성하고, 각 애니메이션을 프로젝트 안의 하나의 씬(scene)으로 관리합니다.

아래 예시는 Text-to-Lottie로 생성한 애니메이션입니다. 텍스트 프롬프트에서 출발해 이런 형태의 결과물을 얻는 것이 이 도구의 목표입니다.

Text-to-Lottie로 생성한 Lottie 애니메이션 예시

Text-to-Lottie의 동작 방식

에이전트는 작업 공간과 함께 포함된 플레이어를 설정하고, 각 애니메이션을 프로젝트 안의 씬으로 둡니다. 씬은 public/projects/<project>/<scene>/lottie.json 경로에서 자동으로 로드되며, 에이전트가 파일을 편집하면 플레이어에서 실시간으로 갱신됩니다. 덕분에 생성된 Lottie를 곧바로 들여다보고, 타임라인을 스크럽하며, 다시 다듬는 작업을 실시간으로 반복할 수 있습니다.

기반이 되는 입력 자료를 함께 주면 결과가 크게 좋아집니다. SVG 경로, 실제 데이터, 스크린샷처럼 구체적인 자산을 근거로 삼을수록 애니메이션 품질이 올라간다고 저자는 설명합니다. 즉 "무에서 그려 달라"는 요청보다, 기존 벡터 자산에 움직임을 입히는 방향이 이 도구의 강점에 가깝습니다.

Text-to-Lottie로 생성한 또 다른 애니메이션 예시

Text-to-Lottie 설치와 사용법

스킬은 한 줄로 설치합니다.

npx skills add diffusionstudio/lottie

설치한 뒤에는 코딩 에이전트에게 text-to-lottie로 Lottie 애니메이션을 만들어 달라고 요청하면 됩니다. README가 제시하는 예시 프롬프트는 다음과 같습니다.

Create a Lottie animation from the SVG path in SF-Hello/SVG/hello-en.svg at main · JaceThings/SF-Hello · GitHub. 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.

더 나은 결과를 위한 프롬프트 작성

README는 결과 품질을 높이는 다섯 가지 프롬프트 작성 요령을 제시합니다.

  • 근거 자료 제공: 가능하면 SVG, 실제 데이터, 스크린샷을 함께 넘깁니다. 구체적인 자산을 바탕으로 할 때 결과가 눈에 띄게 좋아집니다.
  • 모션 디자인 용어 사용: ease-in, ease-out, ease-in-out 같은 모션 디자인 언어로 타이밍과 움직임을 묘사합니다.
  • 카메라 감독처럼 생각하기: 카메라 푸시, 팬, 줌 같은 움직임을 프롬프트에 넣습니다. 에이전트는 이를 그룹 변환(group transform)으로 흉내 냅니다.
  • 필요한 컨트롤 요청: 기본 출력은 보통 배경색 컨트롤만 노출합니다. 다른 속성을 조정하고 싶다면 해당 컨트롤을 만들어 달라고 명시적으로 요청해야 합니다.
  • FPS와 길이 지정: 특정 프레임 속도나 길이가 필요하면 원하는 FPS와 총 프레임 수를 프롬프트에 포함합니다.

생성한 Lottie 애니메이션 활용하기

생성된 애니메이션은 Lottie JSON 파일로 바로 쓰거나, 추가 다듬기를 위해 After Effects로 가져올 수 있습니다. 웹에서는 lottie-web 플레이어로 JSON을 불러와 재생합니다.

<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>

이 외에도 React Native(lottie-react-native 또는 React Native Skia의 Skottie 모듈), iOS Swift, Android Kotlin, Flutter용 Lottie 라이브러리로 같은 JSON을 재생할 수 있어, 한 번 만든 애니메이션을 여러 플랫폼에서 공유하기 좋습니다.

Text-to-Lottie의 라이선스

Text-to-Lottie는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.

:globe_with_meridians: Text-to-Lottie 홈페이지

:github: Text-to-Lottie 프로젝트 GitHub 저장소

더 읽어보기



이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다!
텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. :smiley:

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck:

motion-anything: 코딩 에이전트로 웹 애니메이션을 만드는 로컬 모션 엔진