JSON 애니메이션 뷰어는 계정 없이 브라우저에서 롯티 형태의 JSON 파일을 미리 보고 점검하는 도구입니다. 선택한 JSON은 클라이언트에서 파싱되며 애플리케이션 서버에 의도적으로 업로드하지 않습니다. 이 가이드에서는 재생 기능, 분석 패널, 개인정보 경계와 대상 런타임에서 추가로 확인할 항목을 설명합니다.
JSON 애니메이션 뷰어 홈페이지로 이동하세요. 화면 중앙에 큰 드롭 영역이 있는 깔끔한 인터페이스가 표시됩니다. 뷰어는 즉시 애니메이션 파일을 받을 준비가 되어 있습니다. 로그인이 필요 없고 시작 전에 설정할 것도 없습니다.
롯티 JSON 파일을 뷰어에 로드하는 두 가지 방법이 있습니다:
.json 확장자만으로 롯티 애니메이션임이 보장되지는 않습니다. 로딩에 실패하면 JSON 문법과 버전, 크기, 프레임 범위, 프레임레이트, 레이어 같은 롯티 속성을 확인하세요.
파일이 로드되면 애니메이션이 자동으로 재생되기 시작합니다. 원본 크기로 뷰포트에서 렌더링된 것을 볼 수 있습니다. 파일 이름이 애니메이션 위에 표시되어 올바른 파일을 로드했는지 확인할 수 있으며, 프로젝트 중 여러 애니메이션 파일로 작업할 때 특히 유용합니다.
웹 미리보기는 lottie-web을 사용합니다. 시각 점검에는 유용하지만 iOS, Android, React Native 또는 실제 프로덕션 컨테이너에서 같은 결과를 보장하지 않습니다. 특히 마스크, 효과, Expression, 3D 레이어와 외부 에셋을 쓴 파일은 모든 대상 런타임에서 테스트하세요.
재생, 일시정지, 방향, 속도, 반복 모드, 구간과 프레임 컨트롤로 타이밍을 점검하세요. 배경 프리셋, 사용자 색상 또는 로컬 배경 이미지를 바꿔 대비와 투명도를 확인할 수 있습니다.
메타데이터 패널은 컴포지션 크기, 프레임레이트, 프레임 범위, 재생 시간, 레이어와 에셋 수, 마커와 파일 크기를 표시합니다. 이 사실값으로 컨테이너를 계획하고 내보낸 버전을 비교하세요.
레이어 패널에서 이름, 유형, 프레임 범위, 마스크, 효과, 블렌드 정보와 계층을 볼 수 있습니다. 성능 등급은 레이어 수, Expression, 마스크, 효과, 3D 레이어, 임베디드 이미지와 프레임레이트 같은 공개된 정적 신호를 조합합니다.
최적화 제안과 플랫폼 호환성 표시는 휴리스틱이며 런타임 벤치마크나 인증이 아닙니다. 관련 레이어와 공개된 분석 방법을 확인하고 대상 애플리케이션에서 결과를 검증하세요.
스니펫 패널은 현재 파일 정보를 반영한 주요 웹·모바일 런타임의 시작용 예제를 만듭니다. 에셋 경로, 생명주기, 접근성, 오류 처리는 실제 프로젝트에 맞게 수정하세요. 다른 파일은 새 JSON을 선택하거나 놓아 점검할 수 있습니다.
선택한 JSON은 브라우저 메모리에서 파싱되며 애플리케이션 서버에 의도적으로 업로드하거나 제품 데이터베이스에 저장하지 않습니다. 다만 페이지는 호스팅 제공자가 전달하고, 활성화된 경우 광고 코드가 실행될 수 있으며, 파일 안의 외부 에셋 참조가 브라우저 요청을 만들 수 있습니다. 민감한 자료를 사용하기 전에 개인정보 처리방침과 브라우저 네트워크 패널을 확인하세요.
JSON 애니메이션 뷰어는 Adobe After Effects에서 Bodymovin 플러그인을 사용하여 내보낸 표준 롯티 JSON 파일을 지원합니다. Haiku Animator, LottieFiles 편집기, 롯티로 내보내는 Figma 플러그인 등 롯티 JSON 포맷을 출력하는 다른 도구로 만든 애니메이션도 작동합니다. 파일은 롯티 애니메이션 데이터를 포함하는 유효한 .json 파일이어야 합니다. DotLottie(.lottie) 파일은 현재 지원되지 않습니다.
뷰어 사용 중 문제가 발생하거나 질문이 있으시면 FAQ 페이지에서 일반적인 질문에 대한 답변을 확인하세요. GitHub Issues 페이지에서 버그를 보고하거나 기능을 요청할 수도 있습니다.