선택한 JSON 파일은 브라우저에서 파싱되며 애플리케이션 서버에 의도적으로 업로드하거나 제품 데이터베이스에 저장하지 않습니다.
JSON 파일을 여기에 드래그 앤 드롭하세요!
애니메이션 크기(뷰포트 포함): 0 x 0
"파일 선택" 버튼을 클릭하거나 .json 파일을 뷰어에 놓으세요. 롯티 형태의 JSON 구조를 확인하지만 고급 기능과 외부 에셋은 플랫폼별 추가 테스트가 필요할 수 있습니다.
선택한 JSON을 브라우저에서 파싱하고 lottie-web으로 렌더링합니다. 로딩과 재생 성능은 파일 복잡도, 참조 에셋, 브라우저와 기기에 따라 달라집니다.
크기, 타이밍, 레이어, 정적 복잡도 신호, 플랫폼 민감 기능과 시작용 통합 코드를 확인한 뒤 실제 애플리케이션에서 검증하세요.
선택한 JSON 파일은 클라이언트에서 파싱되며 애플리케이션 서버에 의도적으로 업로드하거나 제품 데이터베이스에 저장하지 않습니다. 파일이 외부 이미지나 글꼴을 참조하면 브라우저가 해당 리소스를 요청할 수 있습니다.
lottie-web으로 렌더링하며 별도의 파일 처리 왕복을 두지 않습니다. 실제 로딩과 재생 성능은 파일 복잡도, 에셋, 브라우저와 기기에 따라 달라집니다.
최신 데스크톱, 태블릿, 모바일 브라우저에 맞게 화면이 조정됩니다. 매우 크거나 복잡한 애니메이션은 메모리, 렌더러 지원 또는 기기 성능의 영향을 받을 수 있습니다.
메타데이터, 레이어, 재생, 배경, 휴리스틱 성능 신호, 호환성 표시와 코드 스니펫을 살펴본 뒤 대상 앱과 런타임에서 결과를 검증하세요.
롯티(Lottie)는 벡터 기반 애니메이션을 실시간으로 렌더링하는 오픈소스 애니메이션 파일 포맷입니다. Airbnb에서 만들었으며 Adobe After Effects의 Bodymovin 플러그인을 사용하여 JSON 데이터로 내보냅니다.
프레임별 래스터 형식과 달리 롯티는 애니메이션 명령을 구조화된 데이터로 저장하고 재생 제어를 제공할 수 있습니다. 파일 크기와 확장성은 임베디드 이미지, 효과와 내보내기 방식에 따라 달라집니다.
웹, iOS, Android 등 여러 환경에 롯티 플레이어가 제공됩니다. 런타임마다 기능 지원이 다르므로 웹 미리보기 뒤에 각 대상 플랫폼에서 테스트해야 합니다.