로고 주위의 흰 사각형은 어디서 생길까요?
배경이 없는 그림을 안내장에 넣었는데 흰 사각형이 따라오는 경우가 있습니다. 파일이 잘못 보이는 것일 수도 있고, 저장 과정에서 흰 배경이 실제로 들어갔을 수도 있습니다.
먼저 그림을 어두운 배경 위에 올려 보세요. 주변 색이 그대로 비치면 투명 영역이 남아 있습니다. 흰 사각형이 유지된다면 그 흰색이 그림 안에 저장됐을 가능성이 있습니다.
PNG는 투명도를 저장할 수 있는 형식입니다. 하지만 확장자가 PNG라고 해서 모든 파일의 배경이 투명한 것은 아닙니다. 반대로 일반적인 JPG는 투명 영역을 저장하지 않습니다. 형식의 차이는 MDN 이미지 형식 안내에서 확인할 수 있습니다.
같은 도형을 네 가지 파일로 만들었습니다
비교를 위해 320×200px 크기의 도형을 직접 그렸습니다. 초록색 원은 불투명하게 만들고, 주황색 원은 배경이 조금 비치도록 만들었습니다. 도형 바깥은 완전히 투명합니다.
여기서 픽셀은 이미지를 이루는 작은 점입니다. 픽셀마다 색과 함께 저장하는 투명도 값을 알파 값이라고 합니다. 이번 실험은 알파 값이 0이면 완전히 투명하고,255이면 완전히 불투명한 조건으로 비교했습니다.
| 저장 방법 | 투명하거나 반투명한 픽셀 | 왼쪽 위 모서리 |
|---|---|---|
| 투명 PNG 원본 | 50,988개 | 완전히 투명 |
| 흰 배경을 합친 JPG | 0개 | 흰색 |
| 어두운 배경을 합친 JPG | 0개 | 어두운색 |
| 흰 배경 JPG를 다시 PNG로 저장 | 0개 | 흰색 유지 |
JPG는 변환할 때 어떤 배경을 합쳤는지에 따라 주변 색이 달라졌습니다. 프로그램마다 기본 배경 처리 방식은 다를 수 있습니다. 이번 비교에서는 흰색과 어두운색을 명시해서 변환했습니다.
여기서 중요한 결과는 마지막 행입니다. 흰 배경 JPG를 PNG로 바꿔도 투명 영역은 돌아오지 않았습니다. 형식을 바꿨을 뿐, 원래 투명했던 부분을 다시 찾아 지우지는 않았기 때문입니다.
내 파일에서 원인을 좁히는 방법
- 편집 프로그램에서 원본을 여세요. 배경을 밝은색과 어두운색으로 바꿔 확인하세요.
- 흰 사각형이 계속 보이면 흰색 배경이 실제로 들어 있는지 확인하세요. 배경 레이어가 있다면 숨긴 뒤 다시 확인하세요.
- 원본에서는 투명하지만 내보낸 파일에서 흰색이 보이면 저장 형식과 배경 합치기 설정을 살펴보세요.
- 투명도를 지원하는 PNG로 내보내고, 저장한 파일을 다시 열어 확인하세요.
- 마지막으로 그림을 사용할 문서나 웹페이지에 넣어 보세요. 파일을 넣는 과정에서도 변환이 일어날 수 있습니다.
투명 영역을 표시하는 바둑판 무늬는 편집기의 안내 화면일 수 있습니다. 무늬가 보인다는 이유만으로 그것이 실제 그림에 포함됐다고 판단하지 마세요. 반대로 바둑판 화면을 캡처해 저장했다면 무늬 자체가 그림의 일부가 됩니다.
이미 흰 배경과 합쳐진 파일만 남았다면 원본 작업 파일을 먼저 찾아보세요. 배경 제거 기능으로 다시 잘라낼 수도 있지만, 흰색 글자나 반투명한 가장자리까지 함께 지워질 수 있습니다.
JPG가 필요한 상황이라면 배경색을 먼저 정하세요
파일을 받는 서비스가 JPG만 허용할 수도 있습니다. 이때는 투명도를 유지하려 하지 말고 사용할 배경색을 정해 합친 뒤 저장하세요.
흰 안내장에 넣을 파일이라면 흰 배경을 선택할 수 있습니다. 어두운 안내장에 넣을 파일이라면 그 배경색으로 만들어 확인하세요. 반투명한 주황색 원도 배경에 따라 최종 색이 달라집니다.
사용할 배경이 여러 개라면 투명 PNG 원본을 보관하세요. 배경을 합친 JPG만 남겨 두면 다른 색의 안내장을 만들 때 작업이 늘어납니다. 파일 이름도 badge-transparent.png, badge-white.jpg처럼 용도를 구분하면 찾기 쉽습니다.
파일로 직접 비교하기
브라우저에서 투명 PNG를 열었는데 흰 배경처럼 보일 수 있습니다. 브라우저의 이미지 보기 화면이 흰색일 수 있으므로, 파일을 편집기에 넣고 배경색을 바꿔 비교하세요.
2026년 10월 13일에 자체 도형과 sharp 이미지 처리 도구로 만들었습니다. 측정 기록에 투명 픽셀 수와 파일 해시를 남겼습니다. 배경 합치기 동작은 sharp의 flatten 설명을 참고했습니다.
글자가 번지는 문제도 있다면 글자 이미지의 JPG와 PNG 비교를 함께 보세요. 투명도와 글자 선명도는 각각 확인해야 합니다.
함께 읽어보세요
가짜 좌표를 넣은 JPEG에서 GPS 정보를 읽고 복사본에서 지웠습니다. 원본을 보존하면서 사진에 남은 위치 정보를 확인하는 순서를 안내합니다.
위쪽을 가리키는 그림으로 회전 정보가 있는 파일과 없는 파일을 비교했습니다. 사진의 부가 정보를 지우기 전에 방향부터 맞춰야 하는 이유를 설명합니다.
이미지 크기와 JPG 품질을 따로 바꿔 파일4개의 용량을 측정했습니다. 작은 글자를 지키면서 용량을 줄이는 순서를 설명합니다.
같은 안내 카드를 PNG와 JPG로 저장해 글자 테두리와 파일 용량을 비교했습니다. 원본 파일을 열어 차이를 직접 확인할 수 있습니다.