Web 사이트에서 애니메이션을 구현하는 경우, 간단한 애니메이션이라면 CSS와 JavaScript로 쉽게 만들 수 있지만, 풍부한 애니메이션을 만들려고 하면 코딩해야 하는 양이 많아집니다.
그럴 때 추천하는 것이 "Lottie "입니다. Lottie는 After Effects 로 제작 한 애니메이션을 쉽게 Web이나 응용 프로그램에서 표시 할 수 있으며, 그 성능이 엄청납니다.
이번 시간에는 Lottie의 특징과 사용의 장점, 사용법 등을 소개하도록 하겠습니다.
목차
Lottie는
Lottie를 사용하는 메리트
구현 코스트가 낮다
여러 플랫폼에 대응
동영상 파일보다 압도적으로 경량
Web 사이트에서 Lottie를 사용하는 방법 준비물
Web 사이트에 표시하는 방법
Lottie를 사용한 애니메이션 샘플
Lottie는
Lottie는 Airbnb가 공개하고있는 애니메이션을 표시하기위한 라이브러리 입니다. 스마트 폰 등의 네이티브 앱이 메인 같지만, Web 사이트에서도 높은 퀄리티의 애니메이션을 쉽게 볼 수 매우 추천 라이브러리입니다.
Google 및 Uber, Walgreens 등 세계 유명 기업들도 자사 응용 프로그램에 Lottie를 채용 하고있어 주목을 받고 있지요.
Lottie 표시하는 애니메이션은 Adobe의 " After Effects "를 사용하여 만든 " Bodymovin"라는 플러그인을 사용하여 애니메이션 파일을 출력합니다.
애니메이션 만들기에서 내보내기까지이 기사에서는 생략하고 아래의 동영상으로 알기 쉽게 소개되어 있기 때문에 신경 쓰이는 분들은 참고하시기보십시오.
Lottie를 사용하는 메리트
구현 코스트가 낮다
Lottie을 사용하면 약간의 코드만으로 쉽게 애니메이션을 만들 수 있습니다. CSS와 JavaScript를 사용하여 복잡한 애니메이션을 만들 수 있습니다 만, 어느 정도의 기술이 필요하며, 구현 비용도 증가하게되므로로드 만의 Lottie는 더 쉽게 애니메이션을 표시 할 수 있습니다.
디자이너와 코더가 분업 체제에서 작업을하고있는 것이라면, 애니메이션 작성에 관하여 대부분의 작업을 디자이너 측에서 지내다가 있기 때문에 불필요한 수정 작업과 확인 작업을 줄일 수 있다는 장점도 있습니다.
여러 플랫폼에 대응
Lottie는 Web은 물론 iOS 및 Android 네이티브 앱 에서도 애니메이션을 볼 수 있고 React Native와 Flutter 등 인기 프레임 워크에서도 Lottie를 사용할 수 있습니다.
한 번 만든 애니메이션은 다른 플랫폼에서도 돌려 사용할 수 있기 때문에 각각에서 유사한 사용자 경험을 제공하는 것이 가능하다는 것도 매력중 하나입니다.
동영상 파일보다 압도적으로 경량
Lottie에서 애니메이션을 표시하여 동영상 파일을 사용하는 경우보다 훨씬 파일 크기를 줄일 수 있습니다. 물론 케이스에 따라 Lottie로 출력 할 수 없는 경우가 있지만, UI의 애니메이션이라면 기본적으로 Lottie를 사용하여 표시 할 수 있을 것 같습니다.
Web은 로딩 시간이 길어지면 이탈 율이 상승 해 버리기 때문에, 더 가벼운 파일 After Effects에서 제작 한 애니메이션을 재생할 수있는 매력적인 포인트입니다.
Web 사이트에서 Lottie를 사용하는 방법
는 여기에서 Web 사이트에서 Lottie를 사용하여 애니메이션을 표시하는 방법을 소개하고 싶다고 생각합니다.
준비물
Lottie에서 애니메이션을 표시하기 위해 필요한 것은 크게 두 가지가 있습니다.
- lottie.js
- 애니메이션 파일 (.json)
lottie.js
Lottie의 메인이되는 JavaScript 파일입니다. 파일을 가져 오는 방법에는 여러 가지가 있지만 다음 Github 저장소에서 다운로드하거나 CDN을 통해 가져 오는 방법이 간단합니다.
Github에서 다운로드 할 때 lottie.js 또는 lottie.min.js 중 하나를 선택합니다.
애니메이션 파일 (.json)
애니메이션 파일은 After Effects에서 "Bodymovin"라는 플러그인을 사용하여 JSON 형식의 파일을 내보낼 준비합니다.
기본적으로 내 보낸 데이터를 사용하는 것이라고 생각 합니다만, 시도에 Lottie를 사용해보고 싶은 경우 " LottieFiles '라는 사이트에서 애니메이션의 샘플을 다운로드 할 수 있습니다.
종류도 다양하기 때문에, 애니메이션의 아이디어를 찾는데도 사용할 수 있습니다.
Web 사이트에 표시하는 방법
필요한 파일이 준비되면 실제로 Web 사이트에 게시하여 봅시다. 폴더에 아래의 3 개의 파일을 생성하자.
|
1 2 3 |
├── index.html ├── main.js └── animation.json |
각 파일의 내용은 아래와 같습니다.
index.html
우선, head 태그에서 lottie.js 또는 lottie.min.js를 가져옵니다. 아래는 CDN을 사용하면 코드입니다.
|
1 2 3 4 5 6 |
<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.min.js" type="text/javascript" ></script> </head> |
다음 body 태그 안에는 아래와 같이 설명합니다.
|
1 2 3 4 |
<body> <div id="lottie"></div> <script src="main.js" type="text/javascript"></script> </body> |
Lottie 애니메이션을 표시하는 요소를 JavaScript 측에서 지정하므로 여기서는 id="lottie" 로 해 줍니다.
main.js
main.js는 lottie 호출 처리합니다.
|
1 2 3 4 5 6 7 |
lottie.loadAnimation({ container: document.getElementById("lottie"), renderer: "svg", loop: true, autoplay: true, path: "animation.json" }); |
위의 container옵션에서 애니메이션을 표시하는 요소를 지정합니다. HTML 측에서 다른 id를 지정하는 경우는 위의 id도 그것을 지정하도록합시다.
loop 및 autoplay 등의 옵션을 지정하고 있습니다만, 그 외에 언제라도 애니메이션을 시작하거나 중지하거나 제어하기위한 메소드가 준비되어 있습니다.
자세한 내용은 아래의 문서를 참고하여보십시오.
animation.json
이 json 파일은 위에서 준비한 애니메이션 파일을 그대로 배치하면 OK입니다.
Lottie를 사용한 애니메이션 샘플
마지막으로, Lottie를 사용하여 표시되는 애니메이션의 실례입니다.
See the Pen Articulation Pieces by Al Boardman by kittons (@airnan) on CodePen.