๐Ÿ‘ ๋””์‹œ์ธ์‚ฌ์ด๋“œ์˜ ๋ฌธ์ œ์ 

๋ชจ๋นˆ์ผˆยท2020๋…„ 5์›” 16์ผ
64
post-thumbnail

๐Ÿค— ์ด ๊ธ€์€ ๋ˆ„๊ตฌ๋‚˜ ์ฝ์„ ์ˆ˜ ์žˆ๋Š” ์•ˆ์ „ํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

๐Ÿ™ƒ ๋ฌด์Šจ ์ด์•ผ๊ธฐ ํ• ๊ฑฐ๋ƒ?

๋””์‹œ๋ฅผ ์Šคํฌ๋ž˜ํ•‘ ํ•˜๋‹ค๊ฐ€ ์•Œ๊ฒŒ ๋œ ์‚ฌ์‹ค๊ณผ ๋ฌธ์ œ์ ๋“ค์„ ์จ ๋ณด๋ ค๊ณ ํ•œ๋‹ค. ์ด ๊ธ€์€ ๋””์‹œ์ธ์‚ฌ์ด๋“œ์—์„œ ๊ฒŒ์‹œ๊ธ€์„ ์‚ญ์ œํ•ด๋„ ์‚ฌ์‹ค ์ด๋ฏธ์ง€ URL์€ ์—ฌ์ „ํžˆ publicํ•˜๊ฒŒ ์ ‘๊ทผ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๋ฌธ์ œ ๋“ฑ๊ณผ ํ•จ๊ป˜ ๋””์‹œ ์ด๋ฏธ์ง€ ์„œ๋ฒ„๊ฐ€ ๋Š๋ฆฐ ์ด์œ ์— ๋Œ€ํ•ด ์„ค๋ช… ํ•œ๋‹ค.

๋ช‡๋ช‡ ์ธํ„ฐ๋„ท ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” ์œ ์ €๋“ค์˜ ๊ธฐํ˜ธ์— ๋”ฐ๋ผ ๋””์‹œ์ธ์‚ฌ์ด๋“œ์˜ ์ปจํ…์ธ ๋ฅผ ๊ทน๋„๋กœ ์‹ซ์–ดํ•˜์ง€๋งŒ ์ข‹๋“  ์‹ซ๋“  ๋””์‹œ์ธ์‚ฌ์ด๋“œ์˜ ์ปจํ…์ธ ๋Š” ๋ช…์‹ค์ƒ๋ถ€ํ•œ ๋Œ€ํ•œ๋ฏผ๊ตญ ์œ ํ–‰์–ด์˜ ๋ฐœ์‚ฐ์ง€์ด๋‹ค. ์ง€์—ญ, ์ •์น˜, ์ถœ์‹  ํ•™๊ต ์ƒ๊ด€ ์—†์ด ๋””์‹œ๊ฐ€ ๋งŒ๋“  ์œ ํ–‰์–ด๋Š” ๋ˆ„๊ตฌ๋‚˜ ํ•œ ๋ฒˆ ์ฏค ์‚ฌ์šฉํ–ˆ์„ ๊ฑฐ๊ณ  ์•Œ๋˜ ๋ชจ๋ฅด๋˜ ๋ณด๊ณ  ์›ƒ๊ณ  ์ฆ๊ธด๋‹ค. ๊ผญ ์‚ฌ๋žŒ์ด ์•„๋‹ˆ๋”๋ผ๋„ ๋Œ€๊ธฐ์—…์˜ ๋งˆ์ผ€ํŒ… ๋ฌธ๊ตฌ๋‚˜ TV ํ”„๋กœ๊ทธ๋žจ์˜ ์ž๋ง‰ ๋“ฑ์— ์“ฐ์ด๋Š” ๋“ฑ ๋””์‹œ์ธ์‚ฌ์ด๋“œ์˜ ์˜ํ–ฅ๋ ฅ์€ ๋Œ€๋‹จํ•˜๋‹ค. ์ด๋Ÿฐ ๋””์‹œ์ธ์‚ฌ์ด๋“œ์˜ ์ปจํ…์ธ ๋Š” ์–ด๋–ป๊ฒŒ ๊ด€๋ฆฌ ๋˜๊ณ  ์žˆ์„๊นŒ?

๐Ÿ–ผ ์ด๋ฏธ์ง€ ์„œ๋ฒ„ ๋ฌธ์ œ

๊ฐ€์žฅ ๋จผ์ € ๋ˆˆ์— ๋„๋Š” ๋ฌธ์ œ๋Š” ๋””์‹œ์˜ ์ด๋ฏธ์ง€ ์„œ๋ฒ„๋‹ค. ๊ทน๋„๋กœ ๋น„ํšจ์œจ์ ์œผ๋กœ ์šด์˜๋˜๊ณ  ์žˆ์„๊ฒƒ ๊ฐ™๋‹ค๋Š” ์ง์ž‘์„ ๋ฟŒ๋ฆฌ์น  ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ด ๋ถ€๋ถ„์„ ๋จผ์ € ๋‹ค๋ค„๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

๐Ÿคญ ์‹ค์ œ๋กœ๋Š” ์„œ๋ฒ„์—์„œ ์‚ญ์ œ ๋˜์ง€ ์•Š๋Š” ์ด๋ฏธ์ง€

๋””์‹œ์— ์†Œ์œ„ ๋งํ•˜๋Š” '์•ผ์งค'์„ ์˜ฌ๋ฆฌ๊ฒŒ ๋œ๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ? ๊ฑฐ์˜ ํ™•์‹คํ•˜๊ฒŒ ์‚ญ์ œ๋ฅผ ๋‹นํ•˜๊ณ ์•ผ ๋งŒ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์•ผ์งค์€ ์ •๋ง๋กœ ๋””์‹œ์˜ ์ด๋ฏธ์ง€ ์„œ๋ฒ„์—์„œ ์‚ญ์ œ ๋œ ๊ฒƒ์ธ๊ฐ€? ๊ทธ๋ ‡์ง€ ์•Š๋‹ค.

์•„๋ž˜ ๋งํฌ๋Š” ์ˆ˜๊ฐœ์›”์ „ ๋””์‹œ์—์„œ ์‚ญ์ œ๋œ ๊ฒŒ์‹œ๋ฌผ์— ์ฒจ๋ถ€๋˜์—ˆ๋˜ ํ•œ ์ด๋ฏธ์ง€์˜ URL์ด๋‹ค. ๋…ธ์ถœ๋œ ์‚ฌ์ง„์ด๋ฏ€๋กœ ์ฃผ๋ณ€์— ๋ˆ„๊ฐ€ ์žˆ๋Š”์ง€ ์ž˜ ํ™•์ธ ํ•œ ๋’ค ํด๋ฆญํ•˜๊ธธ ๋ฐ”๋ž€๋‹ค.

https://images.dcinside.com/viewimage.php?id=??????????&no=??????????

โš ๏ธ ์ง„์งœ ์•ผ์งค ๋งํฌ๋ฅผ ์˜ฌ๋ฆฐ๊ฑด ์ข€ ๊ทธ๋ž˜์„œ ์‚ญ์ œ ํ•˜์˜€์Œ. ์•„์ง๊นŒ์ง€ ์ˆ˜๋ฐฑ๊ฐœ์˜ ์•ผ์งค์ด ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ์ƒํƒœ์ž„.

