๋ ๋น ๋ฅธ ์น์ฌ์ดํธ ๋ก๋ฉ๊ณผ ํฅ์๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํ ์ค์ ๋ ๋๋ง ๊ฒฝ๋ก์ ์ดํด ๋ฐ ์ต์ ํ ์ข ํฉ ๊ฐ์ด๋. ์ ์ธ๊ณ์ ์ผ๋ก ํ๋ก ํธ์๋ ์ฑ๋ฅ์ ๊ฐ์ ํ๋ ์ค์ฉ์ ์ธ ๊ธฐ์ ์ ๋ฐฐ์๋ณด์ธ์.
์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ์ต์ ํ: ์ค์ ๋ ๋๋ง ๊ฒฝ๋ก ๋ง์คํฐํ๊ธฐ
์ค๋๋ ์ ์น์์ ์ฑ๋ฅ์ ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ๋๋ฆฌ๊ฒ ๋ก๋ฉ๋๋ ์น์ฌ์ดํธ๋ ์ฌ์ฉ์์ ๋ถ๋ง์ ์ฌ๊ณ , ์ดํ๋ฅ ์ ๋์ด๋ฉฐ, ๊ถ๊ทน์ ์ผ๋ก๋ ์์ต ์์ค๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ต์ ํํ๊ณ ๋ธ๋ผ์ฐ์ ๊ฐ ์น ํ์ด์ง๋ฅผ ๋ ๋๋งํ๋ ๋ฐฉ์์ ์ดํดํ๋ ๊ฒ์ ๋น ๋ฅด๊ณ ๋งค๋ ฅ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด ๋ถ์ผ์์ ๊ฐ์ฅ ์ค์ํ ๊ฐ๋ ์ค ํ๋๋ ์ค์ ๋ ๋๋ง ๊ฒฝ๋ก(Critical Rendering Path, CRP)์ ๋๋ค.
์ค์ ๋ ๋๋ง ๊ฒฝ๋ก๋ ๋ฌด์์ธ๊ฐ?
์ค์ ๋ ๋๋ง ๊ฒฝ๋ก๋ ๋ธ๋ผ์ฐ์ ๊ฐ HTML, CSS, JavaScript๋ฅผ ํ๋ฉด์ ๋ ๋๋ง๋ ์น ํ์ด์ง๋ก ๋ณํํ๊ธฐ ์ํด ๊ฑฐ์น๋ ์ผ๋ จ์ ๋จ๊ณ์ ๋๋ค. ์ด๋ ๊ฐ ๋จ๊ณ๊ฐ ์ด์ ๋จ๊ณ์ ๊ฒฐ๊ณผ๋ฌผ์ ์์กดํ๋ ์ข ์์ฑ ์ฒด์ธ์ ๋๋ค. ์ด ๊ฒฝ๋ก๋ฅผ ์ดํดํ๊ณ ์ต์ ํํ๋ ๊ฒ์ ์ฌ์ฉ์๊ฐ ์น์ฌ์ดํธ๋ฅผ ๋ณด๊ณ ์ํธ์์ฉํ๊ธฐ๊น์ง ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ค์ด๋ ๋ฐ ๊ฒฐ์ ์ ์ ๋๋ค. ๊ฐ ์์ง์(๊ฐ ๋ ๋๋ง ๋จ๊ณ)์ด ์ต์ข ๊ณต์ฐ์ด ์๋ฒฝํ๊ฒ ์ด๋ฃจ์ด์ง๋๋ก ์๋ฒฝํ๊ฒ ์๊ฐ ๋ง์ถฐ ์คํ๋์ด์ผ ํ๋, ์ธ์ฌํ๊ฒ ์ง์ธ ๋ฐ๋ ๋ผ๊ณ ์๊ฐํ ์ ์์ต๋๋ค. ํ ๋จ๊ณ์์์ ์ง์ฐ์ ๋ชจ๋ ํ์ ๋จ๊ณ์ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
CRP๋ ๋ค์๊ณผ ๊ฐ์ ์ฃผ์ ๋จ๊ณ๋ก ๊ตฌ์ฑ๋ฉ๋๋ค:
- DOM ๊ตฌ์ถ: HTML์ ํ์ฑํ์ฌ ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ(DOM)์ ๊ตฌ์ถํฉ๋๋ค.
- CSSOM ๊ตฌ์ถ: CSS๋ฅผ ํ์ฑํ์ฌ CSS ๊ฐ์ฒด ๋ชจ๋ธ(CSSOM)์ ๊ตฌ์ถํฉ๋๋ค.
- ๋ ๋ ํธ๋ฆฌ ๊ตฌ์ถ: DOM๊ณผ CSSOM์ ๊ฒฐํฉํ์ฌ ๋ ๋ ํธ๋ฆฌ๋ฅผ ์์ฑํฉ๋๋ค.
- ๋ ์ด์์: ๋ ๋ ํธ๋ฆฌ์ ๊ฐ ์์์ ์์น์ ํฌ๊ธฐ๋ฅผ ๊ณ์ฐํฉ๋๋ค.
- ํ์ธํธ: ๋ ๋ ํธ๋ฆฌ๋ฅผ ํ๋ฉด์ ์ค์ ํฝ์ ๋ก ๋ณํํฉ๋๋ค.
์ด ๊ฐ ๋จ๊ณ๋ฅผ ๋ ์์ธํ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
1. DOM ๊ตฌ์ถ
๋ธ๋ผ์ฐ์ ๊ฐ HTML ๋ฌธ์๋ฅผ ๋ฐ์ผ๋ฉด ์ฝ๋๋ฅผ ํ ์ค์ฉ ํ์ฑํ๊ธฐ ์์ํฉ๋๋ค. ํ์ฑํ๋ฉด์ ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ(DOM)์ด๋ผ๋ ํธ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ๊ตฌ์ถํฉ๋๋ค. DOM์ HTML ๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ๋ํ๋ด๋ฉฐ, ๊ฐ HTML ์์๋ ํธ๋ฆฌ์ ๋ ธ๋๊ฐ ๋ฉ๋๋ค. ๋ค์์ ๊ฐ๋จํ HTML์ ๊ณ ๋ คํด ๋ณด์ธ์:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first website.</p>
</body>
</html>
๋ธ๋ผ์ฐ์ ๋ ์ด๊ฒ์ DOM ํธ๋ฆฌ๋ก ํ์ฑํ๋ฉฐ, ๊ฐ ํ๊ทธ(<html>, <head>, <body> ๋ฑ)๋ ๋
ธ๋๊ฐ ๋ฉ๋๋ค.
์ค์ ๋ธ๋กํน ๋ฆฌ์์ค: ํ์๊ฐ <script> ํ๊ทธ๋ฅผ ๋ง๋๋ฉด, ์คํฌ๋ฆฝํธ๊ฐ ๋ค์ด๋ก๋, ํ์ฑ, ์คํ๋ ๋๊น์ง ์ผ๋ฐ์ ์ผ๋ก DOM ์์ฑ์ ์ฐจ๋จํฉ๋๋ค. ์ด๋ JavaScript๊ฐ DOM์ ์์ ํ ์ ์๊ธฐ ๋๋ฌธ์ ๋ธ๋ผ์ฐ์ ๊ฐ DOM ๊ตฌ์ถ์ ๊ณ์ํ๊ธฐ ์ ์ ์คํฌ๋ฆฝํธ ์คํ์ด ์๋ฃ๋์๋์ง ํ์ธํด์ผ ํ๊ธฐ ๋๋ฌธ์
๋๋ค. ๋ง์ฐฌ๊ฐ์ง๋ก CSS๋ฅผ ๋ก๋ํ๋ <link> ํ๊ทธ๋ ์๋ ์ค๋ช
๋ ๋ฐ์ ๊ฐ์ด ๋ ๋๋ง์ ์ฐจ๋จํ๋ ๊ฒ์ผ๋ก ๊ฐ์ฃผ๋ฉ๋๋ค.
2. CSSOM ๊ตฌ์ถ
๋ธ๋ผ์ฐ์ ๊ฐ HTML์ ํ์ฑํ์ฌ DOM์ ๋ง๋๋ ๊ฒ์ฒ๋ผ, CSS๋ฅผ ํ์ฑํ์ฌ CSS ๊ฐ์ฒด ๋ชจ๋ธ(CSSOM)์ ๋ง๋ญ๋๋ค. CSSOM์ HTML ์์์ ์ ์ฉ๋ ์คํ์ผ์ ๋ํ๋ ๋๋ค. DOM๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก CSSOM๋ ํธ๋ฆฌ ๊ตฌ์กฐ์ ๋๋ค. CSSOM์ DOM ์์๊ฐ ์ด๋ป๊ฒ ์คํ์ผ๋ง๋๊ณ ํ์๋ ์ง๋ฅผ ๊ฒฐ์ ํ๊ธฐ ๋๋ฌธ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ค์ CSS๋ฅผ ๊ณ ๋ คํด ๋ณด์ธ์:
h1 {
color: blue;
font-size: 2em;
}
p {
color: gray;
}
๋ธ๋ผ์ฐ์ ๋ ์ด CSS๋ฅผ ํ์ฑํ๊ณ CSS ๊ท์น์ ํด๋น HTML ์์์ ๋งคํํ๋ CSSOM์ ์์ฑํฉ๋๋ค. CSSOM ๊ตฌ์ถ์ ํ์ด์ง ๋ ๋๋ง์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. ๋ถ์ ํํ๊ฑฐ๋ ๋นํจ์จ์ ์ธ CSS๋ ๋ ๋๋ง ์ง์ฐ๊ณผ ์ข์ง ์์ ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, CSS ์ ํ์๋ ๋ธ๋ผ์ฐ์ ์ ์์ ์ ์ต์ํํ๊ธฐ ์ํด ๊ฐ๋ฅํ ํ ๊ตฌ์ฒด์ ์ด๊ณ ํจ์จ์ ์ด์ด์ผ ํฉ๋๋ค.
์ค์ ๋ธ๋กํน ๋ฆฌ์์ค: CSSOM์ ๋ ๋๋ง์ ์ฐจ๋จํ๋ ๋ฆฌ์์ค์
๋๋ค. ๋ธ๋ผ์ฐ์ ๋ CSSOM์ด ๊ตฌ์ถ๋ ๋๊น์ง ํ์ด์ง ๋ ๋๋ง์ ์์ํ ์ ์์ต๋๋ค. ์ด๋ CSS์ ์ ์๋ ์คํ์ผ์ด HTML ์์๊ฐ ํ์๋๋ ๋ฐฉ์์ ์ํฅ์ ๋ฏธ์น๊ธฐ ๋๋ฌธ์
๋๋ค. ๋ฐ๋ผ์ ๋ธ๋ผ์ฐ์ ๋ ๋ ๋๋ง์ ์งํํ๊ธฐ ์ ์ CSSOM์ด ์๋ฃ๋๊ธฐ๋ฅผ ๊ธฐ๋ค๋ ค์ผ ํฉ๋๋ค. ๋ฌธ์์ <head>์ ์๋ ์คํ์ผ์ํธ(<link rel="stylesheet"> ์ฌ์ฉ)๋ ์ผ๋ฐ์ ์ผ๋ก ๋ ๋๋ง์ ์ฐจ๋จํฉ๋๋ค.
3. ๋ ๋ ํธ๋ฆฌ ๊ตฌ์ถ
DOM๊ณผ CSSOM์ด ๊ตฌ์ถ๋๋ฉด ๋ธ๋ผ์ฐ์ ๋ ์ด ๋์ ๊ฒฐํฉํ์ฌ ๋ ๋ ํธ๋ฆฌ๋ฅผ ๋ง๋ญ๋๋ค. ๋ ๋ ํธ๋ฆฌ๋ ํ๋ฉด์ ์ค์ ๋ก ํ์๋ ์์๋ง ํฌํจํ๋ DOM์ ์๊ฐ์ ํํ์
๋๋ค. ์จ๊ฒจ์ง ์์(์: display: none; ์ฌ์ฉ)๋ ๋ ๋ ํธ๋ฆฌ์ ํฌํจ๋์ง ์์ต๋๋ค. ๋ ๋ ํธ๋ฆฌ๋ ์ฌ์ฉ์๊ฐ ํ๋ฉด์์ ์ค์ ๋ก ๋ณด๊ฒ ๋ ๊ฒ์ ๋ํ๋
๋๋ค. ์ฆ, ๋ณด์ด๋ ์์์ ์คํ์ผ์ด ์ ์ฉ๋ ์์๋ง ํฌํจํ๋ DOM์ ๊ฐ์ง์น๊ธฐ๋ ๋ฒ์ ์
๋๋ค.
๋ ๋ ํธ๋ฆฌ๋ ์ฝํ ์ธ (DOM)์ ์คํ์ผ(CSSOM)์ ๊ฒฐํฉํ์ฌ ํ์ด์ง์ ์ต์ข ์๊ฐ์ ๊ตฌ์กฐ๋ฅผ ๋ํ๋ ๋๋ค. ์ด ๋จ๊ณ๋ ์ค์ ๋ ๋๋ง ๊ณผ์ ์ ๊ธฐ์ด๋ฅผ ๋ง๋ จํ๊ธฐ ๋๋ฌธ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
4. ๋ ์ด์์
๋ ์ด์์ ๋จ๊ณ๋ ๋ ๋ ํธ๋ฆฌ์ ๊ฐ ์์์ ๋ํ ์ ํํ ์์น์ ํฌ๊ธฐ๋ฅผ ๊ณ์ฐํ๋ ๊ณผ์ ์ ํฌํจํฉ๋๋ค. ์ด ๊ณผ์ ์ "๋ฆฌํ๋ก์ฐ(reflow)"๋ผ๊ณ ๋ ์๋ ค์ ธ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ๊ฐ ์์๊ฐ ํ๋ฉด์ ์ด๋์ ์์นํด์ผ ํ๋์ง, ๊ทธ๋ฆฌ๊ณ ์ผ๋ง๋ ๋ง์ ๊ณต๊ฐ์ ์ฐจ์งํด์ผ ํ๋์ง๋ฅผ ๊ฒฐ์ ํฉ๋๋ค. ๋ ์ด์์ ๋จ๊ณ๋ ์์์ ์ ์ฉ๋ CSS ์คํ์ผ์ ํฌ๊ฒ ์ํฅ์ ๋ฐ์ต๋๋ค. ์ฌ๋ฐฑ, ์์ชฝ ์ฌ๋ฐฑ, ๋๋น, ๋์ด, ์์น ์ง์ ๊ณผ ๊ฐ์ ์์๋ค์ด ๋ชจ๋ ๋ ์ด์์ ๊ณ์ฐ์ ์ญํ ์ ํฉ๋๋ค. ์ด ๋จ๊ณ๋ ํนํ ๋ณต์กํ ๋ ์ด์์์ ๊ฒฝ์ฐ ๊ณ์ฐ ์ง์ฝ์ ์ ๋๋ค.
๋ ์ด์์์ ํ์ด์ง์ ์์๋ค์ ๊ณต๊ฐ์ ๋ฐฐ์ด์ ๊ฒฐ์ ํ๊ธฐ ๋๋ฌธ์ CRP์์ ์ค์ํ ๋จ๊ณ์ ๋๋ค. ํจ์จ์ ์ธ ๋ ์ด์์ ๊ณผ์ ์ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ์ด ์ข์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํด ํ์์ ์ ๋๋ค. DOM์ด๋ CSSOM์ ๋ณ๊ฒฝ์ ๋ฆฌ๋ ์ด์์(relayout)์ ์ ๋ฐํ ์ ์์ผ๋ฉฐ, ์ด๋ ์ฑ๋ฅ ์ธก๋ฉด์์ ๋น์ฉ์ด ๋ง์ด ๋ค ์ ์์ต๋๋ค.
5. ํ์ธํธ
๋ง์ง๋ง ๋จ๊ณ๋ ํ์ธํธ ๋จ๊ณ๋ก, ๋ธ๋ผ์ฐ์ ๊ฐ ๋ ๋ ํธ๋ฆฌ๋ฅผ ํ๋ฉด์ ์ค์ ํฝ์ ๋ก ๋ณํํ๋ ๊ณผ์ ์ ๋๋ค. ์ด๋ ์์๋ฅผ ๋์คํฐํํ๊ณ ์ง์ ๋ ์คํ์ผ, ์์, ํ ์ค์ฒ๋ฅผ ์ ์ฉํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ํ์ธํธ ๊ณผ์ ์ ๊ถ๊ทน์ ์ผ๋ก ์น ํ์ด์ง๋ฅผ ์ฌ์ฉ์์๊ฒ ๋ณด์ด๊ฒ ๋ง๋๋ ๊ฒ์ ๋๋ค. ํ์ธํ ์ ํนํ ๋ณต์กํ ๊ทธ๋ํฝ๊ณผ ์ ๋๋ฉ์ด์ ์ ๊ฒฝ์ฐ ๋ ๋ค๋ฅธ ๊ณ์ฐ ์ง์ฝ์ ์ธ ๊ณผ์ ์ ๋๋ค.
ํ์ธํธ ๋จ๊ณ๊ฐ ๋๋๋ฉด ์ฌ์ฉ์๋ ๋ ๋๋ง๋ ์น ํ์ด์ง๋ฅผ ๋ณด๊ฒ ๋ฉ๋๋ค. ์ดํ DOM์ด๋ CSSOM์ ๋ณ๊ฒฝ์ด ์๊ธฐ๋ฉด ๋ฆฌํ์ธํธ(repaint)๊ฐ ๋ฐ์ํ์ฌ ํ๋ฉด์ ์๊ฐ์ ํํ์ ์ ๋ฐ์ดํธํฉ๋๋ค. ๋ถํ์ํ ๋ฆฌํ์ธํธ๋ฅผ ์ต์ํํ๋ ๊ฒ์ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ์ด ์ข์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ์ ์งํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค.
์ค์ ๋ ๋๋ง ๊ฒฝ๋ก ์ต์ ํํ๊ธฐ
์ด์ ์ค์ ๋ ๋๋ง ๊ฒฝ๋ก๋ฅผ ์ดํดํ์ผ๋, ์ด๋ฅผ ์ต์ ํํ๊ธฐ ์ํ ๋ช ๊ฐ์ง ๊ธฐ์ ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
1. ์ค์ ๋ฆฌ์์ค ์ ์ต์ํํ๊ธฐ
๋ธ๋ผ์ฐ์ ๊ฐ ๋ค์ด๋ก๋ํ๊ณ ํ์ฑํด์ผ ํ๋ ์ค์ ๋ฆฌ์์ค(CSS ๋ฐ JavaScript ํ์ผ)๊ฐ ์ ์์๋ก ํ์ด์ง๊ฐ ๋ ๋นจ๋ฆฌ ๋ ๋๋ง๋ฉ๋๋ค. ์ค์ ๋ฆฌ์์ค๋ฅผ ์ต์ํํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ค์ํ์ง ์์ JavaScript ์ง์ฐ์ํค๊ธฐ:
<script>ํ๊ทธ์defer๋๋async์์ฑ์ ์ฌ์ฉํ์ฌ DOM ๊ตฌ์ถ์ ์ฐจ๋จํ์ง ์๋๋ก ํฉ๋๋ค. - ์ค์ CSS ์ธ๋ผ์ธ ์ฒ๋ฆฌํ๊ธฐ: ํ์ด์ง ์๋จ(above-the-fold) ์ฝํ
์ธ ๋ ๋๋ง์ ํ์์ ์ธ CSS ๊ท์น์ ์๋ณํ์ฌ HTML ๋ฌธ์์
<head>์ ์ง์ ์ธ๋ผ์ธ์ผ๋ก ํฌํจ์ํต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๊ธฐ ๋ ๋๋ง์ ์ํด ์ธ๋ถ CSS ํ์ผ์ ๋ค์ด๋ก๋ํ ํ์๊ฐ ์์ต๋๋ค. - CSS ๋ฐ JavaScript ์ถ์ํ๊ธฐ: ๋ถํ์ํ ๋ฌธ์(๊ณต๋ฐฑ, ์ฃผ์ ๋ฑ)๋ฅผ ์ ๊ฑฐํ์ฌ CSS ๋ฐ JavaScript ํ์ผ์ ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค.
- CSS ๋ฐ JavaScript ํ์ผ ๊ฒฐํฉํ๊ธฐ: ์ฌ๋ฌ CSS ๋ฐ JavaScript ํ์ผ์ ๋จ์ผ ํ์ผ๋ก ๊ฒฐํฉํ์ฌ HTTP ์์ฒญ ์๋ฅผ ์ค์ ๋๋ค. ๊ทธ๋ฌ๋ HTTP/2์์๋ ํฅ์๋ ๋ฉํฐํ๋ ์ฑ ๊ธฐ๋ฅ์ผ๋ก ์ธํด ๋ฒ๋ค๋ง์ ์ด์ ์ด ๋ ๋๋ ทํฉ๋๋ค.
- ์ฌ์ฉํ์ง ์๋ CSS ์ ๊ฑฐํ๊ธฐ: CSS๋ฅผ ๋ถ์ํ์ฌ ์ ํ ์ฌ์ฉ๋์ง ์๋ ๊ท์น์ ์๋ณํ๋ ๋๊ตฌ๋ค์ด ์์ต๋๋ค. ์ด๋ฌํ ๊ท์น์ ์ ๊ฑฐํ๋ฉด CSSOM์ ํฌ๊ธฐ๊ฐ ์ค์ด๋ญ๋๋ค.
์์ (JavaScript ์ง์ฐ):
<script src="script.js" defer></script>
defer ์์ฑ์ ๋ธ๋ผ์ฐ์ ์๊ฒ DOM ๊ตฌ์ถ์ ์ฐจ๋จํ์ง ์๊ณ ์คํฌ๋ฆฝํธ๋ฅผ ๋ค์ด๋ก๋ํ๋๋ก ์ง์ํฉ๋๋ค. ์คํฌ๋ฆฝํธ๋ DOM์ด ์์ ํ ํ์ฑ๋ ํ์ ์คํ๋ฉ๋๋ค.
์์ (์ค์ CSS ์ธ๋ผ์ธ ์ฒ๋ฆฌ):
<head>
<style>
/* ํ์ด์ง ์๋จ ์ฝํ
์ธ ๋ฅผ ์ํ ์ค์ CSS */
body { font-family: sans-serif; }
h1 { color: black; }
</style>
<link rel="stylesheet" href="style.css">
</head>
์ด ์์ ์์๋ body์ h1 ์์์ ๋ํ CSS ๊ท์น์ด <head>์ ์ธ๋ผ์ธ์ผ๋ก ํฌํจ๋์ด ์์ต๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ์ธ๋ถ ์คํ์ผ์ํธ(style.css)๊ฐ ๋ค์ด๋ก๋๋๊ธฐ ์ ์๋ ํ์ด์ง ์๋จ ์ฝํ
์ธ ๋ฅผ ๋น ๋ฅด๊ฒ ๋ ๋๋งํ ์ ์์ต๋๋ค.
2. CSS ์ ๋ฌ ์ต์ ํํ๊ธฐ
CSS๋ฅผ ์ ๋ฌํ๋ ๋ฐฉ์์ CRP์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ๋ค์๊ณผ ๊ฐ์ ์ต์ ํ ๊ธฐ์ ์ ๊ณ ๋ คํด ๋ณด์ธ์:
- ๋ฏธ๋์ด ์ฟผ๋ฆฌ: ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ํน์ ์ฅ์น๋ ํ๋ฉด ํฌ๊ธฐ์๋ง CSS๋ฅผ ์ ์ฉํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ๋ถํ์ํ CSS๋ฅผ ๋ค์ด๋ก๋ํ๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
- ์ธ์ ์คํ์ผ์ํธ: ์ธ์ ์คํ์ผ์ ๋ณ๋์ ์คํ์ผ์ํธ๋ก ๋ถ๋ฆฌํ๊ณ ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ธ์ํ ๋๋ง ์ ์ฉ๋๋๋ก ํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ธ์ ์คํ์ผ์ด ํ๋ฉด ๋ ๋๋ง์ ์ฐจ๋จํ๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
- ์กฐ๊ฑด๋ถ ๋ก๋ฉ: ๋ธ๋ผ์ฐ์ ๊ธฐ๋ฅ์ด๋ ์ฌ์ฉ์ ์ ํธ๋์ ๋ฐ๋ผ CSS ํ์ผ์ ์กฐ๊ฑด๋ถ๋ก ๋ก๋ํฉ๋๋ค. ์ด๋ JavaScript๋ ์๋ฒ ์ธก ๋ก์ง์ ์ฌ์ฉํ์ฌ ๊ตฌํํ ์ ์์ต๋๋ค.
์์ (๋ฏธ๋์ด ์ฟผ๋ฆฌ):
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
์ด ์์ ์์ style.css๋ ํ๋ฉด์๋ง ์ ์ฉ๋๊ณ , print.css๋ ์ธ์ํ ๋๋ง ์ ์ฉ๋ฉ๋๋ค.
3. JavaScript ์คํ ์ต์ ํํ๊ธฐ
JavaScript๋ ํนํ DOM์ด๋ CSSOM์ ์์ ํ๋ ๊ฒฝ์ฐ CRP์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. JavaScript ์คํ์ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- JavaScript ์ง์ฐ ๋๋ ๋น๋๊ธฐ ์ฒ๋ฆฌ: ์์ ์ธ๊ธํ๋ฏ์ด
defer๋๋async์์ฑ์ ์ฌ์ฉํ์ฌ JavaScript๊ฐ DOM ๊ตฌ์ถ์ ์ฐจ๋จํ์ง ์๋๋ก ํฉ๋๋ค. - JavaScript ์ฝ๋ ์ต์ ํ: DOM ์กฐ์ ๋ฐ ๊ณ์ฐ์ ์ต์ํํ๋ ํจ์จ์ ์ธ JavaScript ์ฝ๋๋ฅผ ์์ฑํฉ๋๋ค.
- JavaScript ์ง์ฐ ๋ก๋ฉ: ํ์ํ ๋๋ง JavaScript๋ฅผ ๋ก๋ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ํ์ด์ง ํ๋จ์ ์๋ ์์์ ๋ํ JavaScript๋ฅผ ์ง์ฐ ๋ก๋ฉํ ์ ์์ต๋๋ค.
- ์น ์์ปค: ๊ณ์ฐ ์ง์ฝ์ ์ธ JavaScript ์์ ์ ์น ์์ปค๋ก ์ฎ๊ฒจ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ง ์๋๋ก ํฉ๋๋ค.
์์ (๋น๋๊ธฐ JavaScript):
<script src="analytics.js" async></script>
async ์์ฑ์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์คํฌ๋ฆฝํธ๋ฅผ ๋น๋๊ธฐ์ ์ผ๋ก ๋ค์ด๋ก๋ํ๊ณ DOM ๊ตฌ์ถ์ ์ฐจ๋จํ์ง ์๊ณ ์ฌ์ฉ ๊ฐ๋ฅํด์ง๋ ์ฆ์ ์คํํ๋๋ก ์ง์ํฉ๋๋ค. defer์ ๋ฌ๋ฆฌ async๋ก ๋ก๋๋ ์คํฌ๋ฆฝํธ๋ HTML์ ๋ํ๋๋ ์์์ ๋ค๋ฅธ ์์๋ก ์คํ๋ ์ ์์ต๋๋ค.
4. DOM ์ต์ ํํ๊ธฐ
ํฌ๊ณ ๋ณต์กํ DOM์ ๋ ๋๋ง ๊ณผ์ ์ ๋๋ฆฌ๊ฒ ํ ์ ์์ต๋๋ค. DOM์ ์ต์ ํํ๋ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- DOM ํฌ๊ธฐ ์ค์ด๊ธฐ: ๋ถํ์ํ ์์์ ์์ฑ์ ์ ๊ฑฐํ์ฌ DOM์ ๊ฐ๋ฅํ ํ ์๊ฒ ์ ์งํฉ๋๋ค.
- ๊น์ DOM ํธ๋ฆฌ ํผํ๊ธฐ: ๊น๊ฒ ์ค์ฒฉ๋ DOM ๊ตฌ์กฐ๋ ๋ธ๋ผ์ฐ์ ๊ฐ DOM์ ์ํํ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋ค ์ ์์ผ๋ฏ๋ก ํผํฉ๋๋ค.
- ์๋งจํฑ HTML ์ฌ์ฉํ๊ธฐ:
<article>,<nav>,<aside>์ ๊ฐ์ ์๋งจํฑ HTML ์์๋ฅผ ์ฌ์ฉํ์ฌ HTML ๋ฌธ์์ ๊ตฌ์กฐ์ ์๋ฏธ๋ฅผ ๋ถ์ฌํฉ๋๋ค. ์ด๋ ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ด์ง๋ฅผ ๋ ํจ์จ์ ์ผ๋ก ๋ ๋๋งํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
5. ๋ ์ด์์ ์ค๋์ฑ ์ค์ด๊ธฐ
๋ ์ด์์ ์ค๋์ฑ(Layout thrashing)์ JavaScript๊ฐ DOM์ ๋ฐ๋ณต์ ์ผ๋ก ์ฝ๊ณ ์ฐ๊ธฐ๋ฅผ ์ํํ์ฌ ๋ธ๋ผ์ฐ์ ๊ฐ ์ฌ๋ฌ ๋ฒ์ ๋ ์ด์์๊ณผ ํ์ธํธ๋ฅผ ์ํํ๊ฒ ํ ๋ ๋ฐ์ํฉ๋๋ค. ์ด๋ ์ฑ๋ฅ์ ํฌ๊ฒ ์ ํ์ํฌ ์ ์์ต๋๋ค. ๋ ์ด์์ ์ค๋์ฑ์ ํผํ๋ ค๋ฉด:
- DOM ๋ณ๊ฒฝ ์ผ๊ด ์ฒ๋ฆฌ: DOM ๋ณ๊ฒฝ ์ฌํญ์ ํจ๊ป ๊ทธ๋ฃนํํ์ฌ ํ ๋ฒ์ ์ ์ฉํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋ ์ด์์๊ณผ ํ์ธํธ์ ์๋ฅผ ์ต์ํํ ์ ์์ต๋๋ค.
- ์ฐ๊ธฐ ์ ๋ ์ด์์ ์์ฑ ์ฝ๊ธฐ ํผํ๊ธฐ: DOM์ ์ฐ๊ธฐ ์ ์ ๋ ์ด์์ ์์ฑ(์:
offsetWidth,offsetHeight)์ ์ฝ๋ ๊ฒ์ ํผํ์ธ์. ์ด๋ ๋ธ๋ผ์ฐ์ ๊ฐ ๊ฐ์ ๋ก ๋ ์ด์์์ ์ํํ๊ฒ ํ ์ ์์ต๋๋ค. - CSS ํธ๋์คํผ ๋ฐ ์ ๋๋ฉ์ด์ ์ฌ์ฉ: JavaScript ๊ธฐ๋ฐ ์ ๋๋ฉ์ด์ ๋์ CSS ํธ๋์คํผ๊ณผ ์ ๋๋ฉ์ด์ ์ ์ฌ์ฉํ์ธ์. ์ด๋ ์ผ๋ฐ์ ์ผ๋ก ๋ ์ฑ๋ฅ์ด ์ข์ต๋๋ค. ํธ๋์คํผ๊ณผ ์ ๋๋ฉ์ด์ ์ ์ข ์ข ์ด๋ฌํ ์ ํ์ ์์ ์ ์ต์ ํ๋ GPU๋ฅผ ์ฌ์ฉํฉ๋๋ค.
6. ๋ธ๋ผ์ฐ์ ์บ์ฑ ํ์ฉํ๊ธฐ
๋ธ๋ผ์ฐ์ ์บ์ฑ์ ์ฌ์ฉํ๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฆฌ์์ค(์: CSS, JavaScript, ์ด๋ฏธ์ง)๋ฅผ ๋ก์ปฌ์ ์ ์ฅํ์ฌ ํ์ ๋ฐฉ๋ฌธ ์ ๋ค์ ๋ค์ด๋ก๋ํ ํ์๊ฐ ์๋๋ก ํ ์ ์์ต๋๋ค. ์๋ฒ๋ฅผ ๊ตฌ์ฑํ์ฌ ๋ฆฌ์์ค์ ์ ์ ํ ์บ์ ํค๋๋ฅผ ์ค์ ํ์ธ์.
์์ (์บ์ ํค๋):
Cache-Control: public, max-age=31536000
์ด ์บ์ ํค๋๋ ๋ธ๋ผ์ฐ์ ์๊ฒ ๋ฆฌ์์ค๋ฅผ 1๋ (31536000์ด) ๋์ ์บ์ํ๋๋ก ์ง์ํฉ๋๋ค. ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN)๋ฅผ ์ฌ์ฉํ๋ฉด ์ฝํ ์ธ ๋ฅผ ์ ์ธ๊ณ ์ฌ๋ฌ ์๋ฒ์ ๋ถ์ฐ์์ผ ์ฌ์ฉ์๊ฐ ์ง๋ฆฌ์ ์ผ๋ก ๋ ๊ฐ๊น์ด ์๋ฒ์์ ๋ฆฌ์์ค๋ฅผ ๋ค์ด๋ก๋ํ ์ ์๊ฒ ํ๋ฏ๋ก ์บ์ฑ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์ค์ ๋ ๋๋ง ๊ฒฝ๋ก ๋ถ์ ๋๊ตฌ
๋ช ๊ฐ์ง ๋๊ตฌ๊ฐ ์ค์ ๋ ๋๋ง ๊ฒฝ๋ก๋ฅผ ๋ถ์ํ๊ณ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค:
- Chrome DevTools: Chrome DevTools๋ CRP์ ๊ฐ ๋จ๊ณ ํ์ด๋ฐ์ ํฌํจํ์ฌ ๋ ๋๋ง ํ๋ก์ธ์ค์ ๋ํ ํ๋ถํ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค. Performance ํจ๋์ ์ฌ์ฉํ์ฌ ํ์ด์ง ๋ก๋ ํ์๋ผ์ธ์ ๊ธฐ๋กํ๊ณ ์ต์ ํํ ์์ญ์ ์๋ณํ์ธ์. Coverage ํญ์ ์ฌ์ฉ๋์ง ์๋ CSS ๋ฐ JavaScript๋ฅผ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- WebPageTest: WebPageTest๋ ๋ฆฌ์์ค ๋ก๋ฉ์ ์๊ฐํํ๋ ์ํฐํด ์ฐจํธ๋ฅผ ํฌํจํ์ฌ ์์ธํ ์ฑ๋ฅ ๋ณด๊ณ ์๋ฅผ ์ ๊ณตํ๋ ์ธ๊ธฐ ์๋ ์จ๋ผ์ธ ๋๊ตฌ์ ๋๋ค.
- Lighthouse: Lighthouse๋ ์น ํ์ด์ง ํ์ง์ ๊ฐ์ ํ๊ธฐ ์ํ ์คํ ์์ค ์๋ํ ๋๊ตฌ์ ๋๋ค. ์ฑ๋ฅ, ์ ๊ทผ์ฑ, ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ, SEO ๋ฑ์ ๋ํ ๊ฐ์ฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. Chrome DevTools, ๋ช ๋ น์ค ๋๋ Node ๋ชจ๋๋ก ์คํํ ์ ์์ต๋๋ค.
์์ (Chrome DevTools ์ฌ์ฉ):
- Chrome DevTools๋ฅผ ์ฝ๋๋ค (ํ์ด์ง์์ ๋ง์ฐ์ค ์ค๋ฅธ์ชฝ ๋ฒํผ์ ํด๋ฆญํ๊ณ "Inspect" ์ ํ).
- "Performance" ํจ๋๋ก ์ด๋ํฉ๋๋ค.
- ๋ นํ ๋ฒํผ(์ํ ์์ด์ฝ)์ ํด๋ฆญํ๊ณ ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์นฉ๋๋ค.
- ํ์ด์ง ๋ก๋ฉ์ด ์๋ฃ๋ ํ ๋ นํ๋ฅผ ์ค์งํฉ๋๋ค.
- ํ์๋ผ์ธ์ ๋ถ์ํ์ฌ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํฉ๋๋ค. "Loading", "Scripting", "Rendering", "Painting" ์น์ ์ ํนํ ์ฃผ์๋ฅผ ๊ธฐ์ธ์ด์ธ์.
์ค์ ์ฌ๋ก ๋ฐ ์ฌ๋ก ์ฐ๊ตฌ
์ค์ ๋ ๋๋ง ๊ฒฝ๋ก ์ต์ ํ๊ฐ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ด๋ป๊ฒ ํฅ์์ํฌ ์ ์๋์ง ๋ช ๊ฐ์ง ์ค์ ์ฌ๋ก๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค:
- ์ฌ๋ก 1: ์ด์ปค๋จธ์ค ์น์ฌ์ดํธ: ํ ์ด์ปค๋จธ์ค ์น์ฌ์ดํธ๋ ์ค์ CSS๋ฅผ ์ธ๋ผ์ธ ์ฒ๋ฆฌํ๊ณ , ์ค์ํ์ง ์์ JavaScript๋ฅผ ์ง์ฐ์ํค๋ฉฐ, ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ์ฌ CRP๋ฅผ ์ต์ ํํ์ต๋๋ค. ๊ทธ ๊ฒฐ๊ณผ ํ์ด์ง ๋ก๋ ์๊ฐ์ด 40% ๋จ์ถ๋๊ณ ์ ํ์จ์ด 20% ์ฆ๊ฐํ์ต๋๋ค.
- ์ฌ๋ก 2: ๋ด์ค ์น์ฌ์ดํธ: ํ ๋ด์ค ์น์ฌ์ดํธ๋ DOM ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ , CSS ์ ํ์๋ฅผ ์ต์ ํํ๋ฉฐ, ๋ธ๋ผ์ฐ์ ์บ์ฑ์ ํ์ฉํ์ฌ CRP๋ฅผ ๊ฐ์ ํ์ต๋๋ค. ์ด๋ก ์ธํด ์ดํ๋ฅ ์ด 30% ๊ฐ์ํ๊ณ ๊ด๊ณ ์์ต์ด 15% ์ฆ๊ฐํ์ต๋๋ค.
- ์ฌ๋ก 3: ๊ธ๋ก๋ฒ ์ฌํ ํ๋ซํผ: ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์๋น์ค๋ฅผ ์ ๊ณตํ๋ ํ ๊ธ๋ก๋ฒ ์ฌํ ํ๋ซํผ์ CDN์ ๊ตฌํํ๊ณ ๋ค์ํ ์ฅ์น ์ ํ ๋ฐ ๋คํธ์ํฌ ์กฐ๊ฑด์ ๋ง๊ฒ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ์ฌ ์๋นํ ๊ฐ์ ์ ๋ณด์์ต๋๋ค. ๋ํ ์๋น์ค ์์ปค๋ฅผ ์ฌ์ฉํ์ฌ ์์ฃผ ์ก์ธ์คํ๋ ๋ฐ์ดํฐ๋ฅผ ์บ์ํ์ฌ ์คํ๋ผ์ธ ์ก์ธ์ค ๋ฐ ๋ ๋น ๋ฅธ ํ์ ๋ก๋๋ฅผ ๊ฐ๋ฅํ๊ฒ ํ์ต๋๋ค. ๊ทธ ๊ฒฐ๊ณผ ๋ค์ํ ์ง์ญ๊ณผ ์ธํฐ๋ท ์๋์์ ๋ ์ผ๊ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์์ต๋๋ค.
๊ธ๋ก๋ฒ ๊ณ ๋ ค ์ฌํญ
CRP๋ฅผ ์ต์ ํํ ๋๋ ๊ธ๋ก๋ฒ ์ปจํ ์คํธ๋ฅผ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์ธ๊ณ ๊ฐ์ง์ ์ฌ์ฉ์๋ ์ธํฐ๋ท ์๋, ์ฅ์น ๊ธฐ๋ฅ ๋ฐ ๋คํธ์ํฌ ์กฐ๊ฑด์ด ๋ค๋ฅผ ์ ์์ต๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ๊ธ๋ก๋ฒ ๊ณ ๋ ค ์ฌํญ์ ๋๋ค:
- ๋คํธ์ํฌ ์ง์ฐ ์๊ฐ: ๋คํธ์ํฌ ์ง์ฐ ์๊ฐ์ ํนํ ์ธ๋ด ์ง์ญ์ด๋ ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋๋ฆฐ ์ฌ์ฉ์์ ๊ฒฝ์ฐ ํ์ด์ง ๋ก๋ ์๊ฐ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. CDN์ ์ฌ์ฉํ์ฌ ์ฝํ ์ธ ๋ฅผ ์ฌ์ฉ์์๊ฒ ๋ ๊ฐ๊น๊ฒ ๋ฐฐํฌํ๊ณ ์ง์ฐ ์๊ฐ์ ์ค์ด์ธ์.
- ์ฅ์น ๊ธฐ๋ฅ: ๋ชจ๋ฐ์ผ ์ฅ์น, ํ๋ธ๋ฆฟ, ๋ฐ์คํฌํฑ๊ณผ ๊ฐ์ ๋ค์ํ ์ฅ์น ๊ธฐ๋ฅ์ ๋ง๊ฒ ์น์ฌ์ดํธ๋ฅผ ์ต์ ํํ์ธ์. ๋ฐ์ํ ๋์์ธ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ํด์๋์ ๋ง๊ฒ ์น์ฌ์ดํธ๋ฅผ ์กฐ์ ํ์ธ์.
- ๋คํธ์ํฌ ์กฐ๊ฑด: ์ฌ์ฉ์๊ฐ ๊ฒฝํํ ์ ์๋ 2G, 3G, 4G์ ๊ฐ์ ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด์ ๊ณ ๋ คํ์ธ์. ์ ์ํ ์ด๋ฏธ์ง ๋ก๋ฉ ๋ฐ ๋ฐ์ดํฐ ์์ถ๊ณผ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ๋๋ฆฐ ๋คํธ์ํฌ ์ฐ๊ฒฐ์ ๋ง๊ฒ ์น์ฌ์ดํธ๋ฅผ ์ต์ ํํ์ธ์.
- ๊ตญ์ ํ(i18n): ๋ค๊ตญ์ด ์น์ฌ์ดํธ๋ฅผ ๋ค๋ฃฐ ๋ CSS์ JavaScript๊ฐ ๋ค์ํ ๋ฌธ์ ์งํฉ๊ณผ ํ ์คํธ ๋ฐฉํฅ์ ์ฒ๋ฆฌํ ์ ์๋๋ก ์ ์ ํ๊ฒ ๊ตญ์ ํ๋์๋์ง ํ์ธํ์ธ์.
- ์ ๊ทผ์ฑ(a11y): ์ฅ์ ๊ฐ ์๋ ์ฌ๋๋ค๋ ์ฌ์ฉํ ์ ์๋๋ก ์น์ฌ์ดํธ์ ์ ๊ทผ์ฑ์ ์ต์ ํํ์ธ์. ์ฌ๊ธฐ์๋ ์ด๋ฏธ์ง์ ๋ํ ๋์ฒด ํ ์คํธ ์ ๊ณต, ์๋งจํฑ HTML ์ฌ์ฉ, ์น์ฌ์ดํธ๊ฐ ํค๋ณด๋๋ก ์ ๊ทผ ๊ฐ๋ฅํ๋๋ก ๋ณด์ฅํ๋ ๊ฒ์ด ํฌํจ๋ฉ๋๋ค.
๊ฒฐ๋ก
์ค์ ๋ ๋๋ง ๊ฒฝ๋ก๋ฅผ ์ต์ ํํ๋ ๊ฒ์ ๋น ๋ฅด๊ณ ๋งค๋ ฅ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ํ์์ ์ ๋๋ค. ์ค์ ๋ฆฌ์์ค๋ฅผ ์ต์ํํ๊ณ , CSS ์ ๋ฌ์ ์ต์ ํํ๊ณ , JavaScript ์คํ์ ์ต์ ํํ๊ณ , DOM์ ์ต์ ํํ๊ณ , ๋ ์ด์์ ์ค๋์ฑ์ ์ค์ด๊ณ , ๋ธ๋ผ์ฐ์ ์บ์ฑ์ ํ์ฉํจ์ผ๋ก์จ ์น์ฌ์ดํธ์ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. ์ฌ์ฉ ๊ฐ๋ฅํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ CRP๋ฅผ ๋ถ์ํ๊ณ ์ต์ ํํ ์์ญ์ ์๋ณํ๋ ๊ฒ์ ์์ง ๋ง์ธ์. ์ด๋ฌํ ๋จ๊ณ๋ฅผ ํตํด ์น์ฌ์ดํธ๊ฐ ๋น ๋ฅด๊ฒ ๋ก๋๋๊ณ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๊ธ์ ์ ์ธ ๊ฒฝํ์ ์ ๊ณตํ ์ ์๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค. ์ธํฐ๋ท์ ์ ์ ๋ ๊ธ๋ก๋ฒํ๋๊ณ ์์ต๋๋ค. ๋น ๋ฅด๊ณ ์ ๊ทผ ๊ฐ๋ฅํ ์น์ฌ์ดํธ๋ ๋ ์ด์ ๋ชจ๋ฒ ์ฌ๋ก๊ฐ ์๋๋ผ ๋ค์ํ ์ ์ฌ ๊ณ ๊ฐ์๊ฒ ๋๋ฌํ๊ธฐ ์ํ ํ์ ์์์ ๋๋ค.