์ฝ์ด๋ฅผ ์ก๋ GSAP!
์ธํฐ๋ํฐ๋ธ ์น, ํจ์ฌ ์ฝ๊ณ ํธ๋ฆฌํ๊ฒ ๐
์น์์ ๋ฉ์ง ์ ๋๋ฉ์ด์
์?
์๋ฐ์คํฌ๋ฆฝํธ GSAP ์ ๋๋ก ์์ํ๊ธฐ
GSAP์ ์ฌ์ฉํด ๋ง๋ Bridge ํด๋ก ์ฝ๋ฉ ํ์ด์ง์
๋๋ค. (๋งํฌ)
์ธํฐ๋ํฐ๋ธ ์น์ ๊ด์ฌ์ด ์๋์? ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด ๋ฉ์ง ์น ์ ๋๋ฉ์ด์
์ ๊ตฌํํด๋ณด๊ณ ์ถ๋์? ๋์์ธ๊ณผ ๊ฐ๋ฐ, ๋ ๊ฐ์ง ์ฌ๋ฏธ ๋ชจ๋ ๋์น ์ ์๋์? GSAP์ ๋ฐ๋ก ๊ทธ๋ฐ ๋ถ๋ค์ ์ํ ํ๊ธฐ์ ์ธ ํ๋ซํผ์
๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ฉ์ด์
๋ผ์ด๋ธ๋ฌ๋ฆฌ, GSAP
GreenSock์์ ๋ง๋ GSAP์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์, UI ๋์์ด๋ ๋ฑ์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ฝ๊ณ ํธ๋ฆฌํ๊ฒ ์ ๋๋ฉ์ด์
์ ๋ง๋ค ์ ์๋ ์ ๋๋ฉ์ด์
ํ๋ซํผ์
๋๋ค.
โ
์ธํฐ๋ํฐ๋ธ ์น์ ๊ด์ฌ์ด ์๋ค๋ฉด OK!
โ
HTML, CSS & JavaScript๋ฅผ ์ธ ์ค ์๋ ๋๊ตฌ๋!
๊ทธ๋ฐ๋ฐ... GSAP์ ๋๋ฌด๋๋ ๊ฐ๋ ฅํ ๋งค๋ ฅ์๋ ๋ถ๊ตฌํ๊ณ , ๋ง์ GSAP์ ์ฐ๋ ค๊ณ ๋ง์๋จน๊ธฐ๋ ์ฝ์ง ์์ต๋๋ค.
๋ฐ๋ก ์ ๋๋ก ๋ ํ๊ธ ๋ฌธ์๋ ํ์ต ์๋ฃ๋ฅผ ์ฐพ๊ธฐ๊ฐ ์ด๋ ต๊ธฐ ๋๋ฌธ์ธ๋ฐ์.
ํ์ง๋ง ๋์์ GSAP์ ์ฌ์ฉ์์ ํธ์๋ฅผ ์ํด ๋ค์ํ ๊ธฐ๋ฅ๋ค์ ์ ๊ณตํ๊ณ ์์ต๋๋ค.
๋๋ฌธ์ ํต์ฌ ๊ธฐ๋ฅ๋ง ์ ๋๋ก ์ตํ๋ค๋ฉด ๋๊ตฌ๋ ์ฝ๊ฒ ํ์ฉํ ์ ์๊ฒ ๋ฉ๋๋ค.
์ด ๊ฐ์๋ฅผ ํตํด ๋ง์ ๋ถ๋ค์ด GSAP๊ณผ ์ธํฐ๋ํฐ๋ธ ์น ๊ฐ๋ฐ์ ๋งค๋ ฅ์ ํน ๋น ์ง ์ ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค!
๊ฐ์ฅ ์ฝ๊ณ ์ฌ๋ฏธ์๊ฒ ๋ฐฐ์ฐ๋
GSAP ๊ฐ์ด๋ A to Z
๊ธฐ๋ณธ์ ํผํผํ๊ฒ
ํต์ฌ ๊ธฐ๋ฅ์ ์ดํดํ๊ธฐ ์ฝ๋๋ก
ํํธ๋ณ๋ก ํ๋ํ๋ ๋๋ ์ค๋ช
ํฉ๋๋ค.
(Tween, Timeline, Keyframe...)
์ค์ต๋ ์์ ์๊ฒ
๊ฐ์๋ฅผ ๋ง์น ํ ์ค์ตํด๋ณผ ์ ์๋
ํ๊ฒฝ๊ณผ ๊ณผ์ ๋ฅผ ์ ๊ณตํฉ๋๋ค.
(๋
ธ์
ํ๊ฒฝ ๋ฌธ์ ๋ฐ Timeline ์๋ฃ)
์ด๋ณด์๋ ๊ฑฑ์ ์์ด
HTML/CSS + JS ๊ธฐ์ด๋ง ์์๋
์ถฉ๋ถํ ํ์ตํ ์ ์์ต๋๋ค.
(CSS, JS๋ฅผ ๊น๊ฒ ์๋ฉด ๋์ฑ ์ข์ต๋๋ค!)
๐ก GSAP์ ํ์ตํ๊ณ ๋๋ฉด? ์ ๋๋ฉ์ด์
์ ๋ณด๋ ๊ด์ ์ด ๋ฐ๋๋๋ค!
์์ ์๋ โ์~ ์์๋คโ ์ ๋๋ก๋ง ๋ณด๊ณ ๋๊ผ๋ ์น ์ ๋๋ฉ์ด์
์ ์๋ฆฌ๊ฐ ๋ณด์
๋๋ค. ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋๋ฉด ๋๊ฐ์ ์ ๋๋ฉ์ด์
์ ๋ณด๋๋ผ๋ โ์ด๋ค ๋ฉ์๋์ ์ด๋ค ์์ฑ์ ์ฌ์ฉํ๊ณ , ๊ฐ์์ ๋๋ ์ด ์๊ฐ์ ๋ช ์ด์ ๋๊ฒ ๊ตฌ๋โ๊น์ง๋ ์ถฉ๋ถํ ์๊ฐํ๊ณ , ์ง์ ๊ตฌํํ ์ ์๊ฒ ๋ฉ๋๋ค.
์ปค๋ฆฌํ๋ผ์
ํ์ธํด๋ณด์ธ์.

