투명 배경 이미지를 JPG로 바꾸면 왜 까맣게 나오는가
로고나 아이콘처럼 배경이 투명한 PNG·AVIF 파일을 JPG로 바꿨더니, 분명 투명했던 부분이 새까맣게 채워져 나온 경험이 있을 겁니다. 버그처럼 보이지만 사실은 JPG라는 포맷 자체의 근본적인 한계와 Canvas API의 기본 동작이 맞물려 생기는, 이미지 변환기라면 누구나 마주치는 함정입니다.
1. JPG는 애초에 투명도라는 개념이 없다
PNG·WebP·AVIF는 픽셀마다 RGB(빨강·초록·파랑) 값 외에 알파(A, 투명도) 값을 하나 더 저장할 수 있습니다. 반면 JPG(JPEG)는 1990년대에 사진 압축용으로 설계된 포맷이라 애초에 알파 채널을 위한 자리가 없습니다. 그러니 투명 픽셀이 있는 원본을 JPG로 저장하는 순간, 어딘가에서는 반드시 알파 정보가 버려지고 그 자리를 대신할 실제 색이 결정돼야 합니다. 문제는 "무슨 색으로 대신 채울 것인가"를 변환기가 명시적으로 처리하지 않으면 벌어집니다.
2. 왜 하필 검은색인가: Canvas의 기본값
브라우저에서 이미지 포맷을 변환하는 도구는 대개 <canvas> 요소에 원본 이미지를 그린 뒤, 그 캔버스를 다시 목표 포맷으로 인코딩하는 방식을 씁니다. 이때 새로 만든 캔버스의 모든 픽셀은 기본적으로 RGBA(0,0,0,0) — 즉 완전히 투명한 검은색으로 초기화되어 있습니다. 투명 PNG를 이 캔버스에 그대로 그리면 투명했던 부분은 그대로 알파 0인 채로 남고, 여기서 곧바로 JPG로 인코딩하면 인코더가 알파값을 버리면서 RGB(0,0,0), 즉 순수 검정만 남깁니다. "투명이라서 안 보인다"가 아니라 "투명의 기본 배경색 자체가 검정이었다"는 것이 핵심입니다.
3. 알파 합성 공식으로 보는 원리
화면에 그려지는 최종 색은 "소스 색×알파 + 배경 색×(1-알파)"라는 알파 합성(alpha compositing) 공식을 따릅니다. 배경이 검정(0,0,0)일 때와 흰색(255,255,255)일 때 반투명 픽셀이 어떻게 다르게 보이는지 비교하면 다음과 같습니다.
| 원본 픽셀 (RGBA) | 검정 배경 위 합성 결과 | 흰색 배경 위 합성 결과 |
|---|---|---|
| 빨강, 알파 50% (255,0,0,0.5) | (128,0,0) 어두운 빨강 | (255,128,128) 밝은 분홍 |
| 완전 투명 (0,0,0,0) | (0,0,0) 검정 | (255,255,255) 흰색 |
표의 두 번째 줄이 이 문제의 핵심입니다. 완전히 투명한 픽셀은 원래 "색이 없다"는 뜻이지만, 알파가 사라지고 나면 어떤 배경 위에 합성됐는지에 따라 검정이 될 수도, 흰색이 될 수도 있습니다. 캔버스를 아무것도 채우지 않고 그대로 두면 검정 배경 위에 합성한 것과 같은 결과가 나옵니다.
4. 이 도구는 실제로 어떻게 막고 있는가
AVIF to JPG 변환기의 코드를 직접 확인해 보면, 목표 포맷이 JPG일 때만 ctx.fillStyle='#ffffff'로 캔버스 전체를 흰색으로 먼저 채우고 나서 원본 이미지를 그리는 로직이 들어 있습니다. 이렇게 하면 투명했던 영역이 검정 대신 흰색으로 채워져, 로고나 아이콘처럼 흰 배경 위에서 쓰일 이미지에서는 자연스러운 결과가 나옵니다. 반대로 PNG나 WebP처럼 알파 채널을 지원하는 포맷으로 저장할 때는 이 흰색 채우기 단계를 건너뛰고 투명도를 그대로 유지합니다 — 포맷별로 분기하는 것이 핵심입니다.
5. 모든 변환기가 이렇게 처리하지는 않는다
이 흰색 채우기는 표준 동작이 아니라 변환기가 직접 넣어야 하는 예외 처리입니다. 이 로직이 없는 변환기나 이미지 편집 소프트웨어의 기본 내보내기 옵션을 쓰면 검은 배경으로 저장될 수 있으므로, 다른 도구를 쓸 때는 미리보기에서 배경색을 반드시 확인하는 습관이 필요합니다. 원본이 PNG인 경우에는 PNG to JPG 변환기에서도 같은 원리가 적용되는지 확인하는 것이 안전합니다.
6. 흰색이 아니라 다른 색 배경이 필요하다면
제품 상세페이지처럼 배경을 브랜드 컬러로 맞춰야 하는 경우 자동으로 채워지는 흰색이 오히려 방해가 될 수 있습니다. 이럴 때는 투명 배경 만들기 도구로 먼저 원하는 단색을 합성한 뒤 JPG로 변환하거나, 애초에 투명도가 유지되는 WebP to JPG 변환기 흐름에서 PNG·WebP 상태로 다른 배경과 합성 작업을 끝내고 마지막 단계에서만 JPG로 내보내는 순서를 권장합니다.
자주 묻는 질문
Q. PNG를 JPG로 바꿀 때도 같은 문제가 생기나요?
네. AVIF든 PNG든 WebP든, 원본에 알파 채널이 있고 목표 포맷이 JPG라면 동일한 원리로 배경이 검게 나올 수 있습니다. 포맷과 무관하게 "알파가 있는 원본 → 알파가 없는 목표 포맷" 조합에서 발생하는 문제입니다.
Q. 검게 나온 파일을 다시 되돌릴 수 있나요?
이미 JPG로 저장되고 나면 알파 정보 자체가 사라졌으므로 복구가 불가능합니다. 반드시 알파 채널이 살아있는 원본(PNG·WebP·AVIF)에서 다시 변환해야 합니다.
Q. 왜 흰색으로 채우고 검은색으로는 채우지 않나요?
로고·아이콘·문서 스캔 등 투명 배경 이미지 대부분이 실사용 환경에서 흰 배경 위에 놓이는 경우가 많아 흰색이 가장 무난한 기본값이기 때문입니다. 다른 색이 필요하면 변환 전에 별도로 배경을 합성해야 합니다.
Q. 파일이 서버로 업로드되나요?
아니요. img 태그로 디코딩하고 Canvas에 그린 뒤 다시 인코딩하는 과정 전체가 브라우저 안에서 실행되므로 원본 파일이 외부로 전송되지 않습니다.