알파 채널이란? 이미지 투명도의 원리

일반 이미지의 모든 픽셀은 빨강, 초록, 파랑이 얼마나 들어 있는지를 나타내는 세 개의 숫자로 표현됩니다. 이것으로 픽셀의 색은 알 수 있지만, 그 픽셀이 비쳐 보이는지는 알 수 없습니다. 알파 채널은 바로 그것을 나타내는 픽셀당 네 번째 숫자입니다. 완전히 투명한 것부터 완전히 불투명한 것까지 불투명도를 저장합니다.

사람들이 '투명 배경 PNG'라고 말할 때는 알파 채널이 있고 배경 픽셀의 알파 값이 0인 이미지를 뜻합니다. 이 가이드에서는 이 숫자가 어떻게 작동하는지, 소프트웨어가 이를 저장하는 두 가지 방식, 가장자리가 잘못되는 이유, 그리고 파일에 실제로 무엇이 들어 있는지 확인하는 방법을 설명합니다.

RGBA: 픽셀당 네 개의 채널

MDN은 알파 채널을 간단하게 정의합니다. 색은 채널(빨강, 초록, 파랑)로 이루어지며, '배경이 어느 정도 비쳐 보이는' 색을 표현하기 위해 네 번째 채널을 더한다는 것입니다. 네 채널을 모두 가진 이미지를 RGBA라고 합니다.

값은 여러 방식으로 쓸 수 있으며, 모두 같은 뜻입니다.

PNG 사양은 이를 정확하게 표현합니다. 알파 값 0은 완전한 투명, 해당 비트 깊이의 최댓값은 완전한 불투명이며, 그 사이 값은 '배경 이미지와 합성할 수 있는' 반투명 픽셀이라는 것입니다.

중요한 것은 그 사이 값들입니다. 좋은 누끼는 단순히 '피사체는 불투명, 배경은 투명'이 아닙니다. 가장자리를 따라 있는 픽셀, 특히 머리카락, 털, 천, 유리, 움직임 흐림 부분은 반투명이며, 그 덕분에 피사체가 가위로 오린 것처럼 보이지 않고 새 배경 위에서 자연스럽게 보입니다.

투명한 픽셀은 어떻게 그려질까

앱이 이미지를 다른 것 위에 놓을 때, 각 픽셀을 뒤에 있는 것과 섞습니다. W3C Compositing and Blending 사양이 기본 공식을 제시합니다.

result = Cs x as + Cb x ab x (1 - as)

Cs, as = color and alpha of your image (the source)
Cb, ab = color and alpha of what is behind it (the backdrop)

뒤가 불투명한 흔한 경우라면 이는 가중 평균이 됩니다. 알파가 0.3인 픽셀은 자기 색을 30% 내고 배경을 70% 통과시킵니다.

스트레이트 알파와 프리멀티플라이드 알파

반투명 픽셀의 색을 저장하는 방법은 두 가지가 있고, 이를 혼동하면 어둡거나 밝은 테두리가 생기는 전형적인 원인이 됩니다.

스트레이트 알파(비연관 알파, 비곱셈 알파라고도 함)는 픽셀이 완전히 불투명한 것처럼 색을 저장하고, 불투명도는 따로 보관합니다. 반투명한 순수 빨강 픽셀은 빨강 255, 초록 0, 파랑 0, 알파 128로 저장됩니다.

프리멀티플라이드 알파(연관 알파라고도 함)는 색에 알파를 미리 곱해서 저장합니다. 같은 픽셀이 빨강 128, 초록 0, 파랑 0, 알파 128로 저장됩니다. PNG 사양의 표현을 빌리면, 이런 이미지는 '이미 검은 배경과 합성된' 상태입니다.

파일이 어느 쪽을 쓰는지는 형식과 소프트웨어에 따라 다릅니다.

