์ด ๋ฌธ์„œ์˜ ์›๋ณธ์€ ์™ธ๋ถ€ ์œ„ํ‚ค์—์„œ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค.

1. ๊ฐœ์š”2. ํŠน์ง•3. ์—ฌ๋‹ด4. ๊ด€๋ จ ๋ฌธ์„œ

1. ๊ฐœ์š”[ํŽธ์ง‘]

ํ™ˆํŽ˜์ด์ง€

2010๋…„ ๊ตฌ๊ธ€์—์„œ ๋งŒ๋“  ์ด๋ฏธ์ง€ ํฌ๋งท. ์ด๋ฆ„์ฒ˜๋Ÿผ Web์„ ์œ„ํ•ด์„œ ๋งŒ๋“ค์–ด์ง„ ์ด๋ฏธ์ง€ ํฌ๋งท์ด๋‹ค. ๊ธฐ์กด์˜ ์ด๋ฏธ์ง€ ํฌ๋งท์ด GIF, PNG, JPEG์œผ๋กœ ์‚ผ๋ถ„๋˜์–ด ์žˆ์—ˆ๋‹ค๋ฉด WebP๋Š” ์ด๋“ค ์„ธ ๊ฐ€์ง€ ํฌ๋งท์„ ์ „๋ถ€ ๋Œ€์ฒด ๊ฐ€๋Šฅํ•œ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

