CSS ์คํฌ๋กค ์ค๋ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง, ํนํ ์ค๋ ์ ๋๋ฉ์ด์ ๋ถ์์ ๋ํด ์ฌ์ธต์ ์ผ๋ก ์์๋ด ๋๋ค. ๋ค์ํ ๊ธฐ๊ธฐ์ ๋ธ๋ผ์ฐ์ ์์ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์คํฌ๋กค ํ๊ฒฝ์ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ์ธ์.
CSS ์คํฌ๋กค ์ค๋ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง: ์ค๋ ์ ๋๋ฉ์ด์ ๋ถ์
CSS ์คํฌ๋กค ์ค๋ ์ ๊ฐ์ด๋ ์คํฌ๋กค ๊ฒฝํ์ ๋ง๋๋ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํ์ฌ ์ฌ์ฉ์๊ฐ ์ฝํ ์ธ ์น์ ์ ์ฝ๊ฒ ํ์ํ ์ ์๋๋ก ํฉ๋๋ค. ํ์ง๋ง ์๋ชป ๊ตฌํ๋ ์คํฌ๋กค ์ค๋ ์ ๋ฒ๋ฒ ๊ฑฐ๋ฆฌ๋ ์ ๋๋ฉ์ด์ ๊ณผ ์ค๋ง์ค๋ฌ์ด ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ์ด ๊ธ์์๋ ๋ค์ํ ๊ธฐ๊ธฐ์ ๋ธ๋ผ์ฐ์ ์์ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์คํฌ๋กค์ ๋ณด์ฅํ๊ธฐ ์ํด CSS ์คํฌ๋กค ์ค๋ ์ ์ฑ๋ฅ, ํนํ ์ค๋ ์ ๋๋ฉ์ด์ ์ ์ด์ ์ ๋ง์ถฐ ํจ๊ณผ์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ๊ณ ๋ถ์ํ๋ ๋ฐฉ๋ฒ์ ํ๊ตฌํฉ๋๋ค.
CSS ์คํฌ๋กค ์ค๋ ์ดํดํ๊ธฐ
์ฑ๋ฅ ๋ชจ๋ํฐ๋ง์ ๋ํด ์์๋ณด๊ธฐ ์ ์ CSS ์คํฌ๋กค ์ค๋ ์ ๊ธฐ๋ณธ ์ฌํญ์ ๋ค์ ์ดํด๋ณด๊ฒ ์ต๋๋ค. ์คํฌ๋กค ์ค๋ ์ ์ฌ์ฉํ๋ฉด ์คํฌ๋กค ์ปจํ ์ด๋ ๋ด์ ์คํฌ๋กค ๋์์ด ๋๋ ๋ ์คํฌ๋กค ์์น๊ฐ "์ค๋ "๋ ์ง์ ์ ์ ์ํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ์์ธก ๊ฐ๋ฅํ๊ณ ์ ์ด๋ ์คํฌ๋กค ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค.
์คํฌ๋กค ์ค๋ ์ ์ฃผ์ CSS ์์ฑ:
scroll-snap-type: ์ค๋ ์ง์ ์ด ์ผ๋ง๋ ์๊ฒฉํ๊ฒ ์ ์ฉ๋ ์ง ์ ์ํฉ๋๋ค. ์ผ๋ฐ์ ์ธ ๊ฐ์ผ๋ก๋none,x,y,both,mandatory,proximity๊ฐ ์์ต๋๋ค.scroll-snap-align: ์ค๋ ์ง์ ์ด ์คํฌ๋กค ์ปจํ ์ด๋ ๋ด์์ ์ด๋ป๊ฒ ์ ๋ ฌ๋ ์ง ์ง์ ํฉ๋๋ค. ๊ฐ์ผ๋ก๋start,center,end๊ฐ ์์ต๋๋ค.scroll-padding: ์ค๋ ์์ญ์ ์ํฅ์ ๋ฏธ์น๋ ์คํฌ๋กค ์ปจํ ์ด๋ ์ฃผ๋ณ์ ํจ๋ฉ์ ์ ์ํฉ๋๋ค. ๊ณ ์ ๋ ํค๋๋ ํธํฐ๋ฅผ ๊ณ ๋ คํ ๋ ์ ์ฉํฉ๋๋ค.scroll-margin: ์ค๋ ์์ญ ์ฃผ๋ณ์ ๋ง์ง์ ์ค์ ํ์ฌ ์ด๋ค ์์๊ฐ ์ค๋ ๋์์ผ๋ก ๊ฐ์ฃผ๋ ์ง์ ์ํฅ์ ์ค๋๋ค.
์๋ฅผ ๋ค์ด, ์ํ ์ด๋ฏธ์ง ์บ๋ฌ์ ์ ์๊ฐํด ๋ด ์๋ค:
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.carousel-item {
flex: none;
width: 100%; /* Or a specific width */
scroll-snap-align: start;
}
์ด ์ฝ๋ ์ค๋ํซ์ ๊ฐ .carousel-item์ด ์ปจํ
์ด๋์ ์์ ๋ถ๋ถ์ ์ค๋
๋์ด ์คํฌ๋กค ํ ๊ฐ ์ด๋ฏธ์ง๊ฐ ์์ ํ ๋ณด์ด๋๋ก ๋ณด์ฅํ๋ ์ํ ์บ๋ฌ์
์ ๋ง๋ญ๋๋ค.
์คํฌ๋กค ์ค๋ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง์ ์ค์์ฑ
์คํฌ๋กค ์ค๋ ์ ์ฌ์ฉ์ ๋ด๋น๊ฒ์ด์ ์ ์๋ดํ๋ ํธ๋ฆฌํ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ง๋ง, ๊ทธ ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ ๋๋ก ์ต์ ํ๋์ง ์์ ์คํฌ๋กค ์ค๋ ๊ตฌํ์ ๋ค์๊ณผ ๊ฐ์ ๊ฒฐ๊ณผ๋ฅผ ์ด๋ํ ์ ์์ต๋๋ค:
- ๋ฒ๋ฒ ๊ฑฐ๋ฆฌ๋ ์ ๋๋ฉ์ด์ (Janky Animations): ๋๊ธฐ๊ณ ๊ณ ๋ฅด์ง ์์ ์คํฌ๋กค์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ํดํฉ๋๋ค.
- ๋์ CPU ์ฌ์ฉ๋: ๋นํจ์จ์ ์ธ ๊ณ์ฐ์ ํนํ ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ์์ ๋ฐฐํฐ๋ฆฌ ์๋ช ์ ์๋ชจ์ํฌ ์ ์์ต๋๋ค.
- ๋ ์ด์์ ์ค๋์ฑ(Layout Thrashing): ์คํฌ๋กค ์ค์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ ์ด์์์ ๋ฐ๋ณต์ ์ผ๋ก ์ฌ๊ณ์ฐํ๋๋ก ๊ฐ์ ํ์ฌ ์ฑ๋ฅ์ ์ฌ๊ฐํ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
- ๋๋ฆฐ ๋ ๋๋ง: ์ฝํ ์ธ ๋ ๋๋ง ์ง์ฐ์ ์ฒด๊ฐ๋๋ ๋์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
- ์ ๊ทผ์ฑ ๋ฌธ์ : ๋ฒ๋ฒ ๊ฑฐ๋ฆฌ๋ ์ ๋๋ฉ์ด์ ์ ํนํ ์ ์ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์๊ฒ ๋ฌธ์ ๊ฐ ๋ ์ ์์ต๋๋ค.
์ฑ๋ฅ ๋ชจ๋ํฐ๋ง์ ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ์กฐ๊ธฐ์ ์๋ณํ์ฌ ๊ฐ๋ฐ์๊ฐ ๋ ๋ถ๋๋ฝ๊ณ ์ฆ๊ฑฐ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ํด ์คํฌ๋กค ์ค๋ ๊ตฌํ์ ์ต์ ํํ ์ ์๋๋ก ๋์ต๋๋ค. ์ ์ธ๊ณ์ ์ธ ์ํฅ์ ๊ณ ๋ คํด ๋ณด์ธ์. ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋๋ฆฌ๊ฑฐ๋ ์ค๋๋ ๊ธฐ๊ธฐ๋ฅผ ์ฌ์ฉํ๋ ์ง์ญ์ ์ฌ์ฉ์๋ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ํนํ ๋ฏผ๊ฐํ ๊ฒ์ ๋๋ค.
์ฑ๋ฅ ๋ชจ๋ํฐ๋ง์ ์ํ ๋๊ตฌ ๋ฐ ๊ธฐ์
CSS ์คํฌ๋กค ์ค๋ ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํ๊ธฐ ์ํ ๋ช ๊ฐ์ง ๋๊ตฌ์ ๊ธฐ์ ์ด ์์ต๋๋ค:
1. ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ
์ต์ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ ์ฑ๋ฅ ๋ถ์์ ๋งค์ฐ ์ ์ฉํฉ๋๋ค. ์ฃผ์ ๋๊ตฌ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ฑ๋ฅ ํ๋กํ์ผ๋ฌ: CPU ์ฌ์ฉ๋, ์๋ฐ์คํฌ๋ฆฝํธ ์คํ, ๋ ๋๋ง ๋ฐ ํ์ธํ ์ ๋ณด์ฌ์ฃผ๋ ๋ธ๋ผ์ฐ์ ํ๋ ํ์๋ผ์ธ์ ๊ธฐ๋กํฉ๋๋ค. ์ด๋ฅผ ์ฌ์ฉํ์ฌ ์คํฌ๋กค ์ค๋ ์ ๋๋ฉ์ด์ ์ค ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ์ธ์.
- ๋ ๋๋ง ํญ: ๋ค์ ์น ํด์ง๋ ํ์ด์ง ์์ญ์ ๊ฐ์กฐ ํ์ํ์ฌ ๊ณผ๋ํ ๋ฆฌํ์ธํธ์ ๊ด๋ จ๋ ์ ์ฌ์ ์ธ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ๋๋ฌ๋ ๋๋ค. "Paint flashing"์ ํ์ฑํํ์ฌ ๋ค์ ์น ํด์ง ์์ญ์ ์๊ฐ์ ์ผ๋ก ํ์ธํ์ธ์.
- ๋ ์ด์ด ํญ: ํ์ด์ง์ ํฉ์ฑ๋ ๋ ์ด์ด๋ฅผ ๋ณด์ฌ์ค๋๋ค. ๋ ์ด์ด ๊ตฌ์ฑ์ ์ดํดํ๋ฉด ์ต์ ํ ๊ธฐํ๋ฅผ ์ฐพ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- ํ๋ ์ ์๋(FPS) ๋ฏธํฐ: ํ์ด์ง์ ์ด๋น ํ๋ ์ ์(FPS)๋ฅผ ํ์ํฉ๋๋ค. ๋ถ๋๋ฌ์ด ์ ๋๋ฉ์ด์ ์ ์ผ๊ด๋ 60 FPS๋ฅผ ์ ์งํด์ผ ํฉ๋๋ค.
์ด๋ฌํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ๋ธ๋ผ์ฐ์ ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ด๊ณ (๋ณดํต F12 ํค), ํด๋น ํญ(์: Chrome์ "Performance", Firefox์ "Profiler")์ผ๋ก ์ด๋ํ์ฌ ๊ธฐ๋ก์ ์์ํ๊ณ , ์คํฌ๋กค ์ค๋ ์ผ๋ก ์คํฌ๋กค ๋์์ ์ํํ ๋ค์ ๊ธฐ๋ก์ ์ค์งํฉ๋๋ค. ๊ฒฐ๊ณผ ํ์๋ผ์ธ์ ๋ถ์ํ์ฌ ๊ฐ์ ํ ์์ญ์ ์ฐพ์ผ์ธ์.
์์: Chrome ์ฑ๋ฅ ํ๋กํ์ผ๋ฌ
- Chrome ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฝ๋๋ค(F12).
- "Performance" ํญ์ผ๋ก ์ด๋ํฉ๋๋ค.
- ๊ธฐ๋ก ๋ฒํผ(์ ๋ชจ์)์ ํด๋ฆญํ์ฌ ํ๋กํ์ผ๋ง์ ์์ํฉ๋๋ค.
- ํ์ด์ง์ ์คํฌ๋กค ์ค๋ ์์์ ์ํธ ์์ฉํฉ๋๋ค.
- ๊ธฐ๋ก ๋ฒํผ์ ๋ค์ ํด๋ฆญํ์ฌ ํ๋กํ์ผ๋ง์ ์ค์งํฉ๋๋ค.
- ํ์๋ผ์ธ์ ๋ถ์ํฉ๋๋ค. ์ฅ๊ธฐ ์คํ ์์ , ๊ณผ๋ํ ๋ฆฌํ์ธํธ ๋ฐ ๋ ์ด์์ ์ค๋์ฑ์ ์ฐพ์ผ์ธ์.
2. WebPageTest
WebPageTest๋ ์ ์ธ๊ณ ๋ค์ํ ์์น์ ๋ค๋ฅธ ๊ธฐ๊ธฐ์์ ์น์ฌ์ดํธ์ ์ฑ๋ฅ์ ํ ์คํธํ ์ ์๋ ๊ฐ๋ ฅํ ์จ๋ผ์ธ ๋๊ตฌ์ ๋๋ค. ๋ค์๊ณผ ๊ฐ์ ์์ธํ ์ธก์ ํญ๋ชฉ์ ์ ๊ณตํฉ๋๋ค:
- ์ต์ด ์ฝํ ์ธ ํ ํ์ธํธ(FCP): ์ฒซ ๋ฒ์งธ ์ฝํ ์ธ ์์๊ฐ ํ๋ฉด์ ๋ํ๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๋๋ค.
- ์ต๋ ์ฝํ ์ธ ํ ํ์ธํธ(LCP): ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ์์๊ฐ ๋ณด์ด๊ฒ ๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๋๋ค.
- ๋์ ๋ ์ด์์ ์ด๋(CLS): ํ์ด์ง์ ์๊ฐ์ ์์ ์ฑ์ ์ธก์ ํฉ๋๋ค. ๋์ CLS ๊ฐ์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ฐฉํดํ ์ ์๋ ๋ ์ด์์ ์ด๋์ ๋ํ๋ ๋๋ค.
- ์ด ์ฐจ๋จ ์๊ฐ(TBT): ๋ฉ์ธ ์ค๋ ๋๊ฐ ์ฐจ๋จ๋์ด ์ฌ์ฉ์ ์ํธ ์์ฉ์ ๋ง๋ ์ด ์๊ฐ์ ์ธก์ ํฉ๋๋ค.
WebPageTest๋ ์คํฌ๋กค ์ค๋ ๊ณผ ๊ด๋ จ๋ ๊ฒ์ ํฌํจํ์ฌ ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํฅ์ ๋ฏธ์น ์ ์๋ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
3. Lighthouse
Lighthouse๋ ์น ํ์ด์ง์ ํ์ง์ ๊ฐ์ ํ๊ธฐ ์ํ ์๋ํ๋ ์คํ ์์ค ๋๊ตฌ์ ๋๋ค. Chrome ๊ฐ๋ฐ์ ๋๊ตฌ, ๋ช ๋ น์ค ๋๋ Node ๋ชจ๋๋ก ์คํํ ์ ์์ต๋๋ค. Lighthouse๋ ์ฑ๋ฅ, ์ ๊ทผ์ฑ, ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ, SEO ๋ฑ์ ๋ํด ํ์ด์ง๋ฅผ ๊ฐ์ฌํ๊ณ ์ด๋ฌํ ์์ญ์ ๊ฐ์ ํ๋ ๋ฐฉ๋ฒ์ ๋ํ ์คํ ๊ฐ๋ฅํ ๊ถ์ฅ ์ฌํญ์ ์ ๊ณตํฉ๋๋ค.
Lighthouse ๊ฐ์ฌ๋ ์ด๋ฏธ์ง ํฌ๊ธฐ ์ค์ด๊ธฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ์ต์ ํ์ ๊ฐ์ด ์คํฌ๋กค ์ค๋ ์ ์ต์ ํํ ๊ธฐํ๋ฅผ ๋๋ฌ๋ผ ์ ์์ต๋๋ค.
4. ์ค์ ์ฌ์ฉ์ ๋ชจ๋ํฐ๋ง (RUM)
์ค์ ์ฌ์ฉ์ ๋ชจ๋ํฐ๋ง(RUM)์ ์ค์ ์ฌ์ฉ์๊ฐ ์น์ฌ์ดํธ์ ์ํธ ์์ฉํ ๋ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์์งํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ด๋ ํฉ์ฑ ํ ์คํธ์๋ง ์์กดํ๋ ๋์ ์ค์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ํ ๊ท์คํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํฉ๋๋ค.
RUM ๋๊ตฌ๋ ๋ค์๊ณผ ๊ฐ์ ์ธก์ ํญ๋ชฉ์ ์ถ์ ํ ์ ์์ต๋๋ค:
- ํ์ด์ง ๋ก๋ ์๊ฐ: ํ์ด์ง๊ฐ ์์ ํ ๋ก๋๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ๋๋ค.
- ์คํฌ๋กค ์ฑ๋ฅ: ํ๋ ์ ์๋ ๋ฐ ๋ฒ๋ฒ ๊ฑฐ๋ฆผ๊ณผ ๊ฐ์ ์คํฌ๋กค ์ฑ๋ฅ ๊ด๋ จ ์ธก์ ํญ๋ชฉ์ ๋๋ค.
- ์ค๋ฅ์จ: ์ฌ์ฉ์๊ฐ ๋ง์ฃผ์น ์ค๋ฅ์ ์์ ๋๋ค.
์ธ๊ธฐ ์๋ RUM ๋๊ตฌ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- Google Analytics: ๋ช ๊ฐ์ง ๊ธฐ๋ณธ ์ฑ๋ฅ ์ธก์ ํญ๋ชฉ์ ์ ๊ณตํฉ๋๋ค.
- New Relic: ์์ธํ ์ฑ๋ฅ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํ๋ ํฌ๊ด์ ์ธ ๋ชจ๋ํฐ๋ง ํ๋ซํผ์ ๋๋ค.
- Datadog: ๊ฐ๋ ฅํ ์ฑ๋ฅ ์ถ์ ๊ธฐ๋ฅ์ ๊ฐ์ถ ๋ ๋ค๋ฅธ ์ธ๊ธฐ ์๋ ๋ชจ๋ํฐ๋ง ํ๋ซํผ์ ๋๋ค.
- Sentry: ์ฃผ๋ก ์ค๋ฅ ์ถ์ ๋๊ตฌ์ด์ง๋ง ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๊ธฐ๋ฅ๋ ์ ๊ณตํฉ๋๋ค.
RUM ๋ฐ์ดํฐ๋ ๊ฐ๋ฐ ๋๋ ํ ์คํธ ์ค์๋ ๋ช ํํ๊ฒ ๋๋ฌ๋์ง ์์ ์ ์๋ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์๋ณํ๋ ๋ฐ ๋์์ด ๋์ด, ์ฌ์ฉ์์ ์์น๋ ๊ธฐ๊ธฐ์ ๊ด๊ณ์์ด ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ์ผ๊ด๋๊ณ ๊ธ์ ์ ์ธ ๊ฒฝํ์ ์ ๊ณตํ๋ ์คํฌ๋กค ์ค๋ ๊ตฌํ์ ๋ณด์ฅํฉ๋๋ค.
์ค๋ ์ ๋๋ฉ์ด์ ์ฑ๋ฅ ๋ถ์
์คํฌ๋กค ์ค๋ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง์ ํต์ฌ์ ์ค๋ ์ ๋๋ฉ์ด์ ์์ฒด๋ฅผ ๋ถ์ํ๋ ๋ฐ ์์ต๋๋ค. ๋ค์์ ์ดํด๋ด์ผ ํ ์ฌํญ๋ค์ ๋๋ค:
1. ํ๋ ์ ์๋ (FPS)
๋ถ๋๋ฌ์ด ์ ๋๋ฉ์ด์ ์ ์ผ๊ด๋ 60 FPS๋ฅผ ์ ์งํด์ผ ํฉ๋๋ค. ์ด ์๊ณ๊ฐ ์ดํ๋ก ๋จ์ด์ง๋ ๊ฒ์ ์ ์ฌ์ ์ธ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ๋ํ๋ ๋๋ค. ๋ธ๋ผ์ฐ์ ์ FPS ๋ฏธํฐ๋ฅผ ์ฌ์ฉํ์ฌ ์คํฌ๋กค ์ค ํ๋ ์ ์๋๋ฅผ ๋ชจ๋ํฐ๋งํ์ธ์.
2. ๋ฒ๋ฒ ๊ฑฐ๋ฆผ (Jank)
๋ฒ๋ฒ ๊ฑฐ๋ฆผ(Jank)์ ์ ๋๋ฉ์ด์ ์ ๋๊น์ด๋ ๊ณ ๋ฅด์ง ์์์ ์๋ฏธํฉ๋๋ค. ์ด๋ ์ข ์ข ์ฅ๊ธฐ ์คํ ์๋ฐ์คํฌ๋ฆฝํธ ์์ , ๋ ์ด์์ ์ค๋์ฑ ๋๋ ๊ณผ๋ํ ๋ฆฌํ์ธํธ๋ก ์ธํด ๋ฐ์ํฉ๋๋ค. ์ฑ๋ฅ ํ๋กํ์ผ๋ฌ๋ ๋ฒ๋ฒ ๊ฑฐ๋ฆผ์ ๊ทผ๋ณธ ์์ธ์ ์ฐพ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
3. CPU ์ฌ์ฉ๋
์คํฌ๋กค ์ค๋ ์ ๋๋ฉ์ด์ ์ค ๋์ CPU ์ฌ์ฉ๋์ ๋ฐฐํฐ๋ฆฌ ์๋ช ์ ์๋ชจํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ฑ๋ฅ ํ๋กํ์ผ๋ฌ๋ ๋ค์ํ ํ๋ก์ธ์ค๋ณ CPU ์ฌ์ฉ๋์ ๋ณด์ฌ์ฃผ๋ฏ๋ก ์ด๋ค ์์ ์ด ๊ฐ์ฅ ๋ง์ ๋ฆฌ์์ค๋ฅผ ์๋นํ๋์ง ์๋ณํ ์ ์์ต๋๋ค.
4. ๋ ์ด์์ ์ค๋์ฑ
๋ ์ด์์ ์ค๋์ฑ์ ์ ๋๋ฉ์ด์
์ค์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ ์ด์์์ ๋ฐ๋ณต์ ์ผ๋ก ์ฌ๊ณ์ฐํด์ผ ํ ๋ ๋ฐ์ํฉ๋๋ค. ์ด๋ ์ผ๋ฐ์ ์ธ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์
๋๋ค. ๊ฐ์ ํ๋ ์ ๋ด์์ ๋ ์ด์์ ์์ฑ(์: offsetWidth, offsetHeight)์ ์ฝ์ ํ ์ฆ์ ๋ ์ด์์ ์์ฑ์ ์์ ํ๋ ๊ฒ์ ํผํ์ธ์. ๋ ์ด์์ ๋ณ๊ฒฝ ์ฌํญ์ ์ผ๊ด ์ฒ๋ฆฌํ์ฌ ์ฌ๊ณ์ฐ์ ์ต์ํํ์ธ์.
5. ๋ฆฌํ์ธํธ์ ๋ฆฌํ๋ก์ฐ
๋ฆฌํ์ธํธ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ํ๋ฉด์ ์ผ๋ถ๋ฅผ ๋ค์ ๊ทธ๋ฆด ๋ ๋ฐ์ํฉ๋๋ค. ๋ฆฌํ๋ก์ฐ(๋ ์ด์์์ด๋ผ๊ณ ๋ ํจ)๋ ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ด์ง์ ๋ ์ด์์์ ์ฌ๊ณ์ฐํ ๋ ๋ฐ์ํฉ๋๋ค. ๋ฆฌํ์ธํธ์ ๋ฆฌํ๋ก์ฐ๋ ๋ชจ๋ ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ ์ ๋๋ค. CSS์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์ต์ ํํ์ฌ ๋ฆฌํ์ธํธ์ ๋ฆฌํ๋ก์ฐ๋ฅผ ์ต์ํํ์ธ์.
์คํฌ๋กค ์ค๋ ์ฑ๋ฅ ์ต์ ํ
์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์๋ณํ๋ค๋ฉด ์คํฌ๋กค ์ค๋ ๊ตฌํ์ ์ต์ ํํ๊ธฐ ์ํ ์กฐ์น๋ฅผ ์ทจํ ์ ์์ต๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ ๋ต์ ๋๋ค:
1. ํ๋์จ์ด ๊ฐ์ ์ฌ์ฉ
ํ๋์จ์ด ๊ฐ์์ GPU๋ฅผ ํ์ฉํ์ฌ ์ ๋๋ฉ์ด์
์ ์ํํ๋ฏ๋ก ์ผ๋ฐ์ ์ผ๋ก CPU๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๋ณด๋ค ๋ ํจ์จ์ ์
๋๋ค. transform ๋ฐ opacity์ ๊ฐ์ CSS ์์ฑ์ ์ฌ์ฉํ์ฌ ํ๋์จ์ด ๊ฐ์์ ํธ๋ฆฌ๊ฑฐํ ์ ์์ต๋๋ค.
์์:
.scroll-snap-item {
transform: translate3d(0, 0, 0); /* Force hardware acceleration */
}
2. ์คํฌ๋กค ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋๋ฐ์ด์ค ๋๋ ์ค๋กํ๋ง
์คํฌ๋กค ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํด ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ, ์คํฌ๋กค ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ด์์ ์ง์ ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ ์ ์ํํ์ง ๋ง์ธ์. ๋๋ฐ์ด์ฑ์ด๋ ์ค๋กํ๋ง์ ์ฌ์ฉํ์ฌ ํธ๋ค๋ฌ๊ฐ ์คํ๋๋ ๋น๋๋ฅผ ์ ํํ์ธ์.
์์ (Lodash ์ฌ์ฉ):
import { debounce } from 'lodash';
window.addEventListener('scroll', debounce(() => {
// Perform expensive operations here
}, 100)); // Execute the function at most once every 100ms
3. ์ด๋ฏธ์ง ๋ฐ ๊ธฐํ ์์ฐ ์ต์ ํ
ํฐ ์ด๋ฏธ์ง ๋ฐ ๊ธฐํ ์์ฐ์ ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ด๋ฏธ์ง๋ฅผ ์์ถํ๊ณ , ์ ์ ํ ํ์ผ ํ์(์: WebP)์ ์ฌ์ฉํ๊ณ , ์ง์ฐ ๋ก๋ฉํ์ฌ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ์ธ์. ๋ํ ์ง๋ฆฌ์ ์ผ๋ก ๋ถ์ฐ๋ ์๋ฒ์์ ์์ฐ์ ์ ๊ณตํ๊ธฐ ์ํด ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN) ์ฌ์ฉ์ ๊ณ ๋ คํ์ธ์.
4. CSS ๋จ์ํ
๋ณต์กํ CSS ๊ท์น์ ๋ ๋๋ง ์๋๋ฅผ ์ ํ์ํฌ ์ ์์ต๋๋ค. ๋ถํ์ํ ์คํ์ผ์ ์ ๊ฑฐํ๊ณ , ๋ ํจ์จ์ ์ธ ์ ํ์๋ฅผ ์ฌ์ฉํ๋ฉฐ, ๊ทธ๋ฆผ์, ๊ทธ๋ผ๋ฐ์ด์ ๋ฐ ๊ธฐํ ๋ฆฌ์์ค ์ง์ฝ์ ์ธ ํจ๊ณผ์ ๊ณผ๋ํ ์ฌ์ฉ์ ํผํ์ฌ CSS๋ฅผ ๋จ์ํํ์ธ์.
5. DOM ํฌ๊ธฐ ์ค์ด๊ธฐ
ํฐ DOM์ ๋ ๋๋ง ์๋๋ฅผ ์ ํ์ํค๊ณ ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋์ ์ฆ๊ฐ์ํฌ ์ ์์ต๋๋ค. ๋ถํ์ํ ์์๋ฅผ ์ ๊ฑฐํ๊ณ , ๊ฐ์ ์คํฌ๋กค ๊ธฐ์ ์ ์ฌ์ฉํ๋ฉฐ, ํ๋ฉด ๋ฐ ์ฝํ ์ธ ์ ๋ ๋๋ง์ ์ง์ฐ์์ผ DOM ํฌ๊ธฐ๋ฅผ ์ค์ด์ธ์.
6. `will-change` ์์ฑ ์ ์คํ๊ฒ ์ฌ์ฉํ๊ธฐ
will-change ์์ฑ์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์์๊ฐ ๋ณ๊ฒฝ๋ ๊ฐ๋ฅ์ฑ์ด ์์์ ์์ํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋ธ๋ผ์ฐ์ ๋ ๋ฏธ๋ฆฌ ๋ณ๊ฒฝ์ ๋๋นํ์ฌ ์ต์ ํํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ will-change๋ฅผ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ์ค์ ๋ก ์ฑ๋ฅ์ด ์ ํ๋ ์ ์์ต๋๋ค. ๊ผญ ํ์ํ ๋๋ง ์๊ปด์ ์ฌ์ฉํ์ธ์.
์์:
.scroll-snap-item {
will-change: transform; /* Hint that the transform property will change */
}
7. ๋์์ ์ธ ์ ๋๋ฉ์ด์ ๊ธฐ์ ๊ณ ๋ ค
๋งค์ฐ ๋ณต์กํ ์ ๋๋ฉ์ด์ ์ ๊ฒฝ์ฐ Web Animations API๋ ์ ์ฉ ์ ๋๋ฉ์ด์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ(์: GreenSock Animation Platform - GSAP)์ ๊ฐ์ ๋์์ ์ธ ์ ๋๋ฉ์ด์ ๊ธฐ์ ์ฌ์ฉ์ ๊ณ ๋ คํด ๋ณด์ธ์. ์ด๋ฌํ ๋๊ตฌ๋ CSS ์ ํ์ด๋ ์ ๋๋ฉ์ด์ ๋ณด๋ค ๋ ๋ง์ ์ ์ด์ ๋ ๋์ ์ฑ๋ฅ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
๊ต์ฐจ ๋ธ๋ผ์ฐ์ ๋ฐ ๊ธฐ๊ธฐ ํ ์คํธ
์ฑ๋ฅ์ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๊ธฐ์ ๋ฐ๋ผ ํฌ๊ฒ ๋ค๋ฅผ ์ ์์ต๋๋ค. ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ์ผ๊ด๋ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด ๋ค์ํ ํ๋ซํผ์์ ์คํฌ๋กค ์ค๋ ๊ตฌํ์ ํ ์คํธํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค. BrowserStack์ด๋ Sauce Labs์ ๊ฐ์ ๋ธ๋ผ์ฐ์ ํ ์คํธ ์๋น์ค๋ฅผ ์ฌ์ฉํ์ฌ ๊ต์ฐจ ๋ธ๋ผ์ฐ์ ํ ์คํธ๋ฅผ ์๋ํํ๋ ๊ฒ์ ๊ณ ๋ คํด ๋ณด์ธ์.
๋ํ, ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ๋ ์ข ์ข ์ฒ๋ฆฌ ๋ฅ๋ ฅ๊ณผ ๋ฐฐํฐ๋ฆฌ ์๋ช ์ด ์ ํ์ ์ด๋ฏ๋ก ์ฑ๋ฅ์ ์ฃผ์๋ฅผ ๊ธฐ์ธ์ด์ธ์. ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ ์๋ฎฌ๋ ์ดํฐ๋ ์ค์ ๊ธฐ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ํ์ค์ ์ธ ํ๊ฒฝ์์ ์ฑ๋ฅ์ ํ ์คํธํ์ธ์. ์ ์ธ๊ณ ์ฌ์ฉ์๋ค์ด ๋งค์ฐ ๋ค๋ฅธ ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ ๊ฐ์ง ๊ธฐ๊ธฐ๋ฅผ ์ฌ์ฉํ๊ณ ์์์ ๊ธฐ์ตํ์ธ์.
์ ๊ทผ์ฑ ๊ณ ๋ ค ์ฌํญ
์ฑ๋ฅ ์ต์ ํ์ ํ์ฐ๋ ๋์ ์ ๊ทผ์ฑ์ ์์ง ๋ง์ธ์. ์คํฌ๋กค ์ค๋ ๊ตฌํ์ด ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์๊ฒ๋ ์ ๊ทผ ๊ฐ๋ฅํ๋๋ก ๋ณด์ฅํด์ผ ํฉ๋๋ค.
- ํค๋ณด๋ ํ์: ์ฌ์ฉ์๊ฐ ํค๋ณด๋๋ฅผ ์ฌ์ฉํ์ฌ ์ฝํ ์ธ ๋ฅผ ํ์ํ ์ ์๋๋ก ๋ณด์ฅํด์ผ ํฉ๋๋ค.
- ์คํฌ๋ฆฐ ๋ฆฌ๋ ํธํ์ฑ: ์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ์ฝํ ์ธ ๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ํด์ํ ์ ์๋๋ก ์ฝํ ์ธ ๊ฐ ์ ์ ํ๊ฒ ๊ตฌ์กฐํ๋๊ณ ๋ ์ด๋ธ์ด ์ง์ ๋์๋์ง ํ์ธํด์ผ ํฉ๋๋ค.
- ๋์ ์ค์ด๊ธฐ ์ ํธ: ์ฌ์ฉ์์ ๋์ ์ค์ด๊ธฐ ์ ํธ๋๋ฅผ ์กด์คํด์ผ ํฉ๋๋ค. ์ฌ์ฉ์๊ฐ ์ด์ ์ฒด์ ์์ ๋์ ์ค์ด๊ธฐ๋ฅผ ํ์ฑํํ ๊ฒฝ์ฐ ์คํฌ๋กค ์ค๋ ์ ๋๋ฉ์ด์ ์ ๋นํ์ฑํํ๊ฑฐ๋ ๊ฐ๋๋ฅผ ์ค์ฌ์ผ ํฉ๋๋ค.
prefers-reduced-motion ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์ ๋์ ์ค์ด๊ธฐ ์ ํธ๋๋ฅผ ๊ฐ์งํ ์ ์์ต๋๋ค:
@media (prefers-reduced-motion: reduce) {
.scroll-snap-item {
scroll-snap-type: none; /* Disable Scroll Snap animations */
}
}
๊ฒฐ๋ก
CSS ์คํฌ๋กค ์ค๋ ์ ๊ฐ์ด๋ ์คํฌ๋กค ๊ฒฝํ์ ๋ง๋๋ ๊ฐ๋ ฅํ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ง๋ง, ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํ๊ณ ์ต์ ํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ด ๊ธ์์ ์ค๋ช ํ ๋๊ตฌ์ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณ ๋ฐ ํด๊ฒฐํ๊ณ , ์คํฌ๋กค ์ค๋ ๊ตฌํ์ ์ต์ ํํ๋ฉฐ, ๊ธฐ๊ธฐ๋ ์์น์ ๊ด๊ณ์์ด ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ์ผ๊ด๋๊ณ ์ ๊ทผ ๊ฐ๋ฅํ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค. ์ ์ธ๊ณ ๊ณ ๊ฐ์ ๊ณ ๋ คํ๊ณ ๋ค์ํ ๊ธฐ๊ธฐ ๋ฐ ๋คํธ์ํฌ ์กฐ๊ฑด์์ ํ ์คํธํ์ฌ ์ต์์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฒ์ ๊ธฐ์ตํ์ธ์.