JSON 애니메이션 뷰어를 사용하면 브라우저에서 직접 롯티 애니메이션 파일을 간단하게 미리 볼 수 있습니다. 설치할 소프트웨어도, 만들 계정도, 서버에 업로드할 파일도 없습니다. 모든 것이 기기에서 로컬로 실행됩니다. 이 가이드에서는 도구를 최대한 활용할 수 있도록 모든 기능을 안내합니다.
JSON 애니메이션 뷰어 홈페이지로 이동하세요. 화면 중앙에 큰 드롭 영역이 있는 깔끔한 인터페이스가 표시됩니다. 뷰어는 즉시 애니메이션 파일을 받을 준비가 되어 있습니다. 로그인이 필요 없고 시작 전에 설정할 것도 없습니다.
롯티 JSON 파일을 뷰어에 로드하는 두 가지 방법이 있습니다:
유효한 롯티 JSON 파일만 지원됩니다. 다른 파일 형식을 로드하려고 하면 뷰어가 해당 형식이 인식되지 않음을 알려줍니다. 파일의 확장자가 .json이고 유효한 롯티 애니메이션 데이터를 포함하는지 확인하세요.
파일이 로드되면 애니메이션이 자동으로 재생되기 시작합니다. 원본 크기로 뷰포트에서 렌더링된 것을 볼 수 있습니다. 파일 이름이 애니메이션 위에 표시되어 올바른 파일을 로드했는지 확인할 수 있으며, 프로젝트 중 여러 애니메이션 파일로 작업할 때 특히 유용합니다.
뷰어는 Airbnb의 공식 lottie-web 라이브러리를 사용하여 애니메이션을 렌더링합니다. 뷰어에서 보이는 것이 프로덕션에서 애니메이션이 실행될 때 사용자가 보는 것과 정확히 동일합니다. 색상, 타이밍, 이징 커브, 레이어 구성 모두 충실하게 렌더링됩니다.
애니메이션 뷰포트 아래에 크기 슬라이더가 있습니다. 왼쪽으로 드래그하면 축소, 오른쪽으로 드래그하면 확대됩니다. 소스 파일을 편집하지 않고도 다양한 크기에서 애니메이션이 어떻게 보이는지 테스트할 수 있습니다.
애니메이션의 원본 크기(너비와 높이, 픽셀 단위)가 뷰포트 옆에 표시됩니다. 이 정보는 JSON 데이터에서 직접 가져오며 애니메이터가 설정한 의도된 렌더 크기를 알려줍니다. 이 크기를 알면 CSS 레이아웃과 컨테이너 크기를 계획하는 데 도움이 됩니다.
뷰어는 애니메이션 파일에서 핵심 메타데이터를 자동으로 추출하고 표시합니다. 원본 너비와 높이를 확인하여 디자이너가 의도한 종횡비를 알 수 있습니다. 반응형 컨테이너를 설정하거나 다양한 화면 크기의 중단점을 결정할 때 유용합니다.
애니메이션의 재생 동작에 주의하세요. 롯티 애니메이션은 뷰어에서 기본적으로 반복 재생되어 연속적인 미리보기를 제공합니다. 최종 내보내기 전에 After Effects 프로젝트에서 수정이 필요할 수 있는 시각적 결함, 예상치 못한 레이어 순서, 타이밍 문제가 있는지 확인하세요.
다른 파일을 미리 보고 싶으신가요? 새 JSON 파일을 뷰어에 드래그하거나 선택 버튼을 다시 클릭하면 됩니다. 이전 애니메이션이 즉시 대체됩니다. 세션에서 미리 볼 수 있는 파일 수에 제한이 없습니다. 모든 것이 브라우저에서 실행되므로 파일 간 전환이 즉각적입니다.
애니메이션 파일은 기기를 떠나지 않습니다. JSON 애니메이션 뷰어는 브라우저에서 JavaScript를 사용하여 모든 것을 로컬로 처리합니다. 서버 업로드, 파일 추적 분석, 어디에도 저장되는 데이터가 없습니다. 탭을 닫으면 애니메이션 데이터가 사라집니다. 이를 통해 독점 애니메이션과 기밀 프로젝트 자산을 안전하게 미리 볼 수 있습니다.
JSON 애니메이션 뷰어는 Adobe After Effects에서 Bodymovin 플러그인을 사용하여 내보낸 표준 롯티 JSON 파일을 지원합니다. Haiku Animator, LottieFiles 편집기, 롯티로 내보내는 Figma 플러그인 등 롯티 JSON 포맷을 출력하는 다른 도구로 만든 애니메이션도 작동합니다. 파일은 롯티 애니메이션 데이터를 포함하는 유효한 .json 파일이어야 합니다. DotLottie(.lottie) 파일은 현재 지원되지 않습니다.
뷰어 사용 중 문제가 발생하거나 질문이 있으시면 FAQ 페이지에서 일반적인 질문에 대한 답변을 확인하세요. GitHub Issues 페이지에서 버그를 보고하거나 기능을 요청할 수도 있습니다.