• PNG는 항상 스트레이트 알파를 씁니다. 사양에 명시되어 있으며, 덕분에 편집 프로그램이 이미지의 투명도를 쉽게 바꿀 수 있다고 적혀 있습니다.
• 그래픽 파이프라인, 게임 엔진, 영상 합성 도구는 내부적으로 프리멀티플라이드 알파를 쓰는 경우가 많습니다. 합성 계산이 간단하고 필터링이 더 잘 되기 때문입니다.

문제는 한 프로그램이 곱셈된 값을 쓰고 다른 프로그램이 이를 스트레이트로 읽을 때 생깁니다. 가장자리의 색이 너무 어두워져서 가는 검은 테두리가 생깁니다. 반대 경우에는 가장자리가 너무 밝아집니다. 한 도구로 만든 모든 누끼에 같은 어두운 테두리가 보인다면 가장 먼저 곱셈 방식 불일치를 의심하세요.

누끼에 테두리가 생기는 이유

헤일로란 피사체에 속하지 않는, 피사체 주위에 보이는 테두리입니다. 흔한 원인은 네 가지이며, 각각 해결법이 있습니다.

1. 원래 배경이 가장자리 픽셀에 남아 있음

카메라는 깔끔한 경계를 찍지 못합니다. 초록 울타리를 배경으로 한 머리카락 한 가닥은 일부는 머리카락, 일부는 울타리인 픽셀을 만듭니다. 누끼가 그 픽셀의 원래 색을 유지한 채 반투명하게만 만들면 초록색이 섞인 채로 남습니다. 흰색 위에 놓으면 피사체가 희미하게 초록빛을 띱니다.

해결법은 색상 정화입니다. 가장자리 픽셀마다 실제 전경색을 추정해서 그 색으로 바꿔 쓰는 것입니다. Photoshop에서는 선택 및 마스크 작업 영역의 색상 정화가 이에 해당하며, 오픈 소스 rembg 라이브러리에도 같은 일을 하는 decontaminate 옵션이 있습니다. 바뀌는 것은 가장자리 색뿐이고 마스크 모양은 바뀌지 않습니다.

2. 마스크가 너무 딱딱함

마스크에 완전 불투명과 완전 투명 픽셀만 있으면 가장자리가 들쭉날쭉해 보이고, 원본 사진의 안티앨리어싱 때문에 피사체 주위에 1픽셀짜리 배경색 선이 남습니다. 머리카락 같은 부드러운 피사체에는 실제 중간값을 가진 부드러운 마스크가 필요합니다.

3. 투명 픽셀 속에 숨은 색

스트레이트 알파 파일에서는 알파가 0인 픽셀에도 빨강, 초록, 파랑 값이 있습니다. 눈에는 보이지 않지만, 이미지 크기를 바꾸거나 흐리게 하면 이웃 픽셀이 섞이고, 숨은 색이 흰색이나 검은색이면 보이는 가장자리로 번집니다. 좋은 이미지 라이브러리는 크기를 바꾸기 전에 곱셈하고 나중에 되돌려서 이를 막습니다.

4. 이미지가 색 위에 합쳐짐

GIF와 팔레트 PNG는 켜기 또는 끄기 투명도만 지원하는 경우가 많아서, 도구가 저장 전에 매트 색, 보통 흰색에 대해 가장자리를 안티앨리어싱합니다. 그런 이미지는 흰색 위에서는 괜찮아 보이지만 더 어두운 배경에서는 흰 테두리가 보입니다. 누끼를 어두운 배경에 올릴 거라면 완전한 알파로 내보내세요.

마스크, 매트, 알파: 용어 정리

이 단어들은 뜻이 겹치고 느슨하게 쓰입니다. 보통 이런 뜻으로 씁니다.

