📌 이미지 로딩 속도가 문제였던 이유
UX Pirates 사이트를 구현하면서 가장 골치 아팠던 문제 중 하나가 이미지 로딩 속도였습니다. 처음에는 PNG 포맷을 사용했는데, 예상보다 로딩 속도가 너무 느려서 UX에 큰 영향을 미쳤습니다. 특히 모바일 환경에서는 페이지 로딩 시간이 길어져 배포조차 부담스러울 정도였습니다.
얼마나 느렸는지는... 프로젝트 회고 를 읽어보시면 알 수 있을 것 같습니다........
이 문제를 해결하기 위해 여러 가지 방법을 고민하다가, 가장 먼저 시도해본 방법은 이미지 포맷 자체를 바꿔보는 것이었습니다. png로 저장해두었던 어쩔 수 없는 이유는 제가 이미지를 저장했던 것이 아니라, 디자이너분이 저장하셨기에 용량은 고려하지 않고 저장이 되어있던 것이었고, 로딩 시간을 줄이기 위해 최대한 압축을 해줄 필요가 있었습니다.
하지만 항상 webp를 사용해왔기에 새로운 확장자는 없을지 궁금해졌고, 새로운 좋은 포맷이 있다면 시도해보고 싶었습니다.
그 과정에서 AVIF와 WebP 두 가지 포맷을 비교하게 되었고, 간단하지만 기록용으로 작성해보려 합니다.
물론 실제로 로딩 속도를 개선하기 위해서는 정말 다양한 방식으로 시도해보았기 때문에 이 내용은 가장 처음에 시도해본 내용이고, AVIF에 대해 처음 알아보았기에 기록용으로만 작성해두려 합니다.
🧐 AVIF vs WebP
이미지 포맷을 변경할 때 가장 중요하게 고려한 것은 파일 크기와 품질이었습니다. AVIF와 WebP 모두 PNG보다 뛰어난 압축률을 제공하지만, 각각의 장단점이 있습니다.
✅ AVIF의 특징
-
AV1 코덱을 기반으로 한 차세대 이미지 포맷
-
WebP보다 더 뛰어난 압축률 (더 작은 용량으로 더 높은 품질 유지 가능)
-
투명도 지원
-
but 지원하는 브라우저가 제한적 (특히 iOS와 일부 모바일 브라우저에서 미지원)
✅ WebP의 특징
-
Google에서 개발한 포맷으로, 이미 여러 브라우저에서 널리 사용됨
-
PNG, JPEG보다 뛰어난 압축률 제공
-
애니메이션, 투명도 지원
-
모바일 브라우저에서 거의 모든 환경에서 지원됨
이 두 포맷을 비교했을 때, AVIF가 더 뛰어난 압축률을 제공하지만 지원하는 브라우저가 제한적이라는 점이 가장 큰 문제였습니다.
특히 모바일에서의 로딩 속도가 가장 중요한 요소였기 때문에, 확실히 지원되는 포맷이 필요했습니다. 결국 WebP가 최적의 선택지라는 결론을 내렸고, png 파일에서 webp로 변환하였습니다.
위에서 언급했듯 항상 프로젝트를 할 때 webp로만 사용해봐서 이번에는 다른 형식을 써보고 싶어 AVIF에 대해서도 찾아보았던 것인데, 아직 webp를 대신할 수는 없을 것 같다는 생각이 들었습니다.
🔥 적용 후
WebP 포맷을 적용한 후 모바일에서의 로딩 속도가 눈에 띄게 개선되었습니다. 기존에는 모바일에서 페이지가 뜨는 데 몇 초씩 걸렸지만, WebP로 변환한 후에는 거의 즉각적으로 로딩되는 수준이 되었습니다.
사실 png에서 webp로 변환한 것이라 어찌보면 당연한 결과였고, 평균 로딩 시간이 2~3초 단축되며 UX를 어느 정도 개선할 수 있었습니다.
✨ 결론
AVIF가 최신 기술이긴 했지만 모바일 대응이 필요한 저희의 프로젝트에는 당장 적용하기 어려웠습니다. 조금 더 시간이 지나서 avif든 다른 포맷이든 더 개선된 포맷이 나온다면 다시 사용해보고 싶습니다,,