What is GSAP?
GSAP์ GreenSock์์ ๋ง๋ ์ ๋๋ฉ์ด์
ํ๋ซํผ์ผ๋ก, JavaScript๋ก ์ ์ดํ ์ ์๋ ๋ชจ๋ ์์์ ์ ๋๋ฉ์ด์
์ ์ ์ฉํ ์ ์์ต๋๋ค. (CSS ์์ฑ, SVG, React, Canvas, Normal Object ๋ฑ...) ๋ํ ์๋ง์ ๋ธ๋ผ์ฐ์ ์ ํฌ๋ก์ค๋ธ๋ผ์ฐ์ง์ ์ง์ํ๋ฉฐ, jQuery์ ๋นํด ์ต๋ 20๋ฐฐ ๋น ๋ฅธ ์ฑ๋ฅ์ ์ ๊ณตํฉ๋๋ค.

GSAP ์ฝ์ด ์ดํดํ๊ธฐ
GSAP ๊ฐ์ฒด๊ฐ ๊ฐ์ง๊ณ ์๋ Property์ Method๋ฅผ GreenSock ๊ณต์ ๋ฌธ์๋ฅผ ์ง์ ํ์ธํ๋ฉด์ ํ์ตํฉ๋๋ค.

Tween ์ดํดํ๊ธฐ
๊ธฐ๋ณธ์ ์ธ ์ ๋๋ฉ์ด์
์ด ์ ์ฉ๋๋ ์๋ฆฌ๋ฅผ ํ์ตํ๋ฉฐ, Tween์ ์ด์ฉํด ๊ฐ๋จํ ์ ๋๋ฉ์ด์
์ ์ง์ ๊ตฌ์ฑํด๋ด
๋๋ค.

Timeline ์ดํดํ๊ธฐ
ํ์๋ผ์ธ์ ํ์ฉํ์ฌ ์ ๋๋ฉ์ด์
์ ์๊ฐ ํ๋ฆ์ ์ ์ดํ๊ณ , ์ปจํธ๋กคํ๋ ๋ฐฉ๋ฒ์ ํ์ตํฉ๋๋ค.

