롯티 분석기는 어떻게 동작하나요?
게시 및 검토일: 2026년 7월 26일
JSON 애니메이션 뷰어는 파일을 재생하는 데서 끝나지 않습니다. 롯티 JSON 구조를 결정론적으로 정적 검사하고, 감지한 속성을 메타데이터·레이어·최적화·호환성·통합 가이드로 변환합니다. 이 페이지는 휴리스틱 결과를 보장으로 오해하지 않도록 분석 항목과 한계를 공개합니다.
로컬 처리 경계
선택한 JSON 파일은 브라우저의 FileReader API로 읽고 현재 탭에서 파싱한 뒤 lottie-web과 분석기에 직접 전달합니다. 애플리케이션은 JSON 파일을 애플리케이션 서버에 의도적으로 업로드하거나 제품 데이터베이스에 저장하지 않습니다.
롯티 파일은 외부 이미지 에셋을 참조할 수 있습니다. 이런 파일을 렌더링하면 브라우저나 lottie-web이 해당 에셋 URL을 요청할 수 있습니다. 기밀 파일은 에셋을 내장하거나 렌더링 전 브라우저 네트워크 패널에서 외부 참조를 확인하세요. 일반 페이지 요청과 제3자 광고 스크립트는 애니메이션 파일 처리와 별개이며 개인정보 처리방침에 설명합니다.
분석 항목
메타데이터
롯티 버전, 생성 도구, 캔버스 크기, 프레임 속도, 시작·종료 프레임, 재생 시간, 최상위 레이어 수, 에셋, 내장 이미지, 마커와 3D 플래그를 읽습니다.
레이어 구조
부모-자식 트리를 구성하고 유형, 프레임 구간, 블렌드 모드, 3D 상태, 마스크, 효과, 숨김 상태와 이름 없는 레이어를 표시합니다.
최적화 신호
내장 이미지, 이름 없는 레이어, 숨김 레이어, 표현식, 중복 도형 경로, 많은 키프레임, 과도하게 큰 이미지 에셋과 마커 부재를 알립니다. 신호는 검토 항목이지 파일 결함의 확정 판정이 아닙니다.
플랫폼 호환성
표현식, 병합 경로, 3D 레이어, 매트, 그라디언트 스트로크, 글자별 텍스트와 개별 트림 패스를 감지하고 분석기가 관리하는 웹·iOS·Android 지원 매트릭스와 비교합니다.
통합 코드
업로드한 파일명과 감지한 크기를 사용해 React, Next.js, Vue, HTML, Swift, Kotlin 시작 예제를 생성합니다. 운영 적용 전 의존성 버전과 프로젝트 규칙을 다시 확인해야 합니다.
성능 점수
점수는 정적 복잡도 휴리스틱입니다. 실제 FPS, 메모리, 배터리 또는 시작 시간 벤치마크가 아닙니다. 가중치는 다음과 같습니다.
| 레이어 수 | 20% |
|---|---|
| 표현식 | 20% |
| 효과 | 15% |
| 마스크 | 15% |
| 3D 사용 | 10% |
| 내장 이미지 | 10% |
| 프레임 속도 | 10% |
등급은 90–100점 A, 75–89점 B, 60–74점 C, 45–59점 D, 45점 미만 F입니다. 낮은 점수는 더 자세히 검토하라는 의미이며 애니메이션 실패를 예측하지 않습니다.
알려진 한계
- 분석기는 JSON 구조를 검사하며 실제 기기 벤치마크를 실행하지 않습니다.
- 호환성 결과는 관리 중인 매트릭스에서 명시적으로 감지한 기능만 다루며 플레이어 버전 간 동일한 출력을 보장하지 않습니다.
- 프리컴프는 심층 기능 검사에 포함되지만 대표 레이어 수는 최상위 레이어만 집계합니다.
- 외부 에셋, 폰트, 플레이어 설정, 브라우저 기능과 애플리케이션 코드가 렌더링 결과를 바꿀 수 있습니다.
- 제안은 원본 After Effects 프로젝트와 실제 대상 기기에서 다시 검증해야 합니다.
근거와 변경 관리
분석기 구현과 단위 테스트는 공개되어 있습니다. 점수 임계값과 감지 규칙은 검토와 테스트가 가능한 소스 변경을 통해서만 바뀝니다. 규칙이 실질적으로 변경되면 이 페이지의 검토일과 관련 글의 안내도 함께 갱신합니다.