CSS ์ฑ๋ฅ์ ์ ํํ ์ธก์ ํ๊ณ ์ต์ ํํ๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฒ์ธ CSS ์ธก์ ๊ท์น์ ํ๊ตฌํฉ๋๋ค. ๋ ๋น ๋ฅด๊ณ ํจ์จ์ ์ธ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํ ๊ตฌํ ์ ๋ต, ๋๊ตฌ, ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์์๋ณด์ธ์.
CSS ์ธก์ ๊ท์น: ์ฑ๋ฅ ์ธก์ ๊ตฌํ์ ๋ํ ์ฌ์ธต ๋ถ์
์น ๊ฐ๋ฐ ์ธ๊ณ์์ ์ฑ๋ฅ ์ต์ ํ๋ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋๋ฆฐ ์น์ฌ์ดํธ๋ ์ฌ์ฉ์ ๋ถ๋ง, ์ฐธ์ฌ๋ ๊ฐ์, ๊ฒ์ ์์ง ์์ ํ๋ฝ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ์ฑ๋ฅ ๋ ผ์์์ JavaScript๊ฐ ์ฃผ๋ก ์ฃผ๋ชฉ๋ฐ์ง๋ง, ์คํ์ผ๋ง ๋ฐ ์๊ฐ์ ํํ์ ๋ด๋นํ๋ ์ธ์ด์ธ CSS ๋ํ ์ค์ํ ์ญํ ์ ํฉ๋๋ค. ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ ์ข์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ํด์๋ CSS ์ฑ๋ฅ์ ์ดํดํ๊ณ ๊ฐ์ ํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค. ์ด ๊ธ์ CSS ์ธก์ ๊ท์น์ด๋ผ๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฒ์ ์ฌ์ธต์ ์ผ๋ก ๋ค๋ฃจ๋ฉฐ, ์ด๋ฅผ ํตํด CSS ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ ํํ๊ฒ ์ธก์ ํ๊ณ ๊ตฌํํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์น์ฌ์ดํธ๊ฐ ๋น ๋ฅด๊ณ ํจ์จ์ ์ผ๋ก ๋ก๋๋๋๋ก ํฉ๋๋ค.
CSS ์ธก์ ๊ท์น ์ดํดํ๊ธฐ
CSS ์ธก์ ๊ท์น์ ๊ณต์์ ์ผ๋ก ์ ์๋ ์ฌ์์ด๋ ํน์ CSS ์์ฑ์ด ์๋๋๋ค. ๋์ , ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋ฏธ์น๋ CSS ๋ณ๊ฒฝ ์ฌํญ์ ์ํฅ์ ์ง์์ ์ผ๋ก ์ธก์ ํ๋ ๋ฐ ์ค์ ์ ๋ ๋ฐฉ๋ฒ๋ก ์ด์ ์ฌ๊ณ ๋ฐฉ์์ ๋๋ค. ์ด๋ ์ถ์ธก์ด๋ ์ง๊ด์ ์์กดํ๊ธฐ๋ณด๋ค๋ CSS๋ฅผ ์ต์ ํํ ๋ ๋ฐ์ดํฐ ๊ธฐ๋ฐ ์์ฌ ๊ฒฐ์ ์ ๊ฐ์กฐํฉ๋๋ค. ํต์ฌ ์์น์ ๊ฐ๋จํฉ๋๋ค. ์ฑ๋ฅ ๊ฐ์ ์ ๋ชฉํ๋ก ํ๋ CSS ์์ ์ฌํญ์ ์ ์ฉํ๊ธฐ ์ ์ ๊ธฐ์ค์ ์ ์ธก์ ํฉ๋๋ค. ์์ ํ์๋ ์ค์ ์ํฅ์ ์ ๋ํํ๊ธฐ ์ํด ๋ค์ ์ธก์ ํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋ณ๊ฒฝ ์ฌํญ์ด ์ ์ตํ๋์ง, ํด๋ก์ ๋์ง ๋๋ ์ค๋ฆฝ์ ์ด์๋์ง ๊ฐ๊ด์ ์ผ๋ก ํ๊ฐํ ์ ์์ต๋๋ค.
๊ณผํ ์คํ์ฒ๋ผ ์๊ฐํด๋ณด์ธ์. ๊ฐ์ค์ ์ธ์ฐ๊ณ (์: "์ด CSS ์ ํ์์ ํน์์ฑ์ ์ค์ด๋ฉด ๋ ๋๋ง ์ฑ๋ฅ์ด ํฅ์๋ ๊ฒ์ด๋ค"), ์คํ์ ์ํํ๊ณ (๋ณ๊ฒฝ ์ฌํญ ๊ตฌํ), ๊ฒฐ๊ณผ๋ฅผ ๋ถ์ํฉ๋๋ค(๋ณ๊ฒฝ ์ ํ ์ฑ๋ฅ ์งํ ๋น๊ต). ์ด ์ ๊ทผ ๋ฐฉ์์ ์ผ๊ด๋๊ฒ ์ ์ฉํจ์ผ๋ก์จ ๋ค์ํ CSS ๊ธฐ๋ฒ๊ณผ ๊ดํ์ด ์น์ฌ์ดํธ์ ์ฑ๋ฅ ํ๋กํ์ ์ด๋ป๊ฒ ์ํฅ์ ๋ฏธ์น๋์ง ๊น์ด ์ดํดํ ์ ์์ต๋๋ค.
CSS ์ฑ๋ฅ์ ์ธก์ ํด์ผ ํ๋ ์ด์
๋ช ๊ฐ์ง ์ค๋๋ ฅ ์๋ ์ด์ ๋ CSS ์ฑ๋ฅ ์ธก์ ์ ์ค์์ฑ์ ๊ฐ์กฐํฉ๋๋ค.
- ๊ฐ๊ด์ ์ธ ํ๊ฐ: ์ฑ๋ฅ ๊ฐ์ ์ ๋ํ ๊ฐ์ ์ ์ง์งํ๊ฑฐ๋ ๋ฐ๋ฐํ๋ ๊ตฌ์ฒด์ ์ธ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ฃผ๊ด์ ์ธ ์ธ์์ด๋ ์ผํ์ ์ธ ์ฆ๊ฑฐ์ ์์กดํ๋ ๊ฒ์ ํผํฉ๋๋ค.
- ๋ณ๋ชฉ ํ์ ์๋ณ: ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ผ์ผํค๋ ํน์ CSS ๊ท์น ๋๋ ์ ํ์๋ฅผ ์ ํํ ์ฐพ์๋ ๋๋ค. ๊ฐ์ฅ ํฐ ์ํฅ์ ๋ฏธ์น ์์ญ์ ์ต์ ํ ๋ ธ๋ ฅ์ ์ง์คํ ์ ์๊ฒ ํฉ๋๋ค.
- ํ๊ท ๋ฐฉ์ง: ์๋ก์ด CSS ์ฝ๋๊ฐ ์๋์น ์๊ฒ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ ๋ฐํ์ง ์๋๋ก ํฉ๋๋ค. ๊ฐ๋ฐ ์๋ช ์ฃผ๊ธฐ ์ ๋ฐ์ ๊ฑธ์ณ ์ผ๊ด๋ ์ฑ๋ฅ ์์ค์ ์ ์งํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ๋ค์ํ ๊ธฐ๋ฒ ํ๊ฐ: ๋ค์ํ CSS ์ต์ ํ ์ ๋ต์ ํจ๊ณผ๋ฅผ ๋น๊ตํฉ๋๋ค. ์๋ฅผ ๋ค์ด, CSS ๋ณ์ ์ฌ์ฉ๊ณผ ์ ์ฒ๋ฆฌ๊ธฐ ์ฌ์ฉ ๋๋ ๋ค๋ฅธ ์ ํ์ ํจํด ์ฌ์ฉ์ ์ํฅ์ ์ธก์ ํ ์ ์์ต๋๋ค.
- ๋ธ๋ผ์ฐ์ ๋์ ์ดํด: ๋ค์ํ ๋ธ๋ผ์ฐ์ ๊ฐ CSS๋ฅผ ๋ ๋๋งํ๋ ๋ฐฉ์๊ณผ ํน์ CSS ์์ฑ์ด ์ฌ๋ฌ ๋ธ๋ผ์ฐ์ ์์ ๋ ๋๋ง ์ฑ๋ฅ์ ์ด๋ป๊ฒ ์ํฅ์ ๋ฏธ์น๋์ง์ ๋ํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํฉ๋๋ค.
- ํฅ์๋ ์ฌ์ฉ์ ๊ฒฝํ: ๊ถ๊ทน์ ์ผ๋ก ๋ชฉํ๋ ๋ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ์ด ์ข์ ์น์ฌ์ดํธ๋ฅผ ์ ๊ณตํ์ฌ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ, ์ฐธ์ฌ๋ ์ฆ๊ฐ, ๊ทธ๋ฆฌ๊ณ ๋น์ฆ๋์ค ์ฑ๊ณผ ๊ฐ์ ์ผ๋ก ์ด์ด์ง๋ ๊ฒ์ ๋๋ค.
CSS์ ์ฃผ์ ์ฑ๋ฅ ์งํ
CSS ์ธก์ ๊ท์น์ ๊ตฌํํ๊ธฐ ์ ์ ์ด๋ค ์งํ๋ฅผ ์ถ์ ํ ์ง ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ค์์ CSS ์ฑ๋ฅ๊ณผ ๊ด๋ จ๋ ๋ช ๊ฐ์ง ์ฃผ์ ์ฑ๋ฅ ์งํ(KPI)์ ๋๋ค.
- ์ฒซ ๋ฒ์งธ ์ฝํ ์ธ ํ ํ์ธํธ (FCP): ์ฒซ ๋ฒ์งธ ์ฝํ ์ธ ์กฐ๊ฐ(ํ ์คํธ, ์ด๋ฏธ์ง ๋ฑ)์ด ํ๋ฉด์ ๋ํ๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ๋ ๋น ๋ฅธ FCP๋ ์ฌ์ฉ์์๊ฒ ํ์ด์ง๊ฐ ๋ก๋๋๊ณ ์์์ ์๊ฐ์ ์ผ๋ก ์ฒ์ ์๋ ค์ค๋๋ค.
- ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ํ ํ์ธํธ (LCP): ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ์์(์ด๋ฏธ์ง, ๋น๋์ค, ํ ์คํธ ๋ธ๋ก)๊ฐ ์๊ฐ์ ์ผ๋ก ๋ํ๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. LCP๋ ์ฌ์ฉ์๊ฐ ํ์ด์ง์ ์ฃผ์ ์ฝํ ์ธ ๋ฅผ ๋ณผ ์ ์๋ ์์ ์ ๋ฐ์ํ๋ฏ๋ก ์ธ์ง๋๋ ๋ก๋ ์๋์ ์์ด ์ค์ํ ์งํ์ ๋๋ค.
- ๋์ ๋ ์ด์์ ์ด๋ (CLS): ๋ก๋ฉ ๊ณผ์ ์์ ๋ฐ์ํ๋ ์์์น ๋ชปํ ๋ ์ด์์ ์ด๋๋์ ์ธก์ ํฉ๋๋ค. ๋ฎ์ CLS๋ ์์ ์ ์ด๊ณ ์์ธก ๊ฐ๋ฅํ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ํ๋ ๋๋ค. CSS๋ ์ด๊ธฐ ๋ ๋๋ง ํ ์์๊ฐ ์ฌ๋ฐฐ์น๋๊ฑฐ๋ ์์น๋ฅผ ๋ณ๊ฒฝํ ๊ฒฝ์ฐ CLS์ ํฌ๊ฒ ๊ธฐ์ฌํ ์ ์์ต๋๋ค.
- ์ํธ์์ฉ๊น์ง์ ์๊ฐ (TTI): ํ์ด์ง๊ฐ ์์ ํ ์ํธ์์ฉ ๊ฐ๋ฅํ๊ฒ ๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ์ง์ฐ ์์ด ๋ชจ๋ ์์์ ์ํธ์์ฉํ ์ ์์์ ์๋ฏธํฉ๋๋ค. JavaScript๊ฐ TTI์ ํฐ ์ํฅ์ ๋ฏธ์น์ง๋ง, CSS๋ ๋ ๋๋ง์ ์ฐจ๋จํ๊ฑฐ๋ ๊ธด ํ์ธํธ ์๊ฐ์ ์ ๋ฐํ์ฌ TTI์ ์ํฅ์ ์ค ์ ์์ต๋๋ค.
- ์ด ์ฐจ๋จ ์๊ฐ (TBT): ๋ฉ์ธ ์ค๋ ๋๊ฐ ์ค๋ ์คํ๋๋ ์์ ์ ์ํด ์ฐจ๋จ๋๋ ์ด ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ด ์งํ๋ TTI์ ๋ฐ์ ํ๊ฒ ๊ด๋ จ๋์ด ์์ผ๋ฉฐ ํ์ด์ง๊ฐ ์ฌ์ฉ์ ์ ๋ ฅ์ ์ผ๋ง๋ ๋ฐ์์ ์ธ์ง๋ฅผ ๋ํ๋ ๋๋ค. CSS๋ ๋ ๋๋ง ์ค ๋ธ๋ผ์ฐ์ ๊ฐ ๋ณต์กํ ๊ณ์ฐ์ ์ํํ๊ฒ ํ์ฌ TBT์ ๊ธฐ์ฌํ ์ ์์ต๋๋ค.
- CSS ํ์ฑ ๋ฐ ์ฒ๋ฆฌ ์๊ฐ: ๋ธ๋ผ์ฐ์ ๊ฐ CSS ํ์ผ์ ํ์ฑํ๊ณ ์ฒ๋ฆฌํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ด ์งํ๋ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ์์ ์ป์ ์ ์์ต๋๋ค. ํฌ๊ฑฐ๋ ๋ณต์กํ CSS ํ์ผ์ ํ์ฑ ๋ฐ ์ฒ๋ฆฌํ๋ ๋ฐ ์์ฐ์ค๋ฝ๊ฒ ๋ ์ค๋ ๊ฑธ๋ฆฝ๋๋ค.
- ๋ ๋๋ง ์๊ฐ: CSS๋ฅผ ํ์ฑํ๊ณ ์ฒ๋ฆฌํ ํ ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ด์ง๋ฅผ ๋ ๋๋งํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ด ์งํ๋ CSS ํน์์ฑ, ์ ํ์ ๋ณต์ก์ฑ, ํ์ด์ง์ ์์ ์์ ๊ฐ์ ์์ธ์ ์ํด ์ํฅ์ ๋ฐ์ ์ ์์ต๋๋ค.
- CSS ๊ท์น ์: ์คํ์ผ์ํธ์ ์ด CSS ๊ท์น ์. ์ง์ ์ ์ธ ์ฑ๋ฅ ์งํ๋ ์๋์ง๋ง, ๋ง์ ์์ ๊ท์น์ ํ์ฑ ๋ฐ ์ฒ๋ฆฌ ์๊ฐ์ ์ฆ๊ฐ์ํฌ ์ ์์ต๋๋ค. ์ฌ์ฉํ์ง ์๋ CSS ๊ท์น์ ์ ๊ธฐ์ ์ผ๋ก ๊ฒํ ํ๊ณ ์ ๋ฆฌํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค.
- CSS ํ์ผ ํฌ๊ธฐ: ํฌ๋ก๋ฐ์ดํธ(KB) ๋จ์์ CSS ํ์ผ ํฌ๊ธฐ. ํ์ผ์ด ์์์๋ก ๋ค์ด๋ก๋ ์๋๊ฐ ๋นจ๋ผ์ ธ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ด ๊ฐ์ ๋ฉ๋๋ค. CSS ํ์ผ์ ์ต์ํํ๊ณ ์์ถํ๋ ๊ฒ์ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค.
CSS ์ฑ๋ฅ ์ธก์ ๋๊ตฌ
CSS ์ฑ๋ฅ์ ์ธก์ ํ๋ ๋ฐ ์ฌ๋ฌ ๋๊ตฌ์ ๊ธฐ๋ฒ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ค์์ ๊ฐ์ฅ ์ธ๊ธฐ ์๋ ๋ช ๊ฐ์ง ์ต์ ์ ๋๋ค.
- ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ (Chrome DevTools, Firefox Developer Tools, Safari Web Inspector): ์ด ๋ด์ฅ ๋๊ตฌ๋ค์ ํ์๋ผ์ธ, ์ฑ๋ฅ ํ๋กํ, ๋คํธ์ํฌ ํ๋์ ํฌํจํ ํ๋ถํ ์ฑ๋ฅ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ , ๋ ๋๋ง ์ฑ๋ฅ์ ๋ถ์ํ๋ฉฐ, CSS ๋ณ๊ฒฝ ์ฌํญ์ ์ํฅ์ ์ธก์ ํ ์ ์์ต๋๋ค. "์ฑ๋ฅ(Performance)" ํญ ๋๋ "ํ์๋ผ์ธ(Timeline)" ๋๊ตฌ๋ฅผ ์ฐพ์๋ณด์ธ์. ์ด ๋๊ตฌ๋ค์ ์ฌ์ธต์ ์ธ ์ฑ๋ฅ ๋ถ์์ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.
- WebPageTest: ๋ค์ํ ์์น์ ๋ธ๋ผ์ฐ์ ์์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ํ ์คํธํ ์ ์๋ ๋ฌด๋ฃ ์จ๋ผ์ธ ๋๊ตฌ์ ๋๋ค. FCP, LCP, CLS ๋ฐ ๊ธฐํ ์ฃผ์ ์งํ๋ฅผ ํฌํจํ ์์ธํ ์ฑ๋ฅ ๋ณด๊ณ ์๋ฅผ ์ ๊ณตํฉ๋๋ค. WebPageTest๋ ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด์์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋ํ ์ ์ฒด์ ์ธ ์์ผ๋ฅผ ์ป๋ ๋ฐ ํ์ํฉ๋๋ค. ๊ฐ์ ์์ญ์ ์๋ณํ๊ณ ์น์ฌ์ดํธ์ ๋ค๋ฅธ ๋ฒ์ ๊ฐ ์ฑ๋ฅ์ ๋น๊ตํ๋ ๋ฐ ์ ์ฉํ ๋๊ตฌ์ ๋๋ค.
- Lighthouse (Chrome ํ์ฅ ํ๋ก๊ทธ๋จ ๋๋ Node.js CLI): ์น์ฌ์ดํธ์ ์ฑ๋ฅ, ์ ๊ทผ์ฑ, SEO ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ถ์ํ๋ ์๋ํ๋ ๊ฐ์ฌ ๋๊ตฌ์ ๋๋ค. CSS ๊ด๋ จ ์ต์ ํ๋ฅผ ํฌํจํ์ฌ ์น์ฌ์ดํธ ์ฑ๋ฅ ๊ฐ์ ์ ์ํ ๊ถ์ฅ ์ฌํญ์ ์ ๊ณตํฉ๋๋ค. Lighthouse๋ ์ผ๋ฐ์ ์ธ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ ์ํ๊ณ ์ฝ๊ฒ ์๋ณํ๊ณ ์คํ ๊ฐ๋ฅํ ์กฐ์ธ์ ์ป์ ์ ์๋ ๋ฐฉ๋ฒ์ ๋๋ค.
- PageSpeed Insights: ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋ถ์ํ๊ณ ๊ฐ์ ๊ถ์ฅ ์ฌํญ์ ์ ๊ณตํ๋ Google ๋๊ตฌ์ ๋๋ค. ๋ถ์ ์์ง์ผ๋ก Lighthouse๋ฅผ ์ฌ์ฉํฉ๋๋ค. PageSpeed Insights๋ Google์ ๊ด์ ์์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ดํดํ๊ธฐ ์ํ ์ข์ ์ถ๋ฐ์ ์ ๋๋ค.
- CSS Stats: CSS ์ฝ๋๋ฅผ ๋ถ์ํ๊ณ ๊ตฌ์กฐ, ๋ณต์ก์ฑ ๋ฐ ์ ์ฌ์ ์ธ ์ฑ๋ฅ ๋ฌธ์ ์ ๋ํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํ๋ ๋๊ตฌ์ ๋๋ค. ์ค๋ณต ๊ท์น, ์ฌ์ฉ๋์ง ์๋ ์ ํ์ ๋ฐ ๊ธฐํ ์ต์ ํ ์์ญ์ ์๋ณํ ์ ์์ต๋๋ค. CSS Stats๋ ํฌ๊ณ ๋ณต์กํ CSS ํ๋ก์ ํธ์ ํนํ ์ ์ฉํฉ๋๋ค.
- Perfume.js: ๋ธ๋ผ์ฐ์ ์์ ๋ค์ํ ์น ์ฑ๋ฅ ์งํ๋ฅผ ์ธก์ ํ๊ธฐ ์ํ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. FCP, LCP, FID(First Input Delay)์ ๊ฐ์ ์งํ๋ฅผ ์ถ์ ํ๊ณ ๋ถ์ ํ๋ซํผ์ผ๋ก ๋ณด๊ณ ํ ์ ์์ต๋๋ค. Perfume.js๋ ์ค์ ์ฌ์ฉ์ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์์งํ๊ณ ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ฅธ ์ฑ๋ฅ ์ถ์ธ๋ฅผ ์ถ์ ํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค.
- ์ฌ์ฉ์ ์ ์ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง: JavaScript์ Performance API๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์ ์ ์ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง์ ๊ตฌํํ๋ฉด ์น์ฌ์ดํธ์ ๊ณ ์ ํ ํน์ง๊ณผ ๊ธฐ๋ฅ์ ๊ด๋ จ์ด ์๋ ํน์ ์งํ๋ฅผ ์ถ์ ํ ์ ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ์์งํ๋ ๋ฐ์ดํฐ์ ๋ํ ์ต๋์ ์ ์ฐ์ฑ๊ณผ ์ ์ด๊ถ์ ์ ๊ณตํฉ๋๋ค.
CSS ์ธก์ ๊ท์น ๊ตฌํํ๊ธฐ: ๋จ๊ณ๋ณ ๊ฐ์ด๋
๊ฐ๋ฐ ์ํฌํ๋ก์ CSS ์ธก์ ๊ท์น์ ๊ตฌํํ๋ ์ค์ฉ์ ์ธ ๊ฐ์ด๋์ ๋๋ค.
- ์ฑ๋ฅ ๋ณ๋ชฉ ํ์ ์๋ณ: ์์์ ์ธ๊ธํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ํน์ CSS ๊ด๋ จ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์๋ณํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ํน์ ํ์ด์ง๊ฐ ํฐ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ๋๋ ๋ณต์กํ CSS ์ ๋๋ฉ์ด์ ์ผ๋ก ์ธํด ๋๋ฆฐ LCP๋ฅผ ๊ฐ์ง๊ณ ์์์ ์ ์ ์์ต๋๋ค.
- ๊ฐ์ค ์๋ฆฝ: ๋ถ์์ ๋ฐํ์ผ๋ก ์ฑ๋ฅ์ ๊ฐ์ ํ ์ ์๋ ๋ฐฉ๋ฒ์ ๋ํ ๊ฐ์ค์ ์๋ฆฝํฉ๋๋ค. ์๋ฅผ ๋ค์ด, "๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์ต์ ํ(์: ๋ ํจ์จ์ ์ธ ํ์ ์ฌ์ฉ, ์ถ๊ฐ ์์ถ)๋ LCP๋ฅผ ์ค์ผ ๊ฒ์ ๋๋ค." ๋๋ "CSS ์ ๋๋ฉ์ด์ ์ ๋ณต์ก์ฑ์ ์ค์ด๋ฉด ๋ ๋๋ง ์ฑ๋ฅ์ด ํฅ์๋ ๊ฒ์ ๋๋ค."
- ๊ธฐ์ค์ ์ค์ : ๋ณ๊ฒฝ ์ฌํญ์ ์ ์ฉํ๊ธฐ ์ ์ ์์์ ์ธ๊ธํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๊ด๋ จ ์ฑ๋ฅ ์งํ(์: LCP, ๋ ๋๋ง ์๊ฐ)๋ฅผ ์ธก์ ํฉ๋๋ค. ์ด๋ฌํ ๊ธฐ์ค ๊ฐ์ ์ ์คํ๊ฒ ๊ธฐ๋กํฉ๋๋ค. ๋ ์ ํํ ๊ธฐ์ค์ ์ ์ป๊ธฐ ์ํด ์ฌ๋ฌ ํ ์คํธ(์: 3~5ํ)๋ฅผ ์คํํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ํ๊ท ๋ ๋๋ค. ์ผ๊ด๋ ํ ์คํธ ์กฐ๊ฑด(์: ๋์ผํ ๋ธ๋ผ์ฐ์ , ๋์ผํ ๋คํธ์ํฌ ์ฐ๊ฒฐ)์ ์ฌ์ฉํ๋์ง ํ์ธํ์ญ์์ค.
- ๋ณ๊ฒฝ ์ฌํญ ๊ตฌํ: ์ฑ๋ฅ์ ํฅ์์ํฌ ๊ฒ์ผ๋ก ์๊ฐ๋๋ CSS ๋ณ๊ฒฝ ์ฌํญ์ ๊ตฌํํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ๊ฑฐ๋ CSS ์ ๋๋ฉ์ด์ ์ ๋จ์ํํฉ๋๋ค.
- ๋ค์ ์ธก์ : ๋ณ๊ฒฝ ์ฌํญ์ ๊ตฌํํ ํ, ์ด์ ๊ณผ ๋์ผํ ๋๊ตฌ์ ํ ์คํธ ์กฐ๊ฑด์ ์ฌ์ฉํ์ฌ ๋์ผํ ์ฑ๋ฅ ์งํ๋ฅผ ์ธก์ ํฉ๋๋ค. ๋ค์ ํ๋ฒ ์ฌ๋ฌ ํ ์คํธ๋ฅผ ์คํํ๊ณ ๊ฒฐ๊ณผ๋ฅผ ํ๊ท ๋ ๋๋ค.
- ๊ฒฐ๊ณผ ๋ถ์: ๋ณ๊ฒฝ ์ ํ์ ์ฑ๋ฅ ์งํ๋ฅผ ๋น๊ตํฉ๋๋ค. ๋ณ๊ฒฝ ์ฌํญ์ด ์์๋๋ก ์ฑ๋ฅ์ ๊ฐ์ ํ์ต๋๊น? ๊ฐ์ ํจ๊ณผ๊ฐ ์ค์ํ์ต๋๊น? ๋ณ๊ฒฝ ์ฌํญ์ ์๋์น ์์ ๋ถ์์ฉ(์: ์๊ฐ์ ํ๊ท)์ด ์์์ต๋๊น?
- ๋ฐ๋ณต ๋๋ ๋๋๋ฆฌ๊ธฐ: ๋ณ๊ฒฝ ์ฌํญ์ด ์ฑ๋ฅ์ ๊ฐ์ ํ๋ค๋ฉด ์ถํํฉ๋๋ค! CSS๋ฅผ ์ฑ๊ณต์ ์ผ๋ก ์ต์ ํํ์ต๋๋ค. ๋ณ๊ฒฝ ์ฌํญ์ด ์ฑ๋ฅ์ ๊ฐ์ ํ์ง ๋ชปํ๊ฑฐ๋ ์๋์น ์์ ๋ถ์์ฉ์ด ์์๋ค๋ฉด, ๋ณ๊ฒฝ ์ฌํญ์ ๋๋๋ฆฌ๊ณ ๋ค๋ฅธ ์ ๊ทผ ๋ฐฉ์์ ์๋ํ์ญ์์ค. ๋ณ๊ฒฝ ์ฌํญ์ด ์ฑ๊ณต์ ์ด์ง ์๋๋ผ๋ ๋ฐ๊ฒฌ ์ฌํญ์ ๋ฌธ์ํํ์ญ์์ค. ์ด๋ ํฅํ ๋์ผํ ์ค์๋ฅผ ํผํ๋ ๋ฐ ๋์์ด ๋ ๊ฒ์ ๋๋ค.
- ๋ฐ๊ฒฌ ์ฌํญ ๋ฌธ์ํ: ๊ฒฐ๊ณผ์ ์๊ด์์ด ๋ฐ๊ฒฌ ์ฌํญ์ ๋ฌธ์ํํ์ญ์์ค. ์ด๋ CSS ์ฑ๋ฅ ์ต์ ํ์ ๊ด๋ จํ์ฌ ๋ฌด์์ด ์๋ํ๊ณ ๋ฌด์์ด ์๋ํ์ง ์๋์ง์ ๋ํ ์ง์ ๊ธฐ๋ฐ์ ๊ตฌ์ถํ๋ ๋ฐ ๋์์ด ๋ ๊ฒ์ ๋๋ค.
CSS ์ฑ๋ฅ ์ต์ ํ ๋ฐ ์ธก์ ์์
๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ CSS ์ต์ ํ ๊ธฐ๋ฒ๊ณผ CSS ์ธก์ ๊ท์น์ ์ฌ์ฉํ์ฌ ๊ทธ ์ํฅ์ ์ธก์ ํ๋ ๋ฐฉ๋ฒ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์์ 1: CSS ์ ํ์ ์ต์ ํ
๋ณต์กํ CSS ์ ํ์๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์์๋ฅผ ์ ํ์์ ์ผ์น์ํค๋ ๋ฐ ๋ ๋ง์ ์๊ฐ์ ์๋นํด์ผ ํ๋ฏ๋ก ๋ ๋๋ง ์๋๋ฅผ ๋ฆ์ถ ์ ์์ต๋๋ค. ์ ํ์ ๋ณต์ก์ฑ์ ์ค์ด๋ฉด ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
๊ฐ์ค: ๋ณต์กํ CSS ์ ํ์์ ํน์์ฑ์ ์ค์ด๋ฉด ๋ ๋๋ง ์ฑ๋ฅ์ด ํฅ์๋ ๊ฒ์ ๋๋ค.
์๋๋ฆฌ์ค: ๋ค์๊ณผ ๊ฐ์ CSS ์ ํ์๊ฐ ์์ต๋๋ค.
#main-content div.article ul li:nth-child(odd) a {
color: blue;
}
์ด ์ ํ์๋ ๋งค์ฐ ํน์ํ๋ฉฐ ๋ธ๋ผ์ฐ์ ๊ฐ ์ผ์นํ๋ ์์๋ฅผ ์ฐพ๊ธฐ ์ํด DOM ํธ๋ฆฌ๋ฅผ ํ์ํด์ผ ํฉ๋๋ค.
๋ณ๊ฒฝ: `a` ์์์ ์ง์ ํด๋์ค๋ฅผ ์ถ๊ฐํ์ฌ ์ ํ์๋ฅผ ๋จ์ํํ ์ ์์ต๋๋ค.
.article-link {
color: blue;
}
๊ทธ๋ฆฌ๊ณ HTML์ ์ ๋ฐ์ดํธํ์ฌ ํด๋์ค๋ฅผ ํฌํจํฉ๋๋ค.
<a href="#" class="article-link">Link</a>
์ธก์ : ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ๊ฒฝ ์ ํ์ ๋ ๋๋ง ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ํ์ธํธ ์๊ฐ ๋ฐ ์ ๋ฐ์ ์ธ ๋ ๋๋ง ์ฑ๋ฅ ๊ฐ์ ์ ์ฐพ์๋ณด์ญ์์ค. ๋ ๋๋ง ์ค CPU ์ฌ์ฉ๋ ๊ฐ์๋ ํ์ธํ ์ ์์ต๋๋ค.
์์ 2: CSS ํ์ผ ํฌ๊ธฐ ์ค์ด๊ธฐ
ํฐ CSS ํ์ผ์ ๋ค์ด๋ก๋ ๋ฐ ํ์ฑํ๋ ๋ฐ ๋ ์ค๋ ๊ฑธ๋ฆฌ๋ฏ๋ก ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. CSS ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๋ฉด ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
๊ฐ์ค: CSS ํ์ผ์ ์ต์ํํ๊ณ ์์ถํ๋ฉด ํ์ผ ํฌ๊ธฐ๊ฐ ์ค์ด๋ค๊ณ ๋ก๋ ์๊ฐ์ด ํฅ์๋ ๊ฒ์ ๋๋ค.
์๋๋ฆฌ์ค: ์ต์ํ๋๊ฑฐ๋ ์์ถ๋์ง ์์ ํฐ CSS ํ์ผ(์: `style.css`)์ด ์์ต๋๋ค.
๋ณ๊ฒฝ: CSS ์ต์ํ ๋๊ตฌ(์: CSSNano, UglifyCSS)๋ฅผ ์ฌ์ฉํ์ฌ CSS ํ์ผ์์ ๋ถํ์ํ ๊ณต๋ฐฑ, ์ฃผ์ ๋ฐ ๊ธฐํ ๋ฌธ์๋ฅผ ์ ๊ฑฐํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์, ์์ถ ์๊ณ ๋ฆฌ์ฆ(์: Gzip, Brotli)์ ์ฌ์ฉํ์ฌ ํ์ผ์ ๋ธ๋ผ์ฐ์ ์ ์ ๊ณตํ๊ธฐ ์ ์ ์์ถํฉ๋๋ค. ๋๋ถ๋ถ์ ์น ์๋ฒ์ CDN์ ํ์ผ์ ์๋์ผ๋ก ์์ถํ ์ ์์ต๋๋ค.
์ธก์ : WebPageTest ๋๋ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ๊ฒฝ ์ ํ์ CSS ํ์ผ ํฌ๊ธฐ์ ๋ค์ด๋ก๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ํ์ผ ํฌ๊ธฐ์ ๋ค์ด๋ก๋ ์๊ฐ์ด ํฌ๊ฒ ์ค์ด๋๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค. ๋ํ CSS ํ์ผ ํฌ๊ธฐ ๊ฐ์๊ฐ ์ฌ์ฉ์์ ์ด๊ธฐ ๊ฒฝํ์ ๊ธ์ ์ ์ธ ์ํฅ์ ๋ฏธ์น๋์ง ํ์ธํ๊ธฐ ์ํด FCP(First Contentful Paint) ์งํ๋ฅผ ์ธก์ ํฉ๋๋ค.
์์ 3: CSS ์ด๋ฏธ์ง ์ต์ ํ (๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง)
ํฌ๊ฑฐ๋ ์ต์ ํ๋์ง ์์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ ๋ ๋๋ง ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. CSS ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ๋ฉด ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
๊ฐ์ค: ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ๋ฉด(์: ๋ ํจ์จ์ ์ธ ํ์ ์ฌ์ฉ, ์ถ๊ฐ ์์ถ, ๋ฐ์ํ ์ด๋ฏธ์ง์ `srcset` ์ฌ์ฉ) LCP(Largest Contentful Paint)๊ฐ ์ค์ด๋ค ๊ฒ์ ๋๋ค.
์๋๋ฆฌ์ค: ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ก ํฐ JPEG ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
๋ณ๊ฒฝ: ์ด๋ฏธ์ง๋ฅผ WebP์ ๊ฐ์ ๋ ํจ์จ์ ์ธ ํ์์ผ๋ก ๋ณํํ๊ณ (๋ธ๋ผ์ฐ์ ์ง์์ด ์ถฉ๋ถํ ๊ฒฝ์ฐ), ์ด๋ฏธ์ง ์ต์ ํ ๋๊ตฌ(์: ImageOptim, TinyPNG)๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง๋ฅผ ์์ถํ๋ฉฐ, `srcset` ์์ฑ์ ์ฌ์ฉํ์ฌ ๋ค์ํ ํ๋ฉด ํด์๋์ ๋ง๋ ๋ค๋ฅธ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๋ํ ์๊ณ ๋ฐ๋ณต์ ์ธ ์ด๋ฏธ์ง์๋ CSS ์คํ๋ผ์ดํธ๋ ์์ด์ฝ ํฐํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๋ ๊ณ ๋ คํ์ญ์์ค.
์ธก์ : WebPageTest ๋๋ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ๊ฒฝ ์ ํ์ LCP๋ฅผ ์ธก์ ํฉ๋๋ค. LCP๊ฐ ๊ฐ์ํ๋ ๊ฒ์ ํ์ธํ ์ ์์ผ๋ฉฐ, ์ด๋ ํ์ด์ง๊ฐ ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ์์๋ฅผ ๋ ๋น ๋ฅด๊ฒ ๋ ๋๋งํ๊ณ ์์์ ๋ํ๋ ๋๋ค.
์์ 4: ๋ ์ด์์ ์ด๋ ์ค์ด๊ธฐ
์์์น ๋ชปํ ๋ ์ด์์ ์ด๋์ ์ฌ์ฉ์์๊ฒ ๋ถํธํจ์ ์ค ์ ์์ต๋๋ค. CSS๋ ์ด๊ธฐ ๋ ๋๋ง ํ ์์๊ฐ ์ฌ๋ฐฐ์น๋๊ฑฐ๋ ์์น๋ฅผ ๋ณ๊ฒฝํ ๊ฒฝ์ฐ ๋ ์ด์์ ์ด๋์ ๊ธฐ์ฌํ ์ ์์ต๋๋ค.
๊ฐ์ค: ์ด๋ฏธ์ง์ ๋น๋์ค์ ํฌ๊ธฐ(๋๋น ๋ฐ ๋์ด)๋ฅผ ์ง์ ํ๋ฉด ๋์ ๋ ์ด์์ ์ด๋(CLS)์ด ์ค์ด๋ค ๊ฒ์ ๋๋ค.
์๋๋ฆฌ์ค: ํ์ด์ง์ ๋ช ์์ ์ธ ๋๋น ๋ฐ ๋์ด ์์ฑ์ด ์๋ ์ด๋ฏธ์ง๊ฐ ์์ต๋๋ค.
๋ณ๊ฒฝ: `img` ํ๊ทธ์ `width` ๋ฐ `height` ์์ฑ์ ์ถ๊ฐํฉ๋๋ค. ๋๋ `aspect-ratio` ์์ฑ์ ์ฌ์ฉํ์ฌ CSS๋ก ์ด๋ฏธ์ง ์ปจํ ์ด๋์ ์ข ํก๋น๋ฅผ ์ง์ ํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ด๋ฏธ์ง๊ฐ ๋ก๋๋๊ธฐ ์ ์ ๊ณต๊ฐ์ด ์์ฝ๋์ด ๋ ์ด์์ ์ด๋์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
<img src="image.jpg" width="640" height="480" alt="Example Image">
.image-container {
aspect-ratio: 640 / 480;
}
์ธก์ : WebPageTest ๋๋ Lighthouse๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ๊ฒฝ ์ ํ์ CLS๋ฅผ ์ธก์ ํฉ๋๋ค. CLS๊ฐ ๊ฐ์ํ๋ ๊ฒ์ ํ์ธํ ์ ์์ผ๋ฉฐ, ์ด๋ ๋ ์์ ์ ์ด๊ณ ์์ธก ๊ฐ๋ฅํ ๋ ์ด์์์ ๋ํ๋ ๋๋ค.
ํผํด์ผ ํ ์ผ๋ฐ์ ์ธ CSS ์ฑ๋ฅ ํจ์
์ผ๋ฐ์ ์ธ CSS ์ฑ๋ฅ ํจ์ ์ ์ธ์งํ๊ณ ์์ผ๋ฉด ์ฒ์๋ถํฐ ์ด๋ฅผ ํผํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ๋ค์์ ์ฃผ์ํด์ผ ํ ๋ช ๊ฐ์ง ์ฃผ์ ์ฌํญ์ ๋๋ค.
- ์ง๋์น๊ฒ ๋ณต์กํ ์ ํ์: ์์ ์ธ๊ธํ๋ฏ์ด ๋ณต์กํ ์ ํ์๋ ๋ ๋๋ง ์๋๋ฅผ ๋ฆ์ถ ์ ์์ต๋๋ค. ์ ํ์๋ฅผ ์ต๋ํ ๋จ์ํ๊ณ ํจ์จ์ ์ผ๋ก ์ ์งํ์ญ์์ค.
- `!important`์ ๊ณผ๋ํ ์ฌ์ฉ: `!important`๋ฅผ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด CSS ์ ์ง๋ณด์๊ฐ ์ด๋ ค์์ง๊ณ ์ฑ๋ฅ์๋ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ด๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์คํ์ผ์ ์ฌ๊ณ์ฐํ๋๋ก ๊ฐ์ ํ์ฌ ๋ ๋๋ง ์๋๋ฅผ ๋ฆ์ถ ์ ์์ต๋๋ค.
- ๋น์ฉ์ด ๋ง์ด ๋๋ CSS ์์ฑ ์ฌ์ฉ: ์ผ๋ถ CSS ์์ฑ์ ๋ค๋ฅธ ์์ฑ๋ณด๋ค ๊ณ์ฐ ๋น์ฉ์ด ๋ ๋ง์ด ๋ญ๋๋ค. ์๋ฅผ ๋ค์ด, `box-shadow`, `border-radius`, `filter`๋ ํนํ ๋ง์ ์์ ์์์ ์ ์ฉ๋๊ฑฐ๋ ์ ๋๋ฉ์ด์ ๋ ๋ ๋ฆฌ์์ค ์ง์ฝ์ ์ผ ์ ์์ต๋๋ค. ์ด๋ฌํ ์์ฑ์ ์ ์คํ๊ฒ ์ฌ์ฉํ๊ณ ๊ฐ๋ฅํ๋ค๋ฉด ๋ค๋ฅธ ์ ๊ทผ ๋ฐฉ์์ ๊ณ ๋ คํ์ญ์์ค.
- ๋ ๋๋ง ์ฐจ๋จ CSS ์ฐจ๋จ: CSS ํ์ผ์ด ํจ์จ์ ์ผ๋ก ์ ๋ฌ๋๋๋ก ํฉ๋๋ค. CSS ํ์ผ์ ์ต์ํ, ์์ถ ๋ฐ ์บ์ฑํ์ญ์์ค. ์ด๊ธฐ ๋ ๋๋ง ์๊ฐ์ ๊ฐ์ ํ๊ธฐ ์ํด ์ค์ํ CSS๋ฅผ ์ธ๋ผ์ธํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค. `link` ํ๊ทธ์ `media` ์์ฑ์ ์ฌ์ฉํ์ฌ CSS ํ์ผ์ ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋ํฉ๋๋ค.
- ์ฌ์ฉ๋์ง ์๋ CSS ๋ฌด์: ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ CSS ํ์ผ์ ์ฌ์ฉ๋์ง ์๋ ๊ท์น๊ณผ ์ ํ์๊ฐ ์์ผ ์ ์์ต๋๋ค. CSS๋ฅผ ์ ๊ธฐ์ ์ผ๋ก ๊ฐ์ฌํ๊ณ ์ฌ์ฉ๋์ง ์๋ ์ฝ๋๋ฅผ ์ ๊ฑฐํ์ญ์์ค. PurgeCSS ๋ฐ UnCSS์ ๊ฐ์ ๋๊ตฌ๊ฐ ์ด ํ๋ก์ธ์ค๋ฅผ ์๋ํํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- CSS ํํ์ ์ฌ์ฉ (IE): CSS ํํ์์ ๋ ์ด์ ์ฌ์ฉ๋์ง ์์ผ๋ฉฐ ์ ๋๋ก ์ฌ์ฉํด์๋ ์ ๋ฉ๋๋ค. ์์ฃผ ํ๊ฐ๋์ด ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
- ์ด๋ฏธ์ง ์ต์ ํ ๊ฐ๊ณผ: ์์ ์ธ๊ธํ๋ฏ์ด ์ด๋ฏธ์ง ์ต์ ํ๋ ์ ๋ฐ์ ์ธ ์น ์ฑ๋ฅ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ํญ์ ์ด๋ฏธ์ง๋ฅผ ์์ถํ๊ณ , ์ ์ ํ ํ์์ ์ฌ์ฉํ๋ฉฐ, ๋ฐ์ํ ์ด๋ฏธ์ง ์ฌ์ฉ์ ๊ณ ๋ คํ์ญ์์ค.
- ๋ ๋๋ง ํ์ดํ๋ผ์ธ ๋ฏธ๊ณ ๋ ค: ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ํ์ดํ๋ผ์ธ(HTML ํ์ฑ -> DOM ๊ตฌ์ฑ -> CSS ํ์ฑ -> ๋ ๋ ํธ๋ฆฌ ๊ตฌ์ฑ -> ๋ ์ด์์ -> ํ์ธํธ)์ ์ดํดํ๋ฉด CSS ์ฑ๋ฅ ์ต์ ํ์ ๋ํ ์ ๋ณด์ ์ ๊ฐํ ๊ฒฐ์ ์ ๋ด๋ฆฌ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ๋ ์ด์์ ์ค๋์ฑ(๋ธ๋ผ์ฐ์ ๊ฐ ๋ ์ด์์์ ๋ฐ๋ณต์ ์ผ๋ก ์ฌ๊ณ์ฐํ๋๋ก ๊ฐ์ ํ๋ ๊ฒ)์ด ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์๋ค๋ ๊ฒ์ ์๋ฉด ๋ ์ด์์ ์ค๋์ฑ์ ์ ๋ฐํ๋ ํจํด์ ํผํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
CSS ์ฑ๋ฅ ๋ชจ๋ฒ ์ฌ๋ก: ์์ฝ
๋ค์์ CSS ์ฑ๋ฅ ๋ชจ๋ฒ ์ฌ๋ก ์์ฝ์ ๋๋ค.
- CSS ์ ํ์๋ฅผ ๋จ์ํ๊ฒ ์ ์ง: ์ง๋์น๊ฒ ๋ณต์กํ๊ณ ํน์ํ ์ ํ์๋ ํผํ์ญ์์ค.
- `!important` ์ฌ์ฉ ์ต์ํ: `!important`๋ ๊ผญ ํ์ํ ๋๋ง, ๊ทธ๋ฆฌ๊ณ ๋๋ฌผ๊ฒ ์ฌ์ฉํ์ญ์์ค.
- CSS ์ด๋ฏธ์ง ์ต์ ํ: ์ด๋ฏธ์ง๋ฅผ ์์ถํ๊ณ , ์ ์ ํ ํ์์ ์ฌ์ฉํ๋ฉฐ, ๋ฐ์ํ ์ด๋ฏธ์ง๋ฅผ ๊ณ ๋ คํ์ญ์์ค.
- CSS ํ์ผ ์ต์ํ ๋ฐ ์์ถ: CSS ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ฌ ๋ก๋ ์๊ฐ์ ๊ฐ์ ํ์ญ์์ค.
- ์ฌ์ฉ๋์ง ์๋ CSS ์ ๊ฑฐ: ์ ๊ธฐ์ ์ผ๋ก CSS๋ฅผ ๊ฐ์ฌํ๊ณ ์ฌ์ฉ๋์ง ์๋ CSS ๊ท์น์ ์ ๊ฑฐํ์ญ์์ค.
- CSS ์คํ๋ผ์ดํธ ๋๋ ์์ด์ฝ ํฐํธ ์ฌ์ฉ: ์๊ณ ๋ฐ๋ณต์ ์ธ ์ด๋ฏธ์ง์ ๊ฒฝ์ฐ.
- ๋น์ฉ์ด ๋ง์ด ๋๋ CSS ์์ฑ ํผํ๊ธฐ: ๊ณ์ฐ ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ฑ์ ์ ์คํ๊ฒ ์ฌ์ฉํ์ญ์์ค.
- ์ค์ CSS ์ธ๋ผ์ธ: ์ด๊ธฐ ๋ ๋๋ง ์๊ฐ์ ๊ฐ์ ํ๊ธฐ ์ํด.
- `media` ์์ฑ ์ฌ์ฉ: CSS ํ์ผ์ ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋ํ๊ธฐ ์ํด.
- ์ด๋ฏธ์ง ๋ฐ ๋น๋์ค์ ํฌ๊ธฐ ์ง์ : ๋ ์ด์์ ์ด๋์ ๋ฐฉ์งํ๊ธฐ ์ํด.
- CSS ๋ณ์ (์ฌ์ฉ์ ์ ์ ์์ฑ) ์ฌ์ฉ: ์ ์ง๋ณด์์ฑ ๋ฐ ์ ์ฌ์ ์ธ ์ฑ๋ฅ ์ด์ (์ฝ๋ ์ค๋ณต ๊ฐ์)์ ์ํด.
- ๋ธ๋ผ์ฐ์ ์บ์ฑ ํ์ฉ: ์น ์๋ฒ๊ฐ CSS ํ์ผ์ ์ฌ๋ฐ๋ฅด๊ฒ ์บ์ฑํ๋๋ก ๊ตฌ์ฑํ์ญ์์ค.
- CSS ์ ์ฒ๋ฆฌ๊ธฐ (Sass, Less, Stylus) ์ฌ์ฉ: ๊ฐ์ ๋ ๊ตฌ์ฑ, ์ ์ง๋ณด์์ฑ ๋ฐ ์ ์ฌ์ ์ธ ์ฑ๋ฅ ์ต์ ํ(์: ์ฝ๋ ์ฌ์ฌ์ฉ)๋ฅผ ์ํด.
- CSS ํ๋ ์์ํฌ ํ๋ช ํ๊ฒ ์ฌ์ฉ: CSS ํ๋ ์์ํฌ๋ ๊ฐ๋ฐ ์๋๋ฅผ ๋์ผ ์ ์์ง๋ง, ์ฑ๋ฅ ์ค๋ฒํค๋๋ฅผ ์ ๋ฐํ ์๋ ์์ต๋๋ค. ๊ฒฝ๋ํ๋๊ณ ์ ์ต์ ํ๋ ํ๋ ์์ํฌ๋ฅผ ์ ํํ์ญ์์ค.
- ์ ๊ธฐ์ ์ผ๋ก ํ๋กํ์ผ๋ง ๋ฐ ํ ์คํธ: ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ง์์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ๊ณ ๊ฐ์ ์์ญ์ ์๋ณํ์ญ์์ค.
CSS ์ฑ๋ฅ์ ์ํ ์ ์ญ์ ๊ณ ๋ ค์ฌํญ
๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํด CSS ์ฑ๋ฅ์ ์ต์ ํํ ๋ ๋ค์ ์ฌํญ์ ๊ณ ๋ คํ์ญ์์ค.
- ๋คํธ์ํฌ ์ง์ฐ ์๊ฐ: ์ ์ธ๊ณ์ ์ฌ์ฉ์๋ ๋ค๋ฅธ ๋คํธ์ํฌ ์ง์ฐ ์๊ฐ์ ๊ฒฝํํ ์ ์์ต๋๋ค. ์ง์ฐ ์๊ฐ์ ์ํฅ์ ์ต์ํํ๋๋ก CSS ์ ๋ฌ์ ์ต์ ํํ์ญ์์ค. CDN(์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ)์ ์ฌ์ฉํ์ฌ CSS ํ์ผ์ ์ฌ์ฉ์์๊ฒ ๋ ๊ฐ๊น์ด ์บ์ํ์ญ์์ค.
- ์ฅ์น ๊ธฐ๋ฅ: ์ฌ์ฉ์๋ ๋ค์ํ ์ฒ๋ฆฌ ๋ฅ๋ ฅ๊ณผ ํ๋ฉด ํฌ๊ธฐ๋ฅผ ๊ฐ์ง ๋ค์ํ ์ฅ์น์์ ์น์ฌ์ดํธ์ ์ ์ํ ์ ์์ต๋๋ค. ๋ฐ์ํ ๋์์ธ ๊ธฐ๋ฒ๊ณผ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ์ฅ์น์ ๋ง๊ฒ CSS๋ฅผ ์ต์ ํํ์ญ์์ค. CSS๊ฐ ๋ค์ํ ์ฅ์น์์ ํน์ ํฌ๊ธฐ๋ ๋ณต์ก์ฑ์ ์ด๊ณผํ์ง ์๋๋ก ์ฑ๋ฅ ์์ฐ์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
- ๋ธ๋ผ์ฐ์ ์ง์: CSS๊ฐ ๋์ ์ฌ์ฉ์๊ฐ ์ฌ์ฉํ๋ ๋ธ๋ผ์ฐ์ ์ ํธํ๋๋์ง ํ์ธํ์ญ์์ค. ๋ธ๋ผ์ฐ์ ์ ๋์ฌ๋ ์ ์คํ๊ฒ ์ฌ์ฉํ๊ณ Autoprefixer์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ ๋์ฌ๋ฅผ ์๋์ผ๋ก ์ถ๊ฐํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค. ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ๋ค์ํ ์ฅ์น์์ ์น์ฌ์ดํธ๋ฅผ ํ ์คํธํ์ญ์์ค.
- ํ์งํ: ์น์ฌ์ดํธ๊ฐ ์ฌ๋ฌ ์ธ์ด๋ก ํ์งํ๋ ๊ฒฝ์ฐ CSS๋ ์ ๋๋ก ํ์งํ๋์๋์ง ํ์ธํ์ญ์์ค. ์ ๋์ฝ๋ ๋ฌธ์๋ฅผ ์ฌ์ฉํ๊ณ ํ์ํ ๊ฒฝ์ฐ ๋ค๋ฅธ ์ธ์ด์ ๋ํด ๋ค๋ฅธ ์คํ์ผ์ํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค.
- ์ ๊ทผ์ฑ: CSS๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์๊ฒ๋ ์ ๊ทผ ๊ฐ๋ฅํ์ง ํ์ธํ์ญ์์ค. ์๋ฏธ ์๋ HTML์ ์ฌ์ฉํ๊ณ ์ ๊ทผ์ฑ ์ง์นจ์ ๋ฐ๋ฅด์ญ์์ค. ๋ณด์กฐ ๊ธฐ์ ๋ก ์น์ฌ์ดํธ๋ฅผ ํ ์คํธํ์ญ์์ค.
๊ฒฐ๋ก
CSS ์ธก์ ๊ท์น์ CSS ์ฑ๋ฅ์ ์ต์ ํํ๋ ๋ฐ ์ ์ฉํ ๋๊ตฌ์ ๋๋ค. CSS ๋ณ๊ฒฝ ์ฌํญ์ ์ํฅ์ ์ง์์ ์ผ๋ก ์ธก์ ํจ์ผ๋ก์จ ๋ ๋น ๋ฅด๊ณ ํจ์จ์ ์ธ ์น์ฌ์ดํธ๋ก ์ด์ด์ง๋ ๋ฐ์ดํฐ ๊ธฐ๋ฐ ๊ฒฐ์ ์ ๋ด๋ฆด ์ ์์ต๋๋ค. ์ฃผ์ ์ฑ๋ฅ ์งํ๋ฅผ ์ดํดํ๊ณ , ์ฌ๋ฐ๋ฅธ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ฉฐ, ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๋ฉด ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ ์๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค. CSS ์ฑ๋ฅ ์ต์ ํ๋ ์ง์์ ์ธ ๊ณผ์ ์์ ๊ธฐ์ตํ์ญ์์ค. ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ง์์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ๊ณ ๊ฐ์ ์์ญ์ ์๋ณํ์ญ์์ค. ์ฑ๋ฅ ์ฐ์ ์ฌ๊ณ ๋ฐฉ์์ ์ฑํํจ์ผ๋ก์จ CSS๊ฐ ๊ธ์ ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ธฐ์ฌํ๊ณ ๋น์ฆ๋์ค ๋ชฉํ๋ฅผ ๋ฌ์ฑํ๋ ๋ฐ ๋์์ด ๋๋๋ก ํ ์ ์์ต๋๋ค.
CSS ์ธก์ ๊ท์น์ ์์น์ ๊ตฌํํจ์ผ๋ก์จ ์ฃผ๊ด์ ์ธ ์๊ฒฌ์ ๋์ด ๋ฐ์ดํฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ต์ ํ ๋ ธ๋ ฅ์ ์ถ์งํ์ฌ ๊ถ๊ทน์ ์ผ๋ก ๋ชจ๋ ์ฌ๋์๊ฒ ๋ ๋น ๋ฅด๊ณ , ๋ ํจ์จ์ ์ด๋ฉฐ, ๋ ์ฆ๊ฑฐ์ด ์น ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.