WEBP vs PNG
투명 배경이 필요한 자산에서 WEBP와 PNG 중 무엇을 쓸지 기준을 제시합니다.
핵심 요약
핵심: 웹 배포 투명 이미지는 WEBP가 용량에서 유리한 경우가 많고, 편집·문서·보수적 파이프라인은 PNG가 안전합니다. 마스터는 PNG, 배포는 WEBP로 나누는 전략이 흔합니다.
두 포맷이 겹치는 지점
PNG와 WEBP는 둘 다 알파 채널을 다룰 수 있습니다. 차이가 생기는 지점은 “누가 열어야 하는가”와 “몇 번 전송되는가”입니다. 같은 로고라도 디자인 시안 단계와 라이브 사이트 단계의 최적 포맷이 달라질 수 있습니다.
| 항목 | WEBP | PNG |
|---|---|---|
| 웹 용량 | 자주 더 작음 | 사진/복잡한 알파에서 커질 수 있음 |
| 편집기 호환 | 들쭉날쭉 | 매우 넓음 |
| 문서/인쇄 전달 | 실패 가능 | 안전 |
| 무손실 감각 | 모드에 따라 다름 | 친숙한 무손실 래스터 |
| 사진 | 손실 WEBP가 유리한 편 | 비대해지기 쉬움 |
로고·UI에 대한 실무 감각
아이콘, 버튼, UI 일러스트처럼 가장자리와 가독성이 중요한 자산은 과도한 손실 압축에 취약합니다. WEBP로 배포하더라도 품질을 여유 있게 두거나, 작은 아이콘은 SVG/PNG를 유지하는 편이 낫습니다. “투명도만 되면 최저 용량”을 노리다가 할로(번짐)가 생기면 브랜드 손해가 더 큽니다.
상품 컷아웃
배경을 딴 제품 이미지는 웹에서 WEBP가 잘 맞는 경우가 많습니다. 다만 보정·합성 중에는 PNG 마스터를 두고, 최종 업로드만 WEBP로 내보내는 2단 구조가 사고율이 낮습니다. WEBP만 남기면 이후 재편집 때 호환 문제로 시간을 잃을 수 있습니다.
변환 가이드
- PNG → WEBP: 사이트 경량화
- WEBP → PNG: 편집기/문서 호환
- 사진 PNG: 웹이 목표면 JPG/WEBP 재검토(투명 없으면)
PNG를 WEBP로 바꾼다고 해서 이미 손실된 디테일이 복구되지는 않습니다. 반대로 WEBP를 PNG로 바꾼다고 용량 마법이 일어나지도 않습니다—대개 커집니다.
선택 트리
- 투명 필요? 없으면 JPG/WEBP(사진) 검토
- 최종이 웹? WEBP 후보
- 최종이 문서/외주 편집? PNG
- 둘 다? PNG 마스터 + WEBP 파생본
압축과 리사이즈
큰 투명 PNG는 해상도부터 줄이세요. 그다음 WEBP 변환·압축을 적용하면 품질 대비 용량이 안정적으로 내려가는 경우가 많습니다. 브라우저 로컬 도구로 업로드 없이 시험해 볼 수 있습니다.
정리
WEBP vs PNG는 “어느 쪽이 더 새것인가”의 문제가 아니라 마스터와 배포본을 나누는 문제입니다. 호환이 필요하면 PNG, 전송이 필요하면 WEBP.
디자인 시스템 관점의 포맷 분리
컴포넌트 라이브러리의 아이콘 소스는 SVG나 PNG로 두고, 마케팅 랜딩에 들어가는 큰 투명 일러스트만 WEBP로 내보내는 팀이 많습니다. 모든 투명 자산을 WEBP로 통일하면 스토리북/피그마 핸드오프에서 열람 문제가 터질 수 있습니다. ‘소스’와 ‘배포’를 나누는 것이 WEBP vs PNG 논쟁을 끝내는 가장 빠른 방법입니다.
PNG 스프라이트나 옛 방식의 이미지 아이콘을 유지하는 레거시 페이지가 있다면, 한꺼번에 WEBP로 갈아타기보다 트래픽이 큰 랜딩부터 치환하세요. 시각 회귀 테스트가 없다면 알파 가장자리 깨짐을 놓치기 쉽습니다. 교체 전후로 다크/라이트 배경 스크린샷을 남겨 두세요.
용량이 줄어들지 않을 때 점검할 것
이미 최적화된 작은 PNG 아이콘을 WEBP로 바꿔도 이득이 미미하거나 오히려 커질 수 있습니다. 헤더에 들어가는 20KB PNG를 건드리는 것보다, 상세 상단의 800KB 투명 상품 컷을 바꾸는 편이 효과가 큽니다. 최적화는 바이트 영향도가 큰 자산부터 수행하는 우선순위 작업입니다.
사진인데 알파가 없는 PNG라면 WEBP/JPG로 가는 것이 PNG 유지보다 올바른 방향인 경우가 많습니다. “투명이 없는 PNG”는 습관적으로 남아 있는 경우가 있어, 변환 전에 알파 존재 여부를 확인하는 습관이 용량을 크게 좌우합니다.
실무 전환 플레이북
- 알파가 있는 대형 마케팅 자산 목록화
- PNG 마스터 보관
- WEBP 파생본 생성 및 페이지 배경 위 검수
- 문서/외주용 PNG 경로 유지
- 성과(용량·깨짐 제보) 2주 관찰 후 확대
브라우저 로컬 변환기는 이 플레이북의 실험 단계를 빠르게 해 줍니다. 서버에 시안을 올리지 않고도 여러 품질을 비교할 수 있습니다.
알파 가장자리를 검수하는 구체적 방법
투명 WEBP/PNG를 검수할 때는 바둑판만 보지 말고, 실제 사용될 배경색 사각형 위에 올려 보세요. 연한 회색, 브랜드 주색, 어두운 네이비에서 각각 확대합니다. 흰 후광이 보이면 품질을 올리거나 PNG 마스터에서 다시 내보내세요. 이미 손상된 WEBP를 재압축해 고치려 하면 더 나빠질 수 있습니다.
작은 아이콘은 확대했을 때보다 실제 UI 크기에서 흔들림·번짐이 느껴지는지가 중요합니다. 1x/2x 표시를 모두 확인하세요. 문제가 계속되면 해당 아이콘만 PNG/SVG로 예외 처리하는 것이 전체 포맷 정책을 포기하는 것보다 낫습니다. 예외 목록을 디자인 시스템에 기록해 두세요.
대용량 투명 마케팅 이미지는 WEBP 전환 효과가 큰 편입니다. 다만 랜딩 A/B 도중 크리에이티브를 자주 바꾸면 마스터 PNG 없이 WEBP만 돌아다녀 수정이 어려워집니다. 항상 PNG 마스터 → WEBP 배포 흐름을 유지하세요. 로컬 변환기는 배포본을 빠르게 만드는 용도이고, 소스 오브 트루스는 디자인 툴 export여야 합니다.
외주 계약서에 넣을 한 줄
“납품 마스터는 PNG(또는 SVG), 웹 게시용 파생본은 WEBP 가능. 최종 업로드 전 브랜드 배경에서 알파 검수.” 이 문장이 있으면 외주 결과물이 WEBP만 들어와 수정이 막히는 상황을 예방할 수 있습니다. 비용 협상 시 마스터 납품이 기본임을 분명히 하세요. 파생본 생성은 내부 도구로도 충분합니다. PNG→WEBP 변환을 내부에 두면 외주비로 포맷 변환을 살 필요가 없습니다.
검수 체크리스트에는 1배/2배 크기, 라이트/다크 배경, 압축 아티팩트 여부를 넣으세요. 체크 없이 배포하면 사용자보다 광고 소재 QA가 먼저 문제를 발견하는 неприят한 순서가 됩니다.
마무리 체크
투명 자산인가? 웹 배포인가? 편집이 남았는가? 세 질문에 YES/NO로 답하면 WEBP vs PNG가 정리됩니다. 예외는 디자인 시스템에 기록하고, 마스터와 배포본을 섞지 마세요. 가장자리는 실제 배경색에서 검수하고, 용량은 큰 자산부터 줄이세요. 이 페이지의 관련 도구로 바로 시험해 보면 토론보다 결과가 빨리 나옵니다.
작은 예외가 쌓이면 분기 표가 커지므로, 분기 전 ‘큰 투명 마케팅 이미지만 WEBP’처럼 범위를 좁혀 시작하는 편이 실패율이 낮습니다.
자주 묻는 질문
투명 로고는 무엇을 쓰나요?
편집·전달은 PNG, 라이브 웹은 WEBP를 시도하는 구성이 흔합니다.
PNG가 항상 무손실로 더 좋나요?
편집 안정성은 좋지만 웹 용량에는 불리할 수 있습니다.
WEBP로 바꾸면 깨지나요?
품질을 너무 낮추면 가장자리가 상할 수 있어 확대 확인이 필요합니다.
사진에도 PNG가 좋나요?
투명도가 없다면 웹/공유용으로는 JPG·WEBP가 보통 낫습니다.
문서에 WEBP를 넣어도 되나요?
실패하는 툴이 있어 PNG가 더 안전합니다.