ํ๋ก ํธ์๋ ์์ฐ ์ต์ ํ, ์น์ฌ์ดํธ ์ฑ๋ฅ ๊ฐ์ , ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ๊ฒฝํ ํฅ์์ ์ํ ์ด๋ฏธ์ง ์์ถ ๊ธฐ์ ๋ฐ WebP ์ด๋ฏธ์ง ํ์์ ๋ํ ์ข ํฉ ์๋ด์์ ๋๋ค.
ํ๋ก ํธ์๋ ์์ฐ ์ต์ ํ: ๊ธ๋ก๋ฒ ์น ์ฑ๋ฅ์ ์ํ ์ด๋ฏธ์ง ์์ถ ๋ฐ WebP
์ค๋๋ ์ ๋์งํธ ํ๊ฒฝ์์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ์ฌ์ฉ์๋ค์ ์์น๋ ๊ธฐ๊ธฐ์ ์๊ด์์ด ๋น ๋ฅธ ๋ก๋ฉ ์๊ฐ๊ณผ ์ํํ ๊ฒฝํ์ ๊ธฐ๋ํฉ๋๋ค. ์ต์ ์ ์น ์ฑ๋ฅ์ ๋ฌ์ฑํ๋ ๋ฐ ์์ด ์ค์ํ ์ธก๋ฉด์ ํ๋ก ํธ์๋ ์์ฐ ์ต์ ํ์ด๋ฉฐ, ๊ทธ์ค์์๋ ์ด๋ฏธ์ง ์ต์ ํ๊ฐ ์ค์ฌ์ ์ธ ์ญํ ์ ํฉ๋๋ค. ์ด๋ฏธ์ง๋ ์ข ์ข ์นํ์ด์ง ํฌ๊ธฐ์ ๊ฐ์ฅ ํฐ ๋ถ๋ถ์ ์ฐจ์งํ๋ฏ๋ก, ์ด๋ฏธ์ง ์์ถ๊ณผ WebP์ ๊ฐ์ ํจ์จ์ ์ธ ์ด๋ฏธ์ง ํ์์ ์ฑํ์ ๊ธ๋ก๋ฒ ์น ์ฑ๋ฅ์ ํ์์ ์ ๋๋ค.
์ด๋ฏธ์ง ์ต์ ํ์ ์ค์์ฑ
์ต์ ํ๋์ง ์์ ์ด๋ฏธ์ง๋ ์น์ฌ์ดํธ ๋ก๋ฉ ์๊ฐ์ ์๋นํ ์ํฅ์ ๋ฏธ์ณ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ํํ๊ณ ์ดํ๋ฅ ์ ๋์ด๋ฉฐ ๊ฒ์ ์์ง ์์๋ฅผ ๋ฎ์ถ ์ ์์ต๋๋ค. ๋ฐ๋ฉด์ ์ต์ ํ๋ ์ด๋ฏธ์ง๋ ๋ ๋น ๋ฅธ ๋ก๋ฉ ์๊ฐ, ํฅ์๋ ์ฌ์ฉ์ ์ฐธ์ฌ, ๊ฐ์ ๋ SEO์ ๊ธฐ์ฌํฉ๋๋ค. ์ด๋ฏธ์ง ์ต์ ํ๊ฐ ์ค์ํ ์ด์ ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ฌ์ฉ์ ๊ฒฝํ ๊ฐ์ : ๋ ๋น ๋ฅธ ๋ก๋ฉ ์๊ฐ์ ์ฌ์ฉ์์๊ฒ ๋ ๋ถ๋๋ฝ๊ณ ์ฆ๊ฑฐ์ด ๋ธ๋ผ์ฐ์ง ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
- ์ดํ๋ฅ ๊ฐ์: ์ฌ์ฉ์๋ค์ ๋น ๋ฅด๊ฒ ๋ก๋ฉ๋๋ ์น์ฌ์ดํธ์ ๋ ์ค๋ ๋จธ๋ฌด๋ฅด๋ ๊ฒฝํฅ์ด ์์ด ์ดํ๋ฅ ์ ์ค์ด๊ณ ์ฐธ์ฌ๋๋ฅผ ๋์ ๋๋ค.
- SEO ๊ฐํ: ๊ฒ์ ์์ง์ ๋ก๋ฉ ์๊ฐ์ด ๋น ๋ฅธ ์น์ฌ์ดํธ๋ฅผ ์ฐ์ ์ํ๋ฏ๋ก ๊ฒ์ ์์ง ์์๊ฐ ํฅ์๋ฉ๋๋ค.
- ๋์ญํญ ๋น์ฉ ์ ๊ฐ: ์ด๋ฏธ์ง ํฌ๊ธฐ๊ฐ ์์์๋ก ๋์ญํญ ์๋น๊ฐ ์ค์ด๋ค์ด ํธ์คํ ๋น์ฉ์ด ์ ๊ฐ๋ฉ๋๋ค.
- ๋ชจ๋ฐ์ผ ์ฑ๋ฅ ํฅ์: ์ต์ ํ๋ ์ด๋ฏธ์ง๋ ๋์ญํญ์ด ์ ํ์ ์ด๊ณ ์ฐ๊ฒฐ ์๋๊ฐ ๋๋ฆฐ ๋ชจ๋ฐ์ผ ์ฌ์ฉ์์๊ฒ ๋งค์ฐ ์ค์ํฉ๋๋ค.
์ด๋ฏธ์ง ์์ถ ๊ธฐ์ : ์์ค ์์ถ vs. ๋ฌด์์ค ์์ถ
์ด๋ฏธ์ง ์์ถ ๊ธฐ์ ์ ํฌ๊ฒ ์์ค ์์ถ๊ณผ ๋ฌด์์ค ์์ถ ๋ ๊ฐ์ง ์ ํ์ผ๋ก ๋ถ๋ฅํ ์ ์์ต๋๋ค. ๊ฐ ์ด๋ฏธ์ง์ ์ ํฉํ ๋ฐฉ๋ฒ์ ์ ํํ๋ ค๋ฉด ์ด๋ฌํ ๊ธฐ์ ๊ฐ์ ์ฐจ์ด์ ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์์ค ์์ถ
์์ค ์์ถ ๊ธฐ์ ์ ์ผ๋ถ ์ด๋ฏธ์ง ๋ฐ์ดํฐ๋ฅผ ๋ฒ๋ ค์ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค. ์ด๋ก ์ธํด ํ์ผ ํฌ๊ธฐ๋ ์์์ง์ง๋ง ์ด๋ฏธ์ง ํ์ง์ด ์ ํ๋ ์๋ ์์ต๋๋ค. ํต์ฌ์ ํน์ ์ฌ์ฉ ์ฌ๋ก์ ์ ํฉํ ํ์ผ ํฌ๊ธฐ์ ์๊ฐ์ ํ์ง ์ฌ์ด์ ๊ท ํ์ ์ฐพ๋ ๊ฒ์ ๋๋ค. ์ผ๋ฐ์ ์ธ ์์ค ์ด๋ฏธ์ง ํ์์๋ JPEG์ WebP(๋ฌด์์ค๋ ์ง์)๊ฐ ํฌํจ๋ฉ๋๋ค. ์์ค ์์ถ์ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ํ ํ์ง ์ ํ๊ฐ ๋ ๋์ ๋๋ ์ฌ์ง ๋ฐ ๋ณต์กํ ๋ํ ์ผ์ด ์๋ ์ด๋ฏธ์ง์ ์ ํฉํฉ๋๋ค.
์์: ํ์ง๋งํ ์ ๊ณ ํด์๋ ์ฌ์ง์ ์ค๊ฐ ์์ถ ์์ค์ JPEG๋ก ์์ถํ๋ฉด ์ผ๋ฐ์ ์ธ ์น ๋์คํ๋ ์ด ๋ชฉ์ ์์ ๋์ ๋๋ ์๊ฐ์ ํ์ง ์์ค ์์ด ํ์ผ ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ์ค์ผ ์ ์์ต๋๋ค. ๋ค์ํ ์์ถ ์์ค์ ์คํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
๋ฌด์์ค ์์ถ
๋ฌด์์ค ์์ถ ๊ธฐ์ ์ ์ด๋ฏธ์ง ๋ฐ์ดํฐ๋ฅผ ์ ํ ๋ฒ๋ฆฌ์ง ์๊ณ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค. ์ด๋ก ์ธํด ์ด๋ฏธ์ง ํ์ง์ ๊ทธ๋๋ก ์ ์ง๋์ง๋ง, ํ์ผ ํฌ๊ธฐ ๊ฐ์๋ ์ผ๋ฐ์ ์ผ๋ก ์์ค ์์ถ์ ๋นํด ๋ ์ค์ํฉ๋๋ค. ์ผ๋ฐ์ ์ธ ๋ฌด์์ค ์ด๋ฏธ์ง ํ์์๋ PNG์ GIF๊ฐ ํฌํจ๋ฉ๋๋ค. ๋ฌด์์ค ์์ถ์ ๋ชจ๋ ๋ํ ์ผ์ ๋ณด์กดํ๋ ๊ฒ์ด ํ์์ ์ธ ๋ ์นด๋ก์ด ๊ฐ์ฅ์๋ฆฌ, ํ ์คํธ ๋๋ ๊ทธ๋ํฝ์ด ์๋ ์ด๋ฏธ์ง์ ์ด์์ ์ ๋๋ค. ๋ํ ์ถ๊ฐ๋ก ํธ์งํ๊ฑฐ๋ ์กฐ์ํ ์ด๋ฏธ์ง์๋ ์ ํฉํฉ๋๋ค.
์์: ๋ ์นด๋ก์ด ์ ๊ณผ ํ ์คํธ๊ฐ ์๋ ๋ก๊ณ ๋ฅผ PNG๋ก ์์ถํ๋ฉด ์์ถ ํ์๋ ๋ก๊ณ ๊ฐ ์ ๋ช ํ๊ณ ๊นจ๋ํ๊ฒ ์ ์ง๋ฉ๋๋ค. ์์ค ์์ถ์ ์ธ๊ณต๋ฌผ(artifacts)์ ๋ฐ์์ํค๊ณ ํ ์คํธ๋ฅผ ํ๋ฆฌ๊ฒ ํ์ฌ ๊ฐ๋ ์ฑ์ ๋จ์ด๋จ๋ฆด ์ ์์ต๋๋ค.
WebP: ์น์ ์ํ ํ๋์ ์ธ ์ด๋ฏธ์ง ํ์
WebP๋ ๊ตฌ๊ธ์ด ๊ฐ๋ฐํ ํ๋์ ์ธ ์ด๋ฏธ์ง ํ์์ผ๋ก, ์น์์ ์ด๋ฏธ์ง์ ๋ํด ๋ฐ์ด๋ ๋ฌด์์ค ๋ฐ ์์ค ์์ถ์ ์ ๊ณตํฉ๋๋ค. JPEG๋ PNG์ ๊ฐ์ ๊ธฐ์กด ํ์๊ณผ ๋น๊ตํ ๋, WebP๋ ๋๋ฑํ๊ฑฐ๋ ๋ ๋์ ์ด๋ฏธ์ง ํ์ง์ ์ ์งํ๋ฉด์ ํ์ผ ํฌ๊ธฐ๋ฅผ ํจ์ฌ ๋ ์๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. ์ด๋ก ์ธํด WebP๋ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ๊ณ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ํฅ์์ํค๋ ๋ฐ ํ์ํ ์ ํ์ด ๋ฉ๋๋ค. WebP๋ ์ ๋๋ฉ์ด์ ์ด๋ฏธ์ง์ ์ ์ ์ด๋ฏธ์ง๋ฅผ ๋ชจ๋ ์ง์ํฉ๋๋ค.
WebP์ ์ด์
- ๋ฐ์ด๋ ์์ถ๋ฅ : WebP๋ JPEG ๋ฐ PNG๋ณด๋ค ๋ ๋์ ์์ถ๋ฅ ์ ์ ๊ณตํ์ฌ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ณ ๋ก๋ฉ ์๊ฐ์ ๋จ์ถํฉ๋๋ค. ์ฐ๊ตฌ์ ๋ฐ๋ฅด๋ฉด WebP๋ ๋์ผํ ์ด๋ฏธ์ง ํ์ง์์ JPEG์ ๋นํด 25-34%, PNG์ ๋นํด 26% ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ผ ์ ์์ต๋๋ค.
- ์์ค ๋ฐ ๋ฌด์์ค ์์ถ: WebP๋ ์์ค ์์ถ๊ณผ ๋ฌด์์ค ์์ถ์ ๋ชจ๋ ์ง์ํ์ฌ ๋ค์ํ ์ด๋ฏธ์ง ์ ํ๊ณผ ์ฌ์ฉ ์ฌ๋ก์ ์ ์ฐ์ฑ์ ์ ๊ณตํฉ๋๋ค.
- ํฌ๋ช ๋ ์ง์: WebP๋ ํฌ๋ช ๋๋ฅผ ์ง์ํ๋ฏ๋ก ํฌ๋ช ๋๊ฐ ์๋ PNG ์ด๋ฏธ์ง๋ฅผ ๋์ฒดํ๊ธฐ์ ์ ํฉํฉ๋๋ค.
- ์ ๋๋ฉ์ด์ ์ง์: WebP๋ ์ ๋๋ฉ์ด์ ์ ์ง์ํ๋ฏ๋ก GIF ์ด๋ฏธ์ง์ ์คํ ๊ฐ๋ฅํ ๋์์ด ๋ฉ๋๋ค.
- ๋์ ๋ธ๋ผ์ฐ์ ์ง์: ๊ตฌํ ๋ธ๋ผ์ฐ์ ์์๋ ๊ธฐ๋ณธ ์ง์์ด ๋ถ์กฑํ ์ ์์ง๋ง, Chrome, Firefox, Safari, Edge์ ๊ฐ์ ์ต์ ๋ธ๋ผ์ฐ์ ๋ ๋ฐ์ด๋ WebP ์ง์์ ์ ๊ณตํฉ๋๋ค. ๊ตฌํ ๋ธ๋ผ์ฐ์ ์์ ํธํ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ๋์ฒด(fallback) ๋ฉ์ปค๋์ฆ์ ๊ตฌํํ ์ ์์ต๋๋ค(์์ธํ ๋ด์ฉ์ ๋์ค์ ์ค๋ช ).
WebP ๊ตฌํํ๊ธฐ
์น์ฌ์ดํธ์ WebP๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ์ฌ๋ฌ ๊ฐ์ง๊ฐ ์์ต๋๋ค:
- ์ด๋ฏธ์ง ์ต์ ํ ๋๊ตฌ ์ฌ์ฉ: ์๋ง์ ์ด๋ฏธ์ง ์ต์ ํ ๋๊ตฌ๊ฐ ์ด๋ฏธ์ง๋ฅผ WebP ํ์์ผ๋ก ์๋ ๋ณํํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๋๊ตฌ๋ ์ข ์ข ์์ถ ์์ค ๋ฐ ๊ธฐํ ์ค์ ์ ์กฐ์ ํ์ฌ ์ด๋ฏธ์ง ํ์ง๊ณผ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ต์ ํํ๋ ์ต์ ์ ์ ๊ณตํฉ๋๋ค. ์์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค: Squoosh, TinyPNG, ImageOptim(Mac์ฉ), XnConvert. ์๋ํ๋ ์ค์ ๊ฐ์ ๋ง์ ์ฝํ ์ธ ๊ด๋ฆฌ ์์คํ (CMS)์ WebP ๋ณํ ๋ฐ ์ ์ก์ ์๋์ผ๋ก ์ฒ๋ฆฌํ๋ ํ๋ฌ๊ทธ์ธ์ ์ ๊ณตํฉ๋๋ค.
- ์๋ฒ ์ธก ๋ณํ ์ฌ์ฉ: ์น ์๋ฒ๋ฅผ ๊ตฌ์ฑํ์ฌ ์ด๋ฏธ์ง๋ฅผ ์ฆ์์์ WebP ํ์์ผ๋ก ๋ณํํ ์ ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ ๋ง์ ๊ธฐ์ ์ ์ ๋ฌธ ์ง์์ด ํ์ํ์ง๋ง ๋ณํ ํ๋ก์ธ์ค๋ฅผ ๋ ์ธ๋ฐํ๊ฒ ์ ์ดํ ์ ์์ต๋๋ค. ImageMagick ๋๋ GD์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์๋ฒ ์ธก ์ด๋ฏธ์ง ์กฐ์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN) ์ฌ์ฉ: ๋ง์ CDN์ด ๋ด์ฅ๋ WebP ๋ณํ ๋ฐ ์ ์ก ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ ๊ตฌํ ํ๋ก์ธ์ค๋ฅผ ๋จ์ํํ๊ณ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์ด๋ฏธ์ง๊ฐ ์ต์ ํ๋๋๋ก ๋ณด์ฅํฉ๋๋ค. Cloudflare๋ Akamai์ ๊ฐ์ CDN์ ์ฌ์ฉ์์ ๋ธ๋ผ์ฐ์ ์ ๋ฐ๋ผ ์ด๋ฏธ์ง๋ฅผ WebP ํ์์ผ๋ก ์๋ ๋ณํํ๊ณ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋ฐ ๋์ฒด ๋ฉ์ปค๋์ฆ
WebP๋ ๊ด๋ฒ์ํ ๋ธ๋ผ์ฐ์ ์ง์์ ๋ฐ๊ณ ์์ง๋ง, ๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ ์ด ํ์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ํ์ง ์์ ์ ์์ต๋๋ค. ๋ชจ๋ ์ฌ์ฉ์์์ ํธํ์ฑ์ ๋ณด์ฅํ๋ ค๋ฉด ๋์ฒด ๋ฉ์ปค๋์ฆ์ ๊ตฌํํ๋ ๊ฒ์ด ํ์์ ์ ๋๋ค. ๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- <picture> ์์: <picture> ์์๋ฅผ ์ฌ์ฉํ๋ฉด ์ฌ๋ฌ ์ด๋ฏธ์ง ์์ค๋ฅผ ์ง์ ํ ์ ์์ผ๋ฉฐ, ๋ธ๋ผ์ฐ์ ๋ ๊ฐ์ฅ ์ ํฉํ ํ์์ ์ ํํฉ๋๋ค. ์ด๋ JPEG ๋๋ PNG๋ก์ ๋์ฒด๋ฅผ ์ ๊ณตํ๋ฉด์ WebP ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ๋ ๊ถ์ฅ ์ ๊ทผ ๋ฐฉ์์ ๋๋ค.
- `onerror` ์์ฑ์ด ์๋ <img> ์์: ์ด ์ ๊ทผ ๋ฐฉ์์ JavaScript๋ฅผ ์ฌ์ฉํ์ฌ WebP ์ง์์ ๊ฐ์งํ๊ณ ํ์ํ ๊ฒฝ์ฐ ๋์ฒด ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํฉ๋๋ค. ์ด๋ <picture> ์์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๋ณด๋ค ๋ ์ ํธ๋ฉ๋๋ค.
- ์ฝํ ์ธ ํ์: ์๋ฒ๋ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๋ฅ์ ๊ฐ์งํ๊ณ `Accept` ํค๋๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ ์ ํ ์ด๋ฏธ์ง ํ์์ ์ ๊ณตํ ์ ์์ต๋๋ค. ์ด๋ ์๋ฒ ์ธก ๊ตฌ์ฑ์ด ํ์ํ์ง๋ง ํจ์จ์ ์ธ ์๋ฃจ์ ์ด ๋ ์ ์์ต๋๋ค.
<picture> ์์๋ฅผ ์ฌ์ฉํ ์์:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="์ด๋ฏธ์ง์ ๋ํ ์ค๋ช
">
</picture>
์ด๋ฏธ์ง ์ต์ ํ๋ฅผ ์ํ ์ค์ฉ์ ์ธ ํ
๋ค์์ ์ด๋ฏธ์ง ์ต์ ํ ๋ฐ ์น์ฌ์ดํธ ์ฑ๋ฅ ํฅ์์ ์ํ ๋ช ๊ฐ์ง ์ค์ฉ์ ์ธ ํ์ ๋๋ค:
- ์ฌ๋ฐ๋ฅธ ์ด๋ฏธ์ง ํ์ ์ ํ: ์ด๋ฏธ์ง ์ ํ๊ณผ ์ฌ์ฉ ์ฌ๋ก์ ๋ฐ๋ผ ์ ์ ํ ์ด๋ฏธ์ง ํ์์ ์ ํํ์ธ์. ์ฌ์ง ๋ฐ ๋ณต์กํ ์ด๋ฏธ์ง์๋ JPEG๋ฅผ, ๋ ์นด๋ก์ด ๊ฐ์ฅ์๋ฆฌ๋ ํฌ๋ช ๋๊ฐ ์๋ ์ด๋ฏธ์ง์๋ PNG๋ฅผ, ๊ทธ๋ฆฌ๊ณ ๋ฐ์ด๋ ์์ถ๋ฅ ๊ณผ ํ์ง์ ์ํด ๊ฐ๋ฅํ๋ฉด WebP๋ฅผ ์ฌ์ฉํ์ธ์.
- ์ด๋ฏธ์ง ํฌ๊ธฐ ์ ์ ํ๊ฒ ์กฐ์ : ํ์ํ ๊ฒ๋ณด๋ค ํฐ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ์ง ๋ง์ธ์. ์๋๋ ๋์คํ๋ ์ด ํฌ๊ธฐ์ ๋ง๊ฒ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ์ธ์. `srcset` ์์ฑ์ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์ ํ๋ฉด ํฌ๊ธฐ์ ํด์๋์ ๋ฐ๋ผ ๋ค๋ฅธ ํฌ๊ธฐ์ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ๋ ๋ฐ์ํ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ์ธ์.
- ์ด๋ฏธ์ง ์์ถ: ์ด๋ฏธ์ง ์์ถ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์๊ฐ์ ํ์ง์ ํฌ์ํ์ง ์๊ณ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด์ธ์. ๋ค์ํ ์์ถ ์์ค์ ์คํํ์ฌ ํ์ผ ํฌ๊ธฐ์ ํ์ง ์ฌ์ด์ ์ต์ ์ ๊ท ํ์ ์ฐพ์ผ์ธ์.
- ์ง์ฐ ๋ก๋ฉ ์ฌ์ฉ: ํ๋ฉด์ ์ฆ์ ๋ณด์ด์ง ์๋ ์ด๋ฏธ์ง์ ๋ก๋ฉ์ ์ง์ฐ์ํค๊ธฐ ์ํด ์ง์ฐ ๋ก๋ฉ(lazy loading)์ ๊ตฌํํ์ธ์. ์ด๋ ์ด๊ธฐ ํ์ด์ง ๋ก๋ฉ ์๊ฐ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. ์ง์ฐ ๋ก๋ฉ์ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ต์ ๋ธ๋ผ์ฐ์ ์ ๋ค์ดํฐ๋ธ `loading="lazy"` ์์ฑ์ ์ฌ์ฉํ์ฌ ๋ฌ์ฑํ ์ ์์ต๋๋ค.
- ๋ ํฐ๋ ๋์คํ๋ ์ด์ฉ ์ด๋ฏธ์ง ์ต์ ํ: ์ ๋ช ๋์ ๋ช ํ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ๋ ํฐ๋ ๋์คํ๋ ์ด์ฉ ๊ณ ํด์๋ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ์ธ์. `srcset` ์์ฑ์ ์ฌ์ฉํ์ฌ ๊ธฐ๊ธฐ์ ํฝ์ ๋ฐ๋์ ๋ฐ๋ผ ๋ค๋ฅธ ํด์๋์ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ์ธ์.
- ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN) ์ฌ์ฉ: CDN์ ์ด๋ฏธ์ง๋ฅผ ํฌํจํ ์น์ฌ์ดํธ ์ฝํ ์ธ ๋ฅผ ์ ์ธ๊ณ ์๋ฒ์ ๋ฐฐํฌํ์ฌ ๋ค์ํ ์ง์ญ์ ์ฌ์ฉ์๋ฅผ ์ํ ์ง์ฐ ์๊ฐ์ ์ค์ด๊ณ ๋ก๋ฉ ์๊ฐ์ ๊ฐ์ ํ ์ ์์ต๋๋ค. CDN์ ์ข ์ข WebP ๋ณํ ๋ฐ ์๋ ํฌ๊ธฐ ์กฐ์ ๊ณผ ๊ฐ์ ์ด๋ฏธ์ง ์ต์ ํ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ๋ถ๋ฏธ, ์ ๋ฝ, ์์์(์ธ๋ ๋ฐ ๋๋จ์์์ ํฌํจ), ๋จ๋ฏธ์ ๊ฐ์ด ํธ๋ํฝ์ด ๋ง์ ์ง์ญ์ PoP(Points of Presence)๊ฐ ์๋ CDN ์ฌ์ฉ์ ๊ณ ๋ คํ์ธ์.
- ์น์ฌ์ดํธ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง: ๊ตฌ๊ธ ํ์ด์ง์คํผ๋ ์ธ์ฌ์ดํธ๋ WebPageTest์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ ๊ธฐ์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ๊ณ ๊ฐ์ ํ ์์ญ์ ํ์ ํ์ธ์. ์ด๋ฏธ์ง ๋ก๋ฉ ์๊ฐ์ ์ฃผ์๋ฅผ ๊ธฐ์ธ์ด๊ณ ๊ทธ์ ๋ฐ๋ผ ์ต์ ํํ์ธ์.
- ์ด๋ฏธ์ง ์ต์ ํ ์๋ํ: ์ด๋ฏธ์ง ์ต์ ํ๋ฅผ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ์ ํตํฉํ์ฌ ๋ชจ๋ ์ด๋ฏธ์ง๊ฐ ์น์ฌ์ดํธ์ ๋ฐฐํฌ๋๊ธฐ ์ ์ ์ต์ ํ๋๋๋ก ํ์ธ์. ์ด๋ Webpack์ด๋ Gulp๊ณผ ๊ฐ์ ๋น๋ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ CMS์์ ํตํฉ์ ํตํด ๋ฌ์ฑํ ์ ์์ต๋๋ค.
์ด๋ฏธ์ง ์ต์ ํ ๋๊ตฌ ๋ฐ ๋ฆฌ์์ค
๋ค์์ ์ธ๊ธฐ ์๋ ์ด๋ฏธ์ง ์ต์ ํ ๋๊ตฌ ๋ฐ ๋ฆฌ์์ค์ ๋๋ค:
- Squoosh: ๊ตฌ๊ธ์์ ์ ๊ณตํ๋ ๋ฌด๋ฃ ์คํ์์ค ์ด๋ฏธ์ง ์์ถ ๋๊ตฌ์ ๋๋ค.
- TinyPNG: PNG ๋ฐ JPEG ์ด๋ฏธ์ง๋ฅผ ์ํ ์ธ๊ธฐ ์๋ ์จ๋ผ์ธ ์ด๋ฏธ์ง ์์ถ ๋๊ตฌ์ ๋๋ค.
- ImageOptim: macOS์ฉ ๋ฌด๋ฃ ์ด๋ฏธ์ง ์ต์ ํ ๋๊ตฌ์ ๋๋ค.
- XnConvert: Windows, macOS, Linux์ฉ ๊ฐ๋ ฅํ ์ผ๊ด ์ด๋ฏธ์ง ๋ณํ๊ธฐ ๋ฐ ๋ฆฌ์ฌ์ด์ ์ ๋๋ค.
- Google PageSpeed Insights: ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋ถ์ํ๊ณ ์ต์ ํ ๊ธฐํ๋ฅผ ์๋ณํ๋ ๋๊ตฌ์ ๋๋ค.
- WebPageTest: ์์ธํ ๋ถ์ ๋ฐ ๊ถ์ฅ ์ฌํญ์ ์ ๊ณตํ๋ ์น์ฌ์ดํธ ์ฑ๋ฅ ํ ์คํธ ๋๊ตฌ์ ๋๋ค.
- Cloudinary: ํฌ๊ด์ ์ธ ์ต์ ํ ๊ธฐ๋ฅ์ ๊ฐ์ถ ํด๋ผ์ฐ๋ ๊ธฐ๋ฐ ์ด๋ฏธ์ง ๋ฐ ๋น๋์ค ๊ด๋ฆฌ ํ๋ซํผ์ ๋๋ค.
- Imgix: ์ค์๊ฐ ์ด๋ฏธ์ง ์ฒ๋ฆฌ ๋ฐ ์ ์ก ์๋น์ค์ ๋๋ค.
- ShortPixel: ์ด๋ฏธ์ง ์ต์ ํ ๋ฐ WebP ๋ณํ์ ์ํ ์๋ํ๋ ์ค ํ๋ฌ๊ทธ์ธ์ ๋๋ค.
๊ณ ๊ธ ์ด๋ฏธ์ง ์ต์ ํ ๊ธฐ์
๊ธฐ๋ณธ์ ์ธ ์์ถ ๋ฐ ํ์ ๋ณํ์ ๋์ด, ์น ์ฑ๋ฅ์ ์ํด ์ด๋ฏธ์ง๋ฅผ ๋์ฑ ์ต์ ํํ ์ ์๋ ๋ช ๊ฐ์ง ๊ณ ๊ธ ๊ธฐ์ ์ด ์์ต๋๋ค:
- ํ๋ก๊ทธ๋ ์๋ธ JPEG: ํ๋ก๊ทธ๋ ์๋ธ JPEG๋ ์ ์ง์ ์ผ๋ก ๋ก๋๋์ด ์ด๋ฏธ์ง์ ์ ํด์๋ ๋ฒ์ ์ ๋จผ์ ํ์ํ ๋ค์ ๋ ๋ง์ ๋ฐ์ดํฐ๊ฐ ๋ก๋๋จ์ ๋ฐ๋ผ ์ ์ฐจ ํ์ง์ ํฅ์์ํต๋๋ค. ์ด๋ ํนํ ๋๋ฆฐ ์ฐ๊ฒฐ์์ ์ฒด๊ฐ ๋ก๋ฉ ์๊ฐ์ ๊ฐ์ ํ๊ณ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
- ์กฐ๊ฑด๋ถ ์ด๋ฏธ์ง ๋ก๋ฉ: ์ฌ์ฉ์์ ๋คํธ์ํฌ ์ํ๋ ๊ธฐ๊ธฐ ๊ธฐ๋ฅ์ ๋ฐ๋ผ ๋ค๋ฅธ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๋๋ฆฐ ๋ชจ๋ฐ์ผ ์ฐ๊ฒฐ ์ฌ์ฉ์์๊ฒ๋ ์ ํด์๋ ์ด๋ฏธ์ง๋ฅผ, ๋น ๋ฅธ Wi-Fi ์ฐ๊ฒฐ ์ฌ์ฉ์์๊ฒ๋ ๊ณ ํด์๋ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ ์ ์์ต๋๋ค.
- ํด๋ผ์ด์ธํธ ํํธ: ํด๋ผ์ด์ธํธ ํํธ๋ ์ฌ์ฉ์์ ๊ธฐ๊ธฐ ๋ฐ ๋ธ๋ผ์ฐ์ ์ ๋ํ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ HTTP ์์ฒญ ํค๋๋ก, ์๋ฒ๊ฐ ์ด๋ฏธ์ง ์ต์ ํ ๋ฐ ์ ์ก์ ๋ํด ๋ ์ ๋ณด์ ์ ๊ฐํ ๊ฒฐ์ ์ ๋ด๋ฆด ์ ์๋๋ก ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, `DPR`(Device Pixel Ratio) ํด๋ผ์ด์ธํธ ํํธ๋ฅผ ์ฌ์ฉํ์ฌ ๊ธฐ๊ธฐ ํ๋ฉด์ ์ ํฉํ ํด์๋์ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ ์ ์์ต๋๋ค.
- AVIF: AVIF๋ AV1 ๋น๋์ค ์ฝ๋ฑ์ ๊ธฐ๋ฐ์ผ๋ก ํ ํ๋์ ์ธ ์ด๋ฏธ์ง ํ์์ ๋๋ค. WebP๋ณด๋ค ํจ์ฌ ๋ ๋์ ์์ถ๋ฅ ์ ์ ๊ณตํ๋ฉฐ ๋ธ๋ผ์ฐ์ ์ง์์ด ์ ์ฐจ ์ฆ๊ฐํ๊ณ ์์ต๋๋ค. ํฅํ ์ด๋ฏธ์ง ์ต์ ํ ์์ ์ ์ํด AVIF๋ฅผ ์คํํด ๋ณด๋ ๊ฒ์ ๊ณ ๋ คํด ๋ณด์ธ์.
- ์๋ํ๋ ์ด๋ฏธ์ง ์ต์ ํ ํ์ดํ๋ผ์ธ: CI/CD(์ง์์ ํตํฉ/์ง์์ ์ ๋ฌ) ํ๋ก์ธ์ค์ ์ผ๋ถ๋ก ์๋ํ๋ ์ด๋ฏธ์ง ์ต์ ํ ํ์ดํ๋ผ์ธ์ ๊ตฌํํ๋ฉด ๋ชจ๋ ์ด๋ฏธ์ง๊ฐ ํ๋ก๋์ ์ ๋ฐฐํฌ๋๊ธฐ ์ ์ ์๋์ผ๋ก ์ต์ ํ๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
๊ฒฐ๋ก
์ด๋ฏธ์ง ์์ถ๊ณผ WebP์ ๊ฐ์ ํ๋์ ์ธ ์ด๋ฏธ์ง ํ์์ ์ฑํ์ ํ๋ก ํธ์๋ ์์ฐ์ ์ต์ ํํ๊ณ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๊ฐ์ ํ๋ฉฐ ์ ์ธ๊ณ์ ์ผ๋ก ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด ๊ฐ์ด๋์์ ์ค๋ช ํ ๊ธฐ์ ๊ณผ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ตฌํํจ์ผ๋ก์จ ์ด๋ฏธ์ง ํ์ผ ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ์ค์ด๊ณ ๋ก๋ฉ ์๊ฐ์ ๊ฐ์ ํ๋ฉฐ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋ ๋ถ๋๋ฝ๊ณ ๋งค๋ ฅ์ ์ธ ๋ธ๋ผ์ฐ์ง ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ํธํ์ฑ์ ๊ณ ๋ คํ๊ณ ๋์ฒด ๋ฉ์ปค๋์ฆ์ ๊ตฌํํ์ฌ ๋ธ๋ผ์ฐ์ ๋ ๊ธฐ๊ธฐ์ ๊ด๊ณ์์ด ๋ชจ๋ ์ฌ์ฉ์๊ฐ ์น์ฌ์ดํธ์ ์ก์ธ์คํ ์ ์๋๋ก ํด์ผ ํฉ๋๋ค. ์ง์์ ์ธ ๋ชจ๋ํฐ๋ง๊ณผ ์ต์ ํ๋ ์ต์ ์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ ์งํ๊ณ ๊ธ์ ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ํต์ฌ์ ๋๋ค.