자주 묻는 질문

JSON 애니메이션 뷰어란 무엇인가요?

JSON 애니메이션 뷰어는 롯티 JSON 애니메이션 파일을 즉시 미리 볼 수 있는 무료 브라우저 기반 도구입니다. .json 파일을 뷰어에 드래그 앤 드롭하거나 클릭하여 기기에서 선택할 수 있습니다. 애니메이션이 즉시 재생되며 내장 슬라이더를 사용하여 크기를 조절할 수 있습니다. 설치, 가입, 서버에 파일 업로드가 필요 없습니다. 모든 것이 브라우저에서 로컬로 실행됩니다.

롯티 애니메이션이란 무엇인가요?

롯티(Lottie)는 원래 Airbnb에서 개발한 오픈소스 애니메이션 포맷입니다. 애니메이션은 Adobe After Effects와 같은 도구에서 생성되고 Bodymovin 플러그인을 사용하여 경량 JSON 파일로 내보냅니다. 이 JSON 파일은 애니메이션의 모든 프레임, 레이어, 도형, 키프레임을 구조화된 데이터 포맷으로 기술합니다. 롯티 플레이어(브라우저용 lottie-web 또는 모바일용 lottie-ios/lottie-android)가 이 데이터를 읽고 실시간으로 애니메이션을 렌더링합니다. 결과는 모든 화면 크기에서 선명하게 보이고 기존 GIF나 비디오 파일보다 훨씬 빠르게 로드되는 부드럽고 확장 가능한 벡터 기반 애니메이션입니다.

내 애니메이션 데이터는 안전한가요?

네, 완전히 안전합니다. JSON 애니메이션 뷰어는 클라이언트 측 JavaScript를 사용하여 브라우저 내에서 전적으로 파일을 처리합니다. 애니메이션 파일은 어떤 서버에도 업로드되지 않습니다. 백엔드, 데이터베이스, 클라우드 스토리지가 관여하지 않습니다. 브라우저 탭을 닫으면 애니메이션 데이터가 메모리에서 사라집니다. 이를 통해 독점 애니메이션, 클라이언트 작업, 기밀 디자인 자산을 안전하게 미리 볼 수 있습니다.

어떤 파일 포맷이 지원되나요?

JSON 애니메이션 뷰어는 .json 확장자를 가진 표준 롯티 JSON 파일을 지원합니다. 이들은 일반적으로 Adobe After Effects에서 Bodymovin 플러그인을 사용하여 내보내지만 유효한 롯티 JSON 데이터를 출력하는 모든 도구가 작동합니다. LottieFiles, Haiku Animator, 다양한 Figma-to-Lottie 플러그인의 애니메이션이 포함됩니다. 뷰어는 현재 압축 컨테이너 포맷인 dotLottie(.lottie) 파일을 지원하지 않습니다. .lottie 파일이 있는 경우 LottieFiles 변환기와 같은 도구를 사용하여 먼저 JSON을 추출해야 합니다.

애니메이션이 로드되지 않는 이유는?

애니메이션이 로드되지 않는 몇 가지 일반적인 이유가 있습니다:

• 잘못된 JSON: 파일에 구문 오류가 포함되어 있을 수 있습니다. 텍스트 편집기에서 열어 누락된 쉼표, 괄호 또는 잘못된 데이터를 확인하세요. JSON 유효성 검사기를 실행하면 문제를 식별하는 데 도움이 됩니다.
• 롯티 파일이 아님: 모든 .json 파일이 롯티 애니메이션은 아닙니다. 파일에 롯티 관련 데이터 구조(레이어, 에셋, 애니메이션 속성)가 포함되어야 합니다. 일반 JSON 설정 파일은 애니메이션으로 렌더링되지 않습니다.
• 외부 에셋: 일부 롯티 애니메이션은 JSON 파일에 포함되지 않은 외부 이미지 에셋을 참조합니다. 이미지를 포함하지 않고 애니메이션을 내보냈다면 해당 에셋이 뷰어에서 사용할 수 없으며 애니메이션의 일부가 빈 상태로 나타날 수 있습니다.
• 지원되지 않는 기능: 특정 After Effects 기능은 롯티로 잘 변환되지 않습니다. 복잡한 표현식, 3D 레이어, 일부 블렌드 모드는 이 뷰어를 포함한 어떤 롯티 플레이어에서도 올바르게 렌더링되지 않을 수 있습니다.

