ํฐ์คํ ๋ฆฌ ์ด๋ฏธ์ง ์ค๋ฅ ๋ฐ ํ์ง ์ ํ ๋ฌธ์ ์ด์ ๋ฆฌ
ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ์์ ์ด๋ฏธ์ง๊ฐ ํ๋ฆฌ๊ฒ ๋ณด์ด๊ฑฐ๋ ๊ณฐ๋์ด ์์ด์ฝ์ผ๋ก ํ์๋ ๋, ์์ธ ๋ถ์๋ถํฐ ์ค์ ํด๊ฒฐ ๋ฐฉ๋ฒ๊น์ง ์๋ฒฝ ์ ๋ฆฌํ์ต๋๋ค. ์ด๋ฏธ์ง ์ค๋ฅ ์์ด ๋ธ๋ก๊ทธ ํ์ง์ ์ ์งํ์ธ์.
ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์ด์์๋ผ๋ฉด ํ ๋ฒ์ฏค์ ๋ธ๋ก๊ทธ์ ์ด๋ฏธ์ง๊ฐ ์ ๋๋ก ์ถ๋ ฅ๋์ง ์๊ฑฐ๋, ํ๋ฆฟํ๊ฒ ๋ณด์ด๋ ๋ฌธ์ ๋ฅผ ๊ฒช์ด๋ณธ ๊ฒฝํ์ด ์์ ๊ฒ์ ๋๋ค. ์ฒ์์ ๋จ์ํ ๋ธ๋ผ์ฐ์ ๋ฌธ์ ๋ผ๊ณ ์๊ฐํ๋ค๊ฐ, ์๋ก๊ณ ์นจ์ ํด๋ ๊ทธ๋๋ก๋ผ๋ฉด ๋นํฉ์ค๋ฌ์ธ ์๋ฐ์ ์์ต๋๋ค.
์ฌ์ค ์ด๋ฐ ๋ฌธ์ ๋ ๋จ์ํ ๋ณด๊ธฐ ์ ์ข์ ๊ฒ์ ๋์ด, ๊ฒ์ ๋
ธ์ถ(SEO), ๋ฐฉ๋ฌธ์์ ์ ๋ขฐ๋, ๊ทธ๋ฆฌ๊ณ ๋ธ๋ก๊ทธ ์ ๋ฐ์ ํ์ง๊น์ง ๋ฌด๋๋จ๋ฆด ์ ์์ด์.
์ค๋์ ํฐ์คํ ๋ฆฌ ์ด๋ฏธ์ง ์ค๋ฅ์ ํ์ง ์ ํ ๋ฌธ์ ๋ฅผ ์ฒ์๋ถํฐ ๋๊น์ง ์ ๋ฆฌํ๊ณ , ์ง์ ํด๊ฒฐํ ์ ์๋ ๋ฐฉ๋ฒ์ ์์๋ด
๋๋ค.
ํฐ์คํ ๋ฆฌ ์ด๋ฏธ์ง ์ค๋ฅ ์ฃผ์ ์ฆ์
์๋๋ ์ผ๋ฐ์ ์ผ๋ก ํฐ์คํ ๋ฆฌ์์ ๋ฐ์ํ๋ ์ด๋ฏธ์ง ์ค๋ฅ์ ๋ํ์ ์ธ ์ฆ์์ ๋๋ค.
- ์ด๋ฏธ์ง ์๋ฆฌ์ ๊ณฐ๋์ด ์์ด์ฝ ๋ฑ ๋์ฒด ์ด๋ฏธ์ง ๊ณฐ๋์ด(Fallback) ์ถ๋ ฅ
- ์ด๋ฏธ์ง ๊ณต๊ฐ๋ง ๋จ๊ณ ๋ด์ฉ์ด ๋น์ด ์์
- ํน์ ํ์ด์ง์์ ์ด๋ฏธ์ง๊ฐ ๊ฐํ์ ์ผ๋ก ๋๋ฝ
- ์ธ๋ค์ผ์ด ํ๋ฆฟํ๊ฒ ํ์๋๊ฑฐ๋ ์ ํด์๋๋ก ๋ณด์
์ด๋ฐ ํ์์ด ๊ณ์๋๋ค๋ฉด, ๋จ์ ์ค๋ฅ๊ฐ ์๋๋ผ ๊ตฌ์กฐ์ ์ธ ๋ฌธ์ ์ผ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค.
์ด๋ฏธ์ง ์ค๋ฅ ์์ธ
1. ์ ๊ธฐํต์ ์ฌ์ ๋ถ ๋ฐ ์ํ๋ น ์ฌ๋ถ ๊ฒํ ์ค
ํฐ์คํ ๋ฆฌ์์ ๋ฐ์ํ๋ ์ ๊ธฐํต์ ์ฌ์ ๋ฒ ๋ฐ ๋ถ๋ฒ์ดฌ์๋ฌผ ์ฌ๋ถ ๊ฒํ ์ค๋ฅ๋, ๊ธฐ๋ณธ์ ์ผ๋ก ํฐ์คํ ๋ฆฌ์์ ์ ๊ณตํ๋ ์ด๋ฏธ์ง๋ฅผ ์์ ํ๊ฑฐ๋ ๊ธฐ์กด ๊ฒ์๋ฌผ์ ์ด๋ฏธ์ง๋ฅผ ์งง์ ์๊ฐ ์์ ๊ต์ฒดํ ๊ฒฝ์ฐ ์์ฃผ ๋ฐ์ํฉ๋๋ค.

