사용 가이드로 건너뛰기
text-to-lottie작성자 diffusionstudio

Text to Lottie 스킬.

유효한 JSON 파일에 그치지 않고 실제 플레이어를 기준으로 Lottie 애니메이션을 만들고 수정하세요. Text to Lottie는 저장소의 로컬 Skia Skottie 미리보기를 대상으로 하며 중요한 값을 편집 가능한 컨트롤로 노출합니다.

  • Lottie
  • 모션
  • Skottie
소스 검토 · text-to-lottieSKILL.md
작업 Lottie 애니메이션 JSON을 만들고 편집합니다. 결과물 • 장면의 lottie.json • 선택적인 편집 컨트롤 • 로컬 플레이어의 프레임 단위 검토 시작 전 확인 업스트림 플레이어 프로젝트를 사용하고 장면에 필요한 폰트나 그림을 제공하세요.
편집 요약 · 소스 검토 2026-11-02 · 렌더링한 시연이 아님

01 기능 소개

플레이어가 실제로 렌더링할 수 있는 애니메이션을 만드세요

원문은 애니메이션 제작을 공식 로컬 Skottie 플레이어와 연결합니다. JSON 검증은 검사 중 하나이지 장면이 올바르게 보인다는 증거가 아닙니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

스킬은 플레이어 프로젝트 안에 장면의 lottie.json과 필요할 경우 controls.json을 작성합니다. 요청한 작업의 기본 레시피를 선택한 뒤 폰트, SVG 변환, 애니메이션 구조, 컨트롤에 필요한 추가 참고 자료만 읽습니다.

편집은 대상 장면을 확정하는 것으로 시작합니다. 명시적으로 제공한 경로가 브라우저 경로나 탐색한 맥락보다 우선합니다. 플레이어에서 편집한 값이 같은 JSON에 다시 저장될 수 있으므로 기존 파일을 수정하기 전에 에이전트는 반드시 파일을 다시 읽어야 합니다.

예상 산출물

  • 선택한 프로젝트와 장면 디렉터리에 있는 Lottie JSON 장면.
  • 라벨이 있는 조정 가능한 애니메이션 값의 선택적 컨트롤.
  • 로컬 Skottie 플레이어에서의 대표 프레임 검토.
예시 브리프 보기

브리프에서 검토까지

  1. 01
    장면을 확정하세요

    작성 전에 프로젝트와 장면을 명확히 선택하세요. 탐색은 맥락을 찾는 수단이지 무관한 애니메이션을 덮어쓸 허가가 아닙니다.

  2. 02
    레시피와 자료를 선택하세요

    애니메이션 작업을 파악하고 SVG 또는 폰트 파일을 제공하세요. 로고, 로더, 오버레이의 기본 배경은 투명입니다.

  3. 03
    바뀔 값을 노출하세요

    중요한 편집 가능 값에 슬롯과 컨트롤을 사용하고 유용한 라벨과 범위를 설정하세요. 프레임 전체 배경에는 편집 가능한 배경색이 필요합니다.

  4. 04
    실제 프레임을 검사하세요

    JSON을 검증하고 로컬 플레이어를 열어 첫 프레임, 중간 프레임, 마지막으로 보이는 프레임을 검사하세요. 자료 누락, 크롭, 레이어 순서, 타이밍을 확인하세요.

02 활용 상황

언제 사용하면 좋을까요

이 워크플로는 업스트림 로컬 플레이어 프로젝트에 의존합니다. 폰트와 가져온 그림을 프로젝트에서 사용할 수 있어야 하며 다른 Lottie 런타임은 다르게 동작할 수 있습니다.

적합한 경우

  • 편집 가능한 브랜드 모션첫 버전 이후 색상과 타이밍을 수정할 로고 등장이나 로더에 적합합니다.
  • 기존 장면 수정JSON 애니메이션이 로드되지만 Skottie에서 폰트가 없거나 그림이 잘리거나 레이어 순서가 잘못된 경우 유용합니다.

확인할 한계

  • 모든 플레이어를 보장하지 않습니다지침은 공식 로컬 Skottie 플레이어를 대상으로 합니다. 같은 파일이 동일하게 렌더링된다고 약속하기 전에 별도의 대상 런타임에서 검사하세요.
  • 자료가 자동으로 포함되지는 않습니다텍스트에는 사용 가능한 폰트 파일과 일치하는 폰트 메타데이터가 필요합니다. 가져온 SVG 그림도 정규화와 시각적 검사가 필요합니다.

