알파 채널은 투명도를 제어하는 픽셀에 저장된 네 번째 값, 색상을 설정하는 빨간색, 녹색 및 파란색 값 옆에 있습니다. Alpha는 완전히 보이지 않는 것부터 완전히 단단한 것까지의 범위를 넘나들며, 그 사이의 모든 부분 투명도가 있습니다. 이것이 PNG 로고가 어떤 배경에서도 깔끔하게 떠다니는 반면 JPG는 그럴 수 없는 이유 중 하나입니다. JPG에는 알파 채널이 전혀 없습니다.. 투명도는 눈의 속임수나 전체 이미지의 속성이 아닙니다. 이는 각 개별 픽셀에 첨부된 데이터입니다. 이 가이드에서는 알파 채널이 무엇인지, 수백 개의 투명도 레벨을 저장하는 방법, 투명 레이어를 혼합하는 합성 수학, 이를 지원하는 형식, 이미지를 한 형식에서 다른 형식으로 변환할 때 어떤 일이 발생하는지 설명합니다.

알파 채널이 실제로 무엇인지

모든 디지털 이미지는 픽셀 격자이며, 모든 픽셀은 이를 설명하는 숫자를 저장합니다. 표준 컬러 이미지에서 각 픽셀에는 빨간색, 녹색, 파란색에 대한 세 가지 숫자가 있습니다. 알파 채널은 다른 질문에 답하는 네 번째 숫자를 추가합니다. 즉, 이 픽셀이 무슨 색인지가 아니라 얼마나 봐야 해?. 픽셀은 밝은 빨간색이고 완전히 단색일 수도 있고, 밝은 빨간색이고 반쯤 투명하거나, 밝은 빨간색이고 완전히 보이지 않을 수도 있습니다. 색상은 세 가지 경우 모두 동일하게 유지됩니다. 알파만 변경됩니다. 이러한 색상과 불투명도의 분리는 유연한 투명도를 가능하게 합니다.

이 용어는 이미지를 투명도와 결합하는 방법을 공식화한 Thomas Porter와 Tom Duff가 1984년에 발표한 알파 합성 작업에서 유래되었습니다. 그들의 모델은 여전히 모든 최신 그래픽 프로그램, 웹 브라우저 및 게임 엔진의 기초입니다. 따라서 알파 채널은 최근 이미지 형식에 추가된 편의 기능이 아닙니다. 화면에 계층적으로 표시되는 거의 모든 것에 조용히 전원을 공급하는 것은 수십 년 된 아이디어입니다.

RGBA: 모든 투명 픽셀의 네 번째 값

픽셀이 투명도를 전달하는 경우 3개가 아닌 4개의 값으로 설명됩니다. RGBA: 빨간색, 녹색, 파란색 및 알파. 디자인과 웹 작업의 모든 곳에서 이 표기법을 볼 수 있습니다. CSS에서 rgba(255, 0, 0, 0.5)와 같은 색상은 불투명도가 50%인 순수한 빨간색을 의미합니다. 이미지 편집기에서는 동일한 아이디어가 레이어의 불투명도 슬라이더로 나타납니다. A는 항상 색상에 혼합되지 않고 위에 겹쳐지는 불투명도 값입니다.

알파를 색상 문제와 분리하여 유지합니다. 투명도가 색상 값에 포함된 경우 반투명 빨간색은 밝은 분홍색으로 저장되어야 하며 원래 빨간색을 복구하거나 어두운 배경 위에 깔끔하게 배치할 수 없습니다. 불투명도를 자체 채널로 저장함으로써 형식은 실제 색상을 그대로 유지하고 소프트웨어가 그 뒤에 있는 색상과 혼합하는 방법을 결정할 수 있습니다. 이러한 유연성이 바로 디자이너가 자산을 배경에 미리 혼합하는 대신 알파 채널을 사용하여 내보내는 이유입니다.

알파가 투명도 수준을 저장하는 방법

