JSON 애니메이션 뷰어란?
JSON 애니메이션 뷰어는 개발자, 디자이너, 애니메이터가 데스크톱 소프트웨어 설치 없이 롯티 JSON 애니메이션 파일을 미리 보고 점검하는 브라우저 도구입니다. 호스팅된 뷰어는 현재 계정이나 유료 기능 제한 없이 제공됩니다.
만든 이유
롯티 애니메이션은 가볍고 확장 가능한 애니메이션을 디지털 제품에 추가하는 표준이 되었습니다. 그러나 이러한 JSON 파일을 미리 보려면 일반적으로 전용 소프트웨어나 복잡한 개발 환경이 필요합니다. 우리는 브라우저에서 바로 작동하는 간단한 드래그 앤 드롭 도구로 이 문제를 해결하기 위해 JSON 애니메이션 뷰어를 만들었습니다.
우리의 목표는 브라우저에서 롯티 애니메이션을 간편하게 미리 볼 수 있는 흐름을 제공하는 것입니다. 가입이나 별도 데스크톱 앱은 필요하지 않습니다.
주요 기능
- 브라우저 미리보기: JSON 파일을 놓으면 lottie-web으로 파싱하고 렌더링합니다. 로딩 시간은 파일 복잡도, 에셋, 브라우저와 기기에 따라 달라집니다.
- 로컬 JSON 처리: 선택한 JSON 파일은 브라우저에서 파싱되며 애플리케이션 서버에 의도적으로 업로드하거나 제품 데이터베이스에 저장하지 않습니다. 외부 에셋을 참조하는 파일은 브라우저 요청이 발생할 수 있습니다.
- 크기 감지: 애니메이션의 원본 크기(너비 × 높이)를 자동으로 감지하고 표시하여 레이아웃 계획을 돕습니다.
- 검증 가능한 분석: 메타데이터, 레이어 구조, 정적 복잡도 신호, 최적화 항목, 플랫폼 민감 기능과 시작용 통합 코드를 확인합니다.
- 드래그 앤 드롭: JSON 파일을 뷰어 영역에 드래그하거나 버튼을 클릭하여 기기에서 파일을 선택하세요.
- 반응형 인터페이스: 최신 데스크톱, 태블릿, 모바일 브라우저에 맞게 설계했습니다. 매우 크거나 복잡한 파일은 기기 메모리와 브라우저 성능의 영향을 받을 수 있습니다.
- 현재 계정 없이 이용 가능: 호스팅 도구에는 현재 유료 기능 제한이 없고 공개 저장소의 소스를 확인할 수 있습니다. 현재 프로젝트 라이선스 파일은 공개되어 있지 않습니다.
롯티 애니메이션이란?
롯티(Lottie)는 Airbnb에서 만든 오픈소스 애니메이션 포맷입니다. Adobe After Effects(Bodymovin 플러그인)에서 내보낸 JSON 데이터를 사용하여 실시간으로 애니메이션을 렌더링합니다. 롯티 애니메이션의 특징:
- 구조화된 데이터: 벡터와 키프레임 명령은 작을 수 있지만 임베디드 에셋과 조밀한 데이터는 용량을 늘릴 수 있습니다
- 확장 가능: 벡터 중심 콘텐츠는 깔끔하게 확대할 수 있지만 래스터 에셋과 렌더러 한계는 적용됩니다
- 인터랙티브: 프로그래밍으로 제어 가능 (재생, 일시정지, 역재생 등)
- 크로스 플랫폼: 주요 플랫폼용 플레이어가 제공되지만 기능 지원 범위는 서로 다를 수 있습니다
기술 스택
JSON 애니메이션 뷰어는 최신 웹 기술로 구축되었습니다:
- Next.js 15 — 프로덕션급 웹 앱을 위한 React 프레임워크
- React 19 — 인기 있는 UI 라이브러리의 최신 버전
- Lottie-web — Airbnb의 공식 롯티 렌더링 라이브러리
- Tailwind CSS — 유틸리티 우선 CSS 프레임워크
- TypeScript — 안정성을 위한 정적 타입 검사
투명한 분석 방법
성능 등급과 호환성 결과는 정적 휴리스틱이며 실제 기기 벤치마크나 보장이 아닙니다. 입력값, 가중치, 감지 규칙, 개인정보 경계와 한계는 분석 방법론 페이지에 공개합니다.
공개 저장소
GitHub 저장소에서 소스 코드를 확인하고 이슈를 보고할 수 있습니다. 현재 프로젝트 라이선스 파일은 공개되어 있지 않으므로 소스가 보인다는 사실을 재사용이나 재배포 허가로 해석해서는 안 됩니다.