์ต์์ ์ฑ๋ฅ์ ์ํด CSS ๋ชจ์ ๊ฒฝ๋ก ์ ๋๋ฉ์ด์ ์ ์ต์ ํํ์ธ์. ๋ ๋๋ง ์๋๋ฅผ ํ๋กํ์ผ๋งํ๊ณ , ๋ณ๋ชฉ ํ์์ ์๋ณํ๋ฉฐ, ๋ถ๋๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ํ ํจ์จ์ ์ธ ์ ๋๋ฉ์ด์ ๊ธฐ์ ์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ์ธ์.
CSS Motion Path ์ฑ๋ฅ ํ๋กํ์ผ๋ง: ๊ฒฝ๋ก ์ ๋๋ฉ์ด์ ๋ ๋๋ง ์๋
CSS Motion Path๋ ๋ณต์กํ ๋ชจ์์ ๋ฐ๋ผ ์์๋ฅผ ์ ๋๋ฉ์ด์ ํํ๋ ๊ฐ๋ ฅํ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ฌ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ๋์์ธ ๋ฐ ์ธํฐ๋ํฐ๋ธ ๊ฒฝํ์ ๋ํ ํฅ๋ฏธ๋ก์ด ๊ฐ๋ฅ์ฑ์ ์ด์ด์ค๋๋ค. ๊ทธ๋ฌ๋ ๋ค๋ฅธ ์ ๋๋ฉ์ด์ ๊ธฐ์ ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ์ฑ๋ฅ์ ์ค์ํ ๊ณ ๋ ค ์ฌํญ์ ๋๋ค. ์ ๋๋ก ์ต์ ํ๋์ง ์์ ๋ชจ์ ๊ฒฝ๋ก ์ ๋๋ฉ์ด์ ์ ๋ฒ๋ฒ ๊ฑฐ๋ฆฌ๋ ์ ํ, ๋๋ฆฐ ๋ฐ์์ฑ, ์ ํ๋ ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ์ด ๊ธ์์๋ CSS ๋ชจ์ ๊ฒฝ๋ก ์ ๋๋ฉ์ด์ ์ ๋ ๋๋ง ์๋๋ฅผ ํ๋กํ์ผ๋งํ๊ณ , ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๋ฉฐ, ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ์ฅ์น์์ ๋ถ๋๋ฝ๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋ ์ ๋๋ฉ์ด์ ์ ๋ง๋ค๊ธฐ ์ํ ํจ์จ์ ์ธ ๊ธฐ์ ์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์ดํด๋ด ๋๋ค.
CSS Motion Path ์ดํดํ๊ธฐ
์ฑ๋ฅ ํ๋กํ์ผ๋ง์ ๋ํด ์์ธํ ์์๋ณด๊ธฐ ์ ์ CSS Motion Path์ ํต์ฌ ๊ฐ๋ ์ ๊ฐ๋ตํ๊ฒ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
motion-path ์์ฑ์ ์ฌ์ฉํ๋ฉด ์์๊ฐ ๋ฐ๋ผ์ผ ํ ๊ธฐํํ์ ๋ชจ์์ ์ง์ ํ ์ ์์ต๋๋ค. ์ด ๋ชจ์์ ๋ค์ํ ๋ฐฉ๋ฒ์ผ๋ก ์ ์ํ ์ ์์ต๋๋ค:
- ๊ธฐ๋ณธ ๋ํ: ์, ํ์, ์ฌ๊ฐํ, ๋ค๊ฐํ.
- ๊ฒฝ๋ก ๋ฌธ์์ด: ๋ณต์กํ ๊ณก์ ๊ณผ ๋ชจ์์ ์ ์ํ๋ SVG ๊ฒฝ๋ก ๋ช
๋ น์ด(์:
M,L,C,S,Q,T,A,Z). - ์ธ๋ถ SVG ๊ฒฝ๋ก:
url()ํจ์๋ฅผ ์ฌ์ฉํ์ฌ<path>์์๊ฐ ์๋ SVG ์์๋ฅผ ์ฐธ์กฐํฉ๋๋ค.
motion-offset ์์ฑ์ ๋ชจ์
๊ฒฝ๋ก๋ฅผ ๋ฐ๋ผ ์์์ ์์น๋ฅผ ์ ์ดํฉ๋๋ค. motion-offset์ 0์์ 1๊น์ง ์ ๋๋ฉ์ด์
ํํ๋ฉด ์์๊ฐ ์ ์ฒด ๊ฒฝ๋ก๋ฅผ ๋ฐ๋ผ ์ด๋ํ๊ฒ ๋ฉ๋๋ค.
motion-rotation ์์ฑ์ ์์๊ฐ ๊ฒฝ๋ก๋ฅผ ๋ฐ๋ผ ์ด๋ํ ๋ ํ์ ํ๋ ๋ฐฉ์์ ์ ์ดํฉ๋๋ค. auto์ auto-reverse ๊ฐ์ ์ผ๋ฐ์ ์ธ ์ต์
์ผ๋ก, ์์๊ฐ ๊ฒฝ๋ก ์ ์ ์ ๋ฐ๋ผ ๋ฐฉํฅ์ ์ก์ ์ ์๋๋ก ํฉ๋๋ค.
์ฑ๋ฅ ํ๋กํ์ผ๋ง์ ์ค์์ฑ
CSS Motion Path๋ ์ฐฝ์์ ์ธ ์์ ๋ฅผ ์ ๊ณตํ์ง๋ง, ๋ณต์กํ ์ ๋๋ฉ์ด์ ์ ๊ณ์ฐ ๋น์ฉ์ด ๋ง์ด ๋ค ์ ์๋ค๋ ์ ์ ๊ธฐ์ตํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ ๋๋ฉ์ด์ ์ ๊ฐ ํ๋ ์์ ๋ธ๋ผ์ฐ์ ๊ฐ ์์์ ์์น, ํ์ ๋ฐ ๊ธฐํ ์์ฑ์ ๋ค์ ๊ณ์ฐํ๋๋ก ์๊ตฌํฉ๋๋ค. ์ด๋ฌํ ๊ณ์ฐ์ด ๋๋ฌด ์ค๋ ๊ฑธ๋ฆฌ๋ฉด ์ ๋๋ฉ์ด์ ์ด ๋ฒ๋ฒ ๊ฑฐ๋ฆฌ๊ณ ๋ฐ์์ด ์๋ ๊ฒ์ฒ๋ผ ๋ณด์ผ ๊ฒ์ ๋๋ค.
์ฑ๋ฅ ํ๋กํ์ผ๋ง์ ํตํด ์ด๋ฌํ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ์ ๋๋ฉ์ด์ ์ด ๊ฐ์ฅ ๋ง์ ์๊ฐ์ ์๋นํ๋ ๋ถ๋ถ์ ์ดํดํ ์ ์์ต๋๋ค. ํ๋กํ์ผ๋ง ๋ฐ์ดํฐ๋ฅผ ๋ถ์ํ์ฌ ์ฝ๋๋ฅผ ์ต์ ํํ๊ณ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ฐ์ ์ธ ์ฑ๋ฅ์ ๊ฐ์ ํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์ ๋ณด์ ์ ๊ฐํ ๊ฒฐ์ ์ ๋ด๋ฆด ์ ์์ต๋๋ค.
์ฑ๋ฅ ํ๋กํ์ผ๋ง ๋๊ตฌ
์ต์ ๋ธ๋ผ์ฐ์ ๋ ์ฑ๋ฅ ํ๋กํ์ผ๋ง์ ์ํ ๊ฐ๋ ฅํ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๋ค์์ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉ๋๋ ๋ช ๊ฐ์ง ์ต์ ์ ๋๋ค:
- Chrome DevTools: Chrome์ DevTools๋ ๋ ๋๋ง ํ๋ก์ธ์ค๋ฅผ ๊ธฐ๋กํ๊ณ ๋ถ์ํ ์ ์๋ ํฌ๊ด์ ์ธ ์ฑ๋ฅ ํจ๋์ ์ ๊ณตํฉ๋๋ค.
- Firefox ๊ฐ๋ฐ์ ๋๊ตฌ: Firefox์ ๊ฐ๋ฐ์ ๋๊ตฌ์๋ Chrome์ DevTools์ ์ ์ฌํ ๊ธฐ๋ฅ์ ๊ฐ์ง ์ฑ๋ฅ ํ๋กํ์ผ๋ฌ๊ฐ ํฌํจ๋์ด ์์ต๋๋ค.
- Safari ์น ๊ฒ์ฌ๊ธฐ: Safari์ ์น ๊ฒ์ฌ๊ธฐ๋ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ๋ถ์ํ๊ธฐ ์ํ ํ์๋ผ์ธ ๋ทฐ๋ฅผ ์ ๊ณตํฉ๋๋ค.
ํ๋กํ์ผ๋ง์ ์ํ Chrome DevTools ์ฌ์ฉํ๊ธฐ
๋ค์์ CSS Motion Path ์ ๋๋ฉ์ด์ ํ๋กํ์ผ๋ง์ ์ํด Chrome DevTools๋ฅผ ์ฌ์ฉํ๋ ๋จ๊ณ๋ณ ๊ฐ์ด๋์ ๋๋ค:
- Chrome DevTools ์ด๊ธฐ: F12 ํค(macOS์์๋ Cmd+Opt+I)๋ฅผ ๋๋ฌ Chrome DevTools๋ฅผ ์ฝ๋๋ค.
- ์ฑ๋ฅ ํจ๋๋ก ์ด๋: "Performance" ํญ์ ํด๋ฆญํฉ๋๋ค.
- ๊ธฐ๋ก ์์: "Record" ๋ฒํผ(์ผ์ชฝ ์๋จ์ ์ํ ๋ฒํผ)์ ํด๋ฆญํ์ฌ ์ ๋๋ฉ์ด์ ์ฑ๋ฅ ๊ธฐ๋ก์ ์์ํฉ๋๋ค.
- ์ ๋๋ฉ์ด์ ์คํ: ํ๋กํ์ผ๋งํ๋ ค๋ ์ ๋๋ฉ์ด์ ์ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค.
- ๊ธฐ๋ก ์ค์ง: "Stop" ๋ฒํผ์ ํด๋ฆญํ์ฌ ๊ธฐ๋ก์ ์ค์งํฉ๋๋ค.
- ๊ฒฐ๊ณผ ๋ถ์: ์ฑ๋ฅ ํจ๋์ ๊ธฐ๋ก์ ํ์๋ผ์ธ ๋ทฐ๊ฐ ํ์๋ฉ๋๋ค. ํ๋ ๋ฐ ์ถ์, ํน์ ์๊ฐ ๋ฒ์ ์ ํ, ๋ค์ํ ์ฑ๋ฅ ์งํ ๋ถ์์ด ๊ฐ๋ฅํฉ๋๋ค.
์ฃผ์ ์ฑ๋ฅ ์งํ
์ฑ๋ฅ ํ๋กํ์ ๋ถ์ํ ๋ ๋ค์ ์ฃผ์ ์งํ์ ์ฃผ์๋ฅผ ๊ธฐ์ธ์ด์ญ์์ค:
- ์ด๋น ํ๋ ์ ์(FPS): FPS๊ฐ ๋์์๋ก ์ ๋๋ฉ์ด์ ์ด ๋ ๋ถ๋๋ฝ๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ์ต์์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํด 60 FPS๋ฅผ ๋ชฉํ๋ก ํ์ธ์. 30 FPS ๋ฏธ๋ง์ ๋ฒ๋ฒ ๊ฑฐ๋ฆฌ๋ ๊ฒ์ผ๋ก ์ธ์๋ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค.
- CPU ์ฌ์ฉ๋: ๋์ CPU ์ฌ์ฉ๋์ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ๋ํ๋ผ ์ ์์ต๋๋ค. ์ ๋๋ฉ์ด์ ํ๋ ์ ๋์ CPU ์ฌ์ฉ๋์ด ๊ธ์ฆํ๋์ง ํ์ธํ์ธ์.
- ๋ ๋๋ง ์๊ฐ: ๋ธ๋ผ์ฐ์ ๊ฐ ๊ฐ ํ๋ ์์ ๋ ๋๋งํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๋๋ค. ๋ ๋๋ง ์๊ฐ์ด ๊ธธ๋ฉด FPS๊ฐ ๋ฎ์์ง ์ ์์ต๋๋ค.
- ์คํฌ๋ฆฝํ ์๊ฐ: JavaScript ์ฝ๋๋ฅผ ์คํํ๋ ๋ฐ ์์๋๋ ์๊ฐ์ ๋๋ค. ์ ๋๋ฉ์ด์ ์ JavaScript๊ฐ ํฌํจ๋ ๊ฒฝ์ฐ ์ฝ๋๋ฅผ ์ต์ ํํ์ฌ ์คํฌ๋ฆฝํ ์๊ฐ์ ์ค์ด์ธ์.
- ๋ ๋๋ง ์ ๋ฐ์ดํธ: ๋ ์ด์์ ๋ฐ ํ์ธํธ ์์ ์ ์์ ๋๋ค. ๊ณผ๋ํ ๋ ์ด์์ ๋ฐ ํ์ธํธ ์์ ์ ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
- GPU ์ฌ์ฉ๋: ์ ๋๋ฉ์ด์ ์ด ํ๋์จ์ด ๊ฐ์๋๋ ๊ฒฝ์ฐ GPU ์ฌ์ฉ๋์ ๋ชจ๋ํฐ๋งํ์ธ์. ๋์ GPU ์ฌ์ฉ๋์ด ๋ฐ๋์ ๋์ ๊ฒ์ ์๋์ง๋ง, ์ง์์ ์ผ๋ก ๋๊ฒ ์ ์ง๋๋ค๋ฉด ์ต์ ํ์ ์ฌ์ง๊ฐ ์์์ ๋ํ๋ผ ์ ์์ต๋๋ค.
์ฑ๋ฅ ๋ณ๋ชฉ ํ์ ์๋ณํ๊ธฐ
์ฑ๋ฅ ํ๋กํ์ ๊ธฐ๋กํ๊ณ ๋ถ์ํ ํ์๋ CSS Motion Path ์ ๋๋ฉ์ด์ ์์ ํํ ๋ฐ์ํ๋ ๋ณ๋ชฉ ํ์์ ์๋ณํ ์ ์์ต๋๋ค:
- ๋ณต์กํ ๊ฒฝ๋ก ๋ฌธ์์ด: ๋งค์ฐ ๊ธธ๊ณ ๋ณต์กํ SVG ๊ฒฝ๋ก ๋ฌธ์์ด์ ๋ ๋๋งํ๋ ๋ฐ ๊ณ์ฐ ๋น์ฉ์ด ๋ง์ด ๋ค ์ ์์ต๋๋ค. ๊ฐ๋ฅํ ๊ฒฝ์ฐ ๊ฒฝ๋ก๋ฅผ ๋จ์ํํ์ธ์.
- ๋๋ฌด ๋ง์ ์ ๋๋ฉ์ด์ ์์: ๋ง์ ์์ ์์๋ฅผ ๋์์ ์ ๋๋ฉ์ด์ ํํ๋ฉด ๋ธ๋ผ์ฐ์ ๋ฆฌ์์ค์ ๋ถ๋ด์ ์ค ์ ์์ต๋๋ค. ์ ๋๋ฉ์ด์ ์์์ ์๋ฅผ ์ค์ด๊ฑฐ๋ ์ ๋๋ฉ์ด์ ์์ฐจ(staggering)์ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
- ๋ถํ์ํ ๋ฆฌํ์ธํธ ๋ฐ ๋ฆฌํ๋ก์ฐ: ๋ฆฌํ์ธํธ(๋ค์ ๊ทธ๋ฆฌ๊ธฐ) ๋ฐ ๋ฆฌํ๋ก์ฐ(๋ ์ด์์ ์ฌ๊ณ์ฐ)๋ฅผ ์ ๋ฐํ๋ DOM ๋ณ๊ฒฝ์ ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ ๋๋ฉ์ด์ ์ค์ ๋ถํ์ํ DOM ์กฐ์์ ํผํ์ธ์.
- CSS๋ก ๊ฐ๋ฅํ ์ ๋๋ฉ์ด์ ์ JavaScript ์ฌ์ฉ: CSS ์ ๋๋ฉ์ด์ ์ ์ข ์ข ํ๋์จ์ด ๊ฐ์๋์ด JavaScript ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ๋ณด๋ค ๋ ๋์ ์ฑ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
- `motion-offset` ๋์ `transform: translate()` ์ฌ์ฉ: `transform: translate()`๋ฅผ ์ฌ์ฉํ์ฌ ์์ง์์ ์๋ฎฌ๋ ์ด์ ํ ์ *์์ง๋ง*, `motion-offset`์ ๊ฒฝ๋ก ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ์ํด ๋ช ์์ ์ผ๋ก ์ค๊ณ๋์์ผ๋ฉฐ, ๋ธ๋ผ์ฐ์ ๊ฐ ๊ฒฝ๋ก๋ฅผ ๋ฐ๋ฅธ ์์ง์์ ๋ํด ๋ ๋๋ง์ ํน๋ณํ ์ต์ ํํ ์ ์๊ธฐ ๋๋ฌธ์ ์ผ๋ฐ์ ์ผ๋ก ์ด๋ฌํ ์๋๋ฆฌ์ค์์ ๋ ์ฑ๋ฅ์ด ์ข์ต๋๋ค.
CSS Motion Path ์ ๋๋ฉ์ด์ ์ต์ ํ ๊ธฐ๋ฒ
์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ํ์ธํ ํ์๋ ๋ค์ํ ์ต์ ํ ๊ธฐ๋ฒ์ ์ ์ฉํ์ฌ CSS Motion Path ์ ๋๋ฉ์ด์ ์ ๋ ๋๋ง ์๋๋ฅผ ๊ฐ์ ํ ์ ์์ต๋๋ค:
1. ๊ฒฝ๋ก ๋ฌธ์์ด ๋จ์ํ
๊ฒฝ๋ก ๋ฌธ์์ด์ ๋ณต์ก์ฑ์ ๋ ๋๋ง ์๊ฐ์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. ์ ์ด์ ๊ณผ ์ธ๊ทธ๋จผํธ์ ์๋ฅผ ์ค์ฌ ๊ฒฝ๋ก ๋ฌธ์์ด์ ๋จ์ํํ์ธ์. ๋ฒกํฐ ๊ทธ๋ํฝ ํธ์ง๊ธฐ(์: Adobe Illustrator, Inkscape)๋ฅผ ์ฌ์ฉํ์ฌ CSS์์ ์ฌ์ฉํ๊ธฐ ์ ์ ๊ฒฝ๋ก๋ฅผ ์ต์ ํํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
์์:
์๋ง์ 3์ฐจ ๋ฒ ์ง์ ๊ณก์ ์ผ๋ก ์ ์๋ ๋งค์ฐ ์์ธํ ๊ณก์ ๋์ , ๋ ๋จ์ํ ๊ณก์ ์ด๋ ์ผ๋ จ์ ์ง์ (๊ฒฝ๋ก ๋ฌธ์์ด์์ L ๋ช
๋ น์ด ์ฌ์ฉ)์ผ๋ก ๊ทผ์ฌํํด ๋ณด์ธ์. ์๊ฐ์ ์ฐจ์ด๋ ๋ฏธ๋ฏธํ ์ ์์ง๋ง ์ฑ๋ฅ ํฅ์์ ์๋นํ ์ ์์ต๋๋ค.
2. ์ ๋๋ฉ์ด์ ์์ ์ ์ค์ด๊ธฐ
๋ง์ ์์ ์์๋ฅผ ๋์์ ์ ๋๋ฉ์ด์ ํํ๋ฉด ๋ธ๋ผ์ฐ์ ์ ๊ณผ๋ถํ๊ฐ ๊ฑธ๋ฆด ์ ์์ต๋๋ค. ๊ฐ๋ฅํ๋ค๋ฉด ์ ๋๋ฉ์ด์ ์์์ ์๋ฅผ ์ค์ด๊ฑฐ๋ ์ ๋๋ฉ์ด์ ์์ฐจ(staggering)์ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ผ ์์ ๋ถํ๋ฅผ ๋ถ์ฐ์ํค์ธ์.
์ ๋๋ฉ์ด์ ์์ฐจ(Staggering): ๋ชจ๋ ์ ๋๋ฉ์ด์ ์ ๋์์ ์์ํ๋ ๋์ ๊ฐ ์ ๋๋ฉ์ด์ ์ ์์ ์๊ฐ ์ฌ์ด์ ์ฝ๊ฐ์ ์ง์ฐ์ ๋ก๋๋ค. ์ด๋ CPU ์ฌ์ฉ๋์ ๊ธ๊ฒฉํ ์ฆ๊ฐ๋ฅผ ๋ฐฉ์งํ๊ณ ์ ๋๋ฉ์ด์ ์ ์ ๋ฐ์ ์ธ ๋ถ๋๋ฌ์์ ๊ฐ์ ํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
3. ํ๋์จ์ด ๊ฐ์ ์ฌ์ฉ
ํ๋์จ์ด ๊ฐ์์ GPU(๊ทธ๋ํฝ ์ฒ๋ฆฌ ์ฅ์น)๋ฅผ ํ์ฉํ์ฌ ์ ๋๋ฉ์ด์
๊ณ์ฐ์ ์ํํ๋ฏ๋ก CPU๊ฐ ๋ค๋ฅธ ์์
์ ์ฒ๋ฆฌํ ์ ์๋๋ก ํด์ค๋๋ค. CSS ์ ๋๋ฉ์ด์
์ ๊ธฐ๋ณธ์ ์ผ๋ก ํ๋์จ์ด ๊ฐ์๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ง๋ง, ์ ๋๋ฉ์ด์
์์์ transform: translateZ(0); ๋๋ backface-visibility: hidden;์ ์ ์ฉํ์ฌ ๋ช
์์ ์ผ๋ก ํ๋์จ์ด ๊ฐ์์ ํธ๋ฆฌ๊ฑฐํ ์ ์์ต๋๋ค.
์์:
.animated-element {
transform: translateZ(0);
/* or */
backface-visibility: hidden;
}
์ฐธ๊ณ : ์ด๋ฌํ ์์ฑ๋ค์ด ์ข ์ข ํ๋์จ์ด ๊ฐ์์ ์ ๋ฐํ์ง๋ง, ๋ธ๋ผ์ฐ์ ์ ๋์์ ๋ค๋ฅผ ์ ์์ต๋๋ค. ํญ์ ์ ๋๋ฉ์ด์ ์ ํ๋กํ์ผ๋งํ์ฌ ํ๋์จ์ด ๊ฐ์์ด ์ค์ ๋ก ์ ์ฉ๋๊ณ ์๋์ง ํ์ธํ๋ ๊ฒ์ด ๊ฐ์ฅ ์ข์ต๋๋ค.
4. ๋ถํ์ํ ๋ฆฌํ์ธํธ ๋ฐ ๋ฆฌํ๋ก์ฐ ํผํ๊ธฐ
๋ฆฌํ์ธํธ์ ๋ฆฌํ๋ก์ฐ๋ ์ฑ๋ฅ์ ํฐ ์ํฅ์ ๋ฏธ์น ์ ์๋ ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ ์ ๋๋ค. ์ ๋๋ฉ์ด์ ์ค์ ๋ถํ์ํ๊ฒ ํธ๋ฆฌ๊ฑฐํ์ง ๋ง์ธ์.
DOM ์กฐ์ ์ต์ํ: ์ ๋๋ฉ์ด์ ์ค์ DOM์ ์์ ํ์ง ๋ง์ธ์. DOM์ ์ ๋ฐ์ดํธํด์ผ ํ๋ ๊ฒฝ์ฐ ์ ๋๋ฉ์ด์ ์ ์ด๋ ํ์ ์ํํ๊ณ , ์ ๋๋ฉ์ด์ ์ค์๋ ํ์ง ๋ง์ธ์.
CSS Transform ๋ฐ Opacity ์ฌ์ฉ: transform์ด๋ opacity์ ๊ฐ์ CSS ์์ฑ์ ์์ ํ๋ ๊ฒ์ด ๋ ์ด์์ ๋ณ๊ฒฝ์ ์ ๋ฐํ๋ ๋ค๋ฅธ ์์ฑ(์: width, height, position)์ ์์ ํ๋ ๊ฒ๋ณด๋ค ์ผ๋ฐ์ ์ผ๋ก ์ฑ๋ฅ์ด ๋ ์ข์ต๋๋ค. ์ด๋ฌํ ์์ฑ๋ค์ ์ข
์ข
์ ์ฒด ๋ฆฌํ์ธํธ ์์ด GPU์์ ์ง์ ์ฒ๋ฆฌ๋ ์ ์์ต๋๋ค.
5. ๊ฒฝ๋ก ๋ฐ์ดํฐ ์ต์ ํ
๊ฒฝ๋ก ๋ฐ์ดํฐ, ํนํ ๋ณต์กํ ๋ชจ์์ ๊ฒฝ์ฐ ์๋นํ ์ฑ๋ฅ ์ค๋ฒํค๋์ ์์ธ์ด ๋ ์ ์์ต๋๋ค. ๋ค์ ์ต์ ํ๋ฅผ ๊ณ ๋ คํด ๋ณด์ธ์:
- ์ ๋ฐ๋ ์ค์ด๊ธฐ: ๊ฒฝ๋ก ๋ฐ์ดํฐ์ ์์์ ์ดํ ์๋ฆฟ์๊ฐ ๋๋ฌด ๋ง์ผ๋ฉด ๊ฐ์ ์ ์ ํ ์์ค์ ์ ๋ฐ๋๋ก ๋ฐ์ฌ๋ฆผํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์. ์๋ฅผ ๋ค์ด,
123.456789๋์123.46์ ์ฌ์ฉํฉ๋๋ค. ์๊ฐ์ ์ฐจ์ด๋ ๊ฑฐ์ ๊ฐ์งํ ์ ์์ง๋ง ๋ฐ์ดํฐ ํฌ๊ธฐ ๊ฐ์๋ ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. - ๋ชจ์ ๋จ์ํ: ์ ์ฒด ๋ชจ์์ ๋จ์ํํ ๊ธฐํ๋ฅผ ์ฐพ์๋ณด์ธ์. ๋ณต์กํ ๊ณก์ ์ ๋ ๊ฐ๋จํ ๋ชจ์์ด๋ ์ง์ ์ผ๋ก ๋์ฒดํ ์ ์์ต๋๊น?
- ๊ฒฝ๋ก ๋ฐ์ดํฐ ์บ์ฑ: ๊ฒฝ๋ก ๋ฐ์ดํฐ๊ฐ ์ ์ ์ธ ๊ฒฝ์ฐ, ๊ฒฝ๋ก ๋ฌธ์์ด์ ๋ฐ๋ณต์ ์ผ๋ก ํ์ฑํ๋ ๊ฒ์ ํผํ๊ธฐ ์ํด JavaScript ๋ณ์์ ์บ์ฑํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
6. ์ฌ๋ฐ๋ฅธ ์ ๋๋ฉ์ด์ ๊ธฐ๋ฒ ์ ํ
CSS Motion Path๋ ๋ณต์กํ ๋ชจ์์ ๋ฐ๋ผ ์์๋ฅผ ์ ๋๋ฉ์ด์ ํํ๋ ๋ฐ ์ด์์ ์ด์ง๋ง, ๋ ๊ฐ๋จํ ์ ๋๋ฉ์ด์ ์๋ ๋ค๋ฅธ ์ ๋๋ฉ์ด์ ๊ธฐ๋ฒ์ด ๋ ์ ํฉํ ์ ์์ต๋๋ค.
- CSS Transitions: ๊ธฐ๋ณธ ์์ฑ ๋ณ๊ฒฝ(์: ์์, ๋ถํฌ๋ช ๋, ์์น)๊ณผ ๊ด๋ จ๋ ๊ฐ๋จํ ์ ๋๋ฉ์ด์ ์ ๊ฒฝ์ฐ CSS transition์ด ๊ฐ์ฅ ์ฑ๋ฅ์ด ์ข์ ์ต์ ์ธ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค.
- CSS Animations: ์ฌ๋ฌ ํคํ๋ ์์ ํฌํจํ๋ ๋ ๋ณต์กํ ์ ๋๋ฉ์ด์ ์ ๊ฒฝ์ฐ CSS animation์ ์ฑ๋ฅ๊ณผ ์ ์ฐ์ฑ ์ฌ์ด์ ์ข์ ๊ท ํ์ ์ ๊ณตํฉ๋๋ค.
- JavaScript Animations: ๋งค์ฐ ๋ณต์กํ ์ ๋๋ฉ์ด์ ์ด๋ ๋์ ๊ณ์ฐ์ด ํ์ํ ์ ๋๋ฉ์ด์ ์ ๊ฒฝ์ฐ JavaScript ์ ๋๋ฉ์ด์ ์ด ํ์ํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ JavaScript ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ์ ์ฑ๋ฅ ์ค๋ฒํค๋์ ์ ์ํด์ผ ํฉ๋๋ค. GreenSock (GSAP)๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ JavaScript ์ ๋๋ฉ์ด์ ์ ์ต์ ํํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
7. ๋ธ๋ผ์ฐ์ ๋ณ ๊ณ ๋ ค์ฌํญ
์ฑ๋ฅ์ ๋ธ๋ผ์ฐ์ ์ ์ฅ์น์ ๋ฐ๋ผ ๋ค๋ฅผ ์ ์์ต๋๋ค. ์ผ๊ด๋ ์ฑ๋ฅ์ ๋ณด์ฅํ๊ธฐ ์ํด ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ์ฅ์น์์ ์ ๋๋ฉ์ด์ ์ ํ ์คํธํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
- ๋ฒค๋ ํ๋ฆฌํฝ์ค: ๋๋ถ๋ถ์ ์ต์ ๋ธ๋ผ์ฐ์ ๋ ๋ฒค๋ ํ๋ฆฌํฝ์ค ์์ด CSS Motion Path๋ฅผ ์ง์ํ์ง๋ง, ๊ตฌํ ๋ธ๋ผ์ฐ์ ์์๋ ํ์ํ ์ ์์ต๋๋ค. Autoprefixer์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ CSS์ ๋ฒค๋ ํ๋ฆฌํฝ์ค๋ฅผ ์๋์ผ๋ก ์ถ๊ฐํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
- ๋ธ๋ผ์ฐ์ ๋ฒ๊ทธ: ์ ๋๋ฉ์ด์ ์ฑ๋ฅ์ ์ํฅ์ ์ค ์ ์๋ ์ ์ฌ์ ์ธ ๋ธ๋ผ์ฐ์ ๋ฒ๊ทธ์ ์ ์ํ์ธ์. ์๋ ค์ง ๋ฌธ์ ์ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ๋ํด์๋ ๋ธ๋ผ์ฐ์ ๋ณ ๋ฌธ์ ๋ฐ ํฌ๋ผ์ ์ฐธ์กฐํ์ญ์์ค.
- ๋ชจ๋ฐ์ผ ์ต์ ํ: ๋ชจ๋ฐ์ผ ์ฅ์น๋ ๋ฐ์คํฌํฑ ์ปดํจํฐ์ ๋นํด ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ด ์ ํ์ ์ธ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ์ ๋๋ฉ์ด์ ์ ๋ณต์ก์ฑ์ ์ค์ด๊ณ ํ๋์จ์ด ๊ฐ์๊ณผ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ๋ชจ๋ฐ์ผ ์ฅ์น์ ๋ง๊ฒ ์ ๋๋ฉ์ด์ ์ ํน๋ณํ ์ต์ ํํ์ธ์. ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ฉด ํฌ๊ธฐ ๋ฐ ์ฅ์น ๊ธฐ๋ฅ์ ๋ฐ๋ผ ์ ๋๋ฉ์ด์ ์ ์กฐ์ ํ์ธ์.
8. will-change ์์ฑ ์ฌ์ฉ (์ฃผ์ ํ์)
will-change ์์ฑ์ ์ฌ์ฉํ๋ฉด ์ ๋๋ฉ์ด์
๋ ์์ฑ์ ๋ํด ๋ธ๋ผ์ฐ์ ์ ๋ฏธ๋ฆฌ ์๋ฆด ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ๋ธ๋ผ์ฐ์ ๋ ํด๋น ์์ฑ์ ๋ํ ๋ ๋๋ง ํ๋ก์ธ์ค๋ฅผ ์ต์ ํํ ์ ์์ต๋๋ค.
์์:
.animated-element {
will-change: motion-offset, motion-rotation;
}
์ฃผ์: will-change๋ ์ถ๊ฐ ๋ฉ๋ชจ๋ฆฌ์ ๋ฆฌ์์ค๋ฅผ ์๋นํ ์ ์์ผ๋ฏ๋ก ์๊ปด์ ์ฌ์ฉํด์ผ ํฉ๋๋ค. will-change๋ฅผ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ์ค์ ๋ก ์ฑ๋ฅ์ด ์ ํ๋ ์ ์์ต๋๋ค. ํ๋ฐํ๊ฒ ์ ๋๋ฉ์ด์
๋๋ ์์ฑ์๋ง ์ฌ์ฉํ์ธ์.
์ค์ฉ์ ์ธ ์์ ๋ฐ ์ฌ๋ก ์ฐ๊ตฌ
์ด๋ฌํ ์ต์ ํ ๊ธฐ๋ฒ์ ์ค๋ช ํ๊ธฐ ์ํด ๋ช ๊ฐ์ง ์ค์ฉ์ ์ธ ์์์ ์ฌ๋ก ์ฐ๊ตฌ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์์ 1: ๊ณก์ ๊ฒฝ๋ก๋ฅผ ๋ฐ๋ผ ๋ก๊ณ ์ ๋๋ฉ์ด์ ํ๊ธฐ
๊ณก์ ๊ฒฝ๋ก๋ฅผ ๋ฐ๋ผ ์ ๋๋ฉ์ด์ ํ๊ณ ์ถ์ ๋ก๊ณ ๊ฐ ์๋ค๊ณ ์์ํด ๋ณด์ธ์.
- ๊ฒฝ๋ก ๋จ์ํ: ๋งค์ฐ ์์ธํ ๊ณก์ ์ ์ฌ์ฉํ๋ ๋์ ๋ ๊ฐ๋จํ ๊ณก์ ์ด๋ ์ผ๋ จ์ ์ง์ ์ผ๋ก ๊ทผ์ฌํํฉ๋๋ค.
- ํ๋์จ์ด ๊ฐ์: ๋ก๊ณ ์์์
transform: translateZ(0);์ ์ ์ฉํ์ฌ ํ๋์จ์ด ๊ฐ์์ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค. - ๊ฒฝ๋ก ๋ฐ์ดํฐ ์ต์ ํ: ๊ฒฝ๋ก ๋ฐ์ดํฐ์ ์์์ ์ดํ ์๋ฆฟ์๋ฅผ ์ ์ ํ ์์ค์ ์ ๋ฐ๋๋ก ๋ฐ์ฌ๋ฆผํฉ๋๋ค.
์์ 2: ๊ฒฝ๋ก๋ฅผ ๋ฐ๋ผ ์ฌ๋ฌ ์์ ์ ๋๋ฉ์ด์ ํ๊ธฐ
์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ธ ํจ๊ณผ๋ฅผ ๋ง๋ค๊ธฐ ์ํด ๋์ผํ ๊ฒฝ๋ก๋ฅผ ๋ฐ๋ผ ์ฌ๋ฌ ์์๋ฅผ ์ ๋๋ฉ์ด์ ํ๊ณ ์ถ๋ค๊ณ ๊ฐ์ ํด ๋ณด๊ฒ ์ต๋๋ค.
- ์ ๋๋ฉ์ด์ ์์ฐจ(Staggering): ๊ฐ ์ ๋๋ฉ์ด์ ์ ์์ ์๊ฐ ์ฌ์ด์ ์ฝ๊ฐ์ ์ง์ฐ์ ๋์ด ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ผ ์์ ๋ถํ๋ฅผ ๋ถ์ฐ์ํต๋๋ค.
- ์์ ์ ์ค์ด๊ธฐ: ๊ฐ๋ฅํ๋ค๋ฉด ์ ๋๋ฉ์ด์ ์์์ ์๋ฅผ ์ค์ ๋๋ค.
- CSS ๋ณ์ ์ฌ์ฉ: CSS ๋ณ์๋ฅผ ์ฌ์ฉํ์ฌ ๊ฒฝ๋ก ๋ฐ์ดํฐ ๋ฐ ์ ๋๋ฉ์ด์ ์์ฑ์ ๊ด๋ฆฌํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ ๋๋ฉ์ด์ ์ ๋ ์ฝ๊ฒ ์ ๋ฐ์ดํธํ๊ณ ์ผ๊ด์ฑ์ ์ ์งํ ์ ์์ต๋๋ค.
์ฌ๋ก ์ฐ๊ตฌ: ์น์ฌ์ดํธ์ ๋ณต์กํ ์ ๋๋ฉ์ด์ ์ต์ ํ
ํ ์น์ฌ์ดํธ์ ๋ณต์กํ ๊ฒฝ๋ก๋ฅผ ๋ฐ๋ผ ์ฌ๋ฌ ์์๋ฅผ ์ ๋๋ฉ์ด์ ํ๋ ๋ณต์กํ ์ ๋๋ฉ์ด์ ์ด ์์์ต๋๋ค. ์ด ์ ๋๋ฉ์ด์ ์ ์ฒ์์๋ ํนํ ๋ชจ๋ฐ์ผ ์ฅ์น์์ ๋ฒ๋ฒ ๊ฑฐ๋ฆฌ๊ณ ๋ฐ์์ด ์์์ต๋๋ค.
Chrome DevTools๋ฅผ ์ฌ์ฉํ์ฌ ์ ๋๋ฉ์ด์ ์ ํ๋กํ์ผ๋งํ ํ ๊ฐ๋ฐ์๋ค์ ๋ค์๊ณผ ๊ฐ์ ๋ณ๋ชฉ ํ์์ ํ์ธํ์ต๋๋ค:
- ๋ณต์กํ ๊ฒฝ๋ก ๋ฌธ์์ด
- ๋ถํ์ํ ๋ฆฌํ์ธํธ ๋ฐ ๋ฆฌํ๋ก์ฐ
- ํ๋์จ์ด ๊ฐ์ ๋ถ์กฑ
๊ทธ๋ค์ ๋ค์๊ณผ ๊ฐ์ ์ต์ ํ๋ฅผ ์ ์ฉํ์ต๋๋ค:
- ๊ฒฝ๋ก ๋ฌธ์์ด ๋จ์ํ
- DOM ์กฐ์ ์ต์ํ
- ์ ๋๋ฉ์ด์
์์์
transform: translateZ(0);์ ์ฉ
๊ทธ ๊ฒฐ๊ณผ, ํนํ ๋ชจ๋ฐ์ผ ์ฅ์น์์ ์ ๋๋ฉ์ด์ ์ด ํจ์ฌ ๋ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ์ด ์ข์์ก์ต๋๋ค. ์น์ฌ์ดํธ์ ์ ๋ฐ์ ์ธ ์ฑ๋ฅ์ด ํฅ์๋์ด ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ก์ต๋๋ค.
๊ฒฐ๋ก
CSS Motion Path๋ ์๊ฐ์ ์ผ๋ก ๋ฉ์ง ์ ๋๋ฉ์ด์ ์ ๋ง๋๋ ๊ฐ๋ ฅํ ๋๊ตฌ๋ฅผ ์ ๊ณตํ์ง๋ง, ์ฑ๋ฅ์ ์ค์ํ ๊ณ ๋ ค ์ฌํญ์ ๋๋ค. ์ฑ๋ฅ ํ๋กํ์ผ๋ง์ ์์น์ ์ดํดํ๊ณ , ๋ณ๋ชฉ ํ์์ ์๋ณํ๋ฉฐ, ์ต์ ํ ๊ธฐ์ ์ ์ ์ฉํจ์ผ๋ก์จ ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ์ฅ์น์์ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๋ ๋ถ๋๋ฝ๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋ CSS Motion Path ์ ๋๋ฉ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค. ์ ๋๋ฉ์ด์ ์ ์ฒ ์ ํ ํ ์คํธํ๊ณ ํ๋ก์ ํธ์ ํน์ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ์ต์ ํ ์ ๋ต์ ์กฐ์ ํ๋ ๊ฒ์ ์์ง ๋ง์ธ์.
์ด ๊ธ์ ์ค๋ช ๋ ๊ฐ์ด๋๋ผ์ธ์ ๋ฐ๋ฅด๋ฉด CSS Motion Path ์ ๋๋ฉ์ด์ ์ด ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ผ ๋ฟ๋ง ์๋๋ผ ์ ์ธ๊ณ ์ฌ์ฉ์๊ฐ ์ ๊ทผํ ์ ์๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค. ์ฑ๋ฅ ํ๋กํ์ผ๋ง๊ณผ ์ต์ ํ๋ฅผ ์์ฉํ๋ ๊ฒ์ ์๋ฆ๋ต๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์น์ ๋ง๋๋ ํต์ฌ์ ๋๋ค.