lottie란 무엇인가. lottie가 gif보다 나을까?

티스토리 뷰

TIL:Today I Learn/etc

유니엘. 2022. 8. 19. 22:20

Lottie란
로티란 에어비앤비에서 개발한 라이브러리이다. (그래서 로티 공식 홈페이지를 들어가면 에어비엔비 로고가 뜬다) 유명 프로그램 에프터 이팩트로 추출한 애니메이션 데이터를 json 형식으로 추출하여 웹/앱 등에 적용할 수 있게 해준다.
Lottie 장점
백터 기반이다. (svg의 애니메이션화 라고 생각하면 된다. 백터기반이기 때문에 용량은 적고, 높은 해상도를 가지고 있다.)
적용이 쉽다.
Lottie가 gif보다 나을까?
로티는 백터기반이기 때문에 기본적으로 적은 용량을 가지고 있다. 그라디언트 혹은 부드러운 움직임 등이 들어간 영상에서 gif는 그래픽을 수행하고 압축하는데 상당한 어려움을 겪는다. gif는 lottie 파일보다 약 3,000배 작다.

Lottie Docs

airbnb.io

레이어 닫기버튼을 위해 로띠와 한바탕 놀아보았다.

이번 배포건에 포함되는 업무 중 하나는 개선된 ui를 적용하는 것이었다. 정말 단순하게 생각하면 디자인 -> 퍼블리싱 -> 개발로 나는 변경된 마크업만 적용시켜주면 되었다. 근데 여기서 lottie가

hyermione.tistory.com

Recoil TodoList 2탄 (작성중...인데 멈춤..) (0)	2022.09.05
사파리와 파이어폭스 그리고 크롬의 차이점은 bfcache이다. (2탄-상세기록) (0)	2022.08.23
사파리와 파이어폭스 그리고 크롬의 차이점은 bfcache이다. (1탄) (0)	2022.08.18
npm과 yarn의 차이점 (0)	2022.08.12
css scroll을 부드럽게 만드는 방법 (+ 사파리 지원 버전) (0)	2022.08.10

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함