์ด ๋ฐฉ๋ฒ์ ์๊ฐ๋ณด๋ค ๊ฐ๋จํฉ๋๋ค. ์ฝ๊ฐ์ ๋ณ์น์ ์ฌ์ฉํ๋ฉด ํด๊ฒฐํ ์ ์์ต๋๋ค. ๋์ผํ ์ด๋ฏธ์ง๋ฅผ ๋ ๋ฒ ์ ์ฅํ ํ, ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ด๋ฏธ์ง๋ฅผ ์ญ์ ํ๊ณ ์ธ๋ค์ผ ๋ฑ๋ก ์ด๋ฏธ์ง๋ฅผ ๋ณ๊ฒฝํ๋ฉด ๋ฉ๋๋ค.

2. ์ด๋ฏธ์ง ๋ก๋ฉ ์ค๋ฅ (Parsing Failure)
๋ธ๋ผ์ฐ์ ์ ๋ ๋๋ง ์์ง์ด img ํ๊ทธ์ src ์์ฑ์ ์ ์์ ์ผ๋ก ํ์ฑํ์ง ๋ชปํ๋ฉด, ํด๋น ๋
ธ๋๊ฐ ๋ ๋๋ง ํธ๋ฆฌ์ ํฌํจ๋์ง ์์ผ๋ฉฐ ๊ธฐ๋ณธ ๋์ฒด ์ด๋ฏธ์ง(Fallback Icon)๊ฐ ๋
ธ์ถ๋ฉ๋๋ค.
์ฆ ๊ณฐ๋์ด ์์ด์ฝ ๋ฑ์ฅ ๋ก๋ฉ ์คํจ๊ฐ ๋ฐ์ํฉ๋๋ค. ๊ฐ์ฅ ํํ ์์ธ์ ๋ฐ๋ก ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์ค์ง ๋ชปํ์ ๋์ ๋๋ค.
์ฃผ์ ์์ธ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ด๋ฏธ์ง ํ์ผ๋ช ์ด ํ๊ธ ๋๋ ๊ณต๋ฐฑ์ ํฌํจํ ๊ฒฝ์ฐ, URL ์ธ์ฝ๋ฉ ์ค๋ฅ๋ก ์ธํด ํ์ฑ ์คํจ
- JPEG 2000, HEIC ๋ฑ ๋ธ๋ผ์ฐ์ ๋ฏธ์ง์ ํฌ๋งท ์ฌ์ฉ ์ ๋ก๋ฉ ์คํจ
- ์ ๋ก๋ ๋์ค ๋คํธ์ํฌ ์ค๋ฅ๋ก ํ์ผ ์ผ๋ถ ์์ CDN ์ ๋ก๋ ์คํจ
3. ์ธ๋ถ ์ด๋ฏธ์ง ๋งํฌ ์ฌ์ฉ (Cross-Origin Resource Access)
์ธ๋ถ ๋๋ฉ์ธ์ ์ด๋ฏธ์ง ๋ฆฌ์์ค๋ฅผ ์ง์ ์ฐธ์กฐํ๋ ๊ฒฝ์ฐ, ํด๋น ์๋ฒ์์ ํซ๋งํฌ(hotlink) ์ฐจ๋จ ์ ์ฑ ์ด๋ CORS ๋ณด์ ์ ์ฑ ์ ์ ์ฉํ๊ณ ์๋ค๋ฉด ์์ฒญ์ด ์ฐจ๋จ๋์ด ์ด๋ฏธ์ง๊ฐ ๋ก๋ฉ๋์ง ์์์ ์์ต๋๋ค.
- HTTP 403 (Forbidden), HTTP 404 (Not Found) ์ค๋ฅ ๋ฐ์
- CORS ํค๋ ๋ฏธ์ค์ ์ผ๋ก ์ธํด ๋ธ๋ผ์ฐ์ ๊ฐ ๋ฆฌ์์ค๋ฅผ ๋ธ๋ก ์ฒ๋ฆฌ
4 HTML ๊ตฌ์กฐ ์ค๋ฅ (HTML Syntax , DOM Parsing Error)
HTML ๋ด img ์์๊ฐ ๊ตฌ์กฐ์ ์ผ๋ก ์ฌ๋ฐ๋ฅด์ง ์์ผ๋ฉด, ํ์๊ฐ ํด๋น ๋ธ๋ก์ ๊ฑด๋๋ฐ๊ฑฐ๋ ๋ ๋๋ง ๋์ค ์ค๋ฅ๋ฅผ ๋ฐ์์ํต๋๋ค.
imgํ๊ทธ ๋ดsrc๋๋ฝ,alt์๋ต, ํ๊ทธ ๋ฏธ๋ซํ ๋ฑ์ผ๋ก ์ธํด DOM ํ์๊ฐ ํด๋น ๋ ธ๋๋ฅผ ๋ฌด์- ํนํ
src=""ํํ๋ ๋ ๋๋ง ํ์ดํ๋ผ์ธ ์ค๋จ ๋๋ ๋ฆฌ์์ค ์ ๊ทผ ์ค๋ฅ๋ฅผ ์ ๋ฐ - html ์ฝ๋ ์์ ์ค๋ฅ
5. ์ด๋ฏธ์ง ๋ฆฌ์ฌ์ด์ฆ ๋ฌธ์
HTML ์ฝ๋๋ฅผ ์์ ํ๋ ๊ณผ์ ์์ ์ด๋ฏธ์ง ๋ฆฌ์ฌ์ด์ฆ ์ฝ๋๋ฅผ ์๋ชป ์์ ํ๊ฑฐ๋ ๊ฐ๋ก์ธ๋ก ๋น์จ์ ์๋ชป ์ค์ ํ ๊ฒฝ์ฐ๋ ์ด๋ฏธ์ง๊ฐ ๋ ธ์ถ๋์ง ์๋ ํ์์ด ๋ฐ์ํ ์ ์์ต๋๋ค.




