์์ค vs ๋ฌด์์ค ์์ถ โ ์ฐจ์ด์ ์ ๋ฌด์์ธ๊ฐ์?
์์ค vs ๋ฌด์์ค ์์ถ
์น์ฉ ์ด๋ฏธ์ง๋ฅผ ์ ์ฅํ ๋๋ง๋ค ๊ทผ๋ณธ์ ์ธ ์ ํ์ ์ง๋ฉดํฉ๋๋ค. ์๋ณธ ๋ฐ์ดํฐ๋ฅผ ์ผ๋ง๋ ๋ง์ด ์ ์งํ ๊ฒ์ธ๊ฐ? ์ด ๊ฒฐ์ ์ ํ์ผ ํฌ๊ธฐ, ๋ก๋ฉ ์๋, ์๊ฐ์ ํ์ง์ ๊ฒฐ์ ํฉ๋๋ค. ์์ค ์์ถ๊ณผ ๋ฌด์์ค ์์ถ์ด๋ผ๋ ๋ ๊ฐ์ง ์ ๊ทผ ๋ฐฉ์์ ์๋ก ๋ค๋ฅธ ๋ชฉ์ ์ ์ํํ๋ฉฐ, ๊ทธ ์ฐจ์ด๋ฅผ ์ดํดํ๋ ๊ฒ์ด ํจ๊ณผ์ ์ธ ์ด๋ฏธ์ง ์ต์ ํ์ ํต์ฌ์ ๋๋ค.
์ด๋ฏธ์ง ์์ถ์ด๋?
์ด๋ฏธ์ง ์์ถ์ ์ด๋ฏธ์ง๋ฅผ ํํํ๋ ๋ฐ ํ์ํ ๋นํธ ์๋ฅผ ์ค์ด๋ ๊ณผ์ ์ ๋๋ค. ์์ถ ์๊ณ ๋ฆฌ์ฆ์ ์ด๋ฏธ์ง ๋ฐ์ดํฐ๋ฅผ ๋ถ์ํ๊ณ ๋ ํจ์จ์ ์ผ๋ก ์ ์ฅํ๋ ๋ฐฉ๋ฒ์ ์ฐพ์ต๋๋ค. ์ฌ์ฉํ๋ ๊ธฐ์ ์ ๋ฐ๋ผ ์๋ณธ ๋ฐ์ดํฐ๋ฅผ ์๋ฒฝํ๊ฒ ์ฌ๊ตฌ์ฑํ ์ ์๋์ง, ๋๋ ์ผ๋ถ ์ ๋ณด๊ฐ ์๊ตฌ์ ์ผ๋ก ํ๊ธฐ๋๋์ง๊ฐ ๊ฒฐ์ ๋ฉ๋๋ค.
์์ค ์์ถ: ํฌ๊ธฐ๋ฅผ ์ํด ๋ฐ์ดํฐ๋ฅผ ๊ตํ
์์ค ์์ถ์ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด๊ธฐ ์ํด ์ด๋ฏธ์ง ๋ฐ์ดํฐ๋ฅผ ์๊ตฌ์ ์ผ๋ก ์ ๊ฑฐํฉ๋๋ค. ์๊ณ ๋ฆฌ์ฆ์ ์ฌ๋์ ๋์ด ๊ฐ์ฅ ์ธ์งํ๊ธฐ ์ด๋ ค์ด ์ธ๋ถ ์ฌํญ(๋ฏธ๋ฌํ ์์ ๋ณํ, ๊ณ ์ฃผํ ๋ ธ์ด์ฆ, ๋ฏธ์ธํ ์ง๊ฐ)์ ์๋ณํ์ฌ ํ๊ธฐํฉ๋๋ค. ํ๋ฒ ์ ๊ฑฐ๋ ์ด ๋ฐ์ดํฐ๋ ๋ณต๊ตฌํ ์ ์์ต๋๋ค.
๊ธฐ์ ์ ์์ค์์์ ์๋ ๋ฐฉ์:
์์ค ์์ถ๊ธฐ๋ ์ด๋ฏธ์ง๋ฅผ ์ฃผํ์ ๋๋ฉ์ธ์ผ๋ก ๋ณํํ ๋ค์ ์ฃผํ์ ๊ณ์๋ฅผ ์์ํํฉ๋๋ค. ๊ณ ์ฃผํ ์ธ๋ถ ์ฌํญ(๋ ์นด๋ก์ด ๊ฐ์ฅ์๋ฆฌ, ๋ฏธ์ธํ ๋ ธ์ด์ฆ)์ ๋ ์ ์ ๋นํธ๋ก ํํ๋๊ณ , ์ ์ฃผํ ์ ๋ณด(ํฐ ์์ ์์ญ)๋ ๋ณด์กด๋ฉ๋๋ค. ํ์ง ์ค์ ์ ์ด ์์ํ๊ฐ ์ผ๋ง๋ ๊ณต๊ฒฉ์ ์ผ๋ก ์ ์ฉ๋๋์ง๋ฅผ ์ ์ดํฉ๋๋ค.
์ค์ ์ ๊ฐ ํจ๊ณผ:
ํ์ง 80์ผ๋ก JPEG ์์ถ๋ 5MB ์นด๋ฉ๋ผ ์ฌ์ง์ ์ผ๋ฐ์ ์ผ๋ก 200~400KB ํ์ผ์ ์์ฑํ๋ฉฐ, ์ด๋ 90~95% ๊ฐ์์ ๋๋ค. ํ์ง 60์์๋ ๋์ผํ ์ด๋ฏธ์ง๊ฐ 100KB๊น์ง ๋จ์ด์ง ์ ์์ต๋๋ค. ํ์ง 80๊ณผ ์๋ณธ ๊ฐ์ ์๊ฐ์ ์ฐจ์ด๋ ํ์ค ๋์คํ๋ ์ด์์ ์ข ์ข ๊ฐ์งํ ์ ์์ต๋๋ค.
์์ค ์์ถ์ ์ฌ์ฉํด์ผ ํ๋ ๊ฒฝ์ฐ:
- ์น์ฌ์ดํธ์ฉ ์ฌ์ง ๋ฐ ๋ณต์กํ ์ด๋ฏธ์ง
- ํ์ผ ํฌ๊ธฐ๊ฐ ์ค์ํ ์์ ๋ฏธ๋์ด ๊ฒ์๋ฌผ
- ๋์ฉ๋ ์ฌ์ง์ ์ด๋ฉ์ผ ์ฒจ๋ถ ํ์ผ
- ์ธ๋ค์ผ ๋ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ด๋ฏธ์ง
- ๋์ญํญ์ด๋ ์ ์ฅ ๊ณต๊ฐ์ด ์ ํ๋ ๋ชจ๋ ์๋๋ฆฌ์ค
์ผ๋ฐ์ ์ธ ์์ค ํฌ๋งท:
JPEG, WebP (์์ค ๋ชจ๋), AVIF. ์ธ ๊ฐ์ง ๋ชจ๋ ์กฐ์ ๊ฐ๋ฅํ ํ์ง ์ค์ ์ ํ์ฉํ์ฌ ํฌ๊ธฐ ๋๋น ํ์ง ํธ๋ ์ด๋์คํ๋ฅผ ์ ์ดํ ์ ์์ต๋๋ค.
์์ค ์์ถ์ ์ํ:
- ์ธ๋ ์์ค: ์์ค ํ์ผ์ ๋ฐ๋ณต์ ์ผ๋ก ์ ์ฅํ๋ฉด ์ ์ฅํ ๋๋ง๋ค ํ์ง์ด ์ ํ๋ฉ๋๋ค.
- ๊ฐ์์ ์ํฐํฉํธ: ๋ฎ์ ํ์ง ์ค์ ์์๋ ๋ธ๋กํ ์์ถ ์ํฐํฉํธ์ ์์ ๋ ํ์์ด ๋ช ๋ฐฑํด์ง๋๋ค.
- ํธ์ง ํ ๋ค์ ์ ์ฅํ ์ด๋ฏธ์ง์๋ ์ ํฉํ์ง ์์ต๋๋ค. ๊ฐ ๋ฐ๋ณต๋ง๋ค ๋ ๋ง์ ์ธ๋ถ ์ฌํญ์ด ์์ค๋๊ธฐ ๋๋ฌธ์ ๋๋ค.
๋ฌด์์ค ์์ถ: ์๋ฒฝํ ๋ณด์กด
๋ฌด์์ค ์์ถ์ ์ด๋ฏธ์ง ์ ๋ณด๋ฅผ ์ ํ ์ ๊ฑฐํ์ง ์๊ณ ์ค๋ณต ๋ฐ์ดํฐ๋ฅผ ์๋ณํ๊ณ ์ ๊ฑฐํ์ฌ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ ๋๋ค. ์์ถ ํด์ ๋ ์ด๋ฏธ์ง๋ ์๋ณธ๊ณผ ํฝ์ ๋จ์๋ก ์์ ํ ๋์ผํฉ๋๋ค. ๋ชจ๋ ์์ ๊ฐ, ๋ชจ๋ ๊ฐ์ฅ์๋ฆฌ, ๋ชจ๋ ๋ฏธ๋ฌํ ๊ทธ๋ผ๋ฐ์ด์ ์ด ์ ํํ ๋ณด์กด๋ฉ๋๋ค.
๊ธฐ์ ์ ์์ค์์์ ์๋ ๋ฐฉ์:
๋ฌด์์ค ์์ถ๊ธฐ๋ ์คํ ๊ธธ์ด ์ธ์ฝ๋ฉ, ํํ๋ง ์ฝ๋ฉ, ๋ธํ ์ธ์ฝ๋ฉ๊ณผ ๊ฐ์ ๊ธฐ์ ์ ์ฌ์ฉํฉ๋๋ค. ๊ฐ ํฝ์ ์ ๋ ๋ฆฝ์ ์ผ๋ก ์ ์ฅํ๋ ๋์ ์ธ์ ํฝ์ ๊ฐ์ ์ฐจ์ด๋ฅผ ์ ์ฅํ๊ณ ํต๊ณ ๋ชจ๋ธ์ ์ฌ์ฉํ์ฌ ์ผ๋ฐ์ ์ธ ํจํด์ ๋ ์ ์ ๋นํธ๋ก ํํํฉ๋๋ค. PNG์์ ์ฌ์ฉ๋๋ ์๊ณ ๋ฆฌ์ฆ์ธ DEFLATE๊ฐ ์ ์๋ ค์ง ์์ ๋๋ค.
์ค์ ์ ๊ฐ ํจ๊ณผ:
๋์ ๋จ์ ์์ญ์ด ์๋ PNG ์คํฌ๋ฆฐ์ท์ ํ์ง ์์ค ์์ด 40~70% ์์ถ๋ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ฌ์ง PNG ์ด๋ฏธ์ง๋ ์ฌ์ง์ ๋ ธ์ด์ฆ๊ฐ ํจ์จ์ ์ธ ํจํด ๋งค์นญ์ ๋ฐฉํดํ๊ธฐ ๋๋ฌธ์ 10~30%๋ง ์์ถ๋ ์ ์์ต๋๋ค.
๋ฌด์์ค ์์ถ์ ์ฌ์ฉํด์ผ ํ๋ ๊ฒฝ์ฐ:
- ๋ ์นด๋ก์ด ๊ฐ์ฅ์๋ฆฌ์ ํ ์คํธ๊ฐ ์๋ ๋ก๊ณ , ์์ด์ฝ, ๊ทธ๋ํฝ
- ์คํฌ๋ฆฐ์ท ๋ฐ ํ๋ฉด ์บก์ฒ
- UI ๋ชฉ์ ๋ฐ ์์ด์ดํ๋ ์
- ๋ชจ๋ ํฝ์ ์ด ์ค์ํ ์๋ฃ ๋๋ ์์นด์ด๋ธ ์ด๋ฏธ์ง
- ๋์ค์ ํธ์งํ ์ด๋ฏธ์ง์ ๋ง์คํฐ ์ฌ๋ณธ
- ์ํ ํฌ๋ช ๋๊ฐ ํ์ํ ์ด๋ฏธ์ง
์ผ๋ฐ์ ์ธ ๋ฌด์์ค ํฌ๋งท:
PNG๋ ๊ฐ์ฅ ๋๋ฆฌ ์ฌ์ฉ๋๋ ๋ฌด์์ค ํฌ๋งท์ ๋๋ค. WebP๋ ๋ง์ ์ด๋ฏธ์ง ์ ํ์์ PNG๋ณด๋ค ๋ ์์ ํ์ผ์ ์์ฑํ๋ ๋ฌด์์ค ๋ชจ๋๋ ์ ๊ณตํฉ๋๋ค. AVIF๋ ๋ฌด์์ค ๋ชจ๋๋ฅผ ํฌํจํฉ๋๋ค.
๋ฌด์์ค ์์ถ์ ํ๊ณ:
- ์ฌ์ง ์ฝํ ์ธ ์ ๊ฒฝ์ฐ ์์ค ์์ถ๋ณด๋ค ์๋นํ ํฐ ํ์ผ ํฌ๊ธฐ.
- ๋์ญํญ์ด ์ฐ๋ ค๋๋ ๋๊ท๋ชจ ์น ์ฌ์ฉ์๋ ์ ํฉํ์ง ์์.
- ๋นํธ ์ฌ๋ ๊ฐ์๊ฐ PNG๋ฅผ ์๋ฏธ ์๊ฒ ์ถ์ํ๋ ์ ์ผํ ๋ฐฉ๋ฒ์ธ ๊ฒฝ์ฐ๊ฐ ์์ผ๋ฉฐ, ์ด๋ ์์ถ ์์ฒด๋ ๋ฌด์์ค์ด์ง๋ง ๊ธฐ์ ์ ์ผ๋ก ์์ค ์์ ์ ๋๋ค.
๋๋ํ ๋น๊ต
| ์์ | ์์ค ์์ถ | ๋ฌด์์ค ์์ถ | |--------|-------------------|----------------------| | ํฝ์ ์๋ฒฝ ์ถ๋ ฅ | ์๋์ | ์ | | ์ผ๋ฐ์ ์ธ ํ์ผ ํฌ๊ธฐ ๊ฐ์ | 60~95% | 10~50% | | ์กฐ์ ๊ฐ๋ฅํ ํ์ง | ์ | ์๋์ | | ์ฌ์ง์ ์ ํฉ | ์ | ๋ถ์ ํฉ | | ๊ทธ๋ํฝ์ ์ ํฉ | ๋ณดํต | ํ์ํจ | | ํฌ๋ช ๋ ์ง์ | ํฌ๋งท์ ๋ฐ๋ผ ๋ค๋ฆ | ์ (PNG, WebP) | | ๋ฐ๋ณต ์ ์ฅ ์ ํ์ง ์ ํ | ์ | ์๋์ | | ๊ฐ์ญ์ | ์๋์ | ์ |
๋ ์ ๊ทผ ๋ฐฉ์์ ๊ฒฐํฉํ ์ ์๋์?
๋ค, ์ด๊ฒ์ ์ ๋ฌธ ์ํฌํ๋ก์ฐ์์ ๋ชจ๋ฒ ์ฌ๋ก์ ๋๋ค. ์ ๋ต์ ๊ฐ๋จํฉ๋๋ค.
- ๋ง์คํฐ ์ด๋ฏธ์ง๋ฅผ ๋ฌด์์ค ํฌ๋งท(PNG ๋๋ ๋ฌด์์ค WebP)์ผ๋ก ์ ์ฅํฉ๋๋ค.
- ์ ํํ ํ์ง ์์ค์์ ์์ค ํฌ๋งท(JPEG, WebP ์์ค, AVIF)์ผ๋ก ๋ฐฐํฌ์ฉ ์ฌ๋ณธ์ ๋ด๋ณด๋ ๋๋ค.
์ด๋ ๊ฒ ํ๋ฉด ๋ ์ธ๊ณ์ ์ฅ์ ์ ๋ชจ๋ ์ป์ ์ ์์ต๋๋ค. ์ธ์ ๋ ์ง ํธ์งํ๊ณ ๋ค์ ๋ด๋ณด๋ผ ์ ์๋ ์๋ฒฝํ ๋ง์คํฐ์ ํ๋ก๋์ ์ฉ ์๊ณ ๋น ๋ฅธ ๋ฐฐํฌ ํ์ผ์ ๋๋ค. ๊ทธ๋ฌ๋ ๋๊ตฌ๊ฐ ์ด๋ฏธ์ง๋ฅผ ์๋ณธ ํฌ๋งท ๊ทธ๋๋ก ์ง์ ์์ถํ ๋๋ JPEG์ WebP์ ์์ค ์ต์ ํ๋ฅผ ์ ์ฉํ๋ฉด์ PNG๋ ๋ฌด์์ค ํํ๋ก ์ ์งํ ์ ์์ต๋๋ค. ํฌ๋งท ๋ณํ์ด ํ์ํ์ง ์์ต๋๋ค.
ํ๋ก์ ํธ์ ์ ํฉํ ์ ๊ทผ ๋ฐฉ์ ์ ํ
์์ค๊ณผ ๋ฌด์์ค ์ฌ์ด์ ๊ฒฐ์ ์ ์ด๋ฏธ์ง ์ฝํ ์ธ ์ ์ฑ๋ฅ ์๊ตฌ ์ฌํญ์ ๋ฌ๋ ค ์์ต๋๋ค.
- ์ฌ์ง: ์์ค๋ก ๊ฐ์ธ์. ํ์ผ ํฌ๊ธฐ ์ ๊ฐ์ด ์์ฒญ๋๊ณ ํฉ๋ฆฌ์ ์ธ ์ค์ ์์ ํ์ง ์์ค์ ๋ฌด์ํ ์ ์์ต๋๋ค.
- ํ ์คํธ๋ ๋ก๊ณ ๊ฐ ์๋ ๊ทธ๋ํฝ: ๋ฌด์์ค๋ก ๊ฐ์ธ์. ์ด๋ฌํ ์ด๋ฏธ์ง๋ฅผ ์ ๋ฌธ์ ์ผ๋ก ๋ณด์ด๊ฒ ํ๋ ๋ ์นด๋ก์ด ๊ฐ์ฅ์๋ฆฌ์ ํ ์คํธ๋ ์์ค ์์ถ์ด ๊ฐ์ฅ ๋จผ์ ํ๊ดดํ๋ ๋์์ ๋๋ค.
- ์คํฌ๋ฆฐ์ท: ๋ฌด์์ค์ ์ ๋ช ํ ํ ์คํธ์ UI ์์๋ฅผ ๋ณด์กดํฉ๋๋ค.
- ํ์ ์ด ์์ง ์์ ๋๋ ๋ ๋ค ์๋ํด ๋ณด์ธ์. ์์ค ๋ฐ ๋ฌด์์ค ๋ฐฉ๋ฒ์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ์์ถํ ๋ค์ ์ถ๋ ฅ์ ๋๋ํ ๋น๊ตํ์ธ์. ์๊ฐ์ ์ฐจ์ด๊ฐ ๊ฒฐ์ ์ ๋ช ํํ๊ฒ ํด์ค ๊ฒ์ ๋๋ค.
์๋ณธ ํฌ๋งท์ ์ ์งํ๋ฉด์ ์ด๋ฏธ์ง์ ์์ค ๋๋ ๋ฌด์์ค ์์ถ์ ์ ์ฉํ๋ ค๋ฉด ๋น์ฌ์ ๋ฌด๋ฃ ์จ๋ผ์ธ ์ด๋ฏธ์ง ์์ถ๊ธฐ๋ฅผ ์ฌ์ฉํ์ธ์. ์ ๋ก๋ํ๊ณ ํ์ง์ ์กฐ์ ํ ๋ค์ ๋ค์ด๋ก๋ํ์ธ์. ๊ทธ๋งํผ ๊ฐ๋จํฉ๋๋ค.