이미지 포맷을 WebP로 변환했을 때 색상이 미세하게 달라 보이거나 탁해지는 진짜 이유

서론

웹사이트 로딩 속도 개선을 위해 PNG나 JPEG 이미지를 WebP 포맷으로 변환하는 작업은 이제 선택이 아닌 기본이 되었습니다. 하지만 변환된 이미지를 원본과 나란히 놓고 비교해보면 묘하게 색감이 탁해지거나 선명도가 떨어지는 현상을 겪는 경우가 적지 않습니다. 특히 디자이너나 쇼핑몰 운영자처럼 색상에 민감한 직군에서는 이런 미세한 차이가 큰 스트레스로 다가오기도 합니다.

왜 같은 이미지인데 WebP로 저장만 하면 색상이 달라 보이는 것일까요? 이는 단순한 시스템 오류가 아니라, 이미지를 압축하는 방식과 색상 데이터를 처리하는 구조적인 차이에서 비롯됩니다. 눈으로 보기엔 비슷해 보여도 파일 내부에서 일어나는 데이터의 취사선택 과정이 색상의 결과물을 바꾸어 놓습니다.

WebP 변환 시 색상 손실이 발생하는 기본 원리

가장 흔한 원인은 손실 압축(Lossy Compression) 과정에서 발생하는 색차 섭샘플링(Chroma Subsampling) 때문입니다. WebP의 손실 압축 알고리즘은 인간의 눈이 밝기나 명암에는 민감하지만, 미세한 색상 변화에는 상대적으로 둔감하다는 시각적 특성을 이용합니다. 그래서 밝기 정보는 최대한 보존하면서 색상 정보의 해상도를 절반 혹은 그 이하로 뭉뚱그려 저장함으로써 파일 용량을 획기적으로 줄이게 됩니다.

주로 YUV420이라는 데이터 압축 방식을 사용하게 되는데, 이 경우 인접한 여러 개의 픽셀들이 같은 색상 데이터를 강제로 공유하게 됩니다. 이 때문에 색상 경계가 뚜렷한 일러스트 그래픽이나, 붉은색과 파란색 계열의 원색이 강한 사진에서는 색이 주변으로 번지거나 전체적으로 칙칙해 보이는 현상이 두드러지게 나타날 수밖에 없습니다.

색 공간(Color Space) 프로필 누락의 맹점

이미지가 가진 원래 색을 화면에 정확히 표현하려면, 이 이미지가 어떤 색상 기준을 따르는가를 알려주는 ICC 프로필(ICC Profile)이라는 메타데이터가 필요합니다. 최근에는 표준 영역인 sRGB를 넘어 Display P3나 Adobe RGB처럼 훨씬 더 넓은 색 영역을 가진 이미지를 활용하는 경우가 많습니다.

그런데 이미지 용량을 극단적으로 줄이기 위해 WebP로 변환하는 과정에서, 대부분의 이미지 최적화 툴들이 불필요한 용량을 차지한다며 이 ICC 프로필 데이터를 아예 삭제해버립니다. 브라우저나 이미지 뷰어는 색상 프로필이 없는 이미지를 임의의 기본값으로 강제 변환하여 화면에 띄우게 되며, 이 과정에서 원래의 생생했던 색감이 마치 물이 빠진 듯 흐릿하게 변질되는 것입니다.

투명도 처리 방식과 배경색의 간섭 현상

PNG의 가장 큰 장점 중 하나인 투명 배경(Alpha 채널)을 WebP로 변환할 때도 예상치 못한 색상 왜곡이 발생합니다. 이는 이미지를 변환하는 프로그램이나 라이브러리가 반투명한 영역을 계산하는 방식의 차이 때문입니다.

가장자리 픽셀들이 부드럽게 반투명 처리되는 안티앨리어싱 영역에서, 변환 툴이 기본 배경색(주로 검은색이나 흰색)을 픽셀에 미리 섞어버리는 사전 곱셈(Premultiplied Alpha) 방식의 오류가 종종 발생합니다. 이로 인해 웹사이트의 투명한 배경 위에 이미지를 올렸을 때 테두리에 지저분한 검은 띠가 생기거나, 픽셀 색상 자체가 원래 의도와 다르게 어두워지는 현상을 목격하게 됩니다.

색상 틀어짐을 최소화하는 실전 선택 기준

이러한 문제를 겪지 않으려면 이미지를 변환할 때 목적에 맞는 옵션을 정확히 설정해야 합니다. 만약 제품 사진의 정확한 색상이나 브랜드 로고의 뚜렷함이 용량 절감보다 우선순위에 있다면, WebP 변환 시 반드시 무손실 압축(Lossless) 옵션을 선택해야 합니다. 무손실 WebP는 원본 색상과 투명도를 완벽하게 유지하면서도 일반 PNG보다 용량을 어느 정도 줄여주는 훌륭한 대안이 됩니다.

또한 변환 도구의 설정에서 메타데이터 유지 옵션, 특히 ICC 프로필 유지 체크박스가 켜져 있는지 확인하는 것이 필수적입니다. 실무에서 적용할 때는 무작정 대량의 폴더를 일괄 변환하기보다는, 빨간색이나 파란색 비중이 높은 핵심 이미지 몇 장을 테스트로 변환해보고 색상 차이를 육안으로 점검하는 과정을 반드시 거쳐야 합니다.

주의점: 장점만 보고 선택하면 생기는 한계

WebP가 구글의 강력한 지원을 받으며 웹 표준 이미지 포맷으로 자리 잡았지만, 모든 상황에 완벽한 만능 해결책은 아닙니다. 복잡한 풍경 사진에서는 탁월한 용량 절감 효과를 보이지만, 단순한 아이콘이나 텍스트가 포함된 단색 위주의 그래픽에서는 오히려 원본 PNG보다 용량이 커지거나 경계선 주변에 자글자글한 노이즈가 생기는 역효과가 발생하기도 합니다.

또한, 최신 브라우저에서는 문제가 없더라도 구형 운영체제를 사용하는 환경에서는 WebP 이미지가 아예 엑스박스로 뜨는 호환성 문제도 완전히 사라지지 않았습니다. 압축률이라는 스펙에만 매몰되어 무조건 모든 이미지를 WebP로 바꾸겠다는 강박보다는, 이미지의 성격과 주요 타깃의 접속 환경을 고려하여 기존 포맷과 적절히 섞어 쓰는 유연한 판단이 필요합니다.

결론

포맷을 변환했을 때 색상이 달라 보이는 현상은 단순한 버그가 아니라, 데이터를 압축하는 과정에서 발생하는 색상 정보의 생략과 뼈대가 되는 메타데이터의 누락에서 기인합니다. 파일 용량을 줄여 웹사이트를 쾌적하게 만드는 최적화 작업도 중요하지만, 사용자가 시각적으로 받아들이는 정보의 품질과 브랜드의 신뢰도를 훼손해서는 안 됩니다.

결국 변환 원리와 도구의 옵션에 따른 차이를 명확히 이해하고, 잃어버리는 색상의 디테일과 얻어지는 로딩 속도 사이에서 최적의 타협점을 찾는 것이 중요합니다. 웹 이미지를 다루는 사람이라면 원클릭 자동 변환 툴의 기본 설정에만 의존하지 말고, 어떤 데이터를 살리고 어떤 것을 버릴지 스스로 통제하는 기준을 세우시길 바랍니다.