알파 채널은 단지 켜거나 끄는 것만 저장하는 것이 아닙니다. 표준 8비트 이미지에서 알파는 0부터 255까지 256개의 개별 레벨. 값이 0이면 픽셀이 완전히 투명하고 보이지 않음을 의미하고, 255는 완전히 단단하고 불투명하며, 그 사이의 모든 숫자는 부분적으로 투명함을 의미합니다. 값이 128이면 픽셀이 대략 절반 정도 투명하게 되어 배경이 50% 강도로 보입니다.

이 256개 레벨은 투명도를 거칠지 않고 부드럽게 보이게 만듭니다. 그림자는 픽셀이 가장자리로 갈수록 감소하는 알파 값을 전달하기 때문에 점차적으로 희미해집니다. 유리 또는 연기 효과는 서로 다른 픽셀이 서로 다른 양으로 투명해지기 때문에 작동합니다. 더욱 발전된 고급형 형식: 16비트 알파 채널 제공 65,536레벨 전문적인 합성의 경우 8비트가 웹 이미지의 표준이고 눈에 필요한 모든 것을 포괄합니다.

알파 합성: 레이어를 혼합하는 수학

투명한 픽셀이 배경 위에 놓이면 소프트웨어는 사용자가 보는 최종 색상을 계산해야 합니다. 간단한 혼합 공식을 사용하여 이를 수행합니다. 눈에 보이는 결과는 전경색 곱하기 알파, 배경색 곱하기 1 빼기 알파. 간단히 말해서, 70% 불투명한 픽셀은 자체 색상의 70%를 제공하고 배경의 30%를 통과시킵니다.

모든 픽셀에 대해 계산을 실행하면 사진에 로고가 섞이고, 비디오에 캡션이 희미해지고, 웹페이지에 메뉴가 그려진 깔끔한 합성물을 얻을 수 있습니다. 이런 일이 끊임없이 일어나고 있습니다. 브라우저가 반투명 요소를 그리거나 게임이 연기를 렌더링할 때마다 초당 수백만 번씩 알파 합성을 수행하는 것입니다. 알파 채널은 각 픽셀에 대해 공식에 필요한 불투명도 값을 제공합니다.

앤티앨리어싱: 알파가 가장자리를 부드럽게 만드는 이유

알파 채널의 가장 중요한 작업 중 하나는 제작입니다. 깨끗하고 앤티앨리어싱된 가장자리. 원형 로고의 곡선 가장자리를 생각해 보세요. 투명도가 없으면 곡선은 단단한 정사각형 픽셀로 만들어져야 하므로 들쭉날쭉하고 계단 모양으로 보입니다. 알파 채널을 사용하면 가장자리를 따라 있는 픽셀이 부분 투명도로 설정되어 모양이 뒤에 있는 모든 것과 점차적으로 혼합됩니다.

잘 만들어진 PNG 로고가 흰색 페이지나 어두운 페이지, 사진에서 또렷하게 보이는 이유는 바로 이 때문입니다. 가장자리 픽셀은 흰색이나 단일 색상으로 칠해져 있지 않습니다. 부분적으로 투명하므로 모든 배경에 대해 올바르게 혼합됩니다. 해당 로고를 흰색으로 병합하면 동일한 가장자리 픽셀이 부분적으로 흰색이 됩니다. 평평한 버전을 어두운 배경에 놓으면 보기 흉한 창백한 후광이 보입니다. 부드러운 블렌드가 잘못된 색상으로 고정되었기 때문입니다. 알파 채널은 가장자리를 적응 가능하게 유지하는 역할을 합니다.

직선 대 사전 곱셈 알파

색상과 알파를 함께 저장하는 방법에는 두 가지가 있으며, 차이점을 알면 실망스러운 버그가 발생하지 않습니다. 에서 스트레이트 알파, 색상 값은 그대로 유지되고 알파는 완전히 분리되어 유지됩니다. 이것이 PNG가 투명도를 저장하는 방법입니다. 에서 미리 곱셈된 알파, 색상 값에 미리 알파가 곱해지기 때문에 50% 투명한 빨간색은 이미 더 어두운 빨간색으로 저장됩니다.

