Intro
웹사이트를 개발하다 보면 이미지를 추가해야 할 일이 정말 많습니다.
하지만 막상 이미지를 추가하면 뭔가 허전하고, 이미지가 움직였으면 좋겠다 라는 생각이 들 때가 있습니다.
이럴 땐 Lottie Web Player를 사용하여 손쉽게 움직이는 이미지를 추가할 수 있습니다.
이번 시간엔 Lottie Web Player를 사용하는 방법에 대해 포스팅 하도록 하겠습니다.
Lottie란?
- 하단의 페이지를 참고하여 작성하였습니다. -
https://lottiefiles.com/what-is-lottie
What is a Lottie animation? - LottieFiles
A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.
lottiefiles.com
Lottie는 JSON에 기반한 애니메이션 파일 포맷으로, Airbnb가 다양한 플랫폼에서 움직이는 이미지를 사용할 수 있도록 개발한 라이브러리이기도 합니다.
Lottie를 사용하는 이유
많은 사람들이 사용하는 만큼 기존의 이미지, 동영상에 비해 다양한 장점이 있습니다.
- iOS, Android, Web, React Native 등 다양한 플랫폼에서 사용 가능
- 해상도에 구애받지 않아 Run-time에서 동적으로 크기 조절 가능
- 동영상에 비해 압도적으로 적은 용량을 차지
- 낮은 구현 난이도
Lottie Web Player 사용법
Lottie 파일을 웹에서 쉽게 사용할 수 있도록 개발된 오픈소스 라이브러리가 바로 Lottie Web Player입니다.
누구나 무료로 사용 가능하며, CC 라이선스를 따른다면 상업적인 용도로도 사용이 가능합니다.
우선 아래의 링크에 접속하여 회원가입을 한 후에 검색창에 찾고자 하는 이미지를 검색합니다.
Free Lottie Animation Files, Tools & Plugins - LottieFiles
The world’s largest online platform for the world’s smallest animation format for designers, developers, and more. Access Lottie animation tools and plugins for Android, iOS, and Web.
lottiefiles.com
검색 후 나온 결과물 중 마음에 드는 애니메이션을 선택합니다.
애니메이션을 클릭하면 위와 같은 창이 뜹니다.
창의 아래쪽으로 스크롤 한 후, <html> 버튼을 눌러줍니다.
클릭 시 코드를 복사할 수 있는 페이지로 이동합니다.
용도에 따라 옵션을 수정한 후 하단의 Copy 코드를 눌러줍니다.
위의 Astronaut 이미지의 경우 아래의 코드가 복사됩니다.
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_lD1yMK.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
<script> 태그는 Lottie 애니메이션을 재생하기 위한 라이브러리로, 이미지마다 추가해줄 필요가 없습니다.
<script> 태그를 <head> 영역으로 이동 시키고, HTML 파일을 열어 정상적으로 애니메이션이 재생되는지 확인합니다.
테스트용 HTML 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>
<body>
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_lD1yMK.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
</body>
</html>
실행 결과를 보아 정상적으로 동작하는 것을 확인할 수 있습니다.
질문이나 잘못된 부분은 언제든지 댓글로 남겨주세요.
이상으로 포스팅을 마치겠습니다.
'Tips > Front end' 카테고리의 다른 글
| [NPM] npm build 이후 serve 시 PSSecurityException 뜰 때 (0) | 2022.12.02 |
|---|---|
| [ESLint] Delete`CR` 에러 폭탄 해결하기 (End of Line 일괄 변경, 기본값 설정하기) (0) | 2022.10.30 |
| [Front-End] Prettier 단축키 (0) | 2022.01.27 |
| [CSS] 애니메이션이 떨릴 때 (will-changed) (0) | 2022.01.12 |
| [Javascript] 밤하늘의 별 이펙트 만들기 (0) | 2021.06.04 |