๋น„๋ก ๊ฒŒ์‹œ๊ธ€์ด ์‚ญ์ œ๊ฐ€ ๋˜์–ด์„œ ํ™•์ธ์ด ๋ถˆ๊ฐ€ํ•˜๋”๋ผ๋„ ๊ฒŒ์‹œ๊ธ€์— ๋‚จ์•„ ์žˆ๋˜ ๋””์‹œ ์ด๋ฏธ์ง€ ์„œ๋ฒ„์˜ URL์€ ์—ฌ์ „ํžˆ ๋‹ค์šด๋กœ๋“œ๊ฐ€ ๊ฐ€๋Šฅํ•œ ์ƒํƒœ๋‹ค. ์ฆ‰ ์—ฌ์ „ํžˆ ๋””์‹œ์ธ์‚ฌ์ด๋“œ์˜ ๋‚ด๋ถ€ ์„œ๋ฒ„์— ์•ผ์งค์€ ๋‚จ์•„ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๊ณ  public์œผ๋กœ ๊ณต๊ฐœ ๋œ ์ƒํƒœ์ด๋‹ค.

์ด ๊ธ€์„ ์“ฐ๋Š” ์‹œ์ ์—์„œ 8๊ฐœ์›” ์ „ ์‚ญ์ œ ๋œ ์•ผ์งค์˜ URL๋„ ์—ฌ์ „ํžˆ ์‚ด์•„ ์žˆ๋Š”๊ฑธ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๋งŒ์•ฝ ์ด ๊ธ€์„ ๋ณด๊ณ  ์žˆ๋Š” ์—ฌ๋Ÿฌ๋ถ„์ด ๋””์‹œ์—์„œ ์‚ญ์ œํ•œ ๋‹ค๋ฅธ ์•ผ์งค/ํ˜์งค์˜ URL๋งŒ ์•Œ๊ณ  ์žˆ์œผ๋ฉด ๋ˆ„๊ตฌ๋‚˜ ๋ณผ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ด์•ผ๊ธฐ๋‹ค.

์•„๋ž˜๋Š” ์ˆ˜ ๊ฐœ์›”๊ฐ„ ๋””์‹œ์ธ์‚ฌ์ด๋“œ์—์„œ ์•ผ์งค๋งŒ ์Šคํฌ๋ž˜ํ•‘ํ•˜๋ฉฐ URL์„ ์ˆ˜์ง‘ํ•œ ๊ฒฐ๊ณผ์ด๋‹ค. ์ด ๊ธ€์„ ์“ฐ๋Š” ํ˜„ ์‹œ์ ๊นŒ์ง€๋„ 500์žฅ์ด ๋„˜๋Š” ์•ผ์งค๋“ค์ด ์—ฌ์ „ํžˆ ์กฐํšŒ๋˜๋Š” ์ƒํƒœ๋‹ค. ๋””์‹œ ์šด์˜์ง„๋“ค์— ์˜ํ•ด ๊ฒŒ์‹œ๊ธ€์ด ์‚ญ์ œ ๋‹นํ•˜๋“ , ๋ณธ์ธ์ด ์“ด ๊ฒŒ์‹œ๊ธ€์„ ์ง์ ‘ ์‚ญ์ œํ•˜๋˜ ๊ฒฐ๊ณผ๋Š” ๋งˆ์ฐฌ๊ฐ€์ง€์˜€๋‹ค.

https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80

โš ๏ธ ์ด๋ฏธ์ง€์— blur๋ฅผ ๊ฑธ๊ธด ํ–ˆ์ง€๋งŒ blur๊ฐ€ ์ถฉ๋ถ„ํžˆ ๋˜์ง€ ์•Š์•„ ๊ฑฐ์˜ ๋‹ค ๋“œ๋Ÿฌ๋‚˜๋Š” ํ˜•ํƒœ์—ฌ์„œ ๋ถˆ์พŒํ•˜๋‹ค๋Š” ์‚ฌ์šฉ์ž๋“ค์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋•Œ๋ฌธ์— ์ž์—ฐ ํ’๊ฒฝ ์‚ฌ์ง„์œผ๋กœ ๋Œ€์ฒด ํ•ฉ๋‹ˆ๋‹ค.

๋”ฐ๋ผ์„œ ๊ฒŒ์‹œ๊ธ€์ด ์‚ญ์ œ ๋˜๊ธฐ์ „์— URL์„ ๊ธฐ๋ก ํ•ด ๋‘”๋‹ค๋ฉด ๋ชจ๋“  ์‚ญ์ œ ๊ฒŒ์‹œ๊ธ€์— ๋Œ€ํ•ด ์ ‘๊ทผ ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋‹ค๋งŒ ๋ˆ„๊ฐ€ ์ด๋ ‡๊ฒŒ ๋น„์ •์ƒ์ ์ธ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๊ฒ ๋Š”๊ฐ€? ํ•˜๋Š” ์˜๋ฌธ์ด ๋“ค์ง€๋งŒ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์‹œ๋‚˜๋ฆฌ์˜ค์— ์˜ํ•ด ์ผ๋ฐ˜์ ์ธ ์‚ฌ์šฉ์ž๋“ค๋„ ์‚ญ์ œ ๋œ ์ด๋ฏธ์ง€์˜ URL์— ์‰ฝ๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ณ  ์žฌ๋ฐฐํฌ ๋  ์ˆ˜ ์žˆ๋‹ค.

  • ๋””์‹œ์ธ์‚ฌ์ด๋“œ์—์„œ ๊ฒŒ์‹œ๊ธ€์„ ์‚ญ์ œํ•˜๊ธฐ ์ „์— web cach server์—์„œ ์ด๋ฏธ์ง€ URL ์บ์‹ฑํ•ด ๋ฒ„๋ฆฐ ๊ฒฝ์šฐ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ์—์„œ ๋‚˜ํƒ€ ๋‚  ์ˆ˜ ์žˆ์Œ.
  • ๊ฒŒ์‹œ๊ธ€์ด ์‚ญ์ œ ๋˜๊ธฐ ์ „์— ๋ˆ„๊ตฐ๊ฐ€ ๋‹ค์šด๋กœ๋“œ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €๊ณ  ๋ธŒ๋ผ์šฐ์ €์˜ ๋‹ค์šด๋กœ๋“œ ํžˆ์Šคํ† ๋ฆฌ์— ์ €์žฅ๋ผ ์‹œ๊ฐ„์ด ์ง€๋‚œ ๋’ค์—๋„ ๊ณต์œ  ํ•  ์ˆ˜ ์žˆ์Œ.
  • ๋“œ๋ฌธ ๊ฒฝ์šฐ์ง€๋งŒ ๊ฒŒ์‹œ๊ธ€ ๊ณต์œ ๋ฅผ ์œ„ํ•ด ๋””์‹œ์˜ ๊ฒŒ์‹œ๊ธ€์„ ํƒ€ ์‚ฌ์ดํŠธ์— ์žฌ๊ฒŒ์‹œ ํ–ˆ์„ ๊ฒฝ์šฐ ์›๋ณธ์ด ์‚ญ์ œ ๋˜์–ด๋„ ์ด๋ฏธ์ง€๋Š” ๊ณ„์† ๋ณด์ผ ์ˆ˜ ์žˆ์Œ.

๐Ÿค” ์„ธ๋ฒˆ์งธ์˜ ๊ฒฝ์šฐ ๋””์‹œ๊ฐ€ URL์„ ๋งˆ๊ตฌ ๊ผฌ์•„๋†”์„œ ๋ฒŒ์–ด์ง€๊ธฐ ํž˜๋“ค๋‹ค. ๋””์‹œ์—์„œ ์ด๋ฏธ์ง€ ์ฃผ์†Œ๋ฅผ ๋ณต์‚ฌํ•ด ๋ณด์•„๋„ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ๋นˆ ํ™”๋ฉด๋งŒ ๋œจ๊ฒŒ ๋ ํ…๋ฐ ์™ธ๋ถ€์—์„œ ๋””์‹œ์˜ ์ด๋ฏธ์ง€๋ฅผ ๋ณด์ง€ ๋ชปํ•˜๋„๋ก viewimage.php์— ์žฅ๋‚œ์„ ์ณ ๋‘์—ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ณต์‚ฌํ•œ ๋””์‹œ์˜ URL ์ค‘ 'image'๋ฅผ 'images'๋กœ, 'co.kr'์„ 'com'์œผ๋กœ ๊ณ ์น˜๋ฉด ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

