์์ด๋น์ค๋น์์ ๋ง๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
Lottie๋ฅผ ์์ํด๋ณด์ธ์ ๐
์์ง์ด๋ ์ด๋ฏธ์ง
๋ง๋ค์ด๋ณด์ค๋์?
์์ด๋น์ค๋น์์ ๋ง๋ ํซํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ, Lottie๋ฅผ ์์๋์?

Lottie๋ฅผ ์ฌ์ฉํ๋ฉด ๊ณ ํ๋ฆฌํฐ ์ ๋๋ฉ์ด์
์
์์ ๋กญ๊ฒ ๋ง๋ค ์ ์์ด์.
Lottie์ ๋ํด ๋จผ์ ์๊ฐํ์๋ฉด, ์์ง์ด๋ ์ ๋๋ฉ์ด์
์ ๋ํ ๋ฐ์ดํฐ ๊ฐ์ JSON ํ์์ผ๋ก ์ถ๋ ฅํด์ ์ค์ ์ฝ๋๋ก ์น๊ณผ ์ฑ์์ ์ ์ฉ๋๊ฒ ํด์ฃผ๋ ๊ธฐ์ ์
๋๋ค. ํด๋น ๊ธฐ์ ์ ๋ฐฐ์ฐ๋ฉด ๋๋ Gif, Video์ ์์กดํ์ง ์์๋ ์์ง์ด๋ ์ ๋๋ฉ์ด์
์ ๊ตฌํํ ์ ์๊ฒ ๋ฉ๋๋ค.
์ด ๊ฐ์๋ฅผ ํตํด Lottie์ ๋ํด ์์ธํ ๋ฐฐ์ธ ์ ์์ต๋๋ค. ๋กํฐ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํ ํ๊ฒฝ์ ๋จผ์ ์ธํ
ํ๊ณ , ์ ํํฐ์ดํํธ์์ ์ ์ํ ์ ๋๋ฉ์ด์
์ ๋ฐ๋๋ฌด๋น(Bodymovin)์ ํตํด ์ฝ๋๋ก ์ถ๋ ฅํด์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ๋ค์ํ ์ธํฐ๋ ์
์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ณผ๊ฒ์.
Lottie๋ก ๊ตฌํํ
์ ๋๋ฉ์ด์
์ด๋ฏธ์ง
ํด๋น ๋งํฌ์์ lottie๋ก ์ ์๋ ์์๋ฅผ ๋ ๋ง์ด ๋ณผ ์ ์์ต๋๋ค.
์์ - ํด๋ฆญํ์ ๋ ๋กํฐ ์ ๋๋ฉ์ด์
์คํํ๋ ํ๋ฉด
์์ - ์คํฌ๋กค ์ ๋์ ๋ฐ๋ฅธ ๋กํฐ ์ ๋๋ฉ์ด์
์คํ
์์ - ์ํํฐ์ดํํธ๋ก ์ ์ํด์ ์ถ๋ ฅํ ์ ๋๋ฉ์ด์
๋๊ฐ ๋ค์ผ๋ฉด ์ข์๊น์?
๋ฉ์ถฐ์๋ ๊ฒ์
๋ ์ด์
๋ง์กฑ ๋ชป ํ๋
์ด์ ๋ง๋ ๋์์ด๋
๋ณธ์ธ์ด ์์
ํ
์ ๋๋ฉ์ด์
์ ์ฝ๋๋ก
์น์ ์ ์ฉํ๊ณ ์ถ์
๋ฅ๋ ฅํ ๋์์ด๋
Lottie.js๋ฅผ
๋น ๋ฅธ ์๊ฐ ์์
์ตํ๊ณ ์ถ์
์น ํผ๋ธ๋ฆฌ์
์๋
ํ์ธ์,
์ฝ๋ฉํ๋ ํ๋ก๋ํธ ๋์์ด๋
๋์์ธ๋ฒ ์ด์ค์
๋๋ค.
์ ๋ ์ฝ๋ฉ์ ํ๋ ํ๋ก๋ํธ ๋์์ด๋์
๋๋ค. ๋์์ด๋ ๊ด์ ์์ ์ด๋ค ๋ถ๋ถ์ ์ด๋ ค์ํ๋ฉฐ, ์ด๋ค ๋ถ๋ถ์ ๊ตฌํํ๊ณ ์ถ์ดํ๋์ง์ ๋ํด ๋งค์ฐ ๊ณต๊ฐํ๊ณ ์์ต๋๋ค.
์ฐ๋ฆฌ๊ฐ ๋ฐฐ์ฐ๋ ค๋ ๊ฒ์ ์์ฒญ๋ ๊ฒ์ด ์๋๋๋ค. ์ด๋ ค์ ๋ณด์ฌ์ ๋ชปํ๊ณ ์์๋ ๊ฒ๋ฟ์ด๊ณ ๋ง์ ํ๋ฉด ๋๊ตฌ๋ ํ ์ ์๋ ๊ฒ๋ค์
๋๋ค. ๋กํฐ๋ฅผ ํ์ตํด์ ๋งค๋ ฅ์ ์ธ ๋์์ธ์ ํด๋ณด์ธ์.
์ฐธ๊ณ ๋ก, ์ํํฐ์ดํํธ๋ก ๊ฐ๊ฐ์ ์ธ ์ ๋๋ฉ์ด์
์ ๊ฐ๋ฅด์ณ์ฃผ๋ ๊ฐ์๋ ์๋๋๋ค. ์์
๋ ์ ๋๋ฉ์ด์
์ ์ฝ๋๋ก ์ด๋ป๊ฒ ์ถ๋ ฅํ๊ณ , ์น์ ์ด๋ป๊ฒ ์ ์ฉํ๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ด๋ป๊ฒ ์ธํฐ๋ ์
์ ๊ตฌํํ๋์ง์ ์ง์คํ ๊ฐ์์
๋๋ค. ์งง๊ณ ๋ฐ๋ ๋์ ํต์ฌ๋ง ๊ฐ๋ฅด์ณ๋๋ฆฝ๋๋ค.
์์๋๋ก ํ์ตํด๋ณด์ธ์!
์ด 9๊ฐ์ ๊ฐ์ข ์์์ด ์ค๋น๋์ด ์๊ณ , ๊ธฐ์ด์ ๊ณ ๊ธ ์ด๋ ๊ฒ 2๊ฐ์ง ์น์
์ผ๋ก ๋๋ฉ๋๋ค.
๊ธฐ์ด์์๋ Lottie ์ฝ๋๋ฅผ ๋ถ์ํ๊ณ , ์ฌ์ฉํ๊ธฐ ํธํ๊ฒ HTML, CSS, JS, JSON ํ์ผ๋ก ๋ถ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์ฐ์ ๋ฐฐ์๋๋ค. Lottie์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๊ณตํ๋ ๊ธฐ๋ฅ๋ค์ ์ฌ์ฉํ๋ฉฐ ์๋๋ฒ์ ์ตํ ์ ์์ด์.
์ ๋ฆฌ ์ ๋ ๋ณต์กํ ์ฝ๋๋ฅผ ํ์ผ๋ณ๋ก ๋ถ๋ฆฌ
๊ณ ๊ธ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํตํด ๋ง์ฐ์ค ์ค๋ฒ๋ ์คํฌ๋กค, ํด๋ฆญ ๋ฑ ๋ค์ํ ํ๋์ ๋ํ ์ธํฐ๋ ์
์ ๊ตฌํํ ์ ์์ต๋๋ค. GIF์๋ ๊ฐ์ฅ ํฐ ์ฐจ์ด์ฃ . ํ๋ ์์ ์ํ๋ ๋๋ก ์ง์ ์ปจํธ๋กค ํ ์ ์์ด์.
์ง์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ธํฐ๋์
์ฝ๋ ๊ตฌํ
์์ฃผ ๋ฌป๋ ์ง๋ฌธ ๐ฌ
Q. ๋กํฐ๋ฅผ ๋ฐฐ์ฐ๋ฉด ๋ญ๊ฐ ์ข์์?
์ํ์ผ๋ก ์์
ํ ์ ๋๋ฉ์ด์
์ ์น, ์ฑ์ ์ ์ฉํ ์ ์์ต๋๋ค. ๋์์ธ์ ํ๋ฆฌํฐ๋ฅผ ๋์ฌ์ฃผ๋ ์์์
๋๋ค.
Q. ์ฝ๋๋ฅผ ์์ ๋ชจ๋ฅด๋ ๋์์ด๋์ธ๋ฐ ๋์์ด ๋ ๊น์?
Lottie๊ฐ ๋ฌด์์ธ์ง, ์ด๋ป๊ฒ ์๋ํ๋์ง ์๋ฆฌ๋ง ์์๋ ๊ฐ๋ฐ์์ ํ์
ํ ๋ ์ฌ๋ฏธ๋ ์์
์ ํ ์ ์์ต๋๋ค. ๋ค๋ง, ๊ธฐ๋ณธ์ ์ธ HTML/CSS ๋ฐ JavaScript ์ง์์ด ์๋ค๋ฉด ๋ ํ๋ถํ ํ์ฉ์ด ๊ฐ๋ฅํฉ๋๋ค.
Q. ๊ฐ์ ๋ฃ๊ธฐ ์ ์ค๋นํด์ผ ํ ๊ฒ์ด ์๋์?
๊ฐ์์ ์ฌ์ฉ๋ ํด์ ์ํํฐ์ดํํธ, ๋น์ฃผ์ผ์คํ๋์ค, ์ผ๋ฌ์คํธ๋ ์ดํฐ์
๋๋ค. ํด๋น ํด๋ค์ ๋ํ ์ฌ์ฉ๋ฒ์ ์๊ณ ๋ณด๋ ๊ฒ์ด ์ข์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ํ ๊ธฐ์ด ์ง์์ ๊ฐ์ง๊ณ ์์ด์ผ ๊ณ ๊ธ ๊ฐ์ข๋ฅผ ์ด๋ ค์ ์์ด ๋ค์ ์ ์์ต๋๋ค.
Q. ์์ ํ์ผ์ ์ ๊ณตํ๋์?
๋น์ฐํ ์ ๊ณตํฉ๋๋ค. ๊ณต๋ถํ๋ ๋ฐ ์ต๋ํ ์ด๋ ค์ ์๋๋ก ๊ฐ์์ ์ฐ์ธ ์์ ํ์ผ์ ์ ๊ณตํฉ๋๋ค.
Q. ์ ํํฐ์ดํํธ ์ฌ์ฉ๋ฒ์ด๋ ์ ๋๋ฉ์ด์
์ ์๋ฒ๋ ์๋ ค์ฃผ์๋์?
์ํํฐ์ดํํธ๋ก ๊ฐ๊ฐ์ ์ธ ์ ๋๋ฉ์ด์
์ ๊ฐ๋ฅด์ณ์ฃผ๋ ๊ฐ์๋ ์๋๋๋ค. ์์
๋ ์ ๋๋ฉ์ด์
์ ์ฝ๋๋ก ์ด๋ป๊ฒ ์ถ๋ ฅํ๊ณ , ์น์ ์ด๋ป๊ฒ ์ ์ฉํ๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ด๋ป๊ฒ ์ธํฐ๋ ์
์ ๊ตฌํํ๋์ง์ ์ง์คํ ๊ฐ์์
๋๋ค.