로티(Lottie) 애니메이션 미리보기

로티 파일을 받았는데 어떻게 생겼는지 모를 때

로티(Lottie)는 애프터 이펙트 애니메이션을 Bodymovin 플러그인으로 내보낸 JSON 파일이에요. 앱·웹사이트의 로딩 아이콘, 버튼 효과, 일러스트 애니메이션에 많이 쓰여요. 개발자나 기획자가 파일을 받았을 때 따로 프로그램을 설치하지 않고 이 페이지에서 바로 재생해 볼 수 있어요. 여러 애니메이션과 그림을 압축한 .lottie(dotLottie) 파일도 열어요(첫 번째 애니메이션을 보여 줘요).

확인할 수 있는 것

• 크기·길이·fps — JSON의 w·h(그림 크기), fr(초당 장면 수), ip~op(시작·끝 장면)로 계산해요. 길이 = (op − ip) ÷ fr 이에요.
• 재생 조절 — 속도를 0.25~3배로 바꾸고, 막대나 ◀▶ 버튼으로 한 장면씩 넘겨 보며 어긋난 곳을 찾을 수 있어요.
• 배경 — 투명(체크무늬)·흰색·어두운 색으로 바꿔 다크 모드에서 어떻게 보일지 확인해요.

색 바꾸기

애니메이션의 채우기(fill)·선(stroke)에 쓰인 단색을 모두 모아 보여 줘요. 색 칸을 눌러 새 색을 고르면 같은 색이 쓰인 모든 곳(움직이는 색의 키프레임 포함)을 한 번에 바꿔요. 회사 색에 맞춰 아이콘 색을 바꾸고 JSON 저장으로 받으면 바로 앱에 넣을 수 있어요. 그라디언트 색과 이미지 속 색은 바꾸지 않아요.

그림·움짤로 저장

GIF는 정한 크기·초당 장면 수로 장면을 그려 256색 팔레트로 만들어요. GIF는 반투명을 담지 못해서 투명 배경은 흰색으로 채워요. 투명이 필요하면 모든 장면 PNG(ZIP)로 받아 APNG 만들기나 영상 편집기에서 쓰세요. 애프터 이펙트의 일부 효과(표현식 일부, 3D 레이어 등)는 lottie-web이 지원하지 않아 다르게 보일 수 있어요.

참고한 자료

• Lottie 형식 명세 (Lottie Animation Community)
• lottie-web (Airbnb, MIT)
• dotLottie 형식