๊ณผ๊ฑฐ ์ˆ˜๋งŽ์€ '๋””์‹œ ํด๋ฆฌ๋„ˆ'๋“ค์ด ํ‘์—ญ์‚ฌ(?)๋ฅผ ์ง€์šฐ๋Š”๋ฐ ํฐ ๋„์›€์„ ์ค˜ ์™”์ง€๋งŒ ์•„๋งˆ ํด๋ฆฌ๋„ˆ๋กœ ์ง€์šด ๊ฒŒ์‹œ๊ธ€ ์—ญ์‹œ ์•„์ง ์ด๋ฏธ์ง€ URL์€ Accessible ํ•  ๊ฒƒ์ด๋‹ค. ๋ฌผ๋ก  ๊ทธ URL๋“ค์ด ์™ธ๋ถ€์— ๋“œ๋Ÿฌ๋‚˜์ง€๋Š” ์•Š์œผ๋ฏ€๋กœ ์‹ฌ๊ฐํ•œ ๋ฌธ์ œ๊ฐ€ ๋  ๊ฐ€๋Šฅ์„ฑ์€ ๋‚ฎ์•„๋ณด์ธ๋‹ค.

๊ฒŒ์‹œ๊ธ€์˜ ํ…์ŠคํŠธ๋Š” URL์„ ์•Œ๊ณ  ์žˆ๋‹ค ํ•  ์ง€์–ธ์ • "์‚ญ์ œ ๋œ ๊ฒŒ์‹œ๊ธ€"์ด๋ผ๋Š” ๊ฒฝ๊ณ ์™€ ํ•จ๊ป˜ ์ ‘๊ทผ์ด ๋˜์ง€ ์•Š์ง€๋งŒ ์–ด๋”˜๊ฐ€์— ์œ ๋ น์ฒ˜๋Ÿผ ๋‘ฅ๋‘ฅ ๋– ๋‹ค๋‹ ์ฒจ๋ถ€ ํŒŒ์ผ ์ด๋ฏธ์ง€๋“ค์€ ์—ฌ์ „ํžˆ ์ฐœ์ฐœํ•จ์„ ๋‚จ๊ธด๋‹ค.

๐Ÿ‘Ž๐Ÿป ์บ์‹ฑ์ด ๋˜์ง€ ์•Š๋Š” ์ด๋ฏธ์ง€

๋””์‹œ์ธ์‚ฌ๋“œ๋Š” '์งค๋ฐฉ'์ด๋ผ๋Š” ์šฉ์–ด๋ฅผ ํƒ„์ƒ์‹œ์ผฐ๋‹ค. ์š”์ฆ˜ 10/20๋Œ€๋“ค ๋Œ€๋ถ€๋ถ„์€ '์งค๋ฐฉ'์ด ์ •ํ™•ํžˆ ๋ฌด์Šจ ์˜๋ฏธ์ธ์ง€ ์ž˜ ๋ชจ๋ฅด๊ณ  ๊ทธ๋ƒฅ '์žฌ๋ฏธ์žˆ๋Š” ์ด๋ฏธ์ง€'์ •๋„๋กœ์˜ ์˜๋ฏธ๋กœ ๊ตณ์–ด์กŒ์ง€๋งŒ '์งค๋ฐฉ'์ด๋ž€ ์›๋ž˜ ๋””์‹œ์ธ์‚ฌ์ด๋“œ์—์„œ ์“ฐ๋˜ ์šฉ์–ด์ด์ž ๊ฐœ๋…์ด์—ˆ๋‹ค. ์งค๋ฐฉ์˜ ์–ด์›์— ๊ด€ํ•ด์„œ ์„ค๋ช…์„ ํ•˜์ž๋ฉด ๊ธ€์˜ ์ฃผ์ œ์™€ ๋ฒ—์–ด๋‚˜๊ธฐ์— ๋” ์ด์ƒ์˜ ์ž์„ธํ•œ ์„ค๋ช…์€ ์ƒ๋žตํ•œ๋‹ค.

์•„๋ฌดํŠผ ๋””์‹œ์ธ์‚ฌ์ด๋“œ์—์„œ๋Š” ๊ธ€์„ ์“ธ ๋•Œ ์ž๋™์œผ๋กœ ์งค๋ฐฉ์„ ์ฒจ๋ถ€ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ œ๊ณต ์ค‘์ด๋‹ค. ํ•œ ๋””์‹œ์ธ์‚ฌ๋“œ ์œ ์ €๊ฐ€ ์ž‘์„ฑํ•œ ๊ฒŒ์‹œ๊ธ€์— ์ฒจ๋ถ€๋œ ์ด๋ฏธ์ง€์˜ URL์„ ๋ณด๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

https://images.dcinside.com/viewimage.php?id=2fbcc323e7d334aa51b1d3a24e&no=24b0d769e1d32ca73fed81fa11d0283146878605f8ff89cb706fda048768f60daa764f9a552cb5a643364dfec271c1cc50d0e28da187fbc324560f01ee350c90f6460d14a3ec2b2298ffb5f62ccfb36e8e58b27c3ebd616d082a340f106034187819aeddbb34ae43f7

URL ์ฟผ๋ฆฌ ์ŠคํŠธ๋ง์„ ๋ณด์ž. ๋„ˆ๋ฌด ๊ธฐ๋‹ˆ๊นŒ ๋งˆ์ง€๋ง‰ 5๊ฐœ ์ •๋„์˜ ๋ฌธ์ž์—ด๋งŒ ๋ณด๋„๋ก ํ•œ๋‹ค. ์ด ์ด๋ฏธ์ง€์˜ no๋Š” e43f7๋กœ ๋๋‚œ๋‹ค. ํ•ด์‹œ ๊ฐ’์œผ๋กœ ์ถ”์ •๋˜๋Š” ๋ฌธ์ž์—ด์ด๋‹ค. ๋ฌธ์ž์—ด์ด ์• ๋งคํ•œ 240์ž์ธ๊ฑธ๋กœ ๋ด์„œ๋Š” ํ‰๋ฒ”ํ•œ SHA1์ด๋‚˜ SHA256์ด ์•„๋‹Œ ๊ฒƒ์„ ์ง์ž‘ ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ธฐํšŒ๊ฐ€ ์žˆ์œผ๋ฉด ์ด ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ๋„ ๊ธ€์„ ์“ฐ๊ฒ ์ง€๋งŒ ์ง€๊ธˆ์€ ๋„˜์–ด๊ฐ€์ž.

์ฟผ๋ฆฌ ์ŠคํŠธ๋ง ์ค‘ id์˜ ๊ฐ’์ธ 2fbcc323e7d334aa51b1d3a24e๋Š” ๊ฐค๋Ÿฌ๋ฆฌ์˜ ํ•ด์‹œID๋กœ ์ถ”์ •๋œ๋‹ค. ๋งŒํ™” ๊ฐค๋Ÿฌ๋ฆฌ์˜ ๊ฒฝ์šฐ 2eb2dd2fe6ed36a379ed๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค.

๋ฌธ์ œ๋Š” ์—ฌ๊ธฐ์„œ ์‹œ์ž‘ ๋œ๋‹ค. ๋งŒ์•ฝ ์œ„์™€ '๊ฐ™์€ ์œ ์ €'๊ฐ€ ๋˜‘๊ฐ™์€ ์งค๋ฐฉ์„ ์จ์„œ ๊ฒŒ์‹œ๊ธ€์„ ์“ด๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ? ์ž๋™์งค๋ฐฉ ๊ธฐ๋Šฅ์œผ๋กœ ์ธํ•ด ๊ฐ™์€ ์ด๋ฏธ์ง€๊ฐ€ ์‚ฌ์šฉ ๋๋‹ค๋ฉด? ์•„๋ž˜๋Š” ์‹ค์ œ๋กœ ์œ„์™€ ๊ฐ™์€ ์œ ์ €๊ฐ€ ๊ฐ™์€ ์งค๋ฐฉ์„ ์จ์„œ ๊ฒŒ์‹œ๊ธ€์„ ์ผ์„ ๋•Œ ํ•ด๋‹น ๊ธ€์— ํฌํ•จ๋œ ์ด๋ฏธ์ง€์˜ URL์ด๋‹ค.

