용어

이미지 투명도

이미지 투명도는 알파 채널을 사용해 이미지의 일부가 비치게 하는 기능입니다. 픽셀마다 완전히 보이거나 반투명하거나 완전히 투명한 상태를 정합니다.

투명도의 작동 방식

일반 RGB 이미지의 픽셀은 빨강, 초록, 파랑 세 값을 저장합니다. 세 채널을 조합해 눈에 보이는 색을 만듭니다. 투명도를 쓰면 네 번째 채널인 알파 채널이 추가돼 각 픽셀이 얼마나 불투명한지 조절합니다.

알파 채널은 보통 완전 투명인 0부터 완전 불투명인 255까지 픽셀마다 값을 저장합니다. 알파값 128인 픽셀은 50% 투명해 뒤의 색이 절반 정도 비칩니다. 픽셀 단위 조절 덕분에 불투명에서 투명으로 이어지는 부드러운 그라데이션, 어떤 배경과도 자연스럽게 섞이는 그림자, 계단 현상을 피하는 안티앨리어싱 가장자리를 만들 수 있습니다.

투명 이미지가 다른 이미지나 색 배경 위에 놓이면 렌더링 엔진이 레이어를 합성합니다. 픽셀마다 알파값에 따라 앞의 색과 뒤의 색을 섞습니다. 브라우저, 디자인 도구, 이미지 뷰어가 이 작업을 실시간으로 처리합니다.

픽셀마다 값을 하나 더 저장하므로 알파 채널은 파일 크기를 늘립니다. 1000x1000 이미지라면 압축 전 데이터가 약 100만 바이트 더 생깁니다. 압축으로 부담을 줄일 수 있지만 투명 이미지는 완전히 불투명한 같은 이미지보다 어느 정도 큽니다.

투명도를 지원하는 형식

모든 이미지 형식이 투명도를 지원하는 것은 아니며 구현 방식도 다릅니다.

  • PNG — 픽셀마다 256단계 불투명도를 갖는 완전한 알파 투명도를 지원합니다. 투명 스크린샷, 아이콘, UI 요소의 표준 선택이며 널리 지원됩니다.
  • WebP — 손실·무손실 모드 모두 완전한 알파 투명도를 지원합니다. 대체로 PNG보다 작은 투명 파일을 만들며 브라우저 지원 범위가 넓습니다.
  • GIF — 이진 투명도만 지원합니다. 픽셀은 완전히 투명하거나 완전히 불투명합니다. 반투명 상태가 없어 가장자리가 거칠게 보입니다. 단순한 애니메이션에는 맞지만 고품질 투명 작업에는 적합하지 않습니다.
  • AVIF — 완전한 알파 투명도와 뛰어난 압축을 지원합니다. 투명 파일을 매우 작게 만들지만 인코딩이 느리고 플랫폼 지원 범위가 더 좁습니다.
  • SVG — CSS와 속성으로 도형 단위의 불투명도를 지원합니다. 벡터 형식이므로 픽셀이 아니라 요소별로 투명도를 정합니다.
  • JPG — 투명도를 전혀 지원하지 않습니다. 저장하면 투명한 부분이 단색으로 바뀝니다.

작업 환경에 따라 형식을 고르세요. 호환성을 가장 넓게 확보하려면 PNG가 안전한 기본값이고, 웹 최적화에는 크기와 지원 범위의 균형이 좋은 WebP가 알맞습니다.

투명도와 스크린샷

일반 스크린샷은 모든 배경을 포함해 화면을 보이는 그대로 캡처합니다. 화면은 단색 콘텐츠를 표시하므로 결과 이미지에도 투명한 픽셀이 없고 완전히 불투명합니다.

스크린샷을 마케팅 자료, 문서, 프레젠테이션에 쓸 창이나 UI 요소로 만들 때 투명도가 필요해집니다. 배경을 제거하고 투명하게 바꾸면 캡처한 요소를 어떤 표면에도 자연스럽게 놓을 수 있습니다.

일부 캡처 도구는 개별 창의 데스크톱이나 앱 배경을 촬영할 때부터 없애 투명 배경으로 바로 캡처합니다. 다른 도구는 일반적인 불투명 캡처를 만들고 이후 배경 제거 과정에서 피사체만 분리해 투명도를 더합니다.

앱 스토어 목록, 랜딩 페이지, 피치덱용 제품 스크린샷에는 투명 캡처가 특히 유용합니다. 눈에 띄는 사각형 경계 없이 UI 요소를 브랜드 배경이나 기기 목업 위에 놓고 다른 요소와 함께 배치할 수 있습니다.

그래서 투명도는 캡처하는 순간보다 캡처 뒤에 특히 유용합니다. 창이나 UI 카드를 한 번 분리해 투명 이미지로 저장한 다음 마케팅 레이아웃, 문서, 기기 목업에서 반복해서 쓸 수 있습니다.

흔한 실수

  • 투명 이미지를 JPG로 저장합니다. JPG는 투명도를 지원하지 않습니다. 투명한 영역을 단색으로 채우고 투명도 데이터를 영구적으로 잃습니다. PNG, WebP, AVIF를 사용하세요.
  • 여러 배경에서 투명도를 확인하지 않습니다. 흰 배경에서는 괜찮아도 어두운 배경에서는 테두리나 후광이 보일 수 있습니다. 게시 전에 여러 배경색 위에서 확인하세요.
  • 체커보드 무늬를 실제 콘텐츠로 착각합니다. 이미지 편집기의 회색·흰색 격자는 투명한 영역을 뜻하며 이미지의 일부가 아닙니다. 잘못 합치거나 내보내면 이 무늬가 결과물에 들어갈 수 있습니다.
  • 알파 채널이 늘리는 파일 크기를 무시합니다. 투명도는 데이터를 추가합니다. 투명한 영역이 필요 없다면 알파 채널 없이 저장해 파일을 줄이세요. 일부 내보내기 도구는 필요 없는 알파 채널을 제거합니다.

자주 묻는 질문

알파 채널이란 무엇인가요?

알파 채널은 이미지 픽셀마다 투명도 정보를 저장하는 추가 데이터 채널입니다. 값이 255(또는 100%)면 완전히 불투명하고 0이면 완전히 투명합니다. 그 사이 값은 반투명 상태를 만듭니다.

JPG는 투명도를 지원하나요?

아닙니다. JPG는 어떤 투명도도 지원하지 않습니다. 투명한 영역이 있는 이미지를 JPG로 저장하면 그 부분을 보통 흰색이나 검은색 같은 단색으로 채웁니다.

투명 PNG를 붙여 넣을 때 흰 배경이 생기는 이유는 무엇인가요?

일부 앱은 투명도를 지원하지 않아 이미지를 표시하거나 붙여 넣을 때 투명 영역을 흰색으로 채웁니다. 파일 안에는 투명도 데이터가 그대로 있으며 앱이 렌더링하지 않을 뿐입니다.

스크린샷 배경을 투명하게 만들 수 있나요?

스크린샷은 배경까지 화면에 보이는 그대로 캡처합니다. 투명 배경이 필요하면 촬영 뒤 이미지 편집기나 자동 배경 제거 도구로 배경을 지워야 합니다.

이진 투명도와 알파 투명도는 무엇이 다른가요?

GIF가 쓰는 이진 투명도는 픽셀을 완전히 투명하거나 완전히 불투명하게만 표시합니다. PNG, WebP, AVIF가 쓰는 알파 투명도는 256단계의 반투명 상태를 표현해 어떤 배경에서도 가장자리를 부드럽게 안티앨리어싱합니다.

출처

관련 자료

이미지 투명도란? | 용어집 | Shotomatic