미리 곱셈된 알파는 특정 블렌딩 작업을 더 빠르게 만들고 가장자리의 어두운 무늬를 방지하기 때문에 비디오, 영화 합성 및 실시간 렌더링에서 흔히 사용됩니다. 스트레이트 알파는 원래 색상을 복구 가능하게 유지하므로 스틸 이미지와 웹 자산에 더 일반적입니다. 소프트웨어가 하나를 예상하고 다른 하나를 수신할 때 문제가 발생하여 너무 어둡거나 이상하게 밝게 보이는 가장자리가 생성됩니다. PNG 및 웹 그래픽을 사용한 일상적인 이미지 작업의 경우 직선 알파를 처리하고 소프트웨어가 이를 처리합니다.

알파 채널을 지원하는 이미지 형식

모든 형식이 투명성을 저장할 수 있는 것은 아니며 변환 중에 사람들을 당황하게 만드는 실용적인 세부 사항은 다음과 같습니다.

PNG: 투명한 웹 그래픽의 표준인 256레벨의 풀 8비트 알파 채널입니다.
웹P: 무손실 및 손실 모드 모두에서 전체 알파 채널을 사용하며 PNG보다 작은 파일을 생성합니다.
AVIF: 알파 지원과 강력한 압축 기능을 갖춘 최신 형식으로, 브라우저 지원이 점점 늘어나고 있습니다.
GIF: 부분적인 수준 없이 단순한 켜기/끄기 투명도만 있으므로 가장자리가 거칠어 보입니다.
TIFF 및 SVG: 둘 다 인쇄 및 벡터 작업에 각각 사용되는 투명도를 지원합니다.
JPG 및 BMP: 알파 채널이 전혀 없으므로 투명도를 저장할 수 없습니다.

투명성이 유지되어야 하는 경우에는 PNG와 WebP가 신뢰할 수 있는 선택이고, GIF는 가장자리가 딱딱한 컷아웃에만 작동하며, JPG는 투명하게 보이는 부분에서는 제외됩니다.

웹과 CSS의 알파 채널

웹에서 알파 채널은 이미지 파일 내부와 CSS 색상 값 내부의 두 위치에 나타납니다. 투명한 PNG 또는 WebP는 파일 자체에 알파를 전달하므로 모든 페이지 배경 위에 겹쳐집니다. 그런 다음 CSS는 rgba() 및 hsla() 색상과 불투명도 속성을 사용하여 두 번째 제어 레이어를 추가하여 이미지를 전혀 편집하지 않고도 요소를 페이드하고, 색조 오버레이를 적용하고, 유리 효과를 만들 수 있습니다.

이러한 조합이 현대 인터페이스가 계층화되고 부드러워 보이는 이유입니다. 히어로 섹션은 CSS 알파를 사용하여 흰색 텍스트를 읽을 수 있도록 사진 위에 반투명 어두운 오버레이를 쌓을 수 있으며, 상단의 로고는 이미지 알파를 사용하여 어느 쪽에도 깔끔하게 배치될 수 있습니다. 둘 다 동일한 기본 아이디어에 의존합니다. 각 픽셀은 고유한 불투명도를 가지며 브라우저는 모든 것을 실시간으로 합성합니다.

JPG로 변환하면 알파는 어떻게 되나요?

JPG에는 알파 채널이 없기 때문에 투명한 이미지를 JPG로 변환하면 투명도를 견고한 이미지로 대체해야 한다는 결정이 내려집니다. 변환기 알파를 병합하여 모든 투명 또는 반투명 픽셀을 배경색으로 채웁니다., 대부분 흰색입니다. 투명한 영역은 단단해지고 부분 알파에 의존하는 부드러운 가장자리는 해당 채우기 색상으로 고정됩니다.

이것이 바로 로고가 변환 후 흰색 또는 검은색 상자에 나타나거나 가장자리 주위에 희미한 후광이 표시되는 이유입니다. JPG에는 저장할 곳이 없기 때문에 새로운 배경과 혼합하는 데 필요한 정보가 사라졌습니다. 생존을 위해 투명성이 필요한 경우 대답은 PNG를 유지하거나 대신 WebP로 변환하는 것입니다. 진정으로 평평한 이미지를 원한다면 올바른 채우기 색상을 선택하는 것이 중요합니다. 우리의 변환기 채우기에 대해 흰색, 검정색 또는 사용자 정의 색상을 선택하거나 WebP를 내보내 알파 채널을 완전히 유지할 수 있습니다. 투명한 배경 가이드 통과합니다.