https://images.dcinside.com/viewimage.php?id=2fbcc323e7d334aa51b1d3a24e&no=24b0d769e1d32ca73fed81fa11d0283146878605f8ff89cb706fda048768f60daa764f9a552cb5a643364dfec271c1cc50d0e28da187fbc3780d0957ec660997062de7c86994bacdaf4e11f1132c084c57834a5b4269d0a70011b667239a06707b806ae2c099663f8b

๋งํฌ๋ฅผ ๋ˆŒ๋Ÿฌ๋ณด๋ฉด ์•Œ๊ฒ ์ง€๋งŒ ๋‹น์—ฐํžˆ ๋˜‘๊ฐ™์€ ์œ„ ์—ฐ์˜ˆ์ธ์˜ ์‚ฌ์ง„์ด๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐ™์€ ์ด๋ฏธ์ง€๋‹ˆ๊นŒ ๋‹น์—ฐํžˆ ๊ฐ™์€ URL์ด ๋‚˜์™€์•ผ ํ•˜๊ฒ ์ง€๋งŒ ์ด URL์˜ ๊ฒฝ์šฐ no ๊ฐ’์€ 63f8b๋กœ ๋๋‚˜๋Š” ๋ฌธ์ž์—ด์ด๋‹ค. ์œ„์˜ ๊ฐ’๊ณผ ๋‹ค๋ฅธ ๊ฒƒ์ด๋‹ค.

๊ฒฐ๊ตญ Cachingํ•˜์ง€ ๋ชปํ•˜๊ณ  ๋งค๋ฒˆ ์ƒˆ๋กญ๊ฒŒ ์ด๋ฏธ์ง€๋ฅผ ๋กœ๋”ฉํ•˜๊ฒŒ ๋œ๋‹ค. ๋ชจ๋ฐ”์ผ ์œ ์ €๋“ค์€ ๋ฐ์ดํ„ฐ์™€ ๋ฐฐํ„ฐ๋ฆฌ๋ฅผ ๋” ์†Œ๋ชจํ•˜๋Š” ์ƒํ™ฉ์ด ๋˜๋Š” ๊ฒƒ์ด๋‹ค. URL ๊ฐ’์ด ๋‹ค๋ฅด๋ฏ€๋กœ public CDN์—์„œ๋„ ๊ฐ๊ฐ ์บ์‹ฑ ๋  ๊ฒƒ์ด๋‹ค.

