[iOS] Splash Screen(스플래시 스크린) 구현하기 | Lottie Animation

오늘은 Splash Screen을 Animation으로 구현해볼 예정

 

Splash Screen은 Launch Screen(런치스크린)이라고도 한다.

(= 앱을 시작할 때 앱이 로딩되는 동안 빈 페이지만 노출되지 않도록 1~5초 간 떴다가 사라지는 화면)

 

 

넷플릭스의 스플래쉬 화면

 

디자이너 없이 혼자서 어떻게 애니메이션으로 이루어져있는 스플래쉬 화면을 구현할까?

 

출처: 야나두

 

Lottie를 이용하면 할 수 있다 !

 

 

에.... Lottie가 뭐임..?

 

 

 

Lottie는 Airbnb 에서 제공하는 모바일 애니메이션 라이브러리이다.

https://lottiefiles.com에서 여러 모바일용 애니메이션을 확인할 수 있는데,

 

출처: Lottiefiles.com

 

이렇게 Free Animations도 있다 ㅎㅎ

들어가면 오른쪽 화면처럼 디자이너분들께서 올려주신 다양한 모바일용 애니메이션들을 볼 수 있다.

 

그럼 이제 이걸 어떻게 사용하면 될까?

 

바로 Cocoapods를 이용하는 건데,

Airbnb 깃헙에 들어가보면 이렇게 친절하게 lottie 이용방법에 대해서도 나와있다. ㅎㅎ

 

Airbnb 깃헙 👉 https://github.com/airbnb/lottie-ios 

 

 

그럼 이제 이용방법을 따라 Splash 뷰를 실제로 프로젝트에 적용해보자.

 

SplashScreenProject라는 이름의 프로젝트를 하나 만들어준다.

 

그리고 Main.storyboard에 블로그 이름을 담은 간단한 메인화면을 만들었다.

 

 

 

 

이제 그럼 LottieFiles로 들어가 스플래쉬 화면을 골라보자.

 

 

Menghe Li 님의 Computer Animation for Marpipe를 선택!

Download > Lottie JSON 을 통해 JSON 파일을 다운 고고

 

 

 

이 JSON 파일을 현재 Xcode 프로젝트에 추가해준다.

 

 

그럼 이제 Airbnb에서 하라는 대로 코코아팟즈를 사용하면 된다.

 

 

출처: Airbnb Github

우선 코코아팟즈가 이미 설치되어있다고 가정하고, (mac에 cocoapods 설치하는 법)

터미널에 들어가 해당 프로젝트 파일이 있는 위치로 간다.

 

 

해당 위치에서 pod init을 해주고 나서 확인해보면

 

 

이렇게 프로젝트에 Podfile이 생성!

 

 

 

 

vi을 이용해 Podfile로 들어가 pod 'lottie-ios'을 추가해주고 esc + ':wq'로 저장해준다.

 

pod file을 추가해주고 나면 꼭 pod install을 해줘야함!!

그리고 나서 실행되고 있는 Xcode를 종료하고 다시 켜준다.

 

확인해보면 아까는 볼 수 없었던 xcworkspace가 생긴다.

이제부터 이 프로젝트는 xcodeproj 대신 이걸로 Xcode 프로젝트를 열어주면된다.

 

열어보면 Pods가 추가되어있는걸 확인할 수 있다.

 

Lottie Animation을 사용할 뷰컨트롤러 코드에 import Lottie 추가하는 것 빼먹지 않기

 

 

그럼 이제 애니메이션뷰 생성해서 넣어주면 된다.

 

구현 / 생성

 

가장 중요한 건 두 가지

1. AnimationView name 안에 아까 추가한 json 파일 이름 넣어주기

2. 애니메이션 끝나면 메인화면 나올 수 있게하기

 

 

 

그럼 결과를 확인해보자 두근두근

 

 

 

 

 

 

이렇게 Lottie Animation을 활용해서 Splash Screen을 구현할 수 있었다 !!

 

 

 

 

※ 상업적으로 해당 애니메이션을 사용하기 전에는 

 The license allows for commercial use.

문구가 있는지 꼭 확인하기 !!!!