[iOS 주변 기능] JSON Lottie 대신 dotLottie를 써야 하는 이유

서론

안녕하세요! 개발자 제라스입니다~!! 👋🏻 🤖 👋🏻

 

앱을 개발하다보면 종종 Lottie를 쓰잖아요??

 

우리는 지금까지 이 Lottie를 JSON 형태로 사용을 해왔는데...!

알고보니 작년에 .lottie 확장자가 생겼더라구요!!

 

이제 새로운 방식의 Lottie 사용 시대의 서막이 열린 것이죠 ㅎㅎㅎ(사실 큰 차이는 없음 ㅋㅋ)

 

그럼 한번 이 새로운 Lottie의 확장자인 dotLottie를 가볍게 알아봅시다!!

일단 Lottie가 뭔데??

Lottie란?
네이티브 앱에서 더 나은 퀄리티의 모션 그래픽과 애니메이션 효과를 실시간으로 렌더링하기 위해 Airbnb가 만든 오픈소스 라이브러리

 

아하...!!

그렇구나??? 그래서 뭐가 좋은데??

 

사실 옛날에는 애니메이션 효과를 After Effect(디자인 툴 중 하나!)로 복잡한 파일을 만들어서 구현을 해야했어요!

근데 7-8년 전쯤부터 Lottie라는 애가 많이 사용되기 시작했어요~~~

 

Why??

 

우선, JSON, 즉, 코드로 구현을 하다보니 파일 크기가 무지 작아졌어요!

그리고 화질도 스케일링 시 품질이 유지가 되죠.

렌더링 성능도 좋고 CPU/GPU 사용량도 상대적으로 적기에...!

 

PNG, SVG, GIF 같은 애들보다 나은지라 App 개발 시 엄청 많이 쓰여왔습니다 ㅎㅎ

갓성비 그 잡채...!

Lottie의 진화된 포맷, dotLottie의 등장

 

이렇게 좋은 애를 두고... dotLottie가 등장합니다...!!!!!!!

즉, 파일이 ~~~~~~~.json이 아니라 ~~~~~~~.lottie 인 아이가 생긴 겁니다!

 

엥...갑자기 왜???

1. 정체성 확립

일단 지금까지는 Lottie를 JSON 형태로 구현해왔어요!

근데, 우리가 개발하다보면 .json 파일들을 데이터로도 종종쓰기도 하고,,,(ex. person_list.json - 사람들 리스트 데이터)

오직 Lottie 애니메이션을 위해 쓰는 확장자는 아니잖아여??

 

그래서!!

딱 확장자명만 보고 바로 '아하!! Lottie 파일이구나?'라고 할 수 있도록 명시하자는 겁니다!

2. 아카이빙

Lottie 애니메이션과 이를 위해 종속된 Source들을 함께 저장하는 방식을 통해

여러 애니메이션을 그룹화하고, 이를 공유할 수 있다는 점에서 좋고,

Lottie 애니메이션의 저장 비용도 크게 줄어든다고 합니다.

3. 압축

마지막으로, '압축' 부분인데요...!

 

Lottie는

1. 외부에 별도로 저장된 파일에 대한 상대 경로를 통해서 가져올 수도 있고,

2. 데이터 URI로 인라인해서 작성하는 방식

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="Example Image">

3. URL을 활용하여 런타임 때 실행하는 방식

 

이렇게 구현할 수 있습니다.

 

하지만, dotLottie를 사용하면

하나의 Archive file에 모든 Animation들과 Source들을 모아두고 압축해서 사용할 수 있기 때문에

더 가볍고, 배포 운영 비용의 절감, 네트워크 사용량 절감 효과를 가져다 줄 수 있습니다.

 

 

dotLottie의 구조

.
├─ manifest.json
├─ animations
│  ├─ animation-1.json
│  └─ animation-2.json
├─ images
│  ├─ img_1.json
│  └─ img_2.json
├─ themes
|  ├─ theme_1.json
|  └─ theme_2.json
├─ states
│  ├─ statemachine_0.json
│  └─ statemachine_1.json
├─ audio
│  └─ audio.mp3

 

dotLottie는 이렇게 생겼습니다.

이 안에 있는 프로퍼티들이 많은데 혹시나 궁금하시다면 아래 링크에서 찾아보시기 바랍니다!

https://dotlottie.io/structure/#interactivity-structure

Structure | dotLottie

야 그래서 어떻게 쓰는데...??

일단 이 친구는 iOS는 물론이고 Android, Web 등 다양한 곳에서 쓸 수 있습니다.

하지만 저는 사과중독자이기에...ㅋㅋㅋㅋㅋ

iOS에서의 사용법을 써보자면...

 

일단 어떤 dotLottie 파일을 실행하고 싶으면

https://github.com/lottiefiles/dotlottie-ios

GitHub - LottieFiles/dotlottie-ios: .lottie player for iOS

1. 이 dotLottie-ios 종속성을 패키지에 추가하시고,

2. 상단에 import DotLottie를 적어주시고,

3. 사용 시에는 다음과 같이 적어주시면 됩니다! (ex. loading.lottie)

DotLottieAnimation(fileName: "loading", 
                   config: AnimationConfig(autoplay: true,
                                           loop: true)
).view()

 

파일은요...??

 

 

이런 식으로 추가만 해주면 알아서 적용이 됩니다~~

 

파일을 추가해서 사용하는 방식 외에도 url을 활용하거나 기타 property들이 궁금하시다면...!

https://lottiefiles.com/blog/working-with-lottie-animations/getting-started-with-dotlottie-player-ios

Introducing and Getting Started with dotLottie Player for iOS | LottieFiles

 

 이곳에 잘 나와있으니 참고해보시기 바랍니다! 👍🏻😆👍🏻

마무리

오늘은 작년에 새로 출시된 확장자인 dotLottie를 알아봤는데요!

JSON Lottie보다 성능도 좋고 오히려 확장된 녀석이기에 앞으로는 Lottie에서 미는대로 dotLottie가 많이 쓰이게 되지 않을까 싶습니다.

아직 dotLottie를 모르는 분들도 많고 쓰임이 많지 않은데...!

조만간 디자이너 분들과 협업하면서 자주 사용해봐야겠습니다~~! =D

 

그럼 오늘도 부족하지만 포스팅 읽어주셔서 감사드리고,

다음에도 좋은 iOS 주변 기능들이 있다면 소개하는 포스팅을 들고 달려오겠습니다!!

 

참고

https://github.com/LottieFiles/dotlottie-ios

GitHub - LottieFiles/dotlottie-ios: .lottie player for iOS

https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-ios/

dotLottie-ios - LottieFiles

https://dotlottie.io/intro/#prelude

Introduction | dotLottie

 

---

아직 꼬꼬마 개발자입니다.

더 나은 설명이나 코드가 있다면 언제든 환영입니다.

적극적인 조언과 피드백 부탁드립니다!

 

그럼 오늘도 개발 가득한 하루되세요!

- Xerath -

🤖🤖🤖🤖🤖🤖🤖