![https://velog.velcdn.com/images%2Fmowinckel%2Fpost%2Fab8e0671-6350-4988-ae60-f62a0b29a7b1%2Fcollage.png%5D(https%3A%2F%2Fimages.velog.io%2Fimages%2Fmowinckel%2Fpost%2Fab8e0671-6350-4988-ae60-f62a0b29a7b1%2Fcollage.png)

์œ„ ์Šคํฌ๋ฆฐ์ƒท์€ ๊ฐ™์€ ์‚ฌ์ง„์ด ์ฒจ๋ถ€๋œ, ๊ฐ™์€ ์œ ์ €์˜ ๊ฒŒ์‹œ๊ธ€์„ ๊ฐ๊ฐ ์กฐํšŒํ•œ ๊ฒฐ๊ณผ๋‹ค. ๋‹ค๋ฅธ ์ด๋ฏธ์ง€๋“ค์€ ๋ชจ๋‘ ์บ์‹ฑ๋˜๊ณ  ์žˆ์ง€๋งŒ ์ž๋™ ์งค๋ฐฉ์œผ๋กœ ์ถ”๊ฐ€๋œ ์ด๋ฏธ์ง€๋Š” ๋งค๋ฒˆ ๋””์‹œ์— request๋ฅผ ๋ณด๋‚ด๊ณ  ์žˆ๋‹ค.

์Šคํฌ๋ฆฐ์ƒท์ด ์ž˜๋ ค ๋ฏธ์ฒ˜ ๋ณด์ด์ง€ ์•Š์•˜์ง€๋งŒ ๋‘ request ๋ชจ๋‘ 200 OK ์‘๋‹ต์„ ๋ณด๋‚ด ์™”๋‹ค. ํ•œ ๋ฒˆ ๋” ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด ๋†€๋ž๊ฒŒ๋„ 304 Not Modified๋ฅผ ๋ณด๋‚ด์ค€๋‹ค. ์ด๋ฏธ์ง€ ์„œ๋ฒ„ response header์—๋Š” Cache-Control์ด ์—†๊ณ  ETag๋งŒ ์žˆ๋‹ค.

์ตœ์•…์˜ ๊ฒฝ์šฐ๊ฐ€ ํ•˜๋‚˜ ๋‚จ์•˜๋‹ค. ๋ฐ”๋กœ URL์ด ๋‹ค๋ฅธ ์ ์„ ๋ฏธ๋ฃจ์–ด ์ง์ž‘์ปจ๋ฐ ๋””์‹œ์ธ์‚ฌ์ด๋“œ๊ฐ€ ๊ฐ™์€ ์ด๋ฏธ์ง€๋ผ๋„ ์ค‘๋ณต์œผ๋กœ ๋””์Šคํฌ์— ์ €์žฅํ•˜๊ณ  ์žˆ์„ ์ˆ˜๋„ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ํ•˜๋ฃจ์—๋„ ์ˆ˜์ฒœ๊ฐœ์˜ ๊ฒŒ์‹œ๋ฌผ์ด ์˜ฌ๋ผ์˜ค๋Š” ๊ฐค๋Ÿฌ๋ฆฌ์˜ ๋˜‘๊ฐ™์€ ์ฒจ๋ถ€ ์ด๋ฏธ์ง€๋ฅผ ์ค‘๋ณต ์ €์žฅํ•œ๋‹ค๋ฉด? ์–ด์ฉŒ๋ฉด ์ด๊ฒƒ์ด ๋””์‹œ๊ฐ€ ์ง€๋ถˆํ•˜๋Š” ์„œ๋ฒ„๋น„์šฉ์ด ๊ธฐํ•˜๊ธ‰์ˆ˜์ ์œผ๋กœ ๋Š˜์–ด๋‚˜๋Š” ์›์ธ์ผ ์ˆ˜๋„ ์žˆ๊ฒ ๋‹ค. ๋งŒ์•ฝ ๊ทธ๋ ‡๋‹ค๋ฉด ๋ธŒ๋ผ์šฐ์ € Local Storage์— Caching๋„ ํ•˜์ง€ ์•Š์„ ๋ฐ์ดํ„ฐ๋ฅผ ๊ณ„์†ํ•ด์„œ ์ƒ์‚ฐ ํ•ด ๋‚˜๊ฐ€๊ณ  ์žˆ๋‹ค๋Š” ๋œป์ด๋‹ค.

โœ‚๏ธ ์ธ๋„ค์ผ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ

์œ„ ๋‘ ๊ฐ€์ง€ ๋ฌธ์ œ์™€๋Š” ๋‹ฌ๋ฆฌ ๋น„๊ต์  ์ž‘์€ ๋ฌธ์ œ๋‹ค. ๋””์‹œ์ธ์‚ฌ์ด๋“œ๋Š” ์ธ๋„ค์ผ์„ ์ ๊ทน์ ์œผ๋กœ ํ™œ์šฉํ•˜๊ณ  ์žˆ๋Š” ํŽธ์€ ์•„๋‹ˆ๋‹ค. ๋””์‹œ๋Š” ํŽ˜์ด์ง€์— ์ ‘๊ทผํ•˜๋ฉด ๋ฌด์กฐ๊ฑด '์›๋ณธ' ์ด๋ฏธ์ง€๋ฅผ ์šฐ์„  ๋กœ๋”ฉํ•œ๋‹ค. Lazy Loading ๋”ฐ์œ„ ์—ญ์‹œ ํ•˜์ง€ ์•Š๋Š”๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์ธ๋„ค์ผ์€ ๊ณผ์—ฐ ์–ด๋””์— ์žˆ๋Š”๊ฑธ๊นŒ? ๋””์‹œ์—์„œ ์ธ๋„ค์ผ์„ ์ฐพ์œผ๋ ค๋ฉด ๋ฐ”๋กœ metadata๋ฅผ ๋ณด์•„์•ผ ํ•œ๋‹ค. ํŽ˜์ด์ง€ ์†Œ์Šค๋ฅผ ์—ด๊ณ  meta ํƒœ๊ทธ๋“ค์„ ๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™๋‹ค. ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ์ข€ ํŽธ์ง‘ํ–ˆ๋‹ค.

    <meta property="og:type" content="website">
    <meta property="og:title" content="์ง‘์—์„œ ์ €๋ ดํ•˜๊ฒŒ ๋ก๋งจ ์ฝ”์Šคํ”„๋ž˜ ํ•œ๊ฑฐ ์˜ฌ๋ ค๋ด„. - HIT ๊ฐค๋Ÿฌ๋ฆฌ">
    <meta property="og:description" content="๋ฐ”์•ผํ๋กœ ์„œ๊ธฐ 20XX๋…„ ์„ธ๊ณ„๋Š” ์ธ๊ฐ„๊ณผ ๋กœ๋ด‡์ด ์„œ๋กœ ํ–‰๋ณตํ•˜๊ฒŒ ๊ณต์กด์„ ํ•˜๊ณ  ์žˆ์—ˆ๋‹ค.ํ•˜์ง€๋งŒ ์„ธ๊ณ„ ์ •๋ณต์„ ๊ฟˆ๊พธ๋˜ ๋‹ฅํ„ฐ ">
    <meta property="og:image" content="<https://write.dcinside.com/viewimage.php?id=hit&no=24b0d769e1d32ca73ced80fa11d02831208acfae4be8406aea1df201c6adc8aedde864b3f6d74a409644c6bb9e2d6d3de6447e0185deb7ecfc5999699b6582c643ea6dda92e32a>">
    <meta property="og:url" content="<https://gall.dcinside.com/board/view/?id=hit&no=15777>">
    <title>์ง‘์—์„œ ์ €๋ ดํ•˜๊ฒŒ ๋ก๋งจ ์ฝ”์Šคํ”„๋ž˜ ํ•œ๊ฑฐ ์˜ฌ๋ ค๋ด„. - HIT ๊ฐค๋Ÿฌ๋ฆฌ</title>

๋ฐ”๋กœ ์—ฌ๊ธฐ์„œ ์˜คํ”ˆ ๊ทธ๋ž˜ํ”„ ํƒœ๊ทธ์— ํ•ด๋‹นํ•˜๋Š” og:image๊ฐ€ ๋””์‹œ์ธ์‚ฌ์ด๋“œ ์ปจํ…์ธ ์˜ ์œ ์ผํ•œ ์ธ๋„ค์ผ์ด๋‹ค! ํ•ด๋‹น URL์„ ๋‹ค์šด๋กœ๋“œ ํ•ด ๋ณด๋ฉด ์ € ๊ฒŒ์‹œ๊ธ€์˜ ์ฒซ๋ฒˆ์งธ ์ด๋ฏธ์ง€์˜ ์ธ๋„ค์ผ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด metadata๋Š” ์›น ํŽ˜์ด์ง€๋ฅผ ๋กœ๋“œ ํ•  ๋•Œ ์“ฐ์ด์ง€ ์•Š๋Š”๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ๋ณผ ์ผ๋„ ์—†๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ๊ณผ์—ฐ ์ด URL์€ ์–ด๋””์— ์“ฐ์ด๋Š” ๊ฑธ๊นŒ?

![https://velog.velcdn.com/images%2Fmowinckel%2Fpost%2F48af7d53-872a-40b3-a890-7dd49c55b60d%2F%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202020-04-30%20%EC%98%A4%ED%9B%84%206.49.41.png%5D(https%3A%2F%2Fimages.velog.io%2Fimages%2Fmowinckel%2Fpost%2F48af7d53-872a-40b3-a890-7dd49c55b60d%2F%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202020-04-30%20%EC%98%A4%ED%9B%84%206.49.41.png)

๊ทธ๊ฒƒ์€ ๋ฐ”๋กœ ์นด์นด์˜คํ†ก๊ณผ ๊ฐ™์€ ๋ฉ”์‹ ์ €์—์„œ ๋””์‹œ์ธ์‚ฌ์ด๋“œ์˜ URL์„ ๋ถ™์—ฌ ๋„ฃ๊ธฐ ํ–ˆ์„ ๋•Œ ๋œจ๋Š” ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ด๋ฏธ์ง€์— ์‚ฌ์šฉ๋œ๋‹ค. ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ํŽ˜์ด์Šค๋ถ์ด ๋งŒ๋“  ๐Ÿ“Ž Open Graph Markup์„ ๋ณด์ž.

์œ„ ์ฒ˜๋Ÿผ ๋””์‹œ์ธ์‚ฌ์ด๋“œ๋Š” ์ธ๋„ค์ผ์„ ๋ณด์œ ํ•˜๊ณ  ์žˆ์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ ๊ทน์ ์œผ๋กœ ์“ฐ๋Š” ํŽธ์€ ์•„๋‹ˆ๋‹ค. ๋” ์žฌ๋ฏธ์žˆ๋Š” ๊ฒƒ์€ ์ธ๋„ค์ผ์ด ๊ฐ€์žฅ ํ•„์š”ํ•œ ๋ชจ๋ฐ”์ผ ํŽ˜์ด์ง€์—๋Š” ํ•ด๋‹น meta ํƒœ๊ทธ๋ฅผ ์ฐพ์•„ ๋ณผ ์ˆ˜ ์—†๋‹ค๋Š” ์ ์ด๋‹ค. ์˜คํžˆ๋ ค Lazy Loading์ด ๊ฐ€์žฅ ์ ˆ์‹คํ•œ ๋ชจ๋ฐ”์ผ ํŽ˜์ด์ง€์˜ img ํƒœ๊ทธ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๊ตฌ์„ฑ ๋˜์–ด ์žˆ์—ˆ๋‹ค.

<img src="<https://dcimg7.dcinside.co.kr/9f3c5ba3bf>"  
data-original="<https://dcimg7.dcinside.co.kr/9f3c5ba3bf>" 
alt="9f3c5ba3bf"
class="lazy">

URL์˜ ๊ธธ์ด๊ฐ€ ๋„ˆ๋ฌด ๊ธธ์–ด ๋ณด๊ธฐ ๋ถˆํŽธํ• ๊นŒ๋ด ์•ž๋ถ€๋ถ„์€ ์ž„์˜๋กœ ์ž˜๋ผ ๋ƒˆ๋‹ค. img ํƒœ๊ทธ์˜ class๋Š” ๋‚˜๋ฆ„ lazy๋กœ ๋˜์–ด ์žˆ์–ด lazy loading์„ ๊ตฌํ˜„ ํ•ด ๋†จ์œผ๋‚˜ src, data-original, alt๊นŒ์ง€ ๋ชจ๋‘ ๊ฐ™์€ URL์ด๋‹ค. ๋‹จ์ง€ ๋Šฆ๊ฒŒ๋งŒ ๋กœ๋”ฉํ•  ๋ฟ ์–ด์ฐจํ”ผ ๋‹ค ๋˜‘๊ฐ™์€ ์›๋ณธ์„ ๋กœ๋”ฉ ํ•  ์ˆ˜ ๋ฐ–์— ์—†๋Š” ์šด๋ช…์ธ ๊ฒƒ์ด๋‹ค.

๋””์‹œ๋Š” ๋‚˜๋ฆ„๋Œ€๋กœ ์˜คํ”ˆ ๊ทธ๋ž˜ํ”„ ํ”„๋กœํ† ์ฝœ์— metadata๋ฅผ ์ž˜ ๊ธฐ์ˆ  ํ•ด ๋‘์—ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ธ๋„ค์ผ์„ ๋งŒ๋“ค ๋Šฅ๋ ฅ์ด ์—†๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋‹ค. ๋””์‹œ์ธ์‚ฌ์ด๋“œ ์ด๋ฏธ์ง€์˜ ์›๋ณธ๊ณผ ์ธ๋„ค์ผ์˜ ํฌ๊ธฐ๋ฅผ ๋น„๊ต ํ•ด ๋ณธ ๊ฒฐ๊ณผ ๋””์‹œ์ธ์‚ฌ์ด๋“œ๊ฐ€ ์‚ฌ์šฉ์ค‘์ธ ์ธ๋„ค์ผ์˜ ํฌ๊ธฐ๋Š” ์›๋ณธ์˜ 15%์— ๋ถˆ๊ณผ ํ–ˆ๋‹ค. (์›๋ณธ 93KB, ์ธ๋„ค์ผ 14KB) ๋Œ€๋žต 85%์˜ ์ด๋ฏธ์ง€ ํŠธ๋ž˜ํ”ฝ์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค๋Š” ์ด์•ผ๊ธฐ๋‹ค. ๋ณด๋‹ค ์ ๊ทน์ ์œผ๋กœ ์ธ๋„ค์ผ์„ ๋„์ž…ํ•˜๊ณ  Cache Control๊นŒ์ง€ ํ•œ๋‹ค๋ฉด ๋””์‹œ๊ฐ€ ํฌ๊ฒŒ ๋นจ๋ผ์งˆ ์ˆ˜ ์žˆ์ง€ ์•Š์„๊นŒ?

๐Ÿค” ๋””์‹œ๋Š” STON Edge๋ผ๋Š” Content Caching Server๋ฅผ ์‚ฌ์šฉ์ค‘์ธ๋ฐ ์ด ์„œ๋ฒ„๋Š” image crop, resize๋“ฑ์„ ์ง€์›ํ•˜๋ฉฐ on-fly๋กœ ์ธ๋„ค์ผ์„ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ๋‹ค. ์™œ ์ด ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๊ฑด์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ๋‹ค.

๋””์‹œ์—์„œ๋Š” ์˜ค๋ž˜์ „ ๋ถ€ํ„ฐ '์ด๋ฏธ์ง€ ๋ฏธ๋ฆฌ๋ณด๊ธฐ' ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€ ๋์œผ๋ฉด ํ•œ๋‹ค๋Š” ์œ ์ €๋“ค์˜ ์š”๊ตฌ๊ฐ€ ๋Š์ž„ ์—†์ด ์žˆ์–ด์™”๋‹ค. ์ด๋ฆ„์ด '๊ฐค๋Ÿฌ๋ฆฌ'์ธ๋ฐ๋„ ๋ถˆ๊ตฌ ๋””์‹œ๋Š” ์•„์ง๋„ ๊ฒŒ์‹œํŒ์„ ํ…์ŠคํŠธ ๋ฆฌ์ŠคํŠธ ํ˜•์‹์œผ๋กœ๋งŒ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ๊ฐœ์ธ์ ์ธ ์ถ”์ธก์ธ๋ฐ ๋””์‹œ๋Š” ์•„๋งˆ ์ธ๋„ค์ผ์„ ๋„์ž…ํ•˜๊ธฐ ์–ด๋ ค์šด ์ƒํ™ฉ์ด๊ณ , ์บ์‹ฑ๋„ ํ•˜์ง€ ๋ชปํ•˜๊ณ  ์žˆ๋Š” ์ƒํ™ฉ์ด๋ผ ์ˆ˜์‹ญ์žฅ์˜ ์ด๋ฏธ์ง€๋ฅผ ๋กœ๋“œ ์‹œํ‚ค๋Š” '์ด๋ฏธ์ง€ ๋ฏธ๋ฆฌ๋ณด๊ธฐ'๋ฅผ ์„œ๋น„์Šค ํ•˜๊ธฐ์—” ์•„์ง ์ž์‹ ์ด ์—†๋Š” ์ƒํ™ฉ์ด ์•„๋‹๊นŒ ์ƒ๊ฐ ํ•ด ๋ณธ๋‹ค. ์ด ์ƒํ™ฉ์—์„œ ์ด๋ฏธ์ง€ ์ˆ˜์‹ญ์žฅ์„ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋กœ ๋„์šด๋‹ค๋ฉด ์ด๋ฏธ์ง€ ์„œ๋ฒ„๊ฐ€ ์ฃฝ๋Š” ๊ฒƒ์€ ์‹œ๊ฐ„ ๋ฌธ์ œ์ด๊ธด ํ•˜๋‹ค.

์—ฌ์ „ํ•œ Gif ํฌ๋ฉง

๋˜ ๋‹ค๋ฅธ ๋ฌธ์ œ๋Š” ๋””์‹œ์ธ์‚ฌ์ด๋“œ๋Š” ์—ฌ์ „ํžˆ Gif ํฌ๋ฉง์„ ์‚ฌ์šฉ์ค‘์ด๋ผ๋Š” ๊ฒƒ์ด๋‹ค. ์‚ฌ์‹ค Gif๋ฅผ ์“ด๋‹ค๋Š”๊ฒƒ ์ž์ฒด๋ฅผ ๋ฌธ์ œ ์‚ผ๊ธฐ์—๋Š” ์ง€๋‚˜์นœ๊ฒƒ ๊ฐ™์•„์„œ ์“ฐ์ง€ ์•Š์œผ๋ ค ํ–ˆ์œผ๋‚˜ ์งง๊ฒŒ๋งŒ ๋ฉ”๋ชจํ•ด ๋‘๋ ค๊ณ  ํ•œ๋‹ค.

Gif ํฌ๋ฉง์€ ๊ทธ๋‹ค์ง€ ํšจ์œจ์ ์ด์ง„ ์•Š๋‹ค. Gif๋Š” ์—ฌ๋Ÿฌ์žฅ์˜ ์ด๋ฏธ์ง€๋ฅผ ์ €์žฅ ํ•ด ๋‘์—ˆ๋‹ค๊ฐ€ ์ฐจ๋ก€๋Œ€๋กœ ๋ณด์—ฌ์ฃผ๋Š” ๋ฐฉ์‹์ธ๋ฐ ์ด ๋•Œ GPU ๊ฐ€์†์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ์˜ค์ง CPU๋งŒ์„ ์‚ฌ์šฉํ•ด์„œ ์—ฌ๋Ÿฌ ์žฅ์˜ Gif๋ฅผ ๋ฐ˜๋ณต ์žฌ์ƒํ•˜๋ฉด CPU ์ ์œ ์œจ์ด ๋งค์šฐ ๋†’์•„์ง€๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค. ๋•Œ๋ฌธ์— ์š”์ฆ˜์€ ์‚ฌ์šฉ์ž๊ฐ€ gif๋ฅผ ์—…๋กœ๋“œ ํ•˜๋”๋ผ๋„ mp4๋กœ ์ธ์ฝ”๋”ฉํ•˜์—ฌ HTML5 video ํƒœ๊ทธ๋กœ ์žฌ์ƒํ•˜๋Š” ๊ฒƒ์ด ์ถ”์„ธ์ด๋‹ค. ๋Œ€ํ‘œ์ ์œผ๋กœ ํŠธ์œ„ํ„ฐ๊ฐ€ ๊ทธ๋ ‡๋‹ค. Gif์™€ mp4์˜ ์˜ค๋ฒ„ํ—ค๋“œ ๋น„๊ต๋Š” ์ข‹์€ ๊ธ€๋“ค์ด ๋งŽ์•„ ๋‘ ๊ฐ€์ง€๋ฅผ ๋‚จ๊ฒจ๋‘”๋‹ค.

๐Ÿ“Ž GIF ์‚ฌ์šฉ์„ ๋ฉˆ์ถฐ์ฃผ์„ธ์š”!
๐Ÿ“Ž Replace Animated GIFs with Video

๋‚ด์šฉ์€ gif๋Š” mp4์— ๋น„ํ•ด ์šฉ๋Ÿ‰๋„ ํฌ๊ณ  ๋ฐฐํ„ฐ๋ฆฌ ์†Œ๋ชจ๋งŒ์„ ๋Š˜๋ฆฌ๋Š” ์•„์ฃผ ๋ชน์“ธ ํฌ๋ฉง์ด๋ผ๋Š” ๊ฒƒ์ด๋‹ค.

As you can see in the above figure, image decodes occurs on the rasterizer threads as each new frame of the GIF is decoded.

Gif์˜ ๋งค ํ”„๋ ˆ์ž„๋งˆ๋‹ค image decode๊ฐ€ Rasterizer thread์—์„œ ๋ฐœ์ƒํ•˜๊ณ  ์žˆ๋‹ค.

๋””์‹œ๋Š” ์˜ค์ง ์›€์งค๋งŒ์„ ์˜ฌ๋ฆฌ๋Š” '์‹ฑ๊ธ€๋ฒ™๊ธ€ ์ง€๊ตฌ์ดŒ'์ด๋ผ๋Š” ๊ณณ์ด ์žˆ์„ ์ •๋„๋กœ ๋งŽ์€ ์œ ์ €๋“ค์ด ์›€์งค์„ ์ข‹์•„ํ•˜๋Š” ๊ณณ์ด๋‹ค. ์•ž์„œ ์‚ดํŽด๋ณธ ๊ฒƒ๊ณผ ๊ฐ™์ด ๋””์‹œ๊ฐ€ ๊ฒŒ์‹œ๊ธ€์„ ์‚ญ์ œํ•ด๋„ ์‹ค์ƒ ์ด๋ฏธ์ง€๋Š” ์‚ญ์ œํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์„ ์ƒ๊ฐ ํ•ด ๋ณด์ž. ์ ๊ฒŒ๋Š” ์ˆ˜ MB์—์„œ ๋งŽ๊ฒŒ๋Š” ์ˆ˜์‹ญ MB์— ๋‹ฌํ•˜๋Š” ๊ณ ์šฉ๋Ÿ‰์˜ gif๋„ ์‚ญ์ œํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์€ ์Šคํ† ๋ฆฌ์ง€ ๋ถ€๋‹ด์ด ๋ˆ„์  ๋  ์ˆ˜ ์žˆ์Œ์„ ์‹œ์‚ฌํ•œ๋‹ค.

๊ทธ๋ ‡์ง€๋งŒ ์ปค๋ฎค๋‹ˆํ‹ฐ๋ฅผ ์šด์˜ํ•˜๋Š”๋ฐ ์žˆ์–ด gif๋ฅผ mp4๋กœ ์ธ์ฝ”๋”ฉํ•˜๊ฑฐ๋‚˜ web์— embed ์‹œํ‚ค๋Š”๊ฑด ๋งค์šฐ ๊ท€์ฐฎ์€ ์ผ์ด๋‹ค. ์ธ์ฝ”๋”ฉ ์—ญ์‹œ ๋น„์šฉ์ด ๋“œ๋Š” ์ผ์ด๊ณ  video ํƒœ๊ทธ๋ฅผ ์จ์•ผ ํ•˜๋Š” ๋“ฑ ์•„๋ฌดํŠผ ๊ท€์ฐฎ๋‹ค ์ด๊ฑฐ๋‹ค. ์š”์ฆ˜ ์ถ”์„ธ๊ฐ€ mp4๋ผ๋Š” ๋ง์„ ํ–ˆ์ง€๋งŒ Giphy๋‚˜ Imgur๋Š” ์—ฌ์ „ํžˆ gif ํฌ๋ฉง์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค. ๊ฑฐ๊ธฐ์—” ๋น„๋ฐ€์ด ์žˆ๋Š”๋ฐ ์ด ์„œ๋น„์Šค๋“ค์˜ gif๋Š” ์ง„์งœ gif๊ฐ€ ์•„๋‹ˆ๋‹ค. imgur๋Š” ์•„์˜ˆ gif ํฌ๋ฉง์„ ์ƒˆ๋กœ ์ •์˜ ํ•ด์„œ Gifv๋ผ๋Š” ๊ฒƒ์„ ๋งŒ๋“ค์—ˆ๋‹ค.

๐Ÿ“Ž introducing gifv

์ด๋ ‡๊ฒŒ ๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ๋””์‹œ์ธ์‚ฌ์ด๋“œ์˜ ํฌ๊ณ ์ž‘์€ ๋ฌธ์ œ ๋„ค๊ฐ€์ง€ ์ •๋„๋ฅผ ์‚ดํŽด ๋ณด์•˜๋‹ค.

๐Ÿค” ๊ฒฐ๋ก 

๊ทธ๋ƒฅ ๋””์‹œ์ธ์‚ฌ์ด๋“œ ์ด๋ฏธ์ง€ ์„œ๋ฒ„๋Š” ๋น„ํšจ์œจ์ ์ด๋ผ๋Š” ๊ฒƒ๋ฟ์ด๋‹ค. ์•…์šฉ์˜ ์†Œ์ง€๋„ ํฌ๋‹ค. ๋ถˆ๋ฒ• ์ด๋ฏธ์ง€๋ฅผ ์–ด๋”˜๊ฐ€ ์ €์žฅ ํ•ด ๋‘๊ณ  ์‹ถ์„ ๋•Œ ๋””์‹œ๋Š” ๊ฐ์ถ”๊ธฐ ๋”ฑ ์ข‹์€ ์žฅ์†Œ๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค. ๋””์‹œ์ธ์‚ฌ์ด๋“œ๋Š” ์‚ฌ์‹ค์ƒ ๋ฌดํ•œ ์šฉ๋Ÿ‰์˜ ๋ฌด๋ฃŒ ํด๋ผ์šฐ๋“œ๋ฅผ ์šด์˜ํ•˜๊ณ  ์žˆ๋Š” ์…ˆ์ด๋‹ค.

์ด๋ฏธ์ง€๋ฅผ ์บ์‹ฑํ•˜์ง€ ์•Š๋Š”๋ฐ๋‹ค๊ฐ€ ๊ฐ€๋Šฅ์„ฑ์€ ๋‚ฎ์ง€๋งŒ ์ค‘๋ณต์œผ๋กœ ์ €์žฅํ•˜๋Š” ๊ฑด ์•„๋‹๊นŒ ํ•˜๋Š” ์˜์‹ฌ์ด ๋‚จ์•„ ์žˆ๋‹ค. ์ •๋ฆฌํ•˜์ž๋ฉด ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

  • ๊ฒŒ์‹œ๊ธ€์€ ์‚ญ์ œ๋˜๋”๋ผ๋„ ์ด๋ฏธ์ง€ URL์€ ์‚ด์•„ ์žˆ๋‹ค. ์ฆ‰ ๋””์‹œ ๋‚ด๋ถ€ ์ด๋ฏธ์ง€ ์„œ๋ฒ„์—์„œ๋Š” ์—ฌ์ „ํžˆ ์ €์žฅ์ค‘์ด๊ณ  ์‚ญ์ œํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋ˆ„๊ตฌ๋‚˜ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ๋˜‘๊ฐ™์€ ์ด๋ฏธ์ง€๋ผ๋„ URL์ด ๋‹ค๋ฅด๊ณ  response ํ—ค๋”์— Cache-Control ์—†์–ด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋กœ์ปฌ ์Šคํ† ๋ฆฌ์ง€์— ์บ์‹ฑํ•˜์ง€ ๋ชปํ•˜๊ณ  ์žˆ๋‹ค. ๋ฐ์ดํ„ฐ ์‚ฌ์šฉ๋Ÿ‰์ด ์ฆ๊ฐ€ํ•˜๊ณ  ๋ฐฐํ„ฐ๋ฆฌ ์—ญ์‹œ ์˜ํ–ฅ ๋ฐ›๋Š”๋‹ค.
  • ๋˜‘๊ฐ™์€ ์ด๋ฏธ์ง€๊ฐ€ ๋งค๋ฒˆ ์ค‘๋ณต์œผ๋กœ ๋””์‹œ ์ด๋ฏธ์ง€ ์„œ๋ฒ„์— ์ €์žฅ ๋˜์–ด ์žˆ์„ ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ๋‹ค.
  • ์ธ๋„ค์ผ ์—†์ด ํ•ญ์ƒ ์›๋ณธ ์ด๋ฏธ์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋”ฉ ์ค‘์ž„.

๊ธ€์—์„œ๋Š” ๋””์‹œ์ธ์‚ฌ์ด๋“œ๋งŒ์„ ์–ธ๊ธ‰ํ–ˆ์ง€๋งŒ ์‹ค์ƒ์€ ๋””์‹œ์ธ์‚ฌ์ด๋“œ ๋ฟ๋งŒ์ด ์•„๋‹ˆ๋ผ ์ˆ˜ ๋งŽ์€ ๊ตญ๋‚ด ์ปค๋ฎค๋‹ˆํ‹ฐ๋“ค์ด ์ด์™€ ๊ฐ™์€ ๋ฌธ์ œ๋ฅผ ํ’ˆ๊ณ  ์žˆ๋‹ค. ์›๋ž˜ ๋งŒ๋“ค์–ด์ง„ ์‚ฌ์ดํŠธ์˜ ๋‹จ์ ์„ ๋‘๋“ค๊ฒจ ํŒจ๊ณ  ๋น„ํŒํ•˜๋Š” ๊ฒƒ์€ ์‰ฝ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๊ทธ ์‚ฌ์ดํŠธ๋ฅผ ์ œ๋Œ€๋กœ ๋งŒ๋“ค๊ณ  ์šด์˜ํ•˜๋Š” ๊ฒƒ์€ ์•„์ฃผ ์–ด๋ ค์šด ์ผ์ด๋‹ค. ์ด๋ฏธ์ง€ ์บ์‹ฑ์€ ์ •๋ง ์–ด๋ ค์šด ๋ฌธ์ œ๊ณ  ํŠนํžˆ http ํ—ค๋”์˜ ์บ์‹ฑ ๊ด€๋ จํ•œ ํ•„๋“œ ๊ฐœ์ˆ˜๋ฅผ ๋ณด๋ฉด ์•„๋งˆ ๊นœ์ง ๋†€๋ž„ ๊ฒƒ์ด๋‹ค. ๋ˆ„๊ตฐ๊ฐ€์—๊ฒ ๋„์›€์ด ๋์„ ๊ธ€์ด๊ธธ ํฌ๋งํ•˜๋ฉฐ ๋๋‚ธ๋‹ค.

๐Ÿ“˜ ๋” ์ฝ์–ด ๋ณผ ๊ฑฐ๋ฆฌ

profile
๐ŸŒš ๋ฐฉ๋ž‘ ๊ฐœ๋ฐœ์ž, https://duge.space/DOZYHExYNz

16๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2020๋…„ 5์›” 17์ผ

๊ธ€ ์ž˜ ๋ณด๊ณ  ๊ฐ‘๋‹ˆ๋‹ค.

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2020๋…„ 5์›” 18์ผ

์ •๋ง ํฅ๋ฏธ๋กœ์šด ์ด์•ผ๊ธฐ๋„ค์š”ใ…Žใ…Ž ์žฌ๋ฐŒ๊ฒŒ ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค!
์š”์ฆ˜ ๊ฐœ๋ฐœ์ž๊ธ€์ด ์ด๋ ‡๊ฒŒ ์žฌ๋ฐŒ์„ ์ˆ˜ ์žˆ๋‚˜ ๊ฐํƒ„ํ•˜๋ฉฐ ์ •์ฃผํ–‰์ค‘์ž…๋‹ˆ๋‹คใ…‹ใ…‹

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2020๋…„ 7์›” 15์ผ

์ž˜ ๋ดค์๋‹ˆ๋‹ค. ์˜ˆ์ „๋ถ€ํ„ฐ ์ง€์ ๋˜๋˜ ์‚ฌํ•ญ์ธ๋ฐ ์œ ์ €๋“ค์ด webp๋ฅผ ์‚ฌ์šฉํ•˜์ž ๋””์‹œ๋Š” ์˜คํžˆ๋ ค ๊ทธ๊ฑธ ๋ง‰๋Š” ์ชฝ์œผ๋กœ ๋Œ€์‘ํ–ˆ์ฃ . ์ค‘๊ฐ„์— 'GIF ์‚ฌ์šฉ์„ ๋ฉˆ์ถฐ์ฃผ์„ธ์š”!'๋ฅผ ์ง๋งํฌ๋กœ ๋ฐ”๊พธ๋ฉด ์ข€ ๋” ์ข‹์„ ๊ฒƒ ๊ฐ™์๋‹ˆ๋‹ค

2๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 3์›” 21์ผ

๊ธ€์„ ์ •๋ง ์ž˜ ์“ฐ์‹œ๋Š” ๊ฒƒ ๊ฐ™์•„์š” ์žฌ๋ฏธ์žˆ๊ฒŒ ์ž˜ ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค.

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2022๋…„ 12์›” 15์ผ

๋””์‹œ๋ฅผ ํฌ๋กค๋ง ๊ธ€ ์ •๋…ํ•˜๋‹ค๊ฐ€ ์„œ๋‘์— ์žˆ๋Š” ์š”๊ฒŒ ์ฝฑ๋ฐ•ํ˜€์„œ.. ์–ด๋–ค์˜๋„๋กœ ํฌ๋กค๋งํ•˜์…ง๋‚˜์š”

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2022๋…„ 12์›” 24์ผ

์™€ ์žฌ๋ฐŒ๊ฒŒ ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค ์ง„์งœ ๊ฐœ๊ฟ€์žผ...
์š”๋Ÿฐ ๋ฌธ์ œ์ ๋“ค์„ ๋””์”จ๊ฐ€ ๋‚˜์ค‘์— ์–ด๋–ป๊ฒŒ ๊ฐœ์„ ํ•  ์ง€ ๊ถ๊ธˆํ•ด์ง€๋„ค์š”

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2023๋…„ 12์›” 19์ผ

์–ผ๋งˆ์ „์— ๋ธŒ๋ผ๋ผ์šฐ์ ธ ์บ์‹œ ๊ณต๋ถ€๋ฅผ ํ•˜์˜€๋Š”๋ฐ ํ™œ์šฉ์„ ๋ฐฐ์šด ๊ฒƒ ๊ฐ™์•„ ๊ธฐ๋ถ„์ด ์ข‹์Šต๋‹ˆ๋‹ค. ์ข‹์€ ๊ธ€ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค :)

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