일반적인 투명성 문제와 이를 방지하는 방법

대부분의 투명도 문제는 알파 채널이 잘못된 색상에 대해 편평화되는 데서 발생합니다. 이 단계를 매트(matting)라고 합니다. 일반적인 범인은 다음과 같습니다.

흰색 또는 검정색 상자: JPG로 변환된 투명한 PNG는 배경을 단색으로 채웁니다. 채우기를 대상에 일치시키거나 투명도를 유지하십시오.
가장자리 후광 또는 무늬: 흰색 위에 매트를 깔고 어두운 배경에 배치한 로고는 희미한 윤곽선을 보여줍니다. 올바른 색상으로 매트 처리된 원본 투명 파일에서 다시 내보내거나 투명하게 유지하세요.
어두운 프린지: 종종 직선 대 사전 곱셈 알파 불일치가 발생합니다. 올바른 알파 유형으로 다시 내보내면 문제가 해결됩니다.
편집 후 투명도 손실: 레이어를 병합하거나 JPG로 저장하면 알파가 삭제됩니다. 레이어 또는 PNG 마스터를 유지하세요.

거의 모든 것을 방지하는 규칙: 병합하기 전에 배경을 결정하고 알파 채널이 여전히 있는 원본 파일을 유지하여 깔끔하게 다시 내보낼 수 있습니다.

자주 묻는 질문

알파 채널이란 무엇입니까?

알파 채널은 투명도를 제어하는 픽셀당 값, 완전히 보이지 않는 것부터 완전히 단단한 것까지, 픽셀의 색상을 설정하는 빨간색, 녹색, 파란색과 함께 저장됩니다.

RGBA는 무엇을 의미합니까?

RGBA는 다음을 의미합니다. 빨간색, 녹색, 파란색 및 알파. 알파 값은 색상 위에 픽셀의 불투명도를 설정하므로 rgba(255, 0, 0, 0.5)는 50%에서 빨간색입니다.

PNG에는 투명도가 있지만 JPG에는 투명도가 없는 이유는 무엇입니까?

왜냐하면 PNG에는 알파 채널이 포함되어 있고 JPG에는 알파 채널이 포함되어 있지 않습니다.. 픽셀당 불투명도를 저장할 장소가 없으면 JPG는 투명도를 전혀 유지할 수 없습니다.

알파 채널은 몇 가지 수준의 투명도를 저장할 수 있나요?

표준 8비트 이미지의 256레벨, 보이지 않음의 경우 0부터 솔리드의 경우 255까지입니다. 전문적인 16비트 알파는 정밀한 합성을 위해 65,536개의 레벨을 제공합니다.

JPG로 변환하면 알파 채널은 어떻게 되나요?

평평해졌습니다. 투명한 영역은 단색으로 채워집니다., 일반적으로 흰색입니다. JPG에는 불투명도 데이터를 저장할 방법이 없기 때문입니다.

알파 채널을 지원하는 이미지 형식은 무엇입니까?

PNG, WebP, AVIF, TIFF 및 SVG 원활한 부분 투명도를 제공하는 PNG 및 WebP를 사용하여 알파를 지원합니다. GIF에는 켜짐/꺼짐 투명도만 있고 JPG에는 투명도가 없습니다.

직선 알파 또는 사전 곱셈 알파가 더 좋습니까?

어느 쪽도 보편적으로 더 나은 것은 아닙니다. 그들은 다른 직업에 적합합니다. 직선 알파는 색상을 복구 가능하게 유지합니다. 정지 이미지에 적합하며 미리 곱해진 알파는 비디오 및 실시간 렌더링의 혼합 속도를 높여줍니다.

파일 크기를 줄일 때 투명성을 어떻게 유지하나요?

다음으로 변환 JPG 대신 WebP. WebP는 크기를 25~35% 줄이면서 알파 채널을 유지하므로 배경이 투명하게 유지되고 파일이 더 가벼워집니다.