2. ํŠน์ง•[ํŽธ์ง‘]

  • ๊ตฌ๊ธ€์ด On2๋ฅผ ์‚ฌ๋“ค์ด๋ฉด์„œ ๊ฐ™์ด ์‚ฌ๋“ค์ธ VP8 ๋น„๋””์˜ค ์ฝ”๋ฑ์˜ ๊ธฐ์ˆ ์— ๊ธฐ๋ฐ˜ํ•œ ์˜์ƒ ์••์ถ• ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•œ๋‹ค.
  • ๋งŒ๋“ค ๋‹น์‹œ ๋Œ€๋ถ€๋ถ„์˜ ์ด๋ฏธ์ง€ ํฌ๋งท์ด ์†์‹ค ์••์ถ•(JPEG)๊ณผ ๋น„์†์‹ค ์••์ถ•(PNG, GIF) ํฌ๋งท์œผ๋กœ ๋‚˜๋‰˜๋Š”๋ฐ, ์ด ํฌ๋งท์€ ๋‘˜ ๋‹ค ์ง€์›ํ•œ๋‹ค.[1]
  • ์†์‹ค์••์ถ•์„ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ JPEG ํฌ๋งท๋ณด๋‹ค 30% ์ •๋„ ํŒŒ์ผ ํฌ๊ธฐ๊ฐ€ ์ž‘๋‹ค๊ณ  ํ™ˆํŽ˜์ด์ง€์— ์†Œ๊ฐœํ•˜๊ณ  ์žˆ๋‹ค. ์ƒ˜ํ”Œ ๊ฐค๋Ÿฌ๋ฆฌ ๋งํฌ
  • ๋น„์†์‹ค ์••์ถ•์„ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ๋„ PNG ํฌ๋งท๋ณด๋‹ค 20~30% ์ •๋„ ํŒŒ์ผ ํฌ๊ธฐ๊ฐ€ ์ž‘์•„์ง„๋‹ค๊ณ  ํ™ˆํŽ˜์ด์ง€์— ์†Œ๊ฐœํ•˜๊ณ  ์žˆ๋‹ค. ์ƒ˜ํ”Œ ๊ฐค๋Ÿฌ๋ฆฌ ๋งํฌ
  • Animation GIF ํฌ๋งท์ฒ˜๋Ÿผ, Animated WebP๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ง€์›ํ•œ๋‹ค. ์›น ๋ธŒ๋ผ์šฐ์ € ์ง€์› ์—ฌ๋ถ€ ํ…Œ์ŠคํŠธ ์‚ฌ์ดํŠธ
  • PNG ํฌ๋งท์ฒ˜๋Ÿผ ์•ŒํŒŒ ์ฑ„๋„์„ ์ง€์›ํ•œ๋‹ค.
  • ๋ฉ”์ด์ € ๋ธŒ๋ผ์šฐ์ € ๊ธฐ์ค€์œผ๋ก  ์ง€์› ํ˜„ํ™ฉ์ด ์ƒ๋‹นํžˆ ๊ฐœ์„ ๋œ 19๋…„ ์ดˆ ๊ธฐ์ค€์œผ๋กœ๋„, ์ •์ž‘ ์›น์‚ฌ์ดํŠธ์—์„œ webp ํ™•์žฅ์ž ์—…๋กœ๋“œ ๋ฐ ํ—ˆ์šฉ ์ฒ˜๋ฆฌ์— ๊ด€์‹ฌ ์—†๋Š” ๊ณณ์ด ๋งŽ๋‹ค.[2] ์ผ๋ก€๋กœ ์ด๋ฏธ์ง€ ํ˜ธ์ŠคํŒ… ์‚ฌ์ดํŠธ์˜ ๊ฒฝ์šฐ, imgur๋Š” ์ง€์›ํ•˜์ง€๋งŒ ํ•ด๋‹น ๋ฌธ์„œ์˜ ๊ฒฝ์Ÿ ์‚ฌ์ดํŠธ ํ•ญ๋ชฉ์— ์žˆ๋Š” ์•„๋ฅ˜ ์‚ฌ์ดํŠธ๋“ค์€ ๊ฑฐ์˜ ๋‹จ ํ•˜๋‚˜๋„ ์ง€์›ํ•˜์ง€ ์•Š๋Š”๋‹ค. ์•„์ง๊นŒ์ง€๋„ ๋น„ํšจ์œจ์ ์ธ GIF๊ฐ€ ๊ฐ•์„ธ์ธ ์ด์œ ... 2020๋…„๋Œ€ ์ดˆ์ค‘๋ฐ˜ ๊ธฐ์ค€์œผ๋กœ webp๋ฅผ ์„ ๋œป ์ง€์›ํ•˜๊ธฐ๊ฐ€ ๊บผ๋ ค์ง€๋Š” ๊ฒƒ์ด, iOS13 ๋ธŒ๋ผ์šฐ์ €๋“ค์ด webp๋ฅผ ์ง€์› ์•ˆ ํ•œ๋‹ค. iOS๋ฒ„์ „ ํฌ๋กฌ, ํŒŒ์ด์–ดํญ์Šค๋„ ์žˆ์ง€๋งŒ ๋ฌด๋Šฌ๋งŒ ํฌ๋กฌ, ํŒŒ์ด์–ดํญ์Šค๊ณ  ์‚ฌํŒŒ๋ฆฌ์™€ ๊ฐ™์€ ์—”์ง„์ด๋‹ค. [3] ๊ทธ๋ž˜์„œ ์•„์ดํฐ, ์•„์ดํŒจ๋“œ ์‚ฌ์šฉ์ž๋ฅผ ๋ฐฐ๋ คํ• ๋ ค๋ฉด webp๋ฅผ ๋„์ž…ํ•˜๊ธฐ ์–ด๋ ต๋‹ค. iOS, iPadOS๋Š” ๋ฒ„์ „ 14๋ถ€ํ„ฐ, macOS๋„ ๋ฒ„์ „11์ธ big sur๋ถ€ํ„ฐ webp๋ฅผ ์ง€์›ํ•œ๋‹ค๊ณ  ํ•˜๋‹ˆ, 2020๋…„ ์ดํ›„์— webp ์ง€์› ์•ˆํ•˜๋Š” ์‚ฌ์ดํŠธ๋“ค์€ webp์— ์ •๋ง๋กœ ๊ด€์‹ฌ์ด ์—†๋‹ค๊ณ  ๋ด๋„ ๋  ๋“ฏ ํ•˜๋‹ค.

