투명 PNG와 흰 테두리(헤일로): 왜 생기고 어떻게 없앨까
흰 배경을 지운 아이콘을 어두운 배경에 올렸더니 가장자리에 하얀 실선이 둘러져 있던 경험이 있다면, 그게 바로 헤일로(halo)입니다. 흰 배경에서는 전혀 보이지 않다가 다크 모드나 사진 위에서만 드러나기 때문에 뒤늦게 발견하기 쉽습니다. 이 글에서는 투명 이미지가 어떻게 저장되는지부터 시작해, 헤일로가 생기는 이유와 없애는 방법을 설명합니다.
투명은 '색'이 아니라 별도의 '채널'이다
화면의 픽셀은 보통 빨강(R)·초록(G)·파랑(B) 세 값으로 색을 표현합니다. 투명을 지원하는 이미지는 여기에 알파(A)라는 네 번째 값을 하나 더 가집니다. 알파는 "이 픽셀이 얼마나 불투명한가"를 뜻하며, 일반적인 8비트 이미지에서는 0(완전 투명)부터 255(완전 불투명)까지 256단계로 저장됩니다. 알파가 128인 픽셀은 아래에 깔린 배경과 대략 반반 섞여 보입니다.
중요한 점은 투명한 픽셀에도 RGB 값은 남아 있다는 것입니다. 알파가 0이면 화면에 보이지 않을 뿐, 그 픽셀에 어떤 색이 들어 있는지는 이미지마다 다릅니다. 반투명 픽셀이라면 그 색이 그대로 비쳐 보이기 때문에, 테두리 픽셀의 RGB가 무엇이냐가 헤일로 문제의 핵심이 됩니다.
형식마다 투명 지원이 다르다
- PNG — 픽셀마다 256단계 알파를 저장할 수 있어 아이콘·로고용으로 가장 널리 쓰입니다. 다만 색 수를 줄인 PNG-8은 도구에 따라 투명이 켜짐/꺼짐 두 단계로만 저장되기도 합니다.
- WebP — 알파 채널을 지원하면서 PNG보다 파일이 작은 경우가 많아 웹에서 많이 쓰입니다.
- GIF — 투명은 "완전히 투명하거나, 완전히 불투명하거나" 둘 중 하나뿐입니다. 반투명 테두리를 표현할 수 없어 가장자리가 계단처럼 거칠어집니다.
- JPG — 투명을 아예 지원하지 않습니다. 투명 이미지를 JPG로 저장하면 투명한 부분이 흰색이나 검은색으로 채워집니다.
- SVG — 픽셀이 아닌 도형으로 그리는 벡터 형식이라 투명도와 확대 문제에서 자유롭습니다. 원본이 SVG로 있다면 가장 좋은 선택입니다.
참고로 무료 이미지 사이트에서 받은 "투명 PNG"가 사실은 회색 체크무늬가 그려진 일반 이미지인 경우도 있습니다. 체크무늬는 투명을 표시하기 위한 화면 표현일 뿐이라, 이미지에 직접 그려져 있다면 가짜입니다. 색이 있는 배경 위에 올려 보면 바로 구분할 수 있습니다.
안티에일리어싱: 테두리가 원래 '섞인 색'인 이유
픽셀은 사각형이라 둥근 선이나 대각선을 그대로 표현하면 가장자리가 계단처럼 보입니다. 이를 부드럽게 보이게 하려고 그림을 그릴 때 가장자리 픽셀을 그림 색과 배경색의 중간 색으로 칠하는데, 이것을 안티에일리어싱이라고 합니다. 흰 배경 위의 검은 원이라면 테두리 픽셀은 회색이고, 흰 배경 위의 빨간 사과라면 테두리는 분홍빛입니다.
즉 흰 배경에서 그려진 이미지의 테두리에는 이미 흰색이 섞여 있습니다. 이 상태에서 배경만 지우면 어떻게 될까요? 가장 단순한 배경 제거는 "흰색과 충분히 비슷한 픽셀"을 투명하게 만듭니다. 그런데 회색·분홍빛 테두리 픽셀은 흰색과 '충분히 비슷하지' 않으므로 불투명한 채로 남습니다. 흰 배경 위에서는 자연스러운 경계였던 이 밝은 픽셀들이, 어두운 배경 위에 올리는 순간 하얀 띠로 보이는 것이 헤일로입니다.
반대로 기준을 느슨하게 잡아 테두리까지 모두 지워 버리면 이번엔 안티에일리어싱이 사라져 가장자리가 계단처럼 깎이고 실루엣이 한 겹 얇아집니다. 단순히 "지우냐 남기냐"로는 둘 중 하나를 포기해야 하는 셈입니다.
해결의 원리: 섞인 비율을 거꾸로 계산하기
테두리 픽셀의 색은 다음 식으로 설명할 수 있습니다.
관측된 색 = 그림 색 × α + 배경색 × (1 − α)
배경색은 이미 알고 있고(흰색), 그림 색은 바로 안쪽에 있는 진짜 그림 픽셀에서 가져올 수 있습니다. 그러면 이 식에서 모르는 값은 α 하나뿐이므로 거꾸로 풀 수 있습니다. 회색 테두리 픽셀이라면 "검은색이 50% 섞인 픽셀"이라는 답이 나오고, 이 픽셀을 검은색 + 알파 50%로 바꿔 저장하면 어떤 배경 위에 올려도 자연스럽게 섞입니다. 흰색 성분이 색에서 빠져나와 투명도로 옮겨 간 것입니다.
이 작업을 흔히 매트 제거(defringe, matte removal)라고 부릅니다. 포토샵에는 "레이어 › 매팅 › 흰색 매트 제거(Remove White Matte)" 메뉴가 있고, GIMP의 "색상을 알파로(Color to Alpha)" 기능도 비슷한 계산을 합니다. Icon Splitter는 배경을 지운 뒤 경계 띠의 픽셀마다 바로 옆 실제 아이콘 색을 기준으로 이 계산을 자동으로 수행합니다. 그래서 검은 선화든 크림색 일러스트든 같은 규칙으로 헤일로가 정리되고, 너무 세게 지워진 테두리도 되살아납니다.
내 이미지에 헤일로가 있는지 확인하는 법
- 대비되는 배경에 올리기 — 흰 배경에서 만든 이미지는 검은색·진한 남색 배경에, 검은 배경에서 만든 이미지는 흰 배경에 올려 봅니다.
- 200~400%로 확대해 보기 — 원래 크기에서는 1px짜리 띠가 잘 안 보입니다. 확대하면 테두리 색이 확실히 드러납니다.
- 밝은 사진 위에도 올려 보기 — 반대로 어두운 매트가 남은 경우(검은 배경에서 잘라 낸 이미지)는 밝은 배경에서 검은 테두리로 보입니다.
정리
헤일로는 배경 제거를 잘못해서라기보다, 테두리에 원래 섞여 있던 배경색을 처리하지 않아서 생깁니다. 섞인 비율을 다시 계산해 색과 투명도를 분리하면 테두리를 깎지 않고도 깔끔하게 만들 수 있습니다. 아이콘을 다크 모드나 사진 위에서 쓸 계획이라면 저장 전에 꼭 어두운 배경에서 한 번 확인해 보세요.