• 알파 채널: 이미지 파일 안에 저장된 불투명도 값으로, 픽셀당 하나입니다.
• 마스크: 다른 이미지의 어느 부분이 보일지 정하는 회색조 이미지입니다. Photoshop 레이어 마스크에서는 흰색이 보이게, 검은색이 숨기며, 회색은 일부만 보입니다. 마스크는 원본 픽셀을 건드리지 않고 편집할 수 있어서, 전문가들은 지우개로 지우지 않고 마스크로 배경을 제거합니다.
• 매트: 영화와 합성 분야에서 같은 개념을 가리키는 말로, 무엇을 남길지 정하는 회색조 이미지입니다. '매팅'은 머리카락처럼 어려운 가장자리에 대해 부드럽고 정확한 매트를 계산하는 문제를 말합니다.
• 트라이맵: 세 영역(확실한 전경, 확실한 배경, 불확실)으로 대략 나눈 지도로, 일부 매팅 알고리즘이 출발점으로 씁니다.
• 이진 마스크 또는 하드 마스크: 회색 없이 흑백만 있는 마스크입니다. 상자나 로고에는 괜찮지만 머리카락에는 맞지 않습니다.
• 누끼: 완성된 결과물로, 피사체의 색과 알파 채널을 합친 것입니다.

마스크와 알파 채널은 같은 정보를 담고 있습니다. 많은 도구에서 둘 중 무엇이든 내보낼 수 있습니다. 알파가 들어 있는 투명 PNG, 또는 편집 프로그램이나 영상 도구에서 직접 적용할 수 있는 별도의 흑백 마스크 이미지입니다.

알파를 저장할 수 있는 형식

이 형식들의 전체 비교는 PNG vs JPEG vs WebP를 참고하세요.

이미지에 투명도가 있는지 확인하는 법

파일 이름이 .png로 끝난다고 투명하다는 증거는 아닙니다. 완전히 불투명한 PNG도 많고, 인터넷에서 찾은 '투명' 이미지 중에는 회색과 흰색 체크무늬가 픽셀에 그려진 JPEG도 있습니다. 확실하게 확인하는 방법을 소개합니다.

눈으로 확인

이미지를 어두운 배경과 밝은 배경 위에, 예를 들어 슬라이드나 디자인 도구에서 놓아 보세요. 진짜 누끼라면 두 경우 모두 피사체 주위에 배경색이 보입니다. 여전히 체크무늬가 보인다면 그것은 투명도가 아니라 그림의 일부입니다.

ImageMagick으로

# Does the file have an alpha channel at all?
identify -format "%A\n" photo.png

# Is it fully opaque anyway? (true means no visible transparency)
identify -format "%[opaque]\n" photo.png

%A는 투명도 채널을 알려 주고(출력되는 단어는 ImageMagick 6과 7에서 다름), %[opaque]는 모든 픽셀이 완전히 불투명한지 계산합니다. 알파 채널이 있고 결과가 false여야 원하는 상태입니다.

Python과 Pillow로

from PIL import Image

im = Image.open("photo.png")
print(im.mode)                    # RGBA or LA means an alpha channel
print(im.has_transparency_data)   # True if the file carries any transparency info

if "A" in im.getbands():
    lo, hi = im.getchannel("A").getextrema()
    print("alpha range:", lo, hi)  # lo == 255 means nothing is transparent

이 최솟값과 최댓값 확인으로 모든 픽셀이 불투명한 RGBA 파일이라는 흔한 경우를 잡아낼 수 있습니다.

플랫폼이 알파를 무시할 때

투명도를 없애거나 무시하는 곳도 있습니다. Etsy는 투명 PNG를 지원하지 않으며 투명한 부분이 검게 보일 수 있다고 하고, Amazon과 Walmart 같은 마켓플레이스는 애초에 메인 이미지를 순백색 배경으로 원합니다. 이런 경우에는 결과를 직접 정할 수 있도록 누끼를 배경색 위에 직접 합치세요. 자체 웹사이트, 슬라이드, 디자인 도구에서는 알파를 유지하세요.

깔끔한 알파 채널을 빠르게 얻기

딱딱한 마스크가 아니라 부드러운 가장자리의 누끼가 필요하다면, removebackground.dev는 완전한 알파 채널을 가진 투명 PNG나 WebP 파일을 만들며, API로는 회색조 마스크만 따로 받을 수도 있습니다.