Lottie Inspector

폴더를 끌어다 놓으세요
여기에 놓으세요 .lottie / .json · 하위 폴더 포함

Lottie 폴더를 끌어다 놓으세요

.lottie / .json 을 폴더째 넣으면 하위 폴더별로 묶여 정렬됩니다. 캔버스 규격과 배경 경계를 정확히 확인할 수 있습니다.

파일은 브라우저 안에서만 열립니다. 서버로 업로드되지 않습니다.

처음이신가요? Lottie 가이드와 FAQ를 확인해 보세요.

Lottie Inspector — 업로드 없이 브라우저에서 바로 검수하는 로티(.lottie/.json) 뷰어

Lottie Inspector는 디자이너에게 받은 Lottie 애니메이션 파일을 앱을 빌드하지 않고, 서버에 올리지 않고, 폴더째 열어서 확인하는 무료 검수 도구입니다. 캔버스 규격이 스펙과 맞는지, 어두운 배경에서도 잘 보이는지, 파일이 비정상적으로 크지 않은지, 루프가 매끄럽게 이어지는지 — 출시 전에 반드시 확인해야 하지만 매번 앱을 실행해 보기엔 번거로운 것들을 한 화면에서 끝냅니다. iOS 앱을 만들면서 파일 하나 바뀔 때마다 Xcode 빌드를 기다리던 개발자가 직접 만들었습니다.

이렇게 씁니다 — 3단계

  1. 폴더를 끌어다 놓습니다. 상단의 폴더 열기 버튼이나 드래그 앤 드롭으로 에셋 폴더 전체를 넣으면 하위 폴더까지 재귀적으로 읽어 폴더별로 묶어 보여줍니다. .lottie(dotLottie)와 .json을 모두 지원하며, Lottie가 아닌 파일은 자동으로 걸러내고 오류 카드로 이유를 알려줍니다.
  2. 배경과 규격선을 켜고 확인합니다. 투명(체커보드)·흰색·어두움·커스텀 배경을 전환하고, 스포이드로 화면의 아무 색이나 뽑아 실제 서비스 배경색 위에서 봅니다. 규격선은 캔버스의 실제 경계를, 중심선은 정렬 상태를 드러냅니다.
  3. 정렬·검색으로 문제 파일을 찾습니다. 파일 크기·재생 시간·가로 크기·레이어 수로 정렬하면 최적화가 필요한 에셋이 맨 위로 올라옵니다. 속도를 0.25×로 낮추면 이징이나 프레임 결함도 보입니다.

검수 화면에서 확인할 수 있는 것

파일은 브라우저 밖으로 나가지 않습니다

모든 파싱과 렌더링은 이용자의 브라우저 메모리 안에서 끝납니다. 업로드 서버가 존재하지 않으므로 출시 전 비공개 에셋, 사내 디자인 시스템 파일도 안심하고 열 수 있습니다. 개발자 도구의 네트워크 탭에서 직접 확인할 수 있고, 탭을 닫으면 파일 데이터는 메모리에서 사라집니다. 자세한 내용은 개인정보처리방침에 정리했습니다.

자주 묻는 질문

어떤 파일 포맷을 지원하나요?

.json(Lottie/Bodymovin 원본)과 .lottie(dotLottie 컨테이너)를 지원합니다. 일반 JSON 설정 파일이나 손상된 파일은 오류 카드로 분류되고, 이미지·텍스트 등 미지원 형식은 상단 상태 표시줄에 제외 개수로 표시됩니다.

여기서 잘 보이면 앱에서도 똑같이 나오나요?

대부분 그렇지만 100%는 아닙니다. 이 뷰어는 lottie-web으로 렌더링하며, iOS(lottie-ios)·Android(lottie-android) 런타임은 지원 기능 경계가 조금씩 다릅니다. 규격·용량·배경·루프는 여기서 확인하고, 최종 확인은 대상 플랫폼 실기기에서 한 번 더 하는 것을 권장합니다.

무료인가요? 회사 프로젝트에 써도 되나요?

네. 회원가입 없이 무료이며 상업 프로젝트의 에셋 검수에 자유롭게 사용할 수 있습니다. 더 많은 질문은 FAQ에서 확인하세요.

실무 가이드 읽기

Lottie를 실제 프로덕트에 넣으면서 정리한 노하우입니다. 처음이라면 Lottie 완벽 가이드부터 보세요.

만든 이유와 운영 원칙은 소개 페이지에 정리했습니다. 버그 제보와 기능 제안은 소개의 문의 안내를 참고해 주세요.