6. CDN ๋๋ ๋ด๋ถ ์๋ฒ ์ฅ์ (Storage/DB Access Error)
ํฐ์คํ ๋ฆฌ๋ ์นด์นด์ค์ ์ค์ CDN ๋ฐ ๊ฐ์ฒด ์คํ ๋ฆฌ์ง ๊ธฐ๋ฐ์ผ๋ก ์ด๋ฏธ์ง ๋ฆฌ์์ค๋ฅผ ์ ๊ณตํ๋ฉฐ, ํด๋น ์ธํ๋ผ์ ์ผ์์ ์ธ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ฉด ์ด๋ฏธ์ง ์๋ต์ด ์ง์ฐ๋๊ฑฐ๋ ์คํจํฉ๋๋ค.์ฆ ์๋ฒ ๋ฌธ์ ์ ๋๋ค
- ์ฌ์ฉ์๋ ์๋ฒ์ ์ง์ ์ ๊ทผํ๊ฑฐ๋ ์์ฒญํ ์ ์์
- ์ด๋ฏธ์ง ๊ฒฝ๋ก๊ฐ ๋ด๋ถ์ ์ผ๋ก ์์๋ ๊ฒฝ์ฐ, ๋ณต๊ตฌ๋ ์ด์์ ๊ถํ์ ํ์ ๋จ
- ์ด๋ฏธ์ง ํ์ผ์ ํฐ์คํ ๋ฆฌ ์นด์นด์ค CDN ์ค๋ธ์ ํธ ์คํ ๋ฆฌ์ง๋ก ์ด๊ด๋จ
- ํด๋น ๊ฒฝ๋ก์ ๋ฐ์ดํฐ ์์ ๋๋ ์ญ์ ์, ์ผ๋ฐ ๋ธ๋ก๊ฑฐ๊ฐ ๋ณต๊ตฌํ ์ ์์
์ด๋ฏธ์ง ์ค๋ฅ ์ค์ ํด๊ฒฐ ๋ฐฉ๋ฒ
- ์ธ๋ถ ์ด๋ฏธ์ง ์ฌ์ฉ์ ์ง์ํ๊ณ , ๋ฐ๋์ ํฐ์คํ ๋ฆฌ ์์ฒด ์ ๋ก๋ ๊ธฐ๋ฅ ์ด์ฉ
- ์ด๋ฏธ์ง ํ์ผ๋ช
์ ์๋ฌธ, ์๋ฌธ์, ํ์ดํ์ผ๋ก ๊ตฌ์ฑ (์:
tistory-thumbnail.jpg) - HTML ๊ตฌ์กฐ ์ ๊ฒ:
alt,src,loading์์ฑ ํฌํจ ์ฌ๋ถ ํ์ธ
UX์ SEO ๋ชจ๋์ ์ค์ํ ์ด๋ฏธ์ง ๊ด๋ฆฌ
ํฐ์คํ ๋ฆฌ ์ด๋ฏธ์ง ์ค๋ฅ๋ ๋จ์ํ ์๊ฐ์ ๋ฌธ์ ๋ฅผ ๋์ด ๊ฒ์ ๋ ธ์ถ, ์ฌ์ฉ์ ์ ๋ขฐ๋, ์ฝํ ์ธ ํ์ง์ ์ง์ ์ ์ธ ์ํฅ์ ์ค๋๋ค.
- ๊ธฐ์ ์ ์ธ ์์ธ ๋ถ์ ํ ์ ํํ ๋์
- SEO ์ต์ ํ๋ฅผ ํตํด ๊ฒ์์์ง ์นํ์ ์ด๋ฏธ์ง ๊ตฌ์กฐ ์ค๊ณ
- ์ด๋ฏธ์ง ํ์ง์ ์ ์งํด ๋ธ๋ก๊ทธ ๊ฒฝ์๋ ฅ ํ๋ณด
์์ ์ด๋ฏธ์ง ์ค๋ฅ๋ผ๋ ๋ฐฉ์นํ์ง ๋ง๊ณ , ํฐ์คํ ๋ฆฌ ์ด๋ฏธ์ง ์ค๋ฅ ํด๊ฒฐ ์ ๋ต์ ํตํด ๊ณ ํ์ง ๋ธ๋ก๊ทธ๋ฅผ ์ ์งํ์๊ธฐ ๋ฐ๋๋๋ค.
ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ์์ ์ด๋ฏธ์ง๊ฐ ์ ๋๋ก ํ์๋์ง ์๊ณ ๊ณฐ๋์ด ์์ด์ฝ์ด ๋จ๋ ์ด์ ๋ ๋ฌด์์ธ๊ฐ์?
์ด๋ฏธ์ง ๋ก๋ฉ ์คํจ์ ์ฃผ์ ์์ธ์ผ๋ก๋ ์ด๋ฏธ์ง ํ์ผ๋ช ์ด ํ๊ธ์ด๋ ๊ณต๋ฐฑ ๋ฑ์ผ๋ก URL ์ธ์ฝ๋ฉ ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ฑฐ๋, ์ง์ํ์ง ์๋ ์ด๋ฏธ์ง ํฌ๋งท ์ฌ์ฉ, ์ธ๋ถ ์ด๋ฏธ์ง ๋งํฌ์ ํซ๋งํฌ ์ฐจ๋จ, HTML ์ฝ๋ ๋ด ์ด๋ฏธ์ง ํ๊ทธ ์ค๋ฅ ๋ฑ์ด ์์ต๋๋ค. ๋ํ ํฐ์คํ ๋ฆฌ์ CDN ๋๋ ์๋ฒ ์ฅ์ ๋ ์ํฅ์ ์ค ์ ์์ต๋๋ค.
ํฐ์คํ ๋ฆฌ ์ด๋ฏธ์ง๊ฐ ํ๋ฆฟํ๊ฑฐ๋ ํด์๋๊ฐ ๋ฎ๊ฒ ๋ณด์ด๋ ์ด์ ๋ ๋ฌด์์ธ๊ฐ์?
ํฐ์คํ ๋ฆฌ๋ ์๋ฒ์์ ์๋์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ๋ฆฌ์ฌ์ด์งํ์ฌ ๋ค์ํ ๋๋ฐ์ด์ค์ ๋ง์ถ๋๋ฐ, ์ด ๊ณผ์ ์์ ์ด๋ฏธ์ง ์์ถ๊ณผ ํด์๋ ์ ํ์ผ๋ก ํ์ง์ด ์ ํ๋ ์ ์์ต๋๋ค. ํนํ ๊ณ ํด์๋ ํ๋ฉด์์๋ ํฝ์ ๋ฐ๋ ๋ถ์ผ์น๋ก ์ธํด ์ด๋ฏธ์ง๊ฐ ๋์ฑ ํ๋ฆฟํด ๋ณด์ ๋๋ค.
ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์ด๋ฏธ์ง SEO ์ต์ ํ๋ฅผ ์ํด ๋ฌด์์ ์ ๊ฒฝ ์จ์ผ ํ๋์?
alt ์์ฑ์ ์๋ฏธ ์๊ฒ ์์ฑํ๊ณ , ํ์ผ๋ช ์ ์๋ฌธ ์๋ฌธ์์ ํ์ดํ์ผ๋ก ๊ตฌ์ฑํ๋ ๊ฒ์ด ์ข์ต๋๋ค. ๋ํ ์ด๋ฏธ์ง ์ฃผ๋ณ ํ ์คํธ์ ์บก์ ์ ํค์๋๋ฅผ ์์ฐ์ค๋ฝ๊ฒ ๋ฐฐ์นํด์ผ ๊ฒ์์์ง ์ธ์์ด ์ข์์ง๋๋ค.
์ด๋ฏธ์ง ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ณ ๊ณ ๊ฐ์ผํฐ์์ ํด๊ฒฐ์ด ๋ถ๊ฐ๋ฅํ ๋๋ ์ด๋ป๊ฒ ํด์ผ ํ๋์?
ํฐ์คํ ๋ฆฌ ์๋ฒ ๋๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค ๋ฌธ์ ๋ก ๋ณต๊ตฌ๊ฐ ์ด๋ ค์ด ๊ฒฝ์ฐ, ์ฅ๊ธฐ์ ์ผ๋ก๋ ๋ธ๋ก๊ทธ๋ฅผ ์๋ก ๊ฐ์คํ๋ ๊ฒ์ด ๋ ํ์ค์ ์ธ ํด๊ฒฐ์ฑ ์ผ ์ ์์ต๋๋ค.