투명 배경을 지키는 저장 형식: PNG·WebP·AVIF·GIF·JPG 비교

작성 · 갱신 · 운영자(개인)

배경을 지운 로고나 스티커를 저장했는데 올려 보니 흰 네모가 생겼나요? 투명 배경을 지키려면 PNG, WebP, AVIF 중 하나로 저장하세요. JPG는 투명을 담을 수 없어서 투명한 부분이 흰색으로 채워집니다. 같은 투명 그림을 다섯 형식으로 저장해 투명한 픽셀이 실제로 몇 개 남는지 세어 봤어요.

시험한 그림

900×600 크기의 할인 배지를 직접 그렸습니다. 배경은 완전히 투명하고, 배지 아래에는 부드러운 그림자, 오른쪽 아래에는 반쯤 비치는 파란 원이 있어요. 완전히 투명한 픽셀이 278,048개, 반투명한 픽셀이 96,064개였습니다. 원본 PNG는 45.2KB였고, 이 파일을 미루킷 변환과 같은 처리 과정으로 형식별로 저장한 뒤 다시 열어 투명도 값을 셌습니다.

형식별로 무엇이 남았나요?

PNG는 27.2KB였고 완전 투명 278,048개, 반투명 96,064개가 원본과 똑같이 남았습니다. 투명도 값의 차이는 0이었어요. WebP 화질 85%는 15.0KB로 PNG보다 작았는데도 투명도 값은 원본과 똑같았습니다. 색은 손실 압축이지만 투명도는 그대로 지켜진 거예요.

AVIF 화질 85%는 8.6KB로 가장 작았습니다. 완전 투명 픽셀은 278,041개로 거의 그대로였고, 투명도 값의 평균 차이는 0.06, 가장 큰 차이는 13(0~255 기준)이었어요. 가장자리에 아주 작은 차이가 생기지만 눈으로 보기는 어렵습니다. 다만 AVIF는 처음 쓸 때 처리 파일을 내려받고, 오래된 프로그램에서는 열리지 않을 수 있어요.

GIF는 22.3KB였고 반투명 픽셀이 0개가 됐습니다. GIF는 픽셀마다 ‘투명하거나, 완전히 보이거나’ 둘 중 하나만 표현해요. 그래서 부드러운 그림자가 배지 둘레의 검은 테두리로 바뀌었고, 반쯤 비치던 파란 원은 진한 파란색이 됐습니다. 미루킷의 GIF 설명에도 반투명은 표현하지 못한다고 적혀 있어요.

JPG 화질 85%는 20.3KB였고 투명한 픽셀은 0개였습니다. 투명했던 모서리는 RGB 255/255/255, 즉 흰색이 됐고, 투명도 54였던 그림자 픽셀은 흰 바탕과 섞여 회색(200/200/200)이 됐어요. 저장 형식에서 JPEG를 고르면 ‘투명한 부분은 흰색으로 채워요’라는 안내가 보입니다.

어떤 형식을 고르면 될까요?

어디에 올릴지 모르겠다면 PNG가 가장 무난합니다. 원본 그대로를 지키고 대부분의 프로그램에서 열려요. 웹사이트나 블로그처럼 WebP를 받는 곳이라면 WebP가 PNG의 절반 정도 용량으로 투명도를 지켰습니다. 용량이 아주 중요하고 받는 곳이 AVIF를 지원하면 AVIF도 선택지예요.

GIF는 테두리가 딱딱한 아이콘처럼 반투명이 없는 그림에만 쓰는 편이 좋습니다. 그림자나 흐린 가장자리가 있으면 이번 시험처럼 모양이 거칠어져요.

미루킷에서 저장하는 순서

  1. 변환을 열고 투명 배경 그림을 넣습니다.
  2. 저장 형식에서 PNG나 WebP를 고릅니다. WebP를 고르면 ‘투명 배경을 유지해요’라는 안내가 함께 보여요.
  3. 미리보기의 결과 쪽에서 체크무늬가 비치면 그 부분이 투명하게 남은 것입니다. JPEG로 바꾸면 같은 자리가 흰색으로 바뀌는 것을 바로 볼 수 있어요.
  4. 저장한 파일을 실제로 올릴 곳에서 다시 열어, 어두운 배경 위에서도 흰 테두리가 없는지 확인합니다.

용량 줄이기에서 맞출 때는요?

용량 줄이기는 처음 열면 저장 형식이 JPEG로 골라져 있습니다. 제출용 사진에 맞춘 기본값이라, 투명 그림을 그대로 넣으면 배경이 흰색이 돼요. 투명 로고의 용량을 맞출 때는 ‘웹용 · WebP’를 누르거나 저장 형식을 PNG로 먼저 바꾸고 목표를 넣으세요.

꼭 JPG로 내야 한다면요?

미루킷의 JPG 변환은 투명한 부분을 항상 흰색으로 채우고, 다른 배경색을 고르는 설정은 없습니다. 흰 바탕에 놓일 그림이라면 그대로 써도 괜찮아요. 어두운 바탕에 놓일 그림이라면 JPG 대신 PNG나 WebP를 받는지 먼저 확인해 보세요.

여러 곳에 쓸 로고라면 투명 PNG 한 장을 원본으로 남겨 두세요. 흰 홈페이지 머리말과 어두운 SNS 배너처럼 바탕이 다른 곳마다 그 원본에서 필요한 형식의 사본을 만들면 됩니다. JPG 사본을 다시 PNG로 바꿔 쓰는 일을 피할 수 있어요.

관련 도구 열기

미루킷으로 직접 확인한 결과

형식용량완전 투명 픽셀반투명 픽셀
PNG27.2 KB278,04896,064
WebP 85%15.0 KB278,04896,064
AVIF 85%8.6 KB278,04196,395
GIF22.3 KB300,3280
JPG 85%20.3 KB0 (흰색으로)0

투명 배경·반투명 그림자가 있는 900×600 PNG(완전 투명 278,048픽셀, 반투명 96,064픽셀)를 실제 processImage로 형식별 저장하고 다시 열어 알파 값을 셌습니다.

저장한 파일을 체크무늬 위에 다시 띄웠습니다. 체크무늬가 보이는 곳이 투명입니다.
저장한 파일을 체크무늬 위에 다시 띄웠습니다. 체크무늬가 보이는 곳이 투명입니다.
현재 도구에서 글의 설정을 실제로 적용한 화면입니다.
현재 도구에서 글의 설정을 실제로 적용한 화면입니다.

실측 원시 기록 보기

알아둘 점

위 숫자는 직접 만든 배지 그림 한 장의 결과입니다. 그림 크기와 색에 따라 용량은 달라집니다.

이미 흰 배경이 들어간 JPG를 PNG로 바꿔도 배경이 투명해지지 않습니다. 배경을 지우려면 오리기·지우기 도구에서 먼저 작업하세요.

올리는 서비스가 그림을 다시 저장하면서 투명도를 없앨 수도 있습니다. 올린 뒤 화면에서 한 번 확인해 보세요.