๊ธฐ๊ธฐ๋ ๋คํธ์ํฌ ์ํ์ ๊ด๊ณ์์ด ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์ต์ ์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋ณด์ฅํ๋ ๋ฐ์ํ ์ด๋ฏธ์ง ๋ฐ ์ ์ํ ๋ก๋ฉ ๊ธฐ์ ์ ๋ํ ์ข ํฉ ๊ฐ์ด๋์ ๋๋ค.
๋ฐ์ํ ์ด๋ฏธ์ง: ๊ธ๋ก๋ฒ ์น์ ์ํ ์ ์ํ ๋ก๋ฉ
์ค๋๋ ๊ณผ ๊ฐ์ด ์ํธ ์ฐ๊ฒฐ๋ ์ธ์์์ ์น์ฌ์ดํธ๋ ๋ค์ํ ๊ธฐ๊ธฐ, ํ๋ฉด ํฌ๊ธฐ, ๋คํธ์ํฌ ์กฐ๊ฑด์ ๊ฑธ์ณ ์ฌ์ฉ์์๊ฒ ์ํํ ๊ฒฝํ์ ์ ๊ณตํด์ผ ํฉ๋๋ค. ๋ฐ์ํ ์ด๋ฏธ์ง๋ ์ด๋ฌํ ๋ ธ๋ ฅ์ ์ด์์ด๋ฉฐ, ์ฌ์ฉ์๊ฐ ์ ์ ํ ํฌ๊ธฐ์ ์ต์ ํ๋ ์ด๋ฏธ์ง๋ฅผ ๋ฐ์ ํ์ด์ง ๋ก๋ ์๊ฐ์ ๋จ์ถํ๊ณ , ๋์ญํญ ์๋น๋ฅผ ์ค์ด๋ฉฐ, ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ด ๊ฐ์ด๋๋ ๋ฐ์ํ ์ด๋ฏธ์ง์ ์ ์ํ ๋ก๋ฉ ๊ธฐ์ ์ ์ธ๊ณ๋ฅผ ๊น์ด ํ๊ณ ๋ค์ด, ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํด ์น์ฌ์ดํธ๋ฅผ ์ต์ ํํ ์ ์๋๋ก ์ง์ํฉ๋๋ค.
๋ฌธ์ ์ดํดํ๊ธฐ: ๋จ์ผ ์ฌ์ด์ฆ ์ ๊ทผ ๋ฐฉ์์ ์คํจ
๊ธฐ๊ธฐ๋ ๋คํธ์ํฌ์ ๊ด๊ณ์์ด ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ๋์ผํ ๋์ฉ๋ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ ์ฌ์์ ์ง๋ฆ๊ธธ์ ๋๋ค. ๋๋ฆฐ ์ฐ๊ฒฐ์ ์ฌ์ฉํ๋ ๋ชจ๋ฐ์ผ ์ฌ์ฉ์๋ ๊ณ ํต์ค๋ฌ์ธ ์ ๋๋ก ๋๋ฆฐ ํ์ด์ง ๋ก๋ ์๊ฐ์ ๊ฒช๊ฒ ๋ ๊ฒ์ด๋ฉฐ, ๊ณ ํด์๋ ๋์คํ๋ ์ด๋ฅผ ๊ฐ์ง ๋ฐ์คํฌํฑ ์ฌ์ฉ์๋ ๊ธฐ๋ํ๋ ์๊ฐ์ ํ์ง์ ์ป์ง ๋ชปํ ์ ์์ต๋๋ค. ๋ฐ๋ก ์ด ์ง์ ์์ ๋ฐ์ํ ์ด๋ฏธ์ง๊ฐ ๊ตฌ์ํฌ์๋ก ๋ฑ์ฅํฉ๋๋ค.
๋ฐ์ํ ์ด๋ฏธ์ง: ์ฌ๋ฐ๋ฅธ ์ปจํ ์คํธ์ ์ฌ๋ฐ๋ฅธ ์ด๋ฏธ์ง ์ ๊ณตํ๊ธฐ
๋ฐ์ํ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ๋ฉด ํ๋ฉด ํฌ๊ธฐ, ๊ธฐ๊ธฐ ํฝ์ ๋น์จ(DPR), ๋คํธ์ํฌ ๋์ญํญ๊ณผ ๊ฐ์ ๋ค์ํ ์์ธ์ ๋ฐ๋ผ ๋์ผํ ์ด๋ฏธ์ง์ ๋ค๋ฅธ ๋ฒ์ ์ ์ ๊ณตํ ์ ์์ต๋๋ค. ๋ชฉํ๋ ์ฌ์ฉ์์ ํน์ ํ๊ฒฝ์ ์๊ฐ์ ์ผ๋ก ๋งค๋ ฅ์ ์ด๋ฉด์๋ ์ต์ ํ๋ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ ๋๋ค.
๋ฐ์ํ ์ด๋ฏธ์ง ๊ตฌํ์ ์ํ ํต์ฌ ๊ธฐ์
srcset์์ฑ: ์ด ์์ฑ์ ์ฌ์ฉํ๋ฉด ์ด๋ฏธ์ง ์์ค ๋ชฉ๋ก๊ณผ ํด๋น ๋๋น ๋๋ ํฝ์ ๋ฐ๋๋ฅผ ์ง์ ํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ฉด ๋ธ๋ผ์ฐ์ ๋ ์ฌ์ฉ์์ ๊ธฐ๊ธฐ ๋ฐ ๋คํธ์ํฌ์ ๋ํ ์ดํด๋ฅผ ๋ฐํ์ผ๋ก ๊ฐ์ฅ ์ ์ ํ ์ด๋ฏธ์ง๋ฅผ ์ ํํฉ๋๋ค.sizes์์ฑ: ์ด ์์ฑ์srcset๊ณผ ํจ๊ป ์๋ํ์ฌ ๋ธ๋ผ์ฐ์ ์ ์ด๋ฏธ์ง๊ฐ ๋ค๋ฅธ ํ๋ฉด ํฌ๊ธฐ์์ ์ด๋ป๊ฒ ํ์๋ ์ง ์๋ ค์ค๋๋ค. ์ด๋ฅผ ํตํด ๋ธ๋ผ์ฐ์ ๋ ๋ค์ด๋ก๋ํ ์ ์ ํ ์ด๋ฏธ์ง๋ฅผ ์ ํํ๊ฒ ๊ณ์ฐํ ์ ์์ต๋๋ค.<picture>์์: ์ด ์์๋ ์ด๋ฏธ์ง ์ ํ์ ๋ํด ํจ์ฌ ๋ ๋ง์ ์ ์ด๊ถ์ ์ ๊ณตํฉ๋๋ค. ๊ฐ๊ฐ ๊ณ ์ ํ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์srcset์์ฑ์ ๊ฐ์ง ์ฌ๋ฌ<source>์์๋ฅผ ์ง์ ํ ์ ์์ต๋๋ค. ์ด๋ ๋ธ๋ผ์ฐ์ ์ง์์ ๋ฐ๋ผ ๋ค๋ฅธ ์ด๋ฏธ์ง ํ์์ ์ ๊ณตํ๊ฑฐ๋, ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ์์ ํ ๋ค๋ฅธ ์ด๋ฏธ์ง๋ฅผ ํ์ํ๋ ค๋ ์ํธ ๋๋ ์ ์ ํนํ ์ ์ฉํฉ๋๋ค.
์์ : srcset๊ณผ sizes ์ฌ์ฉํ๊ธฐ
ํ๋ฉด ๋๋น์ ๋ฐ๋ผ ๋ค๋ฅธ ํฌ๊ธฐ๋ก ํ์ํ๊ณ ์ถ์ ์ด๋ฏธ์ง๊ฐ ์๋ค๊ณ ๊ฐ์ ํด ๋ณด๊ฒ ์ต๋๋ค. ์ด ์ด๋ฏธ์ง์๋ ์ธ ๊ฐ์ง ๋ฒ์ ์ด ์์ต๋๋ค:
image-320w.jpg(๋๋น 320ํฝ์ )image-640w.jpg(๋๋น 640ํฝ์ )image-1280w.jpg(๋๋น 1280ํฝ์ )
๋ค์์ srcset๊ณผ sizes๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์ํ ์ด๋ฏธ์ง๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์
๋๋ค:
<img srcset="image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w" sizes="(max-width: 320px) 100vw, (max-width: 640px) 50vw, 1280px" src="image-640w.jpg" alt="์ค๋ช
์ ์ธ alt ํ
์คํธ">
์ค๋ช :
srcset์์ฑ์ ์ฌ์ฉ ๊ฐ๋ฅํ ์ด๋ฏธ์ง ์์ค์ ๊ทธ ๋๋น๋ฅผ ๋์ดํฉ๋๋ค (์:image-320w.jpg 320w).sizes์์ฑ์ ์ด๋ฏธ์ง๊ฐ ๋ค๋ฅธ ํ๋ฉด ํฌ๊ธฐ์์ ์ด๋ป๊ฒ ํ์๋ ์ง๋ฅผ ๋ธ๋ผ์ฐ์ ์ ์๋ ค์ค๋๋ค. ์ด ์์ ์์๋:- ํ๋ฉด ๋๋น๊ฐ 320px ์ดํ์ด๋ฉด ์ด๋ฏธ์ง๊ฐ ๋ทฐํฌํธ ๋๋น์ 100%๋ฅผ ์ฐจ์งํฉ๋๋ค (
100vw). - ํ๋ฉด ๋๋น๊ฐ 321px์์ 640px ์ฌ์ด์ด๋ฉด ์ด๋ฏธ์ง๊ฐ ๋ทฐํฌํธ ๋๋น์ 50%๋ฅผ ์ฐจ์งํฉ๋๋ค (
50vw). - ํ๋ฉด ๋๋น๊ฐ 640px๋ณด๋ค ํฌ๋ฉด ์ด๋ฏธ์ง๊ฐ 1280px๋ฅผ ์ฐจ์งํฉ๋๋ค.
- ํ๋ฉด ๋๋น๊ฐ 320px ์ดํ์ด๋ฉด ์ด๋ฏธ์ง๊ฐ ๋ทฐํฌํธ ๋๋น์ 100%๋ฅผ ์ฐจ์งํฉ๋๋ค (
src์์ฑ์srcset๊ณผsizes๋ฅผ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํ ๋์ฒด ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํฉ๋๋ค.
์์ : ์ํธ ๋๋ ์
์ ์ํด <picture> ์์ ์ฌ์ฉํ๊ธฐ
<picture> ์์๋ ํ๋ฉด ํฌ๊ธฐ๋ ๊ธฐ๊ธฐ ๋ฐฉํฅ์ ๋ฐ๋ผ ๋ค๋ฅธ ์ด๋ฏธ์ง๋ฅผ ํ์ํ๋ ์ํธ ๋๋ ์
๊ณผ ๊ฐ์ ๋ ๋ณต์กํ ์๋๋ฆฌ์ค๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ์์๋ ๊ฐ๋
์ฑ์ ๋์ด๊ธฐ ์ํด ์ด๋ฏธ์ง์ ์๋ฆฐ ๋ฒ์ ์ ๋ณด์ฌ์ค ์ ์์ต๋๋ค.
<picture>
<source media="(max-width: 768px)" srcset="image-mobile.jpg">
<source media="(min-width: 769px)" srcset="image-desktop.jpg">
<img src="image-desktop.jpg" alt="์ค๋ช
์ ์ธ alt ํ
์คํธ">
</picture>
์ค๋ช :
<source>์์๋ค์ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ๋ฐ๋ผ ๋ค๋ฅธ ์ด๋ฏธ์ง ์์ค๋ฅผ ์ง์ ํฉ๋๋ค.- ์ด ์์ ์์ ํ๋ฉด ๋๋น๊ฐ 768px ์ดํ์ด๋ฉด
image-mobile.jpg๊ฐ ํ์๋ฉ๋๋ค. - ํ๋ฉด ๋๋น๊ฐ 768px๋ณด๋ค ํฌ๋ฉด
image-desktop.jpg๊ฐ ํ์๋ฉ๋๋ค. <img>์์๋<picture>์์๋ฅผ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํ ๋์ฒด ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํฉ๋๋ค.
์ ์ํ ๋ก๋ฉ: ๋คํธ์ํฌ ์กฐ๊ฑด์ ๋ง๊ฒ ์ด๋ฏธ์ง ์ ์ก ์ต์ ํํ๊ธฐ
๋ฐ์ํ ์ด๋ฏธ์ง๊ฐ ์ ์ ํ ํฌ๊ธฐ์ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ฐ๋ฉด, ์ ์ํ ๋ก๋ฉ์ ๋คํธ์ํฌ ์กฐ๊ฑด์ ๋ฐ๋ผ ์ด๋ฏธ์ง ์ ์ก์ ์ต์ ํํ์ฌ ํ ๋จ๊ณ ๋ ๋์๊ฐ๋๋ค. ์ด๋ ๋๋ฆฐ ์ฐ๊ฒฐ์ ์ฌ์ฉํ๋ ์ฌ์ฉ์๊ฐ ์ธ์ง๋๋ ๋ก๋ฉ ์๊ฐ๊ณผ ๋์ญํญ ์๋น๋ฅผ ์ต์ํํ๋ ๋ฐฉ์์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ๋ฐ๋๋ก ๋ณด์ฅํฉ๋๋ค.
์ ์ํ ๋ก๋ฉ ๊ตฌํ์ ์ํ ํต์ฌ ๊ธฐ์
- ์ง์ฐ ๋ก๋ฉ (Lazy Loading): ์ด ๊ธฐ์ ์ ์ด๋ฏธ์ง๊ฐ ๋ทฐํฌํธ์ ๋ค์ด์ค๊ธฐ ์ง์ ๊น์ง ์ด๋ฏธ์ง ๋ก๋ฉ์ ์ง์ฐ์ํต๋๋ค. ์ด๋ ํนํ ์ด๋ฏธ์ง๊ฐ ๋ง์ ํ์ด์ง์์ ์ด๊ธฐ ํ์ด์ง ๋ก๋ ์๊ฐ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ์ ์ง์ ๋ก๋ฉ (Progressive Loading): ์ด ๊ธฐ์ ์ ๋จผ์ ์ ํด์๋ ๋ฒ์ ์ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํ ๋ค์, ์ฌ์ฉ ๊ฐ๋ฅํด์ง์ ๋ฐ๋ผ ์ ์ฐจ์ ์ผ๋ก ๊ณ ํด์๋ ๋ฒ์ ์ ๋ก๋ํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ด๋ ์ฌ์ฉ์์๊ฒ ์ด๋ฏธ์ง๊ฐ ๋ก๋ฉ๋๊ณ ์๋ค๋ ์๊ฐ์ ์ ํธ๋ฅผ ์ฃผ์ด ์ธ์ง๋๋ ๋ก๋ฉ ์๊ฐ์ ๊ฐ์ ํ ์ ์์ต๋๋ค.
- ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ (CDNs): CDN์ ์น์ฌ์ดํธ์ ์ฝํ ์ธ ๋ฅผ ์ ์ธ๊ณ ์ฌ๋ฌ ์๋ฒ์ ๋ถ์ฐ์ํต๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๋ ์ง๋ฆฌ์ ์ผ๋ก ๊ฐ๊น์ด ์๋ฒ์์ ์ด๋ฏธ์ง๋ฅผ ๋ค์ด๋ก๋ํ์ฌ ์ง์ฐ ์๊ฐ์ ์ค์ด๊ณ ๋ค์ด๋ก๋ ์๋๋ฅผ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ์ด๋ฏธ์ง ์ต์ ํ: ์ด๋ฏธ์ง๋ฅผ ์์ถํ๊ณ ๋ถํ์ํ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ ๊ฑฐํ์ฌ ์ต์ ํํ๋ฉด ์๊ฐ์ ํ์ง์ ํฌ์ํ์ง ์๊ณ ๋ ํ์ผ ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ์ค์ผ ์ ์์ต๋๋ค.
- ์ฐ์ ์์ ํํธ:
fetchpriority์์ฑ์ ์ฌ์ฉํ๋ฉด ์ด๋ฏธ์ง ๋ก๋ฉ์ ์๋์ ์ฐ์ ์์๋ฅผ ์ง์ ํ ์ ์์ต๋๋ค. ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ค์ํ ์ด๋ฏธ์ง๋ฅผ ์ฐ์ ์ ์ผ๋ก ๋ก๋ํ๋ ๋ฐ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์ง์ฐ ๋ก๋ฉ (Lazy Loading)
์ง์ฐ ๋ก๋ฉ์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ํฅ์์ํค๋ ์ธ๊ธฐ ์๋ ๊ธฐ์ ์ ๋๋ค. ์ด๋ฏธ์ง๊ฐ ๋ทฐํฌํธ์ ๋ค์ด์ค๊ธฐ ์ง์ ๊น์ง ๋ก๋ฉ์ ์ง์ฐ์ํค๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ด๋ ํนํ ์ด๋ฏธ์ง๊ฐ ๋ง์ ํ์ด์ง์์ ์ด๊ธฐ ํ์ด์ง ๋ก๋ ์๊ฐ์ ํฌ๊ฒ ์ค์ผ ์ ์์ต๋๋ค.
๊ตฌํ:
์ง์ฐ ๋ก๋ฉ์ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์๋ ์ฌ๋ฌ ๊ฐ์ง๊ฐ ์์ต๋๋ค:
- ๋ค์ดํฐ๋ธ ์ง์ฐ ๋ก๋ฉ: ๋๋ถ๋ถ์ ์ต์ ๋ธ๋ผ์ฐ์ ๋ ์ด์
loading="lazy"์์ฑ์ ์ฌ์ฉํ์ฌ ๋ค์ดํฐ๋ธ ์ง์ฐ ๋ก๋ฉ์ ์ง์ํฉ๋๋ค. - ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ: LazySizes ๋ฐ lozad.js์ ๊ฐ์ ์ฌ๋ฌ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๊ตฌํ ๋ธ๋ผ์ฐ์ ์ง์ ๋ฐ ์ฌ์ฉ์ ์ง์ ์ฝ๋ฐฑ๊ณผ ๊ฐ์ ๋ ๊ณ ๊ธ ์ง์ฐ ๋ก๋ฉ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
์์ (๋ค์ดํฐ๋ธ ์ง์ฐ ๋ก๋ฉ):
<img src="image.jpg" alt="์ค๋ช
์ ์ธ alt ํ
์คํธ" loading="lazy">
์์ (LazySizes):
<img data-src="image.jpg" alt="์ค๋ช
์ ์ธ alt ํ
์คํธ" class="lazyload">
์ฐธ๊ณ : ์ง์ฐ ๋ก๋ฉ์ ์ฌ์ฉํ ๋, ์ด๋ฏธ์ง๊ฐ ๋ก๋๋ ๋ ๋ ์ด์์ ์ด๋์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ด๋ฏธ์ง ์์์ ๋์ด์ ๋๋น๋ฅผ ์ง์ ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์ ์ง์ ๋ก๋ฉ (Progressive Loading)
์ ์ง์ ๋ก๋ฉ์ ๋จผ์ ์ ํด์๋ ๋ฒ์ ์ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํ ๋ค์, ์ฌ์ฉ ๊ฐ๋ฅํด์ง์ ๋ฐ๋ผ ์ ์ฐจ์ ์ผ๋ก ๊ณ ํด์๋ ๋ฒ์ ์ ๋ก๋ํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ด๋ ์ฌ์ฉ์์๊ฒ ์ด๋ฏธ์ง๊ฐ ๋ก๋ฉ๋๊ณ ์๋ค๋ ์๊ฐ์ ์ ํธ๋ฅผ ์ฃผ์ด ์ธ์ง๋๋ ๋ก๋ฉ ์๊ฐ์ ๊ฐ์ ํ ์ ์์ต๋๋ค.
๊ตฌํ:
์ ์ง์ ๋ก๋ฉ์ ๋ค์๊ณผ ๊ฐ์ ๋ค์ํ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ๊ตฌํํ ์ ์์ต๋๋ค:
- ๋ธ๋ฌ-์ ๊ธฐ๋ฒ: ๋จผ์ ๋งค์ฐ ๋ฎ์ ํด์๋์ ํ๋ฆฟํ ๋ฒ์ ์ ์ด๋ฏธ์ง๋ฅผ ํ์ํ ๋ค์, ๋ก๋๋จ์ ๋ฐ๋ผ ์ ์ฐจ ์ ๋ช ํ ๋ฒ์ ์ ํ์ํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค.
- LQIP (์ ํ์ง ์ด๋ฏธ์ง ํ๋ ์ด์คํ๋): ์ ์ฒด ํด์๋ ์ด๋ฏธ์ง๊ฐ ๋ก๋๋ ๋๊น์ง ์๊ณ ๊ณ ๋๋ก ์์ถ๋ ๋ฒ์ ์ ์ด๋ฏธ์ง๋ฅผ ํ๋ ์ด์คํ๋๋ก ํ์ํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค.
์์ (๋ธ๋ฌ-์ ๊ธฐ๋ฒ):
์ด ๊ธฐ์ ์ ์ผ๋ฐ์ ์ผ๋ก CSS ํํฐ๋ฅผ ์ฌ์ฉํ์ฌ ์ด๊ธฐ ์ ํด์๋ ์ด๋ฏธ์ง๋ฅผ ํ๋ฆฌ๊ฒ ์ฒ๋ฆฌํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค.
์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ (CDNs)
CDN์ ์ ์ํ ๋ก๋ฉ์ ์ค์ํ ๊ตฌ์ฑ ์์์ ๋๋ค. ์น์ฌ์ดํธ์ ์ฝํ ์ธ ๋ฅผ ์ ์ธ๊ณ ์ฌ๋ฌ ์๋ฒ์ ๋ถ์ฐ์ํต๋๋ค. ์ด๋ฅผ ํตํด ์ฌ์ฉ์๋ ์ง๋ฆฌ์ ์ผ๋ก ๊ฐ๊น์ด ์๋ฒ์์ ์ด๋ฏธ์ง๋ฅผ ๋ค์ด๋ก๋ํ์ฌ ์ง์ฐ ์๊ฐ์ ์ค์ด๊ณ ๋ค์ด๋ก๋ ์๋๋ฅผ ํฅ์์ํฌ ์ ์์ต๋๋ค.
CDN ์ฌ์ฉ์ ์ด์ :
- ์ง์ฐ ์๊ฐ ๊ฐ์: CDN์ ์ฌ์ฉ์์ ์ฝํ ์ธ ์ฌ์ด์ ๊ฑฐ๋ฆฌ๋ฅผ ์ต์ํํ์ฌ ๋ค์ด๋ก๋ ์๋๋ฅผ ๋์ ๋๋ค.
- ๋์ญํญ ์ฆ๊ฐ: CDN์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ํฅ์ ์ฃผ์ง ์๊ณ ๋๋์ ํธ๋ํฝ์ ์ฒ๋ฆฌํ ์ ์์ต๋๋ค.
- ์ ๋ขฐ์ฑ ํฅ์: CDN์ ์ด์คํ๋ฅผ ์ ๊ณตํ์ฌ ์๋ฒ ์ค ํ๋๊ฐ ๋ค์ด๋๋๋ผ๋ ์ฝํ ์ธ ๋ฅผ ๊ณ์ ์ฌ์ฉํ ์ ์๋๋ก ๋ณด์ฅํฉ๋๋ค.
์ธ๊ธฐ ์๋ CDN ์ ๊ณต์ ์ฒด:
- Cloudflare
- Amazon CloudFront
- Akamai
- Fastly
์ด๋ฏธ์ง ์ต์ ํ
์ด๋ฏธ์ง ์ต์ ํ๋ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ํฅ์์ํค๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด๋ ์๊ฐ์ ํ์ง์ ํฌ์ํ์ง ์๊ณ ์ด๋ฏธ์ง๋ฅผ ์์ถํ๊ณ ๋ถํ์ํ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ ๊ฑฐํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค.
์ด๋ฏธ์ง ์ต์ ํ ๊ธฐ์ :
- ์์ถ: ์์ค ๋๋ ๋ฌด์์ค ์์ถ์ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง์ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค.
- ํฌ๋งท ์ ํ: ๋ค์ํ ์ ํ์ ์ด๋ฏธ์ง์ ์ ํฉํ ์ด๋ฏธ์ง ํฌ๋งท์ ์ ํํฉ๋๋ค(์: ์ฌ์ง์๋ JPEG, ํฌ๋ช ๋๊ฐ ์๋ ๊ทธ๋ํฝ์๋ PNG, ์ต์ ๋ธ๋ผ์ฐ์ ์๋ WebP).
- ๋ฉํ๋ฐ์ดํฐ ์ ๊ฑฐ: ์นด๋ฉ๋ผ ์ ๋ณด ๋ฐ ์ ์๊ถ ์ธ๋ถ ์ ๋ณด์ ๊ฐ์ ๋ถํ์ํ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ ๊ฑฐํฉ๋๋ค.
- ๋ฆฌ์ฌ์ด์ง: ์ด๋ฏธ์ง๊ฐ ํ์ ํฌ๊ธฐ๋ณด๋ค ํฌ์ง ์๋๋ก ํฉ๋๋ค.
์ด๋ฏธ์ง ์ต์ ํ ๋๊ตฌ:
- TinyPNG
- ImageOptim
- Kraken.io
- ShortPixel
์ฐ์ ์์ ํํธ (fetchpriority)
fetchpriority ์์ฑ์ ์ฌ์ฉํ๋ฉด ์ด๋ฏธ์ง ๋ก๋ฉ์ ์๋์ ์ฐ์ ์์๋ฅผ ์ง์ ํ ์ ์์ต๋๋ค. ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ค์ํ ์ด๋ฏธ์ง๋ฅผ ์ฐ์ ์ ์ผ๋ก ๋ก๋ํ๋ ๋ฐ ์ฌ์ฉํ ์ ์์ต๋๋ค.
fetchpriority์ ๊ฐ:
high: ์ด๋ฏธ์ง ๊ฐ์ ธ์ค๊ธฐ์ ๋ํ ๋์ ์ฐ์ ์์๋ฅผ ๋ํ๋ ๋๋ค.low: ์ด๋ฏธ์ง ๊ฐ์ ธ์ค๊ธฐ์ ๋ํ ๋ฎ์ ์ฐ์ ์์๋ฅผ ๋ํ๋ ๋๋ค.auto: ๋ธ๋ผ์ฐ์ ๊ฐ ์ฐ์ ์์๋ฅผ ๊ฒฐ์ ํด์ผ ํจ์ ๋ํ๋ ๋๋ค.
์์ :
<img src="hero-image.jpg" alt="์ค๋ช
์ ์ธ alt ํ
์คํธ" fetchpriority="high">
๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํ ์ฌ๋ฐ๋ฅธ ์ด๋ฏธ์ง ํฌ๋งท ์ ํ
์ฌ๋ฐ๋ฅธ ์ด๋ฏธ์ง ํฌ๋งท์ ์ ํํ๋ ๊ฒ์ ๊ธ๋ก๋ฒ ์น์ ์ํ ์ด๋ฏธ์ง ์ต์ ํ์ ๋ ๋ค๋ฅธ ์ค์ํ ์ธก๋ฉด์ ๋๋ค. ๋ค์ํ ์ด๋ฏธ์ง ํฌ๋งท์ ์์ถ, ํ์ง ๋ฐ ๋ธ๋ผ์ฐ์ ์ง์ ์์ค์ด ๋ค๋ฆ ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ธ๊ธฐ ์๋ ํฌ๋งท์ ๋ํ ์ค๋ช ์ ๋๋ค:
- JPEG: ์ฌ์ง ๋ฐ ๋ณต์กํ ์์ ๊ทธ๋ผ๋ฐ์ด์ ์ด ์๋ ์ด๋ฏธ์ง์ ์ด์์ ์ธ ๋๋ฆฌ ์ง์๋๋ ํฌ๋งท์ ๋๋ค. ์ข์ ์์ถ๋ฅ ์ ์ ๊ณตํ์ง๋ง ๋์ ์์ถ ์์ค์์๋ ๋์ ๋๋ ์ํฐํฉํธ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
- PNG: ์ ๋ช ํ ์ , ํ ์คํธ ๋ฐ ํฌ๋ช ๋๊ฐ ์๋ ์ด๋ฏธ์ง์ ๊ฐ์ฅ ์ ํฉํฉ๋๋ค. ๋ฌด์์ค ์์ถ์ ์ ๊ณตํ์ฌ ์ด๋ฏธ์ง ํ์ง์ ๋ณด์กดํ์ง๋ง ์ผ๋ฐ์ ์ผ๋ก JPEG๋ณด๋ค ํ์ผ ํฌ๊ธฐ๊ฐ ํฝ๋๋ค.
- GIF: ์ฃผ๋ก ์ ๋๋ฉ์ด์ ์ด๋ฏธ์ง ๋ฐ ๊ฐ๋จํ ๊ทธ๋ํฝ์ ์ฌ์ฉ๋ฉ๋๋ค. ํฌ๋ช ๋๋ฅผ ์ง์ํ์ง๋ง ์์ ํ๋ ํธ๊ฐ ์ ํ์ ์ ๋๋ค(256์).
- WebP: ๊ตฌ๊ธ์ด ๊ฐ๋ฐํ ์ต์ ์ด๋ฏธ์ง ํฌ๋งท์ผ๋ก, JPEG ๋ฐ PNG์ ๋นํด ์ฐ์ํ ์์ถ๋ฅ ๊ณผ ํ์ง์ ์ ๊ณตํฉ๋๋ค. ์์ค ๋ฐ ๋ฌด์์ค ์์ถ, ํฌ๋ช ๋ ๋ฐ ์ ๋๋ฉ์ด์ ์ ๋ชจ๋ ์ง์ํฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ WebP๋ฅผ ์์ ํ ์ง์ํ์ง ์์ ์ ์์ต๋๋ค.
- AVIF: ํนํ ๋ณต์กํ ์ด๋ฏธ์ง์ ๋ํด WebP๋ณด๋ค ํจ์ฌ ๋ ๋์ ์์ถ๋ฅ ์ ์ ๊ณตํ๋ ๋์ฑ ํ๋์ ์ธ ํฌ๋งท์ ๋๋ค. WebP์ ์ ์ฌํ ์ฅ์ ์ด ์์ง๋ง ์์ง ๋ธ๋ผ์ฐ์ ์ง์์ด ์ ํ์ ์ ๋๋ค.
๊ถ์ฅ ์ฌํญ: ์ต์ ๋ธ๋ผ์ฐ์ ์๋ WebP ๋๋ AVIF๋ฅผ ์ฌ์ฉํ๊ณ ๊ตฌํ ๋ธ๋ผ์ฐ์ ์๋ JPEG ๋๋ PNG ๋์ฒด ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค. <picture> ์์๋ ์ด๋ฌํ ์๋๋ฆฌ์ค๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐ ์๋ฒฝํฉ๋๋ค.
์์ : ํฌ๋งท ๋์ฒด๋ฅผ ์ํ <picture> ์ฌ์ฉ
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="์ค๋ช
์ ์ธ alt ํ
์คํธ">
</picture>
์ด ์ฝ๋๋ ๋ธ๋ผ์ฐ์ ๊ฐ WebP ๋ฒ์ ์ ์ง์ํ๋ฉด ๊ทธ๊ฒ์ ์ฌ์ฉํ๊ณ , ๊ทธ๋ ์ง ์์ผ๋ฉด JPEG ๋ฒ์ ์ผ๋ก ๋์ฒดํ๋๋ก ์ง์ํฉ๋๋ค. type ์์ฑ์ ๋ธ๋ผ์ฐ์ ๊ฐ ํ์ผ์ ๋ค์ด๋ก๋ํ์ง ์๊ณ ๋ ํด๋น ํฌ๋งท์ ์ฒ๋ฆฌํ ์ ์๋์ง ์ ์ํ๊ฒ ํ๋จํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
๋ฐ์ํ ์ด๋ฏธ์ง ๋ฐ ์ ์ํ ๋ก๋ฉ ๊ตฌํ: ๋จ๊ณ๋ณ ๊ฐ์ด๋
๋ค์์ ์น์ฌ์ดํธ์ ๋ฐ์ํ ์ด๋ฏธ์ง์ ์ ์ํ ๋ก๋ฉ์ ๊ตฌํํ๊ธฐ ์ํ ์ค์ฉ์ ์ธ ๊ฐ์ด๋์ ๋๋ค:
- ์น์ฌ์ดํธ์ ์ด๋ฏธ์ง ์ฌ์ฉ๋ ๋ถ์: ๊ฐ์ฅ ์์ฃผ ์ฌ์ฉ๋๊ณ ํ์ผ ํฌ๊ธฐ๊ฐ ๊ฐ์ฅ ํฐ ์ด๋ฏธ์ง๋ฅผ ์๋ณํฉ๋๋ค.
- ๋ค์ํ ์ด๋ฏธ์ง ํฌ๊ธฐ ์์ฑ: ์ด๋ฏธ์ง ํธ์ง ์ํํธ์จ์ด๋ ์ ์ฉ ์ด๋ฏธ์ง ์ฒ๋ฆฌ ์๋น์ค๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ ์ด๋ฏธ์ง์ ์ฌ๋ฌ ํด์๋ ๋ฒ์ ์ ์์ฑํฉ๋๋ค.
srcset๊ณผsizes๋ฅผ ์ฌ์ฉํ ๋ฐ์ํ ์ด๋ฏธ์ง ๊ตฌํ:srcset๊ณผsizes์์ฑ์ ์ฌ์ฉํ์ฌ ํ๋ฉด ํฌ๊ธฐ์ ๋ทฐํฌํธ ๋๋น์ ๋ฐ๋ผ ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ค ์ด๋ฏธ์ง๋ฅผ ๋ค์ด๋ก๋ํ ์ง ์๋ ค์ค๋๋ค.<picture>์์ ์ฌ์ฉ ๊ณ ๋ ค: ์ํธ ๋๋ ์ ๋ฐ ํฌ๋งท ๋์ฒด์ ๊ฐ์ ๋ ๋ณต์กํ ์๋๋ฆฌ์ค๋ฅผ ์ํด<picture>์์๋ฅผ ์ฌ์ฉํฉ๋๋ค.- ์ง์ฐ ๋ก๋ฉ ๊ตฌํ: ๋ค์ดํฐ๋ธ ์ง์ฐ ๋ก๋ฉ ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง๊ฐ ๋ทฐํฌํธ์ ๋ค์ด์ค๊ธฐ ์ง์ ๊น์ง ๋ก๋ฉ์ ์ง์ฐ์ํต๋๋ค.
- ์ด๋ฏธ์ง ์ต์ ํ: ์ด๋ฏธ์ง ์ต์ ํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง๋ฅผ ์์ถํ๊ณ ๋ถํ์ํ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ ๊ฑฐํฉ๋๋ค.
- CDN ์ฌ์ฉ ๊ณ ๋ ค: CDN์ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง๋ฅผ ์ ์ธ๊ณ ์ฌ๋ฌ ์๋ฒ์ ๋ถ์ฐ์์ผ ์ง์ฐ ์๊ฐ์ ์ค์ด๊ณ ๋ค์ด๋ก๋ ์๋๋ฅผ ํฅ์์ํต๋๋ค.
- ๊ตฌํ ํ ์คํธ: ๋ค์ํ ๊ธฐ๊ธฐ์ ๋ธ๋ผ์ฐ์ ์์ ๊ตฌํ์ ์ฒ ์ ํ ํ ์คํธํ์ฌ ์ฌ๋ฐ๋ฅด๊ฒ ์๋ํ๋์ง ํ์ธํฉ๋๋ค. Google PageSpeed Insights ๋๋ WebPageTest์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ์ ์ฑ๋ฅ์ ๋ถ์ํฉ๋๋ค.
์ ๊ทผ์ฑ ๊ณ ๋ ค์ฌํญ
๋ฐ์ํ ์ด๋ฏธ์ง์ ์ ์ํ ๋ก๋ฉ์ ๊ตฌํํ ๋ ์ ๊ทผ์ฑ์ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- ์ค๋ช
์ ์ธ alt ํ
์คํธ ์ ๊ณต:
alt์์ฑ์ ์ด๋ฏธ์ง์ ๋ํ ๋์ฒด ํ ์คํธ๋ฅผ ์ ๊ณตํ๋ ๋ฐ ํ์์ ์ ๋๋ค. ์ด ํ ์คํธ๋ ์คํฌ๋ฆฐ ๋ฆฌ๋๊ฐ ์๊ฐ ์ฅ์ ์ธ ์ฌ์ฉ์์๊ฒ ์ด๋ฏธ์ง๋ฅผ ์ค๋ช ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. alt ํ ์คํธ๊ฐ ๊ฐ๊ฒฐํ๊ณ ์ ํํ๋ฉฐ ์ ์ตํ์ง ํ์ธํ์ญ์์ค. - ์ ์ ํ ์ข ํก๋น ์ ์ง: ์๊ณก์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ด๋ฏธ์ง๊ฐ ์ ์ ํ ์ข ํก๋น๋ฅผ ์ ์งํ๋๋ก ํฉ๋๋ค.
- ์ ์ ํ ๋๋น ์ฌ์ฉ: ์ ์๋ ฅ ์ฌ์ฉ์๊ฐ ์ฝ๊ฒ ๋ณผ ์ ์๋๋ก ์ด๋ฏธ์ง์ ๋ฐฐ๊ฒฝ ์ฌ์ด์ ์ถฉ๋ถํ ๋๋น๊ฐ ์๋์ง ํ์ธํฉ๋๋ค.
์ฑ๋ฅ ์ธก์ ๋ฐ ๋ชจ๋ํฐ๋ง
๋ฐ์ํ ์ด๋ฏธ์ง์ ์ ์ํ ๋ก๋ฉ์ ๊ตฌํํ ํ์๋ ์ต์ ํ๊ฐ ์ํ๋ ํจ๊ณผ๋ฅผ ๋ด๊ณ ์๋์ง ํ์ธํ๊ธฐ ์ํด ์น์ฌ์ดํธ์ ์ฑ๋ฅ์ ์ธก์ ํ๊ณ ๋ชจ๋ํฐ๋งํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์ถ์ ํด์ผ ํ ์ฃผ์ ์งํ:
- ํ์ด์ง ๋ก๋ ์๊ฐ: ํ์ด์ง๊ฐ ์์ ํ ๋ก๋๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ.
- ์ด๋ฏธ์ง ๋ก๋ฉ ์๊ฐ: ์ด๋ฏธ์ง๊ฐ ๋ก๋๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ.
- ๋์ญํญ ์๋น๋: ํ์ด์ง๋ฅผ ๋ก๋ํ ๋ ์ ์ก๋๋ ๋ฐ์ดํฐ์ ์.
- ์ฌ์ฉ์ ์ฐธ์ฌ๋: ์ดํ๋ฅ , ํ์ด์ง์ ๋จธ๋ฌธ ์๊ฐ, ์ ํ์จ๊ณผ ๊ฐ์ ์งํ.
์ฑ๋ฅ ์ธก์ ๋ฐ ๋ชจ๋ํฐ๋ง ๋๊ตฌ:
- Google PageSpeed Insights
- WebPageTest
- GTmetrix
- Google Analytics
๊ธ๋ก๋ฒ ๊ณ ๋ ค์ฌํญ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํด ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ ๋ ๋ค์๊ณผ ๊ฐ์ ์ถ๊ฐ ์์๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
- ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด: ๋คํธ์ํฌ ์๋์ ์์ ์ฑ์ด ์ ์ธ๊ณ์ ์ผ๋ก ํฌ๊ฒ ๋ค๋ฅด๋ค๋ ๊ฒ์ ์ธ์ํ์ญ์์ค. ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด์ ๋ง๊ฒ ์ ์ํ ๋ก๋ฉ ์ ๋ต์ ์กฐ์ ํ์ญ์์ค. ์๋ฅผ ๋ค์ด, ๋๋ฆฌ๊ฑฐ๋ ๋ถ์์ ํ ์ฐ๊ฒฐ์ด ์๋ ์ง์ญ์ ์ฌ์ฉ์๋ ๋ ๊ณต๊ฒฉ์ ์ธ ์ด๋ฏธ์ง ์์ถ ๋ฐ ์ง์ฐ ๋ก๋ฉ์ ์ด์ ์ ๋๋ฆด ์ ์์ต๋๋ค.
- ๊ธฐ๊ธฐ ๋ค์์ฑ: ๊ณ ๊ธ ์ค๋งํธํฐ์์ ๊ตฌํ ํผ์ฒํฐ์ ์ด๋ฅด๊ธฐ๊น์ง ๊ธ๋ก๋ฒ ์ฌ์ฉ์๊ฐ ์ฌ์ฉํ๋ ๊ด๋ฒ์ํ ๊ธฐ๊ธฐ๋ฅผ ๊ณ ๋ คํ์ญ์์ค. ๋ฐ์ํ ์ด๋ฏธ์ง ๊ตฌํ์ด ๋ชจ๋ ๊ธฐ๊ธฐ์์ ์ ์๋ํ๋์ง ํ์ธํ์ญ์์ค.
- ๋ฌธํ์ ๋งฅ๋ฝ: ์ด๋ฏธ์ง๋ฅผ ์ ํํ ๋ ๋ฌธํ์ ์ฐจ์ด๋ฅผ ์ผ๋์ ๋์ญ์์ค. ์ด๋ฏธ์ง๊ฐ ๋ค๋ฅธ ์ง์ญ์ ๋์ ๊ณ ๊ฐ์๊ฒ ์ ์ ํ๊ณ ๊ด๋ จ์ฑ์ด ์๋์ง ํ์ธํ์ญ์์ค.
- ๋ฒ์ญ ๋ฐ ํ์งํ: ์น์ฌ์ดํธ๋ฅผ ๋ค๋ฅธ ์ธ์ด๋ก ๋ฒ์ญํ ๋ ์ด๋ฏธ์ง์ alt ํ ์คํธ๋ ๋ฒ์ญ๋๋๋ก ํ์ญ์์ค. ์ด๋ ์ ๊ทผ์ฑ๊ณผ SEO์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
- ๋ฒ๋ฅ ๋ฐ ๊ท์ ์ค์: ๋ค๋ฅธ ๊ตญ๊ฐ์ ๋ฐ์ดํฐ ๊ฐ์ธ ์ ๋ณด ๋ณดํธ ๋ฐ ๋ณด์๊ณผ ๊ด๋ จ๋ ๋ฒ์ ๋๋ ๊ท์ ์ ์๊ตฌ ์ฌํญ์ ์ธ์งํ์ญ์์ค. ์ด๋ฏธ์ง ์ต์ ํ ๋ฐ ์ ์ก ๊ดํ์ด ์ด๋ฌํ ์๊ตฌ ์ฌํญ์ ์ค์ํ๋์ง ํ์ธํ์ญ์์ค.
๊ธ๋ก๋ฒ ๊ตฌํ ์ฑ๊ณต ์ฌ๋ก
๋ง์ ๊ตญ์ ์กฐ์ง๋ค์ด ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๊ธฐ ์ํด ์ด๋ฌํ ๊ธฐ์ ์ ์ฑ๊ณต์ ์ผ๋ก ์ฌ์ฉํ๊ณ ์์ต๋๋ค. ๊ธ๋ก๋ฒ ์ ์์๊ฑฐ๋ ๋น์ฆ๋์ค๋ ์ฌ๋ฌ ๊ตญ๊ฐ์ PoP(Points of Presence)๋ฅผ ๋ CDN์ ํ์ฉํ์ฌ ํด๋น ์ง์ญ ์ฌ์ฉ์์๊ฒ ๋น ๋ฅธ ์ด๋ฏธ์ง ์ ์ก์ ๋ณด์ฅํ ์ ์์ต๋๋ค. ๋ค์ํ ๊ตญ์ ๋ ์๋ฅผ ๋์์ผ๋ก ํ๋ ๋ด์ค ๊ธฐ๊ด์ ๊ฐ์ง๋ ๋์ญํญ์ ๋ฐ๋ผ ๋ค๋ฅธ ์ด๋ฏธ์ง ๋ฒ์ ์ ์ ๊ณตํ์ฌ ๋๋ฆฐ ์ฐ๊ฒฐ์ ์ฌ์ฉํ๋ ์ฌ์ฉ์์ ์ ๊ทผ์ฑ์ ๋ณด์ฅํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
๋ฐ์ํ ์ด๋ฏธ์ง์ ์ ์ํ ๋ก๋ฉ์ ๊ธ๋ก๋ฒ ์ฌ์ฉ์์๊ฒ ๋น ๋ฅด๊ณ ํจ์จ์ ์ด๋ฉฐ ์ฌ์ฉ์ ์นํ์ ์ธ ์น์ฌ์ดํธ ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ํ ํ์ ๊ธฐ์ ์ ๋๋ค. ์ด๋ฌํ ๊ธฐ์ ์ ๊ตฌํํจ์ผ๋ก์จ ์น์ฌ์ดํธ์ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํค๊ณ , ๋์ญํญ ์๋น๋ฅผ ์ค์ด๋ฉฐ, ์ฌ์ฉ์ ์ฐธ์ฌ๋ฅผ ๋์ผ ์ ์์ต๋๋ค. ์น์ฌ์ดํธ์ ์ฑ๋ฅ์ ์ง์์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ๊ณ ํ์์ ๋ฐ๋ผ ์ ๋ต์ ์กฐ์ ํ์ฌ ์๋์ ์์ ๋๊ฐ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค.
์ด๋ฌํ ์ ๋ต์ ์ฑํํจ์ผ๋ก์จ ์น์ฌ์ดํธ๊ฐ ๋ค์ํ๊ณ ๊ตญ์ ์ ์ธ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ์ต์ ํ๋๋๋ก ๋ณด์ฅํ์ฌ ๋ชจ๋ ์ฌ๋์๊ฒ ๊ธ์ ์ ์ด๊ณ ๋งค๋ ฅ์ ์ธ ์จ๋ผ์ธ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.