롯티란 무엇인가요? JSON 포맷을 이해하는 실전 가이드

먼저 잡아야 할 개념

롯티 파일은 구조화된 애니메이션 데이터입니다. 최상위 필드는 컴포지션 크기, 프레임레이트, 시작·종료 프레임, 에셋과 레이어를 설명합니다. 각 레이어에는 변환, 도형, 마스크, 효과, 텍스트, 이미지 참조와 키프레임이 들어갈 수 있습니다.

실제 화면을 만드는 주체는 JSON이 아니라 플레이어 라이브러리입니다. lottie-web은 브라우저 기술로 렌더링하고 iOS와 Android 플레이어는 각자의 구현을 사용합니다. 따라서 내보낸 파일만큼 플레이어 버전과 기능 지원 범위가 중요합니다.

• w와 h는 소스 종횡비를 알려주며 최종 CSS 크기를 정하지는 않습니다.
• 재생 시간은 (op − ip) ÷ fr로 계산할 수 있습니다.
• assets에서 내장 이미지, 외부 이미지와 프리컴프를 구분하세요.
• 모든 런타임에서 같다고 가정하기 전에 레이어와 고급 기능을 확인하세요.

이 뷰어가 확인하는 범위

JSON 애니메이션 뷰어는 선택한 파일을 브라우저에서 읽고 최소 롯티 구조를 확인한 뒤 lottie-web으로 렌더링합니다. 메타데이터를 추출하고 레이어 트리를 만들며 플랫폼 민감 기능과 최적화 검토 항목을 찾습니다.

성능 등급은 공개된 정적 휴리스틱입니다. 레이어 수, Expression, 효과, 마스크, 3D 사용, 내장 이미지와 프레임레이트를 가중 조합합니다. 어디를 조사할지 정하는 데는 유용하지만 FPS, 메모리, 시작 시간이나 배터리 측정값은 아닙니다.

웹 미리보기가 정상이라는 것은 현재 브라우저에서 렌더링됐다는 뜻입니다. iOS, Android, React Native나 실제 프로덕션 컨테이너의 인증이 아닙니다.

잘 맞는 작업과 맞지 않는 작업

롯티는 아이콘, 상태 전환, 온보딩 일러스트, 로더처럼 짧고 제어 가능한 인터페이스 모션에 잘 맞습니다. 벡터 중심 파일은 선명하게 확장될 수 있고 코드에서 프레임, 속도, 방향과 구간을 제어할 수 있습니다.

사진 기반 모션, 긴 영상형 시퀀스, 미지원 After Effects 기능에 의존하는 컴포지션에는 적합하지 않을 수 있습니다. 래스터 에셋과 조밀한 키프레임은 JSON을 크게 만들고 복잡한 마스크, 효과, Expression, 3D 레이어는 런타임 차이를 만들 수 있습니다.

프로덕션 인계 체크리스트

미리보기는 인계의 첫 관문으로 보세요. 목표 컨테이너, 배경, 반복 방식, 모션 감소 동작, 대상 플레이어와 대체 UI를 기록하고 저사양·최신 대표 기기에서 같은 파일을 테스트해야 합니다.

• 타이밍, 잘림, 투명도, 글꼴과 외부 에셋을 확인합니다.
• 감지된 고급 기능의 웹·iOS·Android 지원을 비교합니다.
• 실제 앱에서 시작 시간, 메모리와 프레임 동작을 측정합니다.
• 수정을 위해 원본 컴포지션과 내보내기 설정을 JSON과 함께 보관합니다.