3. ์—ฌ๋‹ด[ํŽธ์ง‘]

  • ๊ตฌ๊ธ€์ด ์ด๋Ÿฐ ํฌ๋งท์„ ๋งŒ๋“ค์–ด์„œ ๋ฌด๋ฃŒ๋กœ ๋ฟŒ๋ฆฌ๋Š” ์ด์œ  ์ค‘ ํ•˜๋‚˜๋Š”, ๊ตฌ๊ธ€ ํ˜ผ์ž์„œ ์—„์ฒญ๋‚œ ์ธํ„ฐ๋„ท ํŠธ๋ž˜ํ”ฝ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š”๋ฐ, ์ด๋ฏธ์ง€ ํฌ๋งท๋งŒ ์ตœ์ ํ™”ํ•ด๋„ ์„œ๋ฒ„ ํŠธ๋ž˜ํ”ฝ์„ ๋Œ€ํญ ์ค„์—ฌ์„œ ๋น„์šฉ์„ ์—„์ฒญ๋‚˜๊ฒŒ ์ค„์ผ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋ฉฐ, ์‹ค์ œ๋กœ ๊ตฌ๊ธ€ ํ™ˆํŽ˜์ด์ง€๋Š” ์›น๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ฒดํฌํ•ด์„œ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ WebP๋ฅผ ์ง€์›ํ•˜๋Š” ๊ฒฝ์šฐ JPEG์ด๋‚˜ PNG ๋Œ€์‹  WebP๋ฅผ ๋ณด๋‚ด์ฃผ๋„๋ก ๋˜์–ด ์žˆ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค. ์—ฌ๊ธฐ์— ๋”ํ•ด์„œ ์ธํ„ฐ๋„ท ์†๋„๊ฐ€ ๋นจ๋ผ์ง€๋ฉด ๋นจ๋ผ์งˆ์ˆ˜๋ก ๊ตฌ๊ธ€์ด ๊ด‘๊ณ ๋ฅผ ํ†ตํ•ด์„œ ๋งค์ถœ์„ ๋Š˜๋ฆด ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ตฌ๊ธ€์€ ํ•ญ์ƒ ์ธํ„ฐ๋„ท ์†๋„ ํ–ฅ์ƒ์„ ์œ„ํ•ด์„œ ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ๋‹ค.
  • ์œ ํŠœ๋ธŒ ์ธ๋„ค์ผ๋„ ์ด ํ˜•์‹์œผ๋กœ ๋˜์–ด์žˆ๋‹ค.[4]
  • ์ง€์›ํ•˜๋Š” ์ด๋ฏธ์ง€ ๋ทฐ์–ด๊ฐ€ ๋งŽ์ง€๋Š” ์•Š์ง€๋งŒ, ๊ฟ€๋ทฐ๋Š” Animated WebP ํฌ๋งท๊นŒ์ง€ ์ž˜ ์ง€์›ํ•œ๋‹ค.
  • Animated WebP๋Š” ๊ตฌ๊ธ€์ด Animated GIF๊ฐ€ ๋ถ€๋Ÿฌ์›Œ์„œ ์ดˆ๊ธฐ ๋ฒ„์ „์˜ WebP ํฌ๋งท์— ์—†๋˜ ๊ธฐ๋Šฅ์„ ๋‚˜์ค‘์— ์ถ”๊ฐ€ํ•œ ํฌ๋งท์ธ๋ฐ, 256 ์ปฌ๋Ÿฌ๋งŒ ์ง€์›ํ•˜๋Š” GIF์™€ ๋‹ฌ๋ฆฌ ํŠธ๋ฃจ์ปฌ๋Ÿฌ๋‚˜ YUV๋ฅผ ์ง€์›ํ•˜๊ธฐ ๋•Œ๋ฌธ์— GIF๋ณด๋‹ค ๊ณ ํ™”์งˆ์ด๋ฉด์„œ ์šฉ๋Ÿ‰๋„ ๋” ์ž‘๋‹ค. ํ•˜์ง€๋งŒ, ์•„์ง๊นŒ์ง€๋Š” ๊ตฌ๊ธ€์ด ์ œ๊ณตํ•œ ์ปค๋งจ๋“œ ๋ผ์ธ ํˆด(gif2webp.exe)์™€ FFmpeg/avconv๋ฅผ ์ œ์™ธํ•˜๋ฉด ๊ตญ๋‚ด์—์„œ๋Š” ๊ฟ€์บ ์ด ์ด ํฌ๋งท์„ ์ง€์›ํ•˜๋Š” ์œ ์ผํ•œ ํ”„๋กœ๊ทธ๋žจ์ด๋‹ค.
  • ์ž๋งคํ’ˆ์œผ๋กœ WebM์ด๋ผ๋Š” ๋น„๋””์˜ค ํฌ๋งท์ด ์žˆ๋‹ค.
  • ํ…”๋ ˆ๊ทธ๋žจ ์Šคํ‹ฐ์ปค๊ฐ€ ์ด ํฌ๋งท์„ ์ด์šฉํ•œ๋‹ค. ํ…”๋ ˆ๊ทธ๋žจ PC๋ฒ„์ „์—์„œ ์Šคํ‹ฐ์ปค์—์„œ ์˜ค๋ฅธ์ชฝ ํด๋ฆญ์„ ํ•˜๊ณ  "์ด๋ฏธ์ง€๋ฅผ ๋‹ค๋ฅธ ์ด๋ฆ„์œผ๋กœ ์ €์žฅ"์„ ํ•˜๋ฉด Webp๋กœ ์ €์žฅ๋˜๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.
  • ์นด์นด์˜คํ†ก์˜ ์ด๋ชจํ‹ฐ์ฝ˜์˜ ๊ฒฝ์šฐ์—๋„ ํ•ด๋‹น ํฌ๋งท์„ ์ด์šฉํ•œ๋‹ค. ๋‹จ, ์ „๋ถ€ ์ด ๋ฐฉ์‹์€ ์•„๋‹ˆ๋ฉฐ ํ˜ผ์šฉ ์‚ฌ์šฉ ์ค‘์— ์žˆ๋‹ค.
    ๋ช‡๋ช‡์‚ฌ์ง„๋“ค์„ ์›๋ณธ์œผ๋กœ ๋ณด๋‚ด๊ฒŒ ๋  ๊ฒฝ์šฐ ๋ฐ”๋€Œ๊ธฐ๋„ ํ•œ๋‹ค.
  • ์•ˆ๋“œ๋กœ์ด๋“œ์˜ ์ผ๋ถ€ ์ด๋ฏธ์ง€ ๋ทฐ์–ด์—์„œ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ์•ˆ๋“œ๋กœ์ด๋“œ๋Š” ์ด๋ฏธ์ง€ ํฌ๋งท ์ง€์›์ด ๊ทธ๋ฆฌ ์ข‹์ง€ ์•Š์€๋ฐ, ๊ฒฝ์Ÿ์ž๋ผ ํ•  ์ˆ˜ ์žˆ๋Š” JPEG 2000์ด๋‚˜ MS์˜ JPEG XR์„ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์ด๋ฏธ์ง€ ๋ทฐ์–ด๊ฐ€ ์—†๋‹ค.
  • ์•„ํŒŒ์น˜ HTTP ์„œ๋ฒ„์™€ NGINX์šฉ ๋ชจ๋“ˆ์ธ mod_pagespeed๋„ ๊ฐœ๋ฐœํ•ด์„œ ์ œ๊ณตํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ํ•ด๋‹น ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ ๊ตฌ์ถ•ํ•œ ์„œ๋ฒ„๋ผ๋ฉด ์‰ฝ๊ฒŒ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. IE์ตœ๊ฐ•๊ตญ์ด๋˜ ๋Œ€ํ•œ๋ฏผ๊ตญ์—์„œ๋„ 16๋…„ 4์›” ๋ถ€ํ„ฐ ์Šคํƒฏ์นด์šดํ„ฐ ๊ธฐ์ค€ ํฌ๋กฌ ์ ์œ ์œจ์ด 1์œ„๊ฐ€ ๋˜์—ˆ์œผ๋ฏ€๋กœ, ์ƒ๋‹นํ•œ ํšจ๊ณผ[5]๋ฅผ ๊ธฐ๋Œ€ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ฐจ์„ธ๋Œ€ ํฌ๋งท์ค‘์—” ๋ณด๊ธ‰์ด ์ž˜ ๋œ ํŽธ์ด๋ผ ์•ˆ๋“œ๋กœ์ด๋“œ์—์„œ PerfectViewer๋‚˜ MaruViewer๋“ฑ์ด ์ง€์›ํ•˜๊ณ  iOS์—์„œ๋Š” Safari 14 ๋ฒ ํƒ€๋ถ€ํ„ฐ, ComicShare ๋“ฑ์ด ์ง€์›ํ•œ๋‹ค.
  • ๋‚˜๋ฌด์œ„ํ‚ค์—์„œ๋Š” WebP๋ฅผ ๊ณต์‹์ ์œผ๋กœ ์ง€์›ํ•˜์ง€๋Š” ์•Š์ง€๋งŒ, ์˜ฌ๋ฆฌ๋Š” ๊ฒƒ์€ ๊ฐ€๋Šฅํ•˜๋ฉฐ iOS, iPad OS๋ฅผ ์ œ์™ธํ•œ ํ™˜๊ฒฝ์—์„œ ์ •์ƒ์ ์œผ๋กœ ๋ณด์ธ๋‹ค. WebP์˜ ๋‚˜๋ฌด์œ„ํ‚ค ๊ณต์‹ ์ง€์›์€ Safari์—์„œ ์ง€์›์„ ํ•˜๊ธฐ ์ „๊นŒ์ง€ ๊ณ„ํš์ด ์—†๋‹ค๊ณ . ์ดํ›„ ์‚ฌํŒŒ๋ฆฌ 14๋ถ€ํ„ฐ WebP๋ฅผ ์ง€์›ํ•˜์ž ๊ณต์‹ ์ง€์›ํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค.[6]
  • APNG๋ฅผ ํฌํ•จํ•œ ๊ธฐ์กด ํฌ๋งท๋ณด๋‹จ ์šฐ์ˆ˜ํ•˜์ง€๋งŒ, VP8 ๊ธฐ๋ฐ˜์ธ ๋งŒํผ ๊ณ ํ™”์งˆ ์›€์งค ์šฉ๋„๋กœ๋Š” H264๋ฅผ ์ž˜ ์“ฐ๋Š” ๊ฒƒ๋ณด๋‹จ ๋ชปํ•˜๋‹ค. ๋•Œ๋ฌธ์— ์›€์งค ์šฉ๋„๋กœ WebP ๋Œ€์‹  ์†Œ๋ฆฌ ์—†๋Š” WebM์„ ์“ฐ๊ธฐ๋„ ํ•œ๋‹ค. WebM์€ VP9์„ ์“ธ ์ˆ˜ ์žˆ์œผ๋‹ˆ๊นŒ.[7]
  • ๊ตญ๋‚ด์—์„œ๋Š” ํ˜„์žฌ ๋„ค์ด๋ฒ„[์ผ๋ถ€]์—์„œ๋Š” ์ง€์›ํ•˜๋‚˜ ๋””์‹œ์ธ์‚ฌ์ด๋“œ์—์„œ๋Š” ์ง€์›ํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋‹ค๋งŒ 2021๋…„ 1์›”์— ๋ฐํžŒ ๋‚ด์šฉ์œผ๋กœ๋Š” mp4๋ฅผ ์„  ์ง€์›ํ•œ๋’ค webp๋ฅผ ์ง€์›ํ• ๊ฑฐ๋ผ๊ณ  ๋ฐํ˜”๋‹ค.# ํ‹ฐ์Šคํ† ๋ฆฌ์˜ ๊ฒฝ์šฐ ์ง€์›ํ•˜๊ณ  ์žˆ์—ˆ์œผ๋‚˜ ๋ชจ์ข…์˜ ์ด์œ ๋กœ 2020๋…„ ์ค‘๋ฐ˜๋ถ€ํ„ฐ ์ค‘๋‹จํ–ˆ๊ณ , ํฌ๋กฌ ์ด์™ธ์˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์™„์ „ํžˆ WebP๋ฅผ ํ‘œ์‹œํ•  ๋•Œ๊นŒ์ง€๋Š” ๋‹ค์‹œ ์ง€์›ํ•  ์˜ˆ์ •์ด ์—†๋‹ค๊ณ  ํ•œ๋‹ค. ๋‹จ, ๊ธฐ์กด์— ์—…๋กœ๋“œ๋œ WebP ์ด๋ฏธ์ง€๋Š” ์—…๋กœ๋“œ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ์˜คํ”ˆ์†Œ์Šค๋ฅผ ํ†ตํ•ด์„œ ๋Œ€์ค‘์—๊ฒŒ ๊ฐœ๋ฐฉ๋œ ์ด๋ฏธ์ง€๋กœ ์•Œ๋ ค์ง„ ๊ฒƒ๊ณผ๋Š” ๋‹ฌ๋ฆฌ, ์—„์—ฐํžˆ ํŠนํ—ˆ๊ฐ€ ๊ฑธ๋ ค์žˆ๋Š” ๋…์  ํฌ๋งท์ด๋‹ค. ๋ฌผ๋ก  ๋กœ์—ดํ‹ฐ ํ”„๋ฆฌ ํฌ๋งท์ด์ง€๋งŒ ๊ธฐ์—… ์ž…์žฅ์—์„œ๋Š” ํŠนํ—ˆ๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ ์ž์ฒด๊ฐ€ ๋” ํฐ ๋ฌธ์ œ๋กœ ๋‹ค๊ฐ€์˜ฌ ์ˆ˜ ์žˆ๋‹ค. patent free์— ๋ฏผ๊ฐํ•œ ์—…์ฒด๋“ค์€ ์ฐธ๊ณ ํ•  ๊ฒƒ. ๋‹จ์ˆœํžˆ ์›€์งค ์šฉ๋„๋กœ WebP์™€ ๋น„๊ฒฌ๋˜๋Š” patent free๋ฅผ ์›ํ•œ๋‹ค๋ฉด APNG๊ฐ€ ์žˆ๋‹ค.
  • Webp๋Š” BSD ๋ผ์ด์„ ์Šค๋ฅผ ์ฑ„์šฉํ•˜์—ฌ ์ž์œ ๋กญ๊ฒŒ ์‚ฌ์šฉํ•˜๊ณ  ์ˆ˜์ •ํ•˜๊ณ  ์žฌ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ˆ˜์ •ํ•œ ๊ฒƒ์œผ๋กœ ํŠนํ—ˆ๋ฅผ ์–ป์„ ์ˆ˜๋Š” ์—†๋‹ค.
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜ ํŠน์„ฑ์ƒ ์ด๋ฏธ์ง€๊ฐ€ ๋ฟŒ์˜‡๊ฒŒ ๋ณ€ํ•˜๋Š” ํ˜„์ƒ์ด ์žˆ๋Š”๋ฐ ์›€์งค์„ ๋งŒ๋“ค ๋•Œ ์นดํˆฐ์ฒ˜๋Ÿผ ์ƒ‰์ƒ์ด ์ ๊ณ  ๊ทน๋‹จ์ ์ธ ์ƒ‰๋ณ€ํ™”๊ฐ€ ์ผ์–ด๋‚˜๋Š” ๊ฒฝ์šฐ ๊ทธ๋Ÿฐ ํ˜„์ƒ์ด ์œก์•ˆ์œผ๋กœ ํฌ๊ฒŒ ๋“œ๋Ÿฌ๋‚  ์ˆ˜ ์žˆ๋‹ค. ํ€„๋ฆฌํ‹ฐ ์†์‹ค์„ ๊ฐ€๋Šฅํ•œ ์ค„์ด๊ฑฐ๋‚˜ ๋ฌด์†์‹ค๋กœ ํ•˜๋Š” ์ˆ˜ ๋ฐ–์— ์—†๋‹ค.

