Lottie 뷰어
무료 온라인 Lottie 플레이어. Lottie JSON 애니메이션을 열어 재생·일시정지, 프레임 스크럽, 속도 조절, 반복 켜기/끄기, 투명 체커보드 미리보기까지 브라우저에서 모두 처리합니다.
Lottie 파일이란 무엇인가요?
Lottie는 벡터 애니메이션을 JSON으로 내보낸 형식으로, 보통 After Effects의 Bodymovin 플러그인이나 LottieFiles 같은 도구로 만듭니다. 앱과 웹은 영상 대신 가벼운 렌더러로 재생하기 때문에 용량이 매우 작고 어떤 크기에서도 선명합니다.
여기서 Lottie 애니메이션을 미리 보려면 어떻게 하나요?
업로드 영역을 클릭하거나 .json 파일을 끌어다 놓으세요. 애니메이션이 즉시 로드되어 재생됩니다. 내장 샘플로 플레이어를 시험해 볼 수 있는 예시 버튼도 있습니다.
애니메이션이 서버로 업로드되나요?
아니요. 파일은 브라우저 탭 안에서만 읽히고 렌더링되며 어디로도 전송되지 않습니다. 공개 전 클라이언트 작업이나 기밀 소재도 안심하고 사용할 수 있습니다.
재생 컨트롤에는 어떤 것이 있나요?
재생·일시정지, 다시 시작 버튼, 반복 켜기/끄기, 드래그 가능한 프레임 슬라이더, 0.25x~2x 속도 선택기가 있습니다. 현재 프레임, 총 프레임 수, 애니메이션 FPS도 표시됩니다.
체커보드 배경은 왜 있나요?
체커보드는 디자인 도구처럼 투명함을 나타냅니다. 애니메이션에 불필요한 배경이 없는지 확인하는 용도이며, 흰색·검은색으로 바꾸면 밝은 배경과 어두운 배경에서 가장자리·글로우·그림자를 점검할 수 있습니다.
지원되는 Lottie 버전은 무엇인가요?
lottie-web 렌더러를 사용하며 Bodymovin JSON 버전 4 이상을 지원합니다. 셰이프 레이어, 마스크, 매트, 트림 패스, 내보낼 때 베이크된 대부분의 표현식을 재생할 수 있습니다.
모바일에서도 작동하나요?
네. 레이아웃은 반응형이고 동일한 SVG 렌더러를 사용하므로 iOS·Android 브라우저에서 동작합니다. 컨트롤은 터치 크기에 맞춰 설계되었습니다.
.json과 .lottie 파일의 차이는 무엇인가요?
.lottie(dotLottie)는 JSON과 에셋 등을 함께 담을 수 있는 zip 압축 형식입니다. 이 뷰어는 표준 Lottie .json을 바로 열며, dotLottie 파일은 안에 있는 .json을 먼저 꺼내서 사용하세요.
재생이 느리거나 이상하게 보이는 이유는?
레이어·이미지·표현식이 많은 애니메이션은 렌더링 부담이 큽니다. 이미지가 별도로 내보내지지 않았는지 확인하고, 컴포지션을 단순화하거나 속도를 낮춰 보세요. FPS 표시는 애니메이션의 의도된 재생률입니다.
Lottie 뷰어 사용 방법
이 Lottie 뷰어는 lottie-web 렌더러로 Bodymovin JSON 애니메이션을 완전히 브라우저 안에서 재생합니다. 파일을 불러오거나 끌어다 놓고, 재생을 프레임 단위로 제어하며, 투명·흰색·검정 배경에서 미리 볼 수 있습니다. 어떤 데이터도 업로드되지 않습니다.
- 업로드 영역을 클릭하거나 Lottie .json 파일을 끌어다 놓으세요. 애니메이션이 바로 로드되어 재생이 시작됩니다.
- 큰 재생/일시정지 버튼과 처음부터 버튼으로 재생을 조절합니다.
- 프레임 슬라이더를 드래그하면 원하는 프레임으로 이동합니다. 표시에는 현재 프레임, 총 프레임 수, FPS가 나옵니다.
- 0.25x~2x 사이에서 속도를 고르고, 반복 버튼으로 연속 재생을 켜고 끌 수 있습니다.
- 배경을 투명 체커보드, 흰색, 검정 사이에서 바꿔 가장자리, 광원 효과, 그림자를 확인하세요.
내 애니메이션을 불러오기 전에 예제 버튼을 먼저 눌러 플레이어의 동작을 확인해 보세요. 클라이언트가 JSON을 보내왔을 때 빠르게 검사하기에 좋습니다.
관련 도구
- SVG 뷰어 및 편집기 SVG 파일을 온라인에서 미리보기, 편집, 최적화. 실시간 미리보기, 코드 편집, 최적화 도구.
- JSON 트리 뷰어 JSON 데이터를 대화형 접을 수 있는 트리로 시각화합니다. 키와 값 검색, 마우스 오버 시 JSONPath 추적, 지연 로딩으로 대용량 파일 처리를 지원합니다. .json 파일 드래그 앤 드롭 지원.
- 스프라이트 시트 생성기 이미지를 스프라이트 시트로 결합, 드래그로 재정렬, 그리드 레이아웃, 여백, 배율 모드. PNG/WebP/JPG 및 JSON 아틀라스 데이터로 내보내기, 게임 엔진과 CSS 스프라이트에 최적.
- 이미지 Base64 변환 이미지를 Base64 문자열로 변환하고 Base64를 이미지로 디코딩. PNG, JPG, GIF, WebP, SVG, BMP, ICO 지원. 100% 브라우저 처리, 업로드 없음.
- GIF 프레임 분할 GIF 애니메이션에서 개별 프레임을 PNG 또는 스프라이트 시트로 추출 및 다운로드. 미리보기 및 ZIP 내보내기 지원 무료 온라인 도구.
- GIF 역재생 GIF 애니메이션 재생 순서를 무료로 온라인에서 역전. 즉시 업로드, 미리보기 및 다운로드.
- GIF 속도 변경기 GIF 애니메이션 속도를 온라인으로 변경하세요. GIF 파일을 즉시 가속 또는 감속합니다.
- 동영상 GIF 변환 동영상을 애니메이션 GIF로 온라인 변환. 품질, 프레임 속도, 해상도를 브라우저에서 직접 조절, 업로드 불필요.