์ต์ข
๊ฒฐ๊ณผ๋ฌผ
์ ๋๋ฉ์ด์
์ด ์ ์ฉ๋ ์น ํ์ด์ง ์ธํธ๋ก๋ฅผ ์ง์ ๋ง๋ค์ด ๋ด
๋๋ค.
๐พ ์๊ฐ ํ๊ฒฝ ๋ฐ ํ์ต ์๋ฃ ์๋ด
- ๊ฐ์์์๋ ์จ๋ผ์ธ ๊ธฐ๋ฐ ์ฝ๋ ์๋ํฐ์ธ CodePen์ ์ฌ์ฉํ๋ฉฐ, Windows/macOS ํ๊ฒฝ ๋ชจ๋ ํ์ตํ ์ ์์ต๋๋ค.
- ํ์ต ์๋ฃ๋ ๋
ธ์
๋ฌธ์๋ก ์ ๊ณต๋ฉ๋๋ค. (์น์
0 - ํ๊ฒฝ ๊ตฌ์ฑ ์์
๋
ธํธ)
- ๊ฐ๋จํ HTML, CSS, JavaScript ๊ธฐ์ด๋ฅผ ์๊ณ ๊ณ์
์ผ ํฉ๋๋ค.
Q&A ๐ฌ
Q. ์ GSAP์ ๋ฐฐ์์ผ ํ๋์?
์์ฐ์ฑ์ด ์ค์ํ ์น ๊ฐ๋ฐ์์๊ฒ ์์ด ์์ ์๋ฐ์คํฌ๋ฆฝํธ๋ง์ผ๋ก ์ ๋๋ฉ์ด์
์ ๊ตฌํํ๋ ์ผ์ ๊ต์ฅํ ๋ถํฉ๋ฆฌํ๊ณ ๋ถํ์ํฉ๋๋ค. ์ด๋ด ๋ ์ ๋ง๋ค์ด์ ธ ์๋ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ๋์ฑ ํธ๋ฆฌํ๊ฒ ์ฃ ? ๋ชป์ ์์ผ๋ก ๋ฐ์ง ์๊ณ ๋ง์น๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ฒ๋ผ ๋ง์ด์ฃ .
Q. GSAP์ ๋ฐฐ์ฐ๋ฉด ๋ญ๊ฐ ์ข์๊ฐ์?
์ ๋๋ฉ์ด์
์ ๋ถ์ํ๋ ๋ฅ๋ ฅ์ด ์๊ธฐ๋ฉฐ, ์ด๋ ๊ฒ ๋ถ์ํ ์ ๋๋ฉ์ด์
์ ์์ฃผ ์ฝ๊ฒ ๋ด ํ๋ก์ ํธ์ ๋ฐ์ํด๋ณผ ์ ์์ต๋๋ค.
Q. GSAP์ ๋ฐฐ์ฐ๋ฉด ์ด๋ค ์ผ์ ํ ์ ์๋์?
์ด ์์
์ ์๊ฐํ๊ณ ๊ณง๋ฐ๋ก ์ธํฐ๋ํฐ๋ธ ์น์ ๋ง๋ค ์๋ ์์ต๋๋ค. ๋ค๋ง ๊ธฐ์ด ์ฝ์ด๋ฅผ ๋ค์ง๋ ์์
์ด๋๋งํผ, ๊ธฐ๋ณธ๊ธฐ๋ฅผ ํํํ ๋ฐฐ์ด๋ค๋ ์๊ฐ์ผ๋ก ์๊ฐํ์๋ฉด ๋์์ด ๋ ๊ฒ์
๋๋ค :)
Q. ๊ฐ์๋ฅผ ๋ฃ๊ธฐ ์ ์ค๋นํด์ผ ํ ๊ฒ์ด ์๋์?
HTML, CSS, JavaScript์ ์ ์ ์ง์์ ํ์ตํ๊ณ ์ค์๋ ๊ฒ ์ข์ต๋๋ค. ์ ๋ชจ๋ฅด์
๋ ๋ฐ๋ผํ ์๋ ์์ง๋ง, ์๊ณ ๋ค์ ๊ฒฝ์ฐ ์ดํด์ ํญ์ด ํจ์ฌ ๋์ด์ง๋๋ค.
Q. ์์
๋ด์ฉ์ ์ด๋ ์์ค๊น์ง ๋ค๋ฃจ๋์?
Part 1์ GSAP ๊ธฐ์ด ์์
์
๋๋ค. GSAP ๊ธฐ์ด ๋ฌธ๋ฒ ๋ฐ ๊ธฐ๋ฅ์ ์ด์ ์ ๋ง์ถฐ ๊ฐ์๋ฅผ ์งํํฉ๋๋ค.