docs: WebM과 WebP로 성능 개선 과정 글 작성

Author: HyunJinNo

_posts/2025-02-20-webm-webp.md

@@ -17,7 +17,7 @@ video, image, webm, webp</p></blockquote>
 
 ## 개요
 
-WebM과 WebP을 사용해서 웹 성능을 개선한 방법에 대해 정리한 페이지입니다.
+이번 글에서는 `WebM`과 `WebP`에 대해 정리하고, `WebM`과 `WebP`을 사용해서 <b>지금 보고 계시는 블로그의 성능을 개선한 방법</b>에 대해 설명하겠습니다.
 
 ## WebM
 
@@ -45,16 +45,15 @@ WebM과 WebP을 사용해서 웹 성능을 개선한 방법에 대해 정리한
 
   Chrome, Firefox, Opera 등 주요 브라우저에서 네이티브로 지원합니다.
 
-  <blockquote class="prompt-warning"><p><strong><u>Caution</u></strong> <br>
-  <u>2025년 2월 20일</u> 기준 iOS Safari는 아직 WebM을 지원하지 않습니다.</p></blockquote>
+  <img src="/assets/img/front-end/webm-webp/pic1.avif" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 ### MP4 vs WebM
 
 웹 브라우저에서 자주 사용하는 비디오 포맷인 `MP4`와 `WebM`을 비교하여 표로 정리하면 다음과 같습니다.
 
 |             | MP4                                                                           | WebM                                                                           |
 | ----------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| 코덱        | 비디오: VP8/VP9/AV1, 오디오: Vorbis, Opus                                     | 비디오: H.264, H.265/HEVC, MPEG-4 등, 오디오: AAC, MP3, AC3 등                 |
+| 코덱        | 비디오: H.264, H.265/HEVC, MPEG-4 등, 오디오: AAC, MP3, AC3 등                | 비디오: VP8/VP9/AV1, 오디오: Vorbis, Opus                                      |
 | 호환성      | 가장 널리 사용되는 포맷으로, 거의 모든 브라우저와 모바일 기기에서 지원합니다. | 주요 브라우저에서 지원하지만, 일부 구형 브라우저와 기기에서 지원하지 않습니다. |
 | 파일 크기   | WebM에 비해 상대적으로 큽니다.                                                | MP4에 비해 훨씬 작습니다.                                                      |
 | 파일 확장자 | .mp4                                                                          | .webm                                                                          |
@@ -90,9 +89,11 @@ WebM과 WebP을 사용해서 웹 성능을 개선한 방법에 대해 정리한
 
   Chrome, Edge, Firefox, Safari 등 주요 브라우저에서 지원합니다. 사실상 인터넷 익스플로러를 제외한 웹 브라우저에서 지원한다고 보면 됩니다.
 
+  <img src="/assets/img/front-end/webm-webp/pic2.avif" alt="pic2" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+
 ### JPEG vs PNG vs GIF vs SVG vs WebP vs AVIF
 
-웹 브라우저에서 사용하는 이미지 포맷을 비교하여 표로 정리하면 다음과 같습니다.
+웹 브라우저에서 사용하는 이미지 포맷들을 비교하여 표로 정리하면 다음과 같습니다.
 
 |             | JPEG                                                                                                | PNG                                                                                | GIF                                               | SVG                                                                        | WebP                                                                      | AVIF                                                                                                                |
 | ----------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
@@ -102,18 +103,43 @@ WebM과 WebP을 사용해서 웹 성능을 개선한 방법에 대해 정리한
 | 단점        | 손실 압축 방식이라 반복 저장 시 화질이 저하될 수 있습니다. 또한 투명도를 지원하지 않습니다.         | 파일 크기가 크며, 특히 사진과 같은 복잡한 이미지에 사용하면 용량이 클 수 있습니다. | 색상 제한이 있어 고화질 이미지에는 부적합합니다.  | 사진과 같은 복잡한 이미지는 표현하기 어렵습니다.                           | 일부 구형 브라우저에서는 지원하지 않습니다.                               | 지원하는 브라우저가 제한적이며, 변환 속도(인코딩)가 WebP보다 느립니다.                                              |
 | 파일 확장자 | .jpg, .jpeg, .jpe 등                                                                                | .png                                                                               | .gif                                              | .svg                                                                       | .webp                                                                     | .avif                                                                                                               |
 
