대부분의 프로젝트는 PNG를 WebP로 바꾸기 위해 화려한 빌드 파이프라인이 필요하지 않습니다. 손실/무손실에 대한 명확한 결정, 파일을 제3자 서버에 올리지 않는 도구, 그리고 변환 후 무엇이 잘못되지 않았는지 빠르게 확인할 절차만 있으면 됩니다. 이 가이드는 그것만 다룹니다.

1단계 — 손실 vs 무손실 결정

WebP는 같은 컨테이너 안에 두 모드를 모두 지원합니다. 콘텐츠에 따라 옳은 선택이 달라집니다:

사진, 그라데이션, 카메라로 찍은 모든 것 → 품질 75~85의 손실. 픽셀 단위 비교를 하지 않는 한 원본과 차이가 보이지 않고, 파일 크기는 원본 PNG 대비 30~45% 작아집니다.
스크린샷, UI 목업, 차트, 텍스트가 있는 로고 → 무손실. 이런 콘텐츠에서는 WebP의 무손실 코더가 PNG의 DEFLATE보다 진짜로 더 낫고, 모든 픽셀이 보존됩니다. 보통 20~30% 작아집니다.
혼합 콘텐츠(예: 사진이 들어간 UI 스크린샷) → 우선 품질 90의 손실로 시도하세요. 텍스트나 얇은 선이 흐릿하면 무손실로.

2단계 — 변환 도구 고르기

일회성 변환에는 보통 브라우저 기반 도구가 가장 빠릅니다. 서버 측 변환기는 지연이 추가되고 대부분 검증 불가능한 제3자 서버에 이미지를 올립니다. 저희 PNG → WebP 변환 도구는 인코더를 브라우저 안의 WebAssembly에서 전부 실행합니다 — 파일이 기기를 떠나지 않습니다.

빌드 파이프라인용으로는 Google이 만든 표준 인코더 cwebp가 정석입니다. macOS에서는 Homebrew로 libwebp의 일부로 설치합니다:

brew install webp

그다음:

손실은 cwebp -q 80 input.png -o output.webp, 무손실은 cwebp -lossless input.png -o output.webp.

3단계 — 품질 슬라이더 튜닝

사진은 품질 80이 스위트 스폿입니다. 60 미만에서는 평탄한 영역에 블로킹 아티팩트가 보이기 시작합니다. 90 이상은 시각적 개선 없이 파일이 빨리 커집니다. 구체적인 목표값은:

랜딩 페이지 히어로 이미지: 품질 82~85. 첫 페인트 LCP 향상이 품질 우려를 압도합니다.
제품 사진: 품질 85~90. 고객이 확대해서 봅니다.
블로그 본문 인라인 이미지: 품질 75~80. 본문 텍스트와 함께 보기에 충분합니다.
배경 텍스처: 품질 60. 누구도 배경을 자세히 보지 않습니다.

4단계 — 투명도 주의

PNG에 알파 채널이 있다면 변환 시 두 가지가 잘못될 수 있습니다:

프리멀티플라이드 알파. 일부 인코더는 RGB를 알파로 미리 곱하는 것을 기본으로 삼아 부분 투명 픽셀의 색을 조용히 바꿉니다. 다른 배경 위에 합성하면 후광이나 색 변이가 나타납니다. 해결책은 cwebp에 -exact를 넘기거나 원본 RGB를 보존하는 변환기를 쓰는 것입니다.
손실 WebP의 알파 양자화. 기본적으로 손실 WebP는 알파 채널을 양자화해 바이트를 절약합니다. 깨끗한 가장자리가 필요한 UI 자산에는 -alpha_q 100을 넘기거나 무손실 모드를 쓰세요.

5단계 — 출력 검증

WebP를 커밋하기 전에 세 가지를 확인하세요:

시각적으로 비교. 두 파일을 Preview / Photos 등 기본 뷰어에서 열고 빠르게 전환해보세요. 1초 안에 차이가 보이면 품질이 너무 낮은 것입니다.
파일 크기 확인. WebP가 원본 PNG보다 작아야 정상입니다. 더 크다면 평탄한 이미지에 손실을 적용했거나(무손실이 더 좋았을 것), 원본 PNG가 이미 (예: oxipng로) 크게 최적화돼 있는 경우입니다.
실제 환경에서 렌더링. 웹사이트용이면 스테이징 빌드에 넣고 클릭해보세요. 데스크톱 앱용이면 그 앱에서 열어보세요. 가장 큰 WebP 실패 모드는 다운스트림 도구가 조용히 포맷을 지원하지 않는 것입니다.

대량 변환: 수백 파일을 한 번에

PNG 폴더라면 cwebp를 도는 셸 루프면 충분합니다:

for f in *.png; do cwebp -q 80 "$f" -o "$${f%.png}.webp"; done

UI 자산은 무손실로, 사진은 손실로 처리해야 하는 혼합 폴더라면 스크립트보다 웹 기반 배치 도구가 빠릅니다. 저희 변환기는 한 번에 최대 20파일을 받아 병렬로 처리합니다.

흔한 실패 모드

출력이 입력보다 큽니다. 평탄한 자산에 손실을 적용했거나 원본 PNG가 이미 최적화돼 있는 경우. 무손실로 시도하세요.
이메일에서 깨진 이미지 아이콘이 보입니다. 대부분의 메일 클라이언트는 WebP를 지원하지 않습니다. 이메일에는 PNG/JPEG를 쓰세요.
색이 있는 배경에 합성하면 색이 달라 보입니다. 프리멀티플라이드 알파. 4단계 참조.
WebP가 PNG보다 흐릿해 보입니다. 품질이 너무 낮거나 원본에 매우 얇은 선이 있었던 경우. 품질을 90으로 올리거나 무손실로 전환하세요.

마무리

대부분의 자산에서 전체 흐름은 이렇습니다: 변환기를 열고, PNG를 떨구고, 품질을 80으로 두고, 결과를 다운로드. 위에서 언급한 복잡함은 진짜이지만 드뭅니다. 부딪혔을 때 해결책은 작습니다 — 품질을 올리거나 무손실로 바꾸기. 30~40%의 파일 크기 절감은 모든 페이지 뷰에서 누적되고, 변환은 몇 초면 끝납니다.