준비할 입력

  • 대상 장면프로젝트와 장면 경로를 제공하고 새 장면 생성인지 기존 장면 편집인지 알려 주세요.
  • 그림과 폰트 파일사용 권한이 있는 SVG 또는 로고와 필요한 폰트를 제공하세요. 편집 가능하게 남겨야 할 도형과 텍스트를 명시하세요.
  • 모션 브리프길이, 캔버스 크기, 투명도, 반복 동작, 나중에 조정할 값을 지정하세요.

03 핵심 결정

중요한 판단 기준

  1. 유효한 파일도 빈 장면일 수 있습니다

    원문은 JSON 검증뿐 아니라 실제 플레이어 검사를 요구합니다. 파싱 성공만으로 모든 폰트 누락이나 보이지 않는 레이어를 탐지할 수는 없습니다.

  2. 마지막으로 보이는 프레임은 op 이전입니다

    Lottie의 종료 지점은 포함되지 않습니다. 권장 마지막 프레임 검사는 종료 지점 자체가 아니라 op에서 1을 뺀 프레임을 사용합니다.

  3. 컨트롤이 편집 워크플로를 바꿉니다

    플레이어 컨트롤이 소스에 변경 사항을 다시 쓸 수 있으므로 파일을 다시 읽어야 사용자의 최신 편집을 오래된 값으로 바꾸지 않습니다.

04 예시 브리프

목적을 좁힌 요청으로 시작하세요

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

플레이어 설정 검토

업스트림 소스와 저장소 설정을 읽으세요. 아래 참조는 소스 링크이며 설치 명령이 아닙니다.

업스트림 소스 파일
https://github.com/diffusionstudio/lottie/blob/3c72912fad543897f90045ed4d355813837927fc/skills/text-to-lottie/SKILL.md

기존 프로젝트 파일을 수정하기 전에 별도 테스트 장면을 사용하세요.

애니메이션 하나 설명하기

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프
text-to-lottie로 제공한 SVG 로고의 4초 반복 애니메이션을 만들어 줘. 지정한 테스트 프로젝트에 logo-loop라는 새 장면을 만들고 다른 장면은 덮어쓰지 마. 배경은 투명하게 유지하고 로고 비율을 보존해. 강조색을 라벨이 있는 컨트롤로 노출해. 일정한 선형 이동 대신 의도적인 이징을 사용해. JSON을 검증하고 공식 로컬 Skottie 플레이어를 열어 0번 프레임, 중간 프레임, 마지막으로 보이는 프레임을 검사해. 자료 누락, 크롭, 반복 불연속을 보고하고 실행한 검사와 아직 검토를 기다리는 검사를 구분해.

렌더링한 프레임 검토

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

  • 올바른 새 장면을 사용하며 기존 편집은 보존됩니다.
  • 검사한 프레임에서 로고가 잘리지 않고 보이며 배경이 투명합니다.
  • 강조색 컨트롤이 의도한 값을 바꾸고 실제 플레이어에서 반복을 확인합니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스와 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자
diffusionstudio
스킬 파일
SKILL.md
라이선스
MIT
검토한 스냅샷
2026-11-02 · 3c72912fad54
편집 소스 요약
Text to Lottie 워크플로에 대한 소스 기반 편집 검토: 대상 장면 지정, Lottie 작성, 편집 가능한 컨트롤, 로컬 Skottie 플레이어 검증. 이 목록을 위해 예제 애니메이션을 실행하지는 않았습니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타 수는 특정 시점의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 궁금한 점

유효한 Lottie JSON이면 올바른 렌더링이 보장되나요?

아니요. 원문은 로컬 플레이어에서 실제 프레임 검사를 요구합니다. 폰트 로딩, 레이어 순서, 클리핑 때문에 결과가 잘못될 수 있습니다.

어떤 Lottie 플레이어에서도 사용할 수 있나요?

검토한 지침은 로컬 Skottie 플레이어를 대상으로 합니다. 같은 지원을 가정하기 전에 의도한 런타임에서 내보낸 애니메이션을 테스트하세요.

애니메이션 색상을 편집 가능하게 할 수 있나요?

네. 원문은 중요한 조정 값에 라벨과 범위가 있는 슬롯·컨트롤을 사용하도록 지시합니다. 구체적인 컨트롤은 장면에 따라 다릅니다.

OpenDesign

애니메이션과 브리프를 함께 보관하세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/diffusionstudio/lottie/blob/3c72912fad543897f90045ed4d355813837927fc/skills/text-to-lottie/SKILL.md