-<img src="/assets/img/front-end/webm-webp/pic1.png" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba
-(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/front-end/webm-webp/pic3.avif" alt="pic3" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+
+<img src="/assets/img/front-end/webm-webp/pic4.avif" alt="pic4" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+
+## 웹 성능 개선하기
+
+### Step 1 - 성능 개선 전 (MP4, JPG/PNG)
+
+기존의 블로그는 성능 및 파일 용량 측면에서 개선이 많이 필요하였습니다. 특히 다음 사진과 같이 빌드 결과물의 용량이 `228 MB`가 되는 문제가 있었습니다.
+
+<img src="/assets/img/front-end/webm-webp/pic5.avif" alt="pic5" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+
+이는 블로그에서 사용하는 비디오와 이미지에 최적화가 적용되지 않았기 때문입니다. 비디오 포맷은 `MP4`였으며, 이미지는 `JPG`와 `PNG`만을 사용하고 있었습니다. 이로 인해 다음 사진을 보면 알 수 있듯이 비디오와 이미지 용량 총합이 `233 MB`나 되었습니다.
+
+<img src="/assets/img/front-end/webm-webp/pic6.avif" alt="pic6" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+
+이처럼 `MP4`, `JPG`, `PNG`만을 계속 사용하면 블로그 글을 작성할 수록 파일 용량이 점점 더 커지는 것이 문제가 될 것이라고 생각하였습니다. 또한 사용하는 비디오, 이미지 용량이 크기 때문에 로딩 속도도 느리고 네트워크 트래픽도 큰 부분도 고려하였습니다. 이와 같은 점을 고려했을 때 파일 용량을 줄이는 것이 필요하다고 판단하였고, 결과적으로 모든 비디오 파일 포맷을 `WebM`으로, 모든 이미지 포맷을 `WebP`로 변경하기로 결정하였습니다.
+
+### Step 2 - 성능 개선 후 (WebM, WebP)
+
+먼저 블로그에서 사용하는 비디오 포맷을 `WebM`으로 변경하였습니다. 그리고 블로그에서 사용하는 이미지 포맷을 전부 `WebP`로 변경하였습니다.
+
+<img src="/assets/img/front-end/webm-webp/pic7.avif" alt="pic7" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+
+<img src="/assets/img/front-end/webm-webp/pic8.avif" alt="pic8" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+
+파일 포맷을 변경한 결과 다음과 같이 비디오와 이미지 용량 총합을 `233 MB`에서 `61.4 MB`로 줄일 수 있었습니다.
+
+<img src="/assets/img/front-end/webm-webp/pic9.avif" alt="pic9" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
-<img src="/assets/img/front-end/webm-webp/pic1.webp" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba
-(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+이와 같이 비디오/이미지 용량이 크게 줄면서 빌드 결과물의 용량이 `228 MB`에서 `60.8 MB`로 크게 줄게 되었고 웹 성능을 크게 개선할 수 있었습니다.
 
-<img src="/assets/img/front-end/webm-webp/pic1.avif" alt="pic1" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba
-(0, 0, 0, 0.19); border-radius: 0.5rem"/>
+<img src="/assets/img/front-end/webm-webp/pic10.avif" alt="pic10" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
-## Step 1 - 웹 성능 개선 전
+<img src="/assets/img/front-end/webm-webp/pic11.avif" alt="pic11" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
-## Step 2 - 웹 성능 개선 후
+<img src="/assets/img/front-end/webm-webp/pic12.avif" alt="pic12" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 0.5rem"/>
 
 ## 참고 자료