출력 형식 선택

필요한 기능을 잃지 않도록 원본 또는 최적화된 dotLottie, Lottie JSON, Animated SVG 가운데 알맞은 출력 형식을 선택하세요.

먼저 애플리케이션 런타임에 필요한 형식을 고른 뒤, 그 형식 안에서 최적화된 결과를 선택하세요.

빠른 선택 가이드

  • 런타임에서 dotLottie를 지원한다면 프로덕션에는 **최적화된 .lottie**를 사용하세요.

  • 번들 원본을 그대로 유지해야 하거나 최적화된 버전이 없다면 **원본 .lottie**를 사용하세요.

  • 대상 플레이어가 JSON만 지원하고 dotLottie 전용 기능이 필요하지 않을 때만 Lottie JSON을 사용하세요.

  • SMIL을 지원하고 Lottie 런타임 컨트롤이 필요하지 않은 SVG 기반 환경에는 **Animated SVG(SMIL)**를 사용하세요.

형식 비교

출력 형식이럴 때 사용하세요고급 dotLottie 기능 보존
최적화된 .lottiedotLottie 런타임을 사용하는 가벼운 프로덕션 배포보존
원본 .lottie원본 번들과 모든 기능을 최대한 그대로 보존보존
최적화된 Lottie JSONJSON 전용 플레이어에서 더 작은 파일 사용보존 안 됨
원본 Lottie JSON레거시 또는 JSON 전용 연동보존 안 됨
Animated SVG(SMIL)호환되는 환경에서 SVG 기반 재생매니페스트 기능 제외

원본과 최적화 버전

최적화된 버전은 불필요한 데이터를 줄여 더 빠르게 불러올 수 있습니다. 이 기능은 요금제에 따라 제공되며 사용할 수 있을 때만 표시됩니다. 원본보다 용량을 줄이지 못한다면 확장 프로그램에서 최적화 버전을 숨길 수 있습니다.

특히 마스크, 텍스트, 그레이디언트 또는 고급 효과가 포함된 애니메이션은 대상 런타임에서 최적화된 결과를 반드시 테스트하세요.

JSON 기능 손실 경고

Lottie JSON은 애니메이션 하나를 나타내며 dotLottie 매니페스트가 없습니다. 원본 .lottie에 고급 기능이 포함되어 있다면 JSON을 다운로드하거나 URL로 사용하기 전에 확장 프로그램에서 경고합니다.

애플리케이션에 다음 기능이 필요하다면 .lottie를 사용하세요.

  • 여러 개의 내장 애니메이션

  • 테마 또는 모션 토큰

  • 상태 머신

  • 번들 단위의 매니페스트 메타데이터 또는 에셋

Animated SVG(SMIL)

Animated SVG는 SVG 중심의 웹 워크플로에 유용하지만 브라우저와 호스트 환경에서 SMIL을 지원하는지 확인해야 합니다. 확장 프로그램은 현재 미리 보기에서 저장하지 않은 팔레트 변경이 아니라 원본 애니메이션 소스를 사용해 SVG를 내보냅니다.

형식 다운로드

  1. Explore 또는 Workspace 애니메이션을 엽니다.

  2. Download formats를 펼칩니다.

  3. 형식과 최적화 여부, 용량, 예상 절감량을 비교합니다.

  4. 출력 형식을 선택합니다.

  5. 프로젝트나 관리할 폴더에 저장합니다.

VS Code에서 확인하는 애니메이션 미리 보기와 최적화된 dotLottie 다운로드
VS Code에서 확인하는 애니메이션 미리 보기와 최적화된 dotLottie 다운로드

관련 문서

마지막 업데이트: 2026년 9월 11일 오후 12:08Common.editThisPage