์ด๋ฏธ์ง ์์ถ ๋๊ตฌ ์์ฃผ ๋ฌป๋ ์ง๋ฌธ
Q: ์ด๋ฏธ์ง ์์ถ์ด๋ ๋ฌด์์ด๋ฉฐ ์ ์ค์ํ๊ฐ์?
A:
์ด๋ฏธ์ง ์์ถ์ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ๋ง๋ค์ง ์์ผ๋ฉด์ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๋ ๊ณผ์ ์ ๋๋ค. ๋ถํ์ํ ๋ฐ์ดํฐ๋ฅผ ๋ฒ๋ฆฌ๊ฑฐ๋(์์ค ์์ถ) ๊ธฐ์กด ๋ฐ์ดํฐ๋ฅผ ๋ ํจ์จ์ ์ผ๋ก ์ ์ฅํ๋ ๋ฐฉ์(๋ฌด์์ค ์์ถ)์ผ๋ก ์๋ํฉ๋๋ค.
์ด๋ฏธ์ง ์์ถ์ด ์ค์ํ ์ด์ ๋ ์ผ๋ฐ์ ์ธ ์นํ์ด์ง ์ ์ฒด ์ฉ๋์ 50~60%๋ฅผ ์ด๋ฏธ์ง๊ฐ ์ฐจ์งํ๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ด๋ฏธ์ง ํ์ผ์ด ์์์๋ก ํ์ด์ง ๋ก๋ฉ ์๋๊ฐ ๋นจ๋ผ์ง๊ณ , ๋์ญํญ ๋น์ฉ์ด ์ค์ด๋ค๋ฉฐ, ๋ชจ๋ฐ์ผ ๋คํธ์ํฌ์์์ ์ฌ์ฉ์ ๊ฒฝํ์ด ๊ฐ์ ๋๊ณ , Core Web Vitals ์ฑ๋ฅ์ ํตํด ๊ฒ์ ์์ง ์์๋ ํฅ์๋ฉ๋๋ค.
Q: ์์ค ์์ถ๊ณผ ๋ฌด์์ค ์์ถ์ ์ฐจ์ด์ ์ ๋ฌด์์ธ๊ฐ์?
A:
์์ค ์์ถ์ ๋ ์์ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ป๊ธฐ ์ํด ์ด๋ฏธ์ง ๋ฐ์ดํฐ๋ฅผ ์๊ตฌ์ ์ผ๋ก ์ ๊ฑฐํฉ๋๋ค. ๋ฒ๋ ค์ง ๋ฐ์ดํฐ๋ ๋ณต๊ตฌํ ์ ์์ต๋๋ค. JPEG, WebP(์์ค ๋ชจ๋), AVIF์์ ์ฌ์ฉ๋ฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ํ์ผ ํฌ๊ธฐ๋ฅผ 60~95%๊น์ง ์ค์ผ ์ ์์ง๋ง, ๊ณผ๋ํ ์ค์ ์์๋ ๋์ ๋ณด์ด๋ ํ์ง ์ ํ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
๋ฌด์์ค ์์ถ์ ์ด๋ฏธ์ง ์ ๋ณด๋ฅผ ์ ํ ์ ๊ฑฐํ์ง ์๊ณ ์ค๋ณต ๋ฐ์ดํฐ๋ฅผ ์๋ณํ๊ณ ์ ๊ฑฐํ์ฌ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค. ์์ถ ํด์ ์ ์๋ณธ๊ณผ ํฝ์ ๋จ์๋ก ์์ ํ ๋์ผํ ์ด๋ฏธ์ง๊ฐ ๋ณต์๋ฉ๋๋ค. PNG์ WebP(๋ฌด์์ค ๋ชจ๋)์์ ์ฌ์ฉ๋ฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ํ์ผ ํฌ๊ธฐ๋ฅผ 10~50%๊น์ง ์ค์ผ ์ ์์ผ๋ฉฐ, ํ์ง ์์ค์ ์ ํ ์์ต๋๋ค.
ํ์ผ ํฌ๊ธฐ๊ฐ ์ค์ํ ์ฌ์ง์๋ ์์ค ์์ถ์ ์ ํํ์ธ์. ๋ก๊ณ , ์คํฌ๋ฆฐ์ท, ํ ์คํธ๋ ๋ ์นด๋ก์ด ๊ฐ์ฅ์๋ฆฌ๊ฐ ํฌํจ๋ ์ด๋ฏธ์ง์๋ ๋ฌด์์ค ์์ถ์ ์ ํํ์ธ์.
Q: ํ์ง์ด ํ์ฉํ ์ ์์ ์ ๋๋ก ๋๋น ์ง๊ธฐ ์ ๊น์ง ์ด๋ฏธ์ง๋ฅผ ์ผ๋ง๋ ์์ถํ ์ ์๋์?
A:
๊ทธ ๊ธฐ์ค์ ์ด๋ฏธ์ง ๋ด์ฉ๊ณผ ํฌ๋งท์ ๋ฐ๋ผ ๋ค๋ฆ ๋๋ค:
- JPEG: ํ์ง 80~85๋ ๊ฑฐ์ ๋ณด์ด์ง ์๋ ์ํฐํฉํธ๋ก ๋ฐ์ด๋ ๊ฒฐ๊ณผ๋ฅผ ์ ๊ณตํฉ๋๋ค. ํ์ง 60์์๋ ๊ทธ๋ผ๋ฐ์ด์ ์ ๋์ ๋๋ ์์ถ ํ์ ์ด ๋ณด์ ๋๋ค. 50 ๋ฏธ๋ง์์๋ ์ํฐํฉํธ๊ฐ ํ์ฐํ ๋๋ฌ๋ฉ๋๋ค.
- WebP ์์ค: ํ์ง 75~85๋ JPEG ํ์ง 80~90๊ณผ ๋๋ฑํ ํ์ง์ ํจ์ฌ ์์ ํ์ผ ํฌ๊ธฐ๋ก ์ ๊ณตํฉ๋๋ค. ํ์ง 60๋ ๋๋ถ๋ถ์ ์ด๋ฏธ์ง์์ ํ์ฉ ๊ฐ๋ฅํ ์์ค์ ๋๋ค.
- AVIF: ํ์ง 50~70์ JPEG ํ์ง 80~90๊ณผ ๋น์ทํ ์๊ฐ์ ํ์ง์ ์ ๊ณตํ๋ฉฐ, ํ์ผ ํฌ๊ธฐ๋ ์ต๋ 50% ๋ ์์ต๋๋ค. ํ์ง ์ ํ๋ JPEG๋ณด๋ค ์ ์ง์ ์ด๊ณ ๋ ๊ฑฐ์ฌ๋ฆฝ๋๋ค.
- PNG: PNG๋ ๋ฌด์์ค ์์ถ์ ์ฌ์ฉํ๋ฏ๋ก ํ์ง์ด ์ ๋ ์ ํ๋์ง ์์ต๋๋ค. ํ์ผ ํฌ๊ธฐ ๊ฐ์๋ ํ์ง ์ฌ๋ผ์ด๋๋ฅผ ๋ฎ์ถ๋ ๊ฒ์ด ์๋๋ผ, ์ ์ ํ ๊ฒฝ์ฐ 8๋นํธ ์์ ์ฌ๋๋ฅผ ์ ํํ์ฌ ์ป์ ์ ์์ต๋๋ค.
์ด๋ฏธ์ง๋ง๋ค ๋ค๋ฅด๋ฏ๋ก, ๋ช ๊ฐ์ง ํ์ง ์ค์ ์ ํ ์คํธํ์ฌ ํน์ ์ฝํ ์ธ ์ ๊ฐ์ฅ ์ ํฉํ ์ง์ ์ ์ฐพ์๋ณด์ธ์.
Q: ๋ด ์น์ฌ์ดํธ์ ๊ฐ์ฅ ์ ํฉํ ์ด๋ฏธ์ง ํฌ๋งท์ ๋ฌด์์ธ๊ฐ์?
A:
๋ชจ๋ ์ํฉ์ ๊ฐ์ฅ ์ ํฉํ ๋จ์ผ ํฌ๋งท์ ์์ต๋๋ค. ๋ค์ ๊ฐ์ด๋๋ฅผ ์ฐธ๊ณ ํ์ธ์:
- ํฌ๋ช ๋๊ฐ ํ์ ์๋ ์ฌ์ง: ๋ฒ์ฉ ํธํ์ฑ์ ์ํด JPEG, ๊ด๋ฒ์ํ ๋ธ๋ผ์ฐ์ ์ง์๊ณผ ๋ ์์ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ํด WebP, ๋๋ ์ต์ ๋ธ๋ผ์ฐ์ ์์ ์ต๋ ์์ถ์ ์ํด AVIF๋ฅผ ์ฌ์ฉํ์ธ์.
- ๋ก๊ณ , ์์ด์ฝ, ํฌ๋ช ๋๊ฐ ํ์ํ ์ด๋ฏธ์ง: ๋ฒ์ฉ ์ง์์ ์ํด PNG, ๋ ์์ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ํด WebP ๋ฌด์์ค์ ์ฌ์ฉํ์ธ์.
- ์คํฌ๋ฆฐ์ท ๋ฐ UI ๋ชฉ์ : ์ ๋ช ํ ํ ์คํธ์ ๋ ์นด๋ก์ด ๊ฐ์ฅ์๋ฆฌ๋ฅผ ๋ณด์กดํ๊ธฐ ์ํด PNG๋ฅผ ์ฌ์ฉํ์ธ์.
- ์ ๋๋ฉ์ด์ ๊ทธ๋ํฝ: ์ํ ํฌ๋ช ๋๋ฅผ ์ง์ํ๋ฉด์ ํ์ผ ํฌ๊ธฐ๊ฐ 40~60% ๋ ์์ WebP๋ฅผ GIF ๋์ ์ฌ์ฉํ์ธ์.
๋๋ถ๋ถ์ ์ต์ ์น์ฌ์ดํธ์์ WebP๋ ์์ค ๋ฐ ๋ฌด์์ค ์์ถ, ํฌ๋ช ๋, ์ ๋๋ฉ์ด์ ์ ๋ชจ๋ ์ง์ํ๋ ๊ฐ์ฅ ๋ค์ฌ๋ค๋ฅํ ๋จ์ผ ํฌ๋งท์ ๋๋ค.
Q: ์ด๋ฏธ์ง ํฌ๋งท์ ๋ณ๊ฒฝํ์ง ์๊ณ ์์ถํ ์ ์๋์?
A:
๋ค. ์ต์ ์ด๋ฏธ์ง ์์ถ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ฉด PNG, JPEG, WebP, AVIF ํ์ผ์ ์๋ณธ ํฌ๋งท์ ์ ์งํ ์ฑ ์ต์ ํํ ์ ์์ต๋๋ค. ์ด๊ฒ์ด ์ค์ํ ์ด์ ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ํฌ๋งท ๋ณํ์ ์ฌ์ธ์ฝ๋ฉ์ผ๋ก ์ธํ ํ์ง ์์ค์ ์ด๋ํ ์ ์์ต๋๋ค.
- ์๋ณธ ํฌ๋งท์ ์ ์งํ๋ฉด ํฌ๋ช ๋, ์์ ํ๋กํ, ๋ฉํ๋ฐ์ดํฐ์ ์๊ธฐ์น ์์ ๋ณ๊ฒฝ์ด ๋ฐ์ํ์ง ์์ต๋๋ค.
- ์ ๋ก๋, ์์ถ, ๋ค์ด๋ก๋๋ง ํ๋ฉด ๋๋ฏ๋ก ์ค๊ฐ ๋ณํ ๋จ๊ณ ์์ด ์์ ํ๋ฆ์ด ๋ ๊ฐ๋จํด์ง๋๋ค.
์๋ณธ ํฌ๋งท ๊ทธ๋๋ก ์์ถํ๋ ๊ฒ์ด ๊ฐ์ฅ ์์ ํ๊ณ ํจ์จ์ ์ธ ๋ฐฉ๋ฒ์ ๋๋ค. ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ํ๊ณ ํ์ง ์ค์ ์ ์ ํํ ๋ค์ ์ต์ ํ๋ ๋ฒ์ ์ ๋ค์ด๋ก๋ํ๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค.
Q: ์ด๋ฏธ์ง ์์ถ์ด Core Web Vitals๋ฅผ ์ด๋ป๊ฒ ๊ฐ์ ํ๋์?
A:
์ด๋ฏธ์ง ์์ถ์ Core Web Vitals์ ์ธ ๊ฐ์ง ์งํ ์ค ๋ ๊ฐ์ง์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค:
- LCP(Largest Contentful Paint): ์์ถ๋ ์ด๋ฏธ์ง๋ ๋ ๋นจ๋ฆฌ ๋ค์ด๋ก๋๋๋ฏ๋ก ๊ฐ์ฅ ํฐ ๊ฐ์ ์์๊ฐ ๋ ๋๋ง๋๋ ์๊ฐ์ด ๋จ์ถ๋ฉ๋๋ค. Google์ LCP๋ฅผ 2.5์ด ๋ฏธ๋ง์ผ๋ก ๊ถ์ฅํฉ๋๋ค. ์ด๋ฏธ์ง ์์ถ์ ์ด ์ ์๋ฅผ ๊ฐ์ ํ๋ ๊ฐ์ฅ ํจ๊ณผ์ ์ธ ๋ฐฉ๋ฒ ์ค ํ๋์ ๋๋ค.
- CLS(Cumulative Layout Shift): ์์ถ ์์ฒด๊ฐ ๋ ์ด์์ ์ด๋์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์น์ง๋ ์์ง๋ง, ์์ถ๋ ์ด๋ฏธ์ง์ width์ height ์์ฑ์ ์ง์ ํ๋ฉด ์ด๋ฏธ์ง๊ฐ ๋ก๋๋ ๋ ๋ ์ด์์์ด ๊ฐ์๊ธฐ ์์ง์ด๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค. ์์ถ์ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์ ์ ์๋ ์๊ฐ์ ์ค์ฌ์ค๋๋ค.
Lighthouse ์ฑ๋ฅ ๊ฐ์ฌ์์ ์ด๋ฏธ์ง ์ต์ ํ๋ ์ข ์ข ๋จ์ผ ๋ณ๊ฒฝ์ผ๋ก ๊ฐ์ฅ ํฐ ์ํฅ์ ๋ฏธ์น ์ ์๋ ํญ๋ชฉ์ ๋๋ค.
Q: ํญ์ ๊ฐ์ฅ ๋์ ํ์ง ์ค์ ์ ์ฌ์ฉํด์ผ ํ๋์?
A:
์๋์. ๊ฐ์ฅ ๋์ ํ์ง ์ค์ (100)์ ์ฌ์ฉํ๋ฉด ์น ์ฌ์ฉ์์ ์ธ์งํ ์ ์๋ ์ด์ ์์ด ๋ถํ์ํ๊ฒ ํฐ ํ์ผ์ด ์์ฑ๋ฉ๋๋ค. ๋๋ถ๋ถ์ ์ด๋ฏธ์ง์์ ์ฌ๋์ ๋์ ํ์ง 100๊ณผ ํ์ง 90์ ์ฐจ์ด๋ฅผ ๊ตฌ๋ถํ ์ ์์ง๋ง, ํ์ผ ํฌ๊ธฐ ์ฐจ์ด๋ 50% ์ด์์ผ ์ ์์ต๋๋ค.
์ ๋ฌธ์ ์ธ ์น ์์ ํ๋ฆ์์๋ ์ผ๋ฐ์ ์ผ๋ก JPEG์ WebP์ ํ์ง 80~85, AVIF์ ํ์ง 50~70์ ์ฌ์ฉํฉ๋๋ค. ์ด๋ฌํ ์ค์ ์ ์๋ณธ๊ณผ ๋ณธ์ง์ ์ผ๋ก ๋์ผํ๊ฒ ๋ณด์ด๋ฉด์๋ ํ์ผ ํฌ๊ธฐ๋ ํจ์ฌ ์์ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํฉ๋๋ค.
ํ์ง 100์ ๋ง์คํฐ ์ฌ๋ณธ๊ณผ ์์นด์ด๋ธ ์ ์ฅ์ฉ์ผ๋ก ๋จ๊ฒจ๋์ธ์. ์น ์ ๊ณต์ฉ์ผ๋ก๋ ํญ์ ์ต์ ํํ์ธ์.
Q: ๋ด ์์ ํ๋ฆ์ ๊ฐ์ฅ ์ ํฉํ ์ด๋ฏธ์ง ์์ถ ๋ฐฉ๋ฒ์ ๋ฌด์์ธ๊ฐ์?
A:
๊ฐ์ฅ ์ ํฉํ ์์ถ ์์ ํ๋ฆ์ ์์ ๋๊ณผ ๊ธฐ์ ํ๊ฒฝ์ ๋ฐ๋ผ ๋ค๋ฆ ๋๋ค:
- ๊ฐ๋ ์ฌ์ฉ(์ฃผ๋น ๋ช ๊ฐ์ ์ด๋ฏธ์ง): ์จ๋ผ์ธ ์ด๋ฏธ์ง ์์ถ๊ธฐ๋ฅผ ์ฌ์ฉํ์ธ์. ์ ๋ก๋ํ๊ณ ํ์ง์ ์กฐ์ ํ ๋ค์ ๋ช ์ด ๋ง์ ๋ค์ด๋ก๋ํ ์ ์์ต๋๋ค. ์ํํธ์จ์ด ์ค์น๊ฐ ํ์ ์์ต๋๋ค.
- ์ ๊ธฐ์ ์ธ ๊ฒ์(๋ธ๋ก๊ทธ, ์์ ๋ฏธ๋์ด): CMS์ ์์ถ์ ํตํฉํ๊ฑฐ๋ ๋ฐฐ์น ์ฒ๋ฆฌ๋ฅผ ์ง์ํ๋ ๋ฐ์คํฌํฑ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ธ์.
- ์ด์ ์น์ฌ์ดํธ(์๋ฐฑ ๊ฐ์ ์ด๋ฏธ์ง): sharp๋ Squoosh CLI์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋น๋ ํ์ดํ๋ผ์ธ์์ ์์ถ์ ์๋ํํ์ธ์. ํ์ง ๊ธฐ์ค์ ํ ๋ฒ ์ค์ ํ๋ฉด ๋๊ตฌ ์ฒด์ธ์ด ๋ชจ๋ ์ด๋ฏธ์ง๋ฅผ ์ฒ๋ฆฌํฉ๋๋ค.
- ํธ๋ํฝ์ด ๋ง์ ์ฌ์ดํธ: ์๋ ์์ถ๊ณผ ์ค์๊ฐ ์ต์ ํ ๋ฐ ํฌ๋งท ํ์์ ์ ๊ณตํ๋ CDN์ ๊ฒฐํฉํ์ธ์.
์ด๋ค ๊ท๋ชจ์์๋ ๊ธฐ๋ณธ ์์น์ ๋์ผํฉ๋๋ค: ์๋ณธ ํฌ๋งท์ผ๋ก ์์ถํ๊ณ , ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ ๊ฑฐํ๊ณ , ์ค์ ์ฑ๋ฅ ์ธก์ ์ ํตํด ํ์ง ์ค์ ์ ํ ์คํธํ์ธ์.
๋ฌด๋ฃ ์จ๋ผ์ธ ์ด๋ฏธ์ง ์์ถ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ JPEG, PNG, WebP, AVIF ์ด๋ฏธ์ง๋ฅผ ์ฆ์ ์ต์ ํํ์ธ์. ๊ฐ์ ๋, ํฌ๋งท ๋ณํ๋ ํ์ ์์ด ์น์ฌ์ดํธ์ ๋ ์ข๊ณ ๋ ๋น ๋ฅธ ์ด๋ฏธ์ง๋ฅผ ์ ๊ณตํ์ธ์.