휴대폰이나 태블릿에서 사용할 수 있나요?

네. JSON 애니메이션 뷰어는 완전히 반응형이며 모바일 기기와 태블릿에서 작동합니다. 인터페이스가 작은 화면에 맞게 조정되며 파일 선택 버튼을 탭하여 기기 저장소에서 JSON 파일을 선택할 수 있습니다. 드래그 앤 드롭도 이를 지원하는 기기에서 작동합니다. 성능은 기기의 처리 능력에 따라 다르지만 롯티 포맷은 경량으로 설계되어 대부분의 최신 스마트폰에서 롯티 애니메이션을 원활하게 처리합니다.

롯티 애니메이션은 어떻게 만드나요?

가장 일반적인 워크플로우는 Adobe After Effects에서 시작합니다. 도형, 경로, 키프레임을 사용하여 애니메이션을 디자인한 다음 Bodymovin 플러그인을 설치하여 롯티 JSON 파일로 내보냅니다. 대안 도구도 있습니다: LottieFiles에는 브라우저 기반 편집기가 있고, Haiku Animator는 독립형 앱을 제공하며, 여러 Figma 플러그인이 디자인을 롯티 포맷으로 변환할 수 있습니다. 자세한 안내는 롯티 애니메이션을 단계별로 만드는 방법 블로그 포스트를 확인하세요.

롯티가 GIF보다 좋은 점은 무엇인가요?

롯티 애니메이션은 거의 모든 측정 가능한 방면에서 GIF를 능가합니다. 롯티는 래스터화된 프레임 대신 벡터 데이터를 사용하기 때문에 파일 크기가 일반적으로 5~10배 작습니다. 롯티 애니메이션은 품질 손실 없이 어떤 해상도로든 확장되지만 GIF는 확대하면 픽셀화됩니다. 롯티 애니메이션은 프로그래밍으로 제어할 수 있어(재생, 일시정지, 역재생, 속도 변경, 사용자 인터랙션에 반응) GIF에서는 불가능한 기능입니다. 자세한 내용은 롯티 vs GIF 비교를 읽어보세요.

JSON 애니메이션 뷰어는 무료인가요?

네, 숨겨진 비용 없이 완전히 무료입니다. 프리미엄 등급, 사용 제한, 기능 제한이 없습니다. 원하는 만큼 자주 애니메이션을 미리 볼 수 있습니다. 프로젝트는 오픈소스이므로 코드를 검사하거나 개선에 기여하거나 포크하여 사용할 수 있습니다. 소스 코드를 보려면 GitHub 저장소를 방문하세요.

뷰어를 내 웹사이트에 임베드할 수 있나요?

JSON 애니메이션 뷰어는 MIT 라이선스로 배포된 오픈소스 프로젝트입니다. 저장소를 포크하여 필요에 맞게 수정할 수 있습니다. 그러나 뷰어는 임베드 가능한 위젯으로 설계되지 않았습니다. 자신의 웹사이트에 롯티 애니메이션을 표시하려면 lottie-web 라이브러리를 직접 사용하는 것을 고려하세요. React 프로젝트의 경우 lottie-react 또는 @lottiefiles/react-lottie-player와 같은 라이브러리가 편리한 컴포넌트 래퍼를 제공합니다.

무료 롯티 애니메이션은 어디에서 찾을 수 있나요?

여러 플랫폼에서 개인 및 상업용으로 무료 롯티 애니메이션을 제공합니다. LottieFiles는 수천 개의 무료 애니메이션이 있는 가장 큰 마켓플레이스입니다. IconScout, Lordicon, useAnimations도 무료 롯티 파일을 제공합니다. 상업 프로젝트에서 애니메이션을 사용하기 전에 항상 라이선스 조건을 확인하세요. 큐레이션된 목록은 개발자를 위한 최고의 롯티 애니메이션 리소스 블로그 포스트를 참조하세요.

아직 질문이 있으신가요?

여기에서 질문에 대한 답변을 찾지 못했다면 GitHub Issues 페이지에서 이슈를 열어주세요. 모든 이슈를 읽고 가능한 빨리 응답합니다. 다른 사람이 이미 같은 질문을 했는지 기존 이슈를 둘러볼 수도 있습니다.