4. ๊ด€๋ จ ๋ฌธ์„œ[ํŽธ์ง‘]

  • WebM: ๋™์˜์ƒ ํฌ๋งท
[1] ์ด์— ๋Œ€ํ•ด JPEG๋„ ๋ฌด์†์‹ค ์ง€์›ํ•จ. ์ด๋ผ๊ณ  ํ•˜๊ณ  ์น˜์šฐ๋ฉด ์•ˆ ๋˜๋Š” ๊ฒŒ, JPEG ์ตœ์ดˆ๋ฒ„์ „์€ 1992๋…„, WebP๋Š” 2010๋…„์— ๋‚˜์˜จ ๋ฐ˜๋ฉด, ๋ฌด์†์‹ค JPEG์˜ ์ •์‹ ์ง€์›์ธ JPEG 9.1์€ 2014๋…„์—์•ผ ๋‚˜์™”๋‹ค. (๊ทธ ์ด์ „์—๋„ ๋ฌด์†์‹ค JPEG ์ž์ฒด๋Š” ๊ฐ€๋Šฅํ–ˆ์ง€๋งŒ, ์••์ถ• ๊ณผ์ • ๋Œ€๋ถ€๋ถ„์„ ์ƒ๋žตํ•ด์„œ ์†์‹ค์„ ํ”ผํ•˜๋Š” ํŽธ๋ฒ•์— ๊ฐ€๊นŒ์› ๊ธฐ ๋•Œ๋ฌธ์— ํฌ๋งท๋งŒ JPEG์ด์ง€, PNG๊ฐ€ JPEG ๋Œ€๋น„ ๊ฐ€์žฅ ๋ถˆ๋ฆฌํ•œ ์†Œ์Šค๋ฅผ ์ค˜๋„ PNG๋ณด๋‹ค ์••์ถ•๋ฅ ์ด ๊ตฌ๋ ค์ง€๋Š” ๋“ฑ ์—„์ฒญ ํฐ ์šฉ๋Ÿ‰์˜ ๊ฒฐ๊ณผ๋ฌผ์ด ๋‚˜์˜ค๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ๋‹ค.) ๋ฌผ๋ก  ์ง€์› ์ž์ฒด๋Š” JPEG 2000(2000๋…„๋Œ€ ์ดˆ)์™€ JPEG XR(2006๋…„)์ด ๋” ๋จผ์ €์ด๋ฏ€๋กœ, ํŠน์ดํ•˜๋‹ค๊ธฐ๋ณด๋‹ค๋Š” ๊ทธ๋ƒฅ ์ฐจ๊ธฐ ํฌ๋งท์ด๋‹ˆ๊น ๋‹น์—ฐํžˆ ์ง€์›ํ•˜๋Š” ์ •๋„์ด๊ธด ํ•˜์ง€๋งŒ, 2018๋…„ ํ˜„์žฌ ๊ธฐ์ค€์œผ๋กœ JPEG 2000๊ณผ JPEG XR์€ ๊ฑฐ์˜ ์•ˆ ์“ฐ์ด๊ธฐ ๋•Œ๋ฌธ์— '๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ํŽธ + ์†์‹ค/๋น„์†์‹ค์„ ๋‹จ์ผ ๊ทœ๊ฒฉ์œผ๋กœ ๋ชจ๋‘ ์ง€์›'์œผ๋กœ ๋”ฐ์ง€๋ฉด ์˜คํžˆ๋ ค WebP๊ฐ€ (HEIC ๋“ฑ์— ๋น„ํ•ด ์ƒ๋Œ€์ ์œผ๋กœ) ์›๋กœ์— ๊ฐ€๊นŒ์šด ์œ„์น˜๋‹ค.
[2] ๊ฐ์ข… ํ•ดํ‚น ๊ณต๊ฒฉ ๋•Œ๋ฌธ์— ์ •ํ•ด์ง„ ํ™•์žฅ์ž๋งŒ ํ—ˆ์šฉํ•˜๋Š” ๊ฒƒ์ด ๊ธฐ๋ณธ์ด ๋œ ์ง€ ์˜ค๋ž˜์ง€๋งŒ, ์ด๋ฏธ ํ—ˆ์šฉํ•˜๋Š” jpg/jpeg, png, gif ๋“ฑ์— webp ํ•˜๋‚˜๋งŒ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์€ ์–ด๋ ต์ง€๋„ ์•Š์€๋ฐ... ๊ทธ๋ƒฅ ๊ด€์‹ฌ์ด ์—†๋‹ค๊ณ  ํ•  ์ˆ˜๋ฐ–์— ์—†๋‹ค.
[3] ์• ํ”Œ์ด Safari ์‚ฌ์šฉ๋Ÿ‰์„ ๋Š˜์ด๋ ค๊ณ  iOS ๋ฐ iPadOS์—์„œ๋Š” ๋‹ค๋ฅธ ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ์—”์ง„์„ ์‚ฌ์šฉ์„ ๋ถˆ๊ฐ€ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด ๋†“์•˜๋‹ค. ์ •ํ™•ํžˆ๋Š” ์ถœ์‹œ ๋ถˆ๊ฐ€ ์˜ค์ง WebKit ์—”์ง„์ด ๋‹ฌ๋ฆฐ ๋ธŒ๋ผ์šฐ์ €๋งŒ ์ถœ์‹œ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค ๋งฅ์€ ํฌ๋กฌ, ํŒŒ์ด์–ดํญ์Šค๊ฐ€ ์‚ฌํŒŒ๋ฆฌ์™€ ๊ฐ™์€ webkit์—”์ง„์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ผ๋‹จ webp๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
[4] ์œ ํŠœ๋ธŒ ์ธ๋„ค์ผ์„ ๋ฐ”ํƒ•ํ™”๋ฉด ๊ฐ™์€ ๊ณณ์œผ๋กœ ๋Œ์–ด๋‹ค ๋†“์œผ๋ฉด ํ™•์žฅ์ž๊ฐ€ WebP ํ˜•์‹์œผ๋กœ ๋˜์–ด์žˆ๋Š” ๊ฑธ ์•Œ์ˆ˜ ์žˆ๋‹ค.
[5] 3๋ฒˆ์งธ ๋Œ“๊ธ€ ์ฐธ๊ณ 
[6] ๋‹จ, ์—ฌ์ „ํžˆ iOS์ƒ์—์„œ๋Š” ์žฌ์ƒ์†๋„๊ฐ€ ๋–จ์–ด์ง€๋Š” ๋“ฑ์˜ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.
[7] ๊ทธ๋Ÿฌ๋‚˜ WebM์€ ์–ด๋””๊นŒ์ง€ ๋™์˜์ƒ ํฌ๋งท์ด์ง€ ์ด๋ฏธ์ง€ ํฌ๋งท์ด ์•„๋‹ˆ๋‹ค. ๋‹น์žฅ gif๊ฐ€ ์—„์ฒญ๋‚œ ์šฉ๋Ÿ‰๊ณผ ๋”์ฐํ•œ ํ™”์งˆ์—๋„ ์‚ฌ์šฉ๋˜๋Š” ๊ฑด OS, ๋ธŒ๋ผ์šฐ์ € ์ƒ๊ด€์—†์ด ์›€์ง์ด๋Š” ์ด๋ฏธ์ง€๋ฅผ ์ง€์›ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
[์ผ๋ถ€] ์ง€์› ๋ธ”๋กœ๊ทธ์—์„œ ์ •์ ์ธ ์ด๋ฏธ์ง€๋กœ๋งŒ ์ œํ•œ์ ์œผ๋กœ ์ง€์›ํ•œ๋‹ค. ์• ๋‹ˆ๋ฉ”์ดํ‹ฐ๋“œ WebP์˜ ๊ฒฝ์šฐ, ํƒ€ ํŒŒ์ผ ํ˜ธ์ŠคํŒ… ์‚ฌ์ดํŠธ์— ์˜ฌ๋ ค๋‘๊ณ  html ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ธ์–ด์˜ค๋Š” ๋ฐฉ์‹์œผ๋กœ ์˜ฌ๋ฆด ์ˆ˜ ์žˆ๊ธด ํ•˜๋‹ค.