[로티]애니메이션 생성 및 변환
로티(Lottie)는 벡터 기반의 애니메이션을 JSON파일 형식으로 만들어
웹이나 앱에서 쉽게 사용할 수 있게 해주는 라이브러리입니다.
전문적인 방법은 Adobe After Effects나 Bodymovin플러그인을
사용하거나 피그마에서 플러그인을 사용하여
디자이을 애니메이션으로 만드는데
오늘은 좀더 간단히 만들어 볼 수 있는
로티 편집기를 소개해보겠습니다.
1. lottierfiles.com: 접속하고 구글계정으로 로그인합니다.
2.애니메이션 검색: 상단 검색창에 원하는 키워드를 입력하여 애니메이션을 검색합니다.
무료 필터링을 사용해 무료로 사용할 수 있는 애니메이션을 검색합니다.
3. 애니메이션 선택 및 편집: 원하는 애니메이션을 클릭하여 상세페이지로 이동합니다.
‘Edity Layer Colors’ 버튼 등을 통해 애니메이션의 색상을 변경합니다.
4. 다운로드: 다운로드 버튼을 클릭하여 원하는 파일 형식으로 저장합니다.
JSON: 앱이나 웹에 Lottie 라이브러리를 사용하는 기본 형식입니다. 가장 가볍고 품질이 좋습니다.
dotLottie: 압축된 Lottie형식으로, 단일 파일로 여러 애니메이션 상태를 포함합니다.
기타 GIF, MP4, Webp,SVG등의 일반 형식으로도 변환화여 다운로드 할 수 있습니다.
Lottie Editor/Creator 활용
다운로드하거나 업로드한 기존 Lottie 파일을 웹에서 간편하게 수정할 수 있습니다.
SVG파일을 업로드하거나 웹 기반 툴을 사용하여 애니메이션을 제작할 수도 있습니다.
웹사이트에 적용하기
Lottie Player스크립트 추가: 웹페이지의<head> 또는 <body>에 웹 구성 요소 스크립트를 추가합니다.
<script src=”https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js”></script>
Lottie Player 요소 삽입: 애니메이션을 표시하고 싶은 위치에 <lottie-player>태그를 삽입하고
속성을 지정합니다.
<lottie-player
src=”[다운로드한 .json 파일의 URL 또는 LottieFiles에서 제공하는 URL]”
background=”transparent”
speed=”1″
style=”width: 300px; height: 300px;”
loop
autoplay
></lottie-player>
src: 로티 파일의 경로를 입력합니다.
loop:애니메이션을 반복 재생합니다.
autoplay: 페이지 로딩시 자동으로 재생합니다.