JSON 애니메이션 튜토리얼: 내보내기부터 검증된 통합까지

1. 내보내기 전에 런타임 계약 정의

대상 플랫폼, 플레이어 라이브러리, 컨테이너 종횡비, 배경, 반복 방식, 상호작용, 모션 감소 대체안과 에셋 로딩 정책을 적으세요. 이 조건이 안전한 After Effects 기능과 파일 패키징 방식을 결정합니다.

• 컴포지션 기본값을 그대로 쓰지 말고 모션에 필요한 프레임레이트를 선택합니다.
• 개발자가 제어할 상태에 맞춰 레이어와 마커 이름을 정합니다.
• 가능하면 벡터 도형을 쓰고 필요한 래스터 에셋과 글꼴은 문서화합니다.
• 웹에서 되는 Expression이나 효과가 모바일에서도 된다고 가정하지 않습니다.

2. JSON 내보내기와 구조 점검

Bodymovin 등 호환 도구로 내보낸 뒤 원본 컴포지션, 내보내기 도구 버전과 설정을 결과물과 함께 보관하세요. JSON을 뷰어에 넣고 크기, 재생 시간, 레이어 수, 에셋 수, 마커와 파일 크기가 인계 조건과 맞는지 비교합니다.

레이어 트리에서 이름 없는 레이어, 예상하지 못한 숨김 레이어, 마스크, 효과, 3D 플래그와 부모 관계를 확인하세요. 최소 구조 검사에 실패하면 임의의 JSON 파일 이름을 바꾸기보다 문법과 필수 컴포지션 필드를 먼저 점검합니다.

3. 제안은 검토 신호로 해석

분석기는 내장 이미지, Expression, 중복 도형 경로, 조밀한 키프레임, 과도하게 큰 이미지, 숨김 레이어와 마커 부재를 표시할 수 있습니다. 표시는 오류의 확정 판정이 아니라 파일 크기, 유지보수성, 호환성이나 런타임 비용에 영향을 줄 수 있는 속성을 찾는 신호입니다.

• 관련 레이어로 이동해 원본 컴포지션에서 사실을 확인합니다.
• 한 번에 하나의 내보내기 결정을 바꾸고 메타데이터를 비교합니다.
• 공개된 점수 세부값을 사용하고 등급을 기기 벤치마크로 해석하지 않습니다.

4. 통합, 측정과 대체 UI

대상 스니펫을 복사한 뒤 에셋 경로, 생명주기, 오류 처리, 접근성과 프레임워크 규칙을 실제 프로젝트에 맞게 바꾸세요. 화면 이동 시 플레이어 생성과 정리가 짝을 이루는지 확인해 인스턴스 누수를 막습니다.

실제 컨테이너에서 다운로드, 파싱, 첫 프레임, 메모리와 프레임 동작을 측정하세요. 누락 에셋과 미지원 기능도 시험하고, 모션이 필수가 아니거나 사용자가 모션 감소를 요청하면 정적 대체안을 제공합니다.