SVG ๋ก๊ณ ยท์์ด์ฝ์ 2๋ฐฐยท4๋ฐฐ๋ก ํค์๋ ์ ๋ช ํฉ๋๋ค. ์ฌ์ง ๊ฐ์ ํฝ์ ์ด๋ฏธ์ง๋ ํค์ฐ๋ฉด ํ๋ ค์ง๋ฏ๋ก ์๋ณธ ํฌ๊ธฐ๋ ๋ ์์ ๊ฐ๋ก๋ฅผ ๊ถ์ฅํฉ๋๋ค.
๐ผ๏ธ ์ด๋ฏธ์ง ํฌ๋งท ๋ณํ๊ธฐ
๐ก ์ด๋ฏธ์ง ํฌ๋งท ๋ณํ ๊ฐ์ด๋
์ถ๋ ฅ ํฌ๋งท์ ๋ฌด์์ ๊ณ ๋ฅด๋ฉด ๋๋์?
์ ๋ ฅ์ JPGยทPNGยทWebPยทGIFยทBMPยทSVG(๋ธ๋ผ์ฐ์ ๊ฐ ์ฝ์ ์ ์์ผ๋ฉด AVIF๋), ์ถ๋ ฅ์ JPGยทPNGยทWebP์ ๋๋ค. GIFยทBMPยทSVG๋ ์ถ๋ ฅ ํฌ๋งท์ผ๋ก ๊ณ ๋ฅผ ์ ์์ต๋๋ค.
- JPG (JPEG): ํ๊ฒฝยท์ธ๋ฌผ ์ฌ์ง์ฒ๋ผ ์์ด ๋ค์ํ ์ด๋ฏธ์ง์ ์๋ง์ ์์ค ์์ถ ํ์์ ๋๋ค. ๊ฑฐ์ ๋ชจ๋ ํ๋ก๊ทธ๋จ๊ณผ ์ ๋ก๋ ์์์์ ์ด๋ฆฌ๋ฉฐ, ํฌ๋ช ํ ๋ถ๋ถ์ ํฐ์์ผ๋ก ์ฑ์์ง๋๋ค.
- PNG: ๋ก๊ณ , ๊ธ์จ๊ฐ ๋ง์ ์คํฌ๋ฆฐ์ท, ํฌ๋ช ๋ฐฐ๊ฒฝ์ด ํ์ํ ์ด๋ฏธ์ง์ ์๋ง์ ๋ฌด์์ค ํ์์ ๋๋ค. ์ฌ์ง์ PNG๋ก ๋ฐ๊พธ๋ฉด ํ์ง์ ๊ทธ๋๋ก์ง๋ง ์ฉ๋์ด ํฌ๊ฒ ๋์ด๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค.
- WebP: ์ฌ์ง๊ณผ ํฌ๋ช ์ด๋ฏธ์ง๋ฅผ ๋ชจ๋ ์ง์ํ๋ ์น์ฉ ํ์์ ๋๋ค. ๊ฐ์ ํ์ง์์ JPGยทPNG๋ณด๋ค ์์์ง๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ง๋ง ํญ์ ๊ทธ๋ฐ ๊ฒ์ ์๋๋ฉฐ, ์ผ๋ถ ์ค๋๋ ํ๋ก๊ทธ๋จ์ WebP๋ฅผ ์ด์ง ๋ชปํฉ๋๋ค. Safari์ฒ๋ผ WebP ์ ์ฅ์ ์ง์ํ์ง ์๋ ๋ธ๋ผ์ฐ์ ์์๋ ๋ฒํผ์ด ๋นํ์ฑํ๋ฉ๋๋ค.
SVG ๋ก๊ณ ๋ฅผ ํฌ๊ฒ, ์ ๋ช ํ๊ฒ ์ ์ฅํ๋ ค๋ฉด?
SVG๋ ๋ฒกํฐ ํ์์ด๋ผ ํฌ๊ธฐ๋ฅผ ํค์๋ ๊นจ์ง์ง ์์ง๋ง, PNGยทJPG๋ก ๋ฐ๊พธ๋ ์๊ฐ ์ ํด์ง ํฝ์ ์์ ๊ทธ๋ฆผ์ด ๋ฉ๋๋ค. ์๋ณธ SVG์ ์ ํ ํฌ๊ธฐ(widthยทheight ๋๋ viewBox)๊ฐ ์์ผ๋ฉด ๊ฒฐ๊ณผ๋ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด 120ร40์ผ๋ก ์ง์ ๋ ๋ก๊ณ ๋ '์๋ณธ ํฌ๊ธฐ'์์ 120ร40px PNG๊ฐ ๋ฉ๋๋ค. ๋ฐํ ์๋ฃ๋ ์ธ์์ฉ์ด๋ผ๋ฉด '2๋ฐฐ'ยท'4๋ฐฐ' ๋๋ '๊ฐ๋ก ์ง์ '์ผ๋ก ์ํ๋ ํฌ๊ธฐ๋ฅผ ์ ํ์ธ์. ์ด ๋๊ตฌ๋ SVG๋ฅผ ๋ชฉํ ํฌ๊ธฐ๋ก ๋ค์ ๊ทธ๋ฆฌ๋ฏ๋ก ํ๋ํด๋ ๊ฐ์ฅ์๋ฆฌ๊ฐ ์ ๋ช ํฉ๋๋ค.
SVG ์์์ ์ธ๋ถ ์ด๋ฏธ์ง๋ ์น ๊ธ๊ผด์ ๋ถ๋ฌ์ค๋ ๊ฒฝ์ฐ ๋ธ๋ผ์ฐ์ ๋ณด์ ์ ์ฑ ๋๋ฌธ์ ๊ทธ ๋ถ๋ถ์ด ๋น ์ง ์ ์์ต๋๋ค. ๊ฒฐ๊ณผ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ๊ผญ ํ์ธํ์ธ์.
GIF ์ ๋๋ฉ์ด์ ๋ ๊ทธ๋๋ก ์ ์ง๋๋์?
์๋๋๋ค. ์ด ๋๊ตฌ๋ ๋ธ๋ผ์ฐ์ ์บ๋ฒ์ค์ ์ด๋ฏธ์ง๋ฅผ ๊ทธ๋ฆฐ ๋ค ๋ค์ ์ ์ฅํ๋ฏ๋ก ์ ๋๋ฉ์ด์ GIF๋ ์ฒซ ์ฅ๋ฉด ํ ์ฅ์ ์ ์ง ์ด๋ฏธ์ง๋ก ๋ณํ๋ฉ๋๋ค. SVG๋ ํฝ์ ์ด๋ฏธ์ง๋ก ๋ฐ๋์ด ๋ฒกํฐ ํธ์ง ์ ๋ณด๋ ์ฌ๋ผ์ง๋๋ค. ํด๋น ํ์ผ์ ์ถ๊ฐํ๋ฉด ๋ณํ ์ ์ ์๋ด๊ฐ ํ์๋ฉ๋๋ค.
ํ์งยทํฌ๊ธฐ ์ค์ ์ ์ด๋ป๊ฒ ํ๋์?
- ํ์ง(JPGยทWebP): ๊ฐ์ด ๋์์๋ก ์์ค์ด ์ค์ง๋ง ์ฉ๋์ ์ปค์ง๋๋ค. ์ฌ์ง์ 80~90%๋ฉด ๋๋ถ๋ถ ์ฐจ์ด๋ฅผ ๋๋ผ๊ธฐ ์ด๋ ต์ต๋๋ค. ๊ฒฐ๊ณผ ์นด๋์ ์ค์ ์ฉ๋๊ณผ ํ๋ฉด์ ํจ๊ป ํ์ธํ์ธ์.
- PNG: ๋ฌด์์ค์ด๋ผ ํ์ง ์ค์ ์ด ์์ต๋๋ค. ์ฉ๋์ ์ค์ด๋ ค๋ฉด '๊ฐ๋ก ์ง์ '์ผ๋ก ํฌ๊ธฐ๋ฅผ ์ค์ด๊ฑฐ๋ ์ด๋ฏธ์ง ์ฉ๋ ์ค์ด๊ธฐ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ธ์.
- ํฌ๊ธฐ: '๊ฐ๋ก ์ง์ '์ ๋น์จ์ ์ ์งํด ์ธ๋ก๋ฅผ ์๋์ผ๋ก ๋ง์ถฅ๋๋ค. ์ฌ์ง์ ์๋ณธ๋ณด๋ค ํฌ๊ฒ ๋ง๋ค๋ฉด ํ๋ ค์ง๋ฏ๋ก ํ์ํ ํฌ๊ธฐ ์ดํ๋ก ์ค์ ํ์ธ์.
์บ๋ฒ์ค๋ก ๋ค์ ์ ์ฅํ๋ ๊ณผ์ ์์ EXIF ๋ฑ ๋ฉํ๋ฐ์ดํฐ์ ์ผ๋ถ ์์ ํ๋กํ์ ๊ฒฐ๊ณผ์ ํฌํจ๋์ง ์์ต๋๋ค.
์์ดํฐ HEIC ์ฌ์ง๋ ๋ณํํ ์ ์๋์?
HEIC(HEIF)๋ ์์ดํฐ์ ๊ธฐ๋ณธ ์ฌ์ง ํ์์ด์ง๋ง ๋๋ถ๋ถ์ PCยท์๋๋ก์ด๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ฝ์ง ๋ชปํด ์ด ๋๊ตฌ์์๋ ์ด ์ ์์ต๋๋ค. ์์ดํฐ Safari์์ ์ด ํ์ด์ง์ ํ์ผ ์ ํ์ผ๋ก ์ฌ์ง ๋ณด๊ดํจ์ ์ฌ์ง์ ๊ณ ๋ฅด๋ฉด iOS๊ฐ ๋ณดํต JPG๋ก ๋ฐ๊ฟ ์ ๋ฌํ๋ฏ๋ก ๊ทธ๋๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค. ์๋ก ์ฐ๋ ์ฌ์ง์ JPG๋ก ์ ์ฅํ๋ ค๋ฉด ์ค์ > ์นด๋ฉ๋ผ > ํฌ๋งท์์ '๋์ ํธํ์ฑ'์ ์ ํํ์ธ์. ์ด๋ฏธ PC๋ก ์ฎ๊ธด HEIC ํ์ผ์ Mac์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ฑ์์ ํ์ผ > ๋ด๋ณด๋ด๊ธฐ๋ก JPEG๋ฅผ ์ ํํด ๋ณํํ ์ ์์ต๋๋ค.
์ ๋ก๋ํ ๊ฐ์ธ ์ฌ์ง์ ์๋ฒ์ ๊ธฐ๋ก๋๋์?
์ ํํ ์ด๋ฏธ์ง์ ์ฝ๊ธฐ์ ๋ณํ์ ํ์ฌ ๋ธ๋ผ์ฐ์ ์์์ ์งํ๋๋ฉฐ ๋ณํ์ ์ํด ํ์ผ์ ์๋ฒ์ ์ ๋ก๋ํ์ง ์์ต๋๋ค. ์ฌ๋ฌ ์ฅ์ ZIP์ผ๋ก ์ ์ฅํ ๋๋ ๋ธ๋ผ์ฐ์ ์์์ ํ์ผ์ ๋ฌถ์ต๋๋ค. ๋ค๋ง ๊ณต์ฉ ๊ธฐ๊ธฐ์์๋ ๋ค์ด๋ก๋๋ ๊ฒฐ๊ณผ ํ์ผ๊ณผ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ก์ ์ง์ ๊ด๋ฆฌํด ์ฃผ์ธ์.