[iOS] Splash Screen(์Šคํ”Œ๋ž˜์‹œ ์Šคํฌ๋ฆฐ) ๊ตฌํ˜„ํ•˜๊ธฐ | Lottie Animation
๐ŸŽ iOS/UIKit

[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.

๋ฌธ๊ตฌ๊ฐ€ ์žˆ๋Š”์ง€ ๊ผญ ํ™•์ธํ•˜๊ธฐ !!!!