투명도(transparency)를 사용하면 이미지가 어떤 배경과도 자연스럽게 어우러집니다. 어두운 웹사이트 헤더, 밝은 제품 페이지, 또는 인쇄된 전단지 위에서도 마찬가지입니다. 투명도가 없으면 모든 이미지는 고체 색상 직사각형을 가지고 있어 뒤에 있는 것과 충돌합니다. 로고, 아이콘, 제품 컷아웃, 워터마크, 오버레이는 모두 자연스럽게 보이기 위해 투명도에 의존합니다.
모든 이미지 형식이 투명도를 지원하는 것은 아니며, 지원하는 형식들도 각기 다른 방식으로 처리합니다. 올바른 형식을 선택하고 투명도가 실제로 어떻게 작동하는지 이해하면 흰색 후광, 거친 가장자리, 예상치 못한 파일 크기 증가를 방지할 수 있습니다.
알파 채널이란?
표준 컬러 이미지는 픽셀당 세 가지 값을 저장합니다: 빨간색(R), 녹색(G), 파란색(B). 이 세 가지 채널이 합쳐져 모든 가시적인 색상을 만들어냅니다. 투명도가 있는 이미지는 네 번째 채널인 알파(A)를 추가하여 RGBA가 됩니다.
알파 값은 각 픽셀이 얼마나 불투명한지를 제어합니다. 0(완전히 투명 — 픽셀이 보이지 않음) 에서 255(완전히 불투명 — 픽셀이 뒤의 모든 것을 가림)까지 범위가 있습니다. 중간 값은 부분 투명도를 만들어냅니다. 알파 128인 픽셀은 대략 절반 투명하여, 뒤에 있는 것의 약 절반이 보입니다.
부분 투명도는 부드럽고 안티앨리어싱된 가장자리를 가능하게 합니다. 로고나 아이콘의 가장자리 픽셀이 완전히 색상화된 상태에서 완전히 보이지 않는 상태로 점진적으로 전환되어, 어떤 배경 색상과도 깨끗하게 혼합됩니다. 부분 알파 없이는 가장자리가 날카롭고 계단 모양으로 보입니다.
투명도를 지원하는 형식
PNG — 범용 선택
PNG는 완전한 8비트 알파 채널을 지원하여 각 픽셀에 256가지 불투명도 수준을 제공합니다. 무손실이므로 저장 후에도 가장자리가 완벽하게 선명하게 유지됩니다. 거의 모든 브라우저, 운영 체제, 디자인 도구, 콘텐츠 관리 시스템이 PNG 투명도를 올바르게 처리합니다. PNG는 완벽한 호환성과 품질이 필요할 때 가장 안전한 형식입니다.
단점은 파일 크기입니다. PNG는 무손실 압축을 사용하므로 파일이 동등한 JPEG나 WebP보다 상당히 클 수 있습니다 — 특히 사진이나 복잡한 장면의 경우에 그렇습니다.
WebP — 더 작고 동등하게 유능
WebP는 무손실과 손실 압축 모드 모두에서 완전한 알파 채널을 지원합니다. 투명한 WebP 파일은 일반적으로 동등한 투명 PNG보다 약 세 배 더 작습니다. 모든 현대 브라우저가 WebP를 지원하므로 오늘날 웹에서 투명 이미지를 위한 선호 형식이 되었습니다.
웹 사용에서 WebP 대신 PNG를 선호해야 할 유일한 이유는 레거시 지원입니다 — 구형 브라우저와 일부 데스크톱 애플리케이션은 여전히 WebP 파일을 열 수 없습니다.
AVIF — 최고의 압축
AVIF는 완전한 알파 투명도를 지원하며 WebP보다 더 나은 압축을 달성합니다. 브라우저 지원이 빠르게 성장하여 현재는 주류가 되었습니다. AVIF는 가장 작은 파일 크기가 필요할 때 이상적이나, PNG나 WebP보다 인코딩이 느립니다.
GIF — 제한된 1비트 투명도만
GIF는 투명도를 지원하지만 이진적인 방식으로만 — 각 픽셀이 완전히 투명하거나 완전히 불투명합니다. 중간은 없습니다. 이것을 1비트 투명도라고 합니다.
결과는 거칠고 계단 모양의 가장자리입니다. 가장자리 픽셀이 부분적으로 투명할 수 없기 때문에, 전경색 또는 완전한 투명도 중 하나를 선택해야 합니다. 결과는 부드러운 그라데이션이 아닌 계단식 가장자리입니다. GIF 투명도는 직선 가장자리를 가진 단순한 기하학적 모양에는 적절히 작동하지만, 곡선 문자가 있는 로고, 부드러운 그림자가 있는 아이콘, 또는 사진 콘텐츠에는 잘 보이지 않습니다.
SVG — 무한 스케일링, 완전한 투명도 제어
SVG는 픽셀 데이터를 저장하는 대신 수학적으로 모양을 설명하는 벡터 형식입니다. SVG의 투명도는 CSS 스타일 불투명도 및 fill 속성으로 표현되며, 이미지가 해상도에 독립적이기 때문에 품질 손실 없이 어떤 크기로도 확장됩니다. SVG는 16×16과 1600×1600 픽셀 모두에서 선명하게 보여야 하는 로고, 아이콘, 일러스트레이션에 이상적입니다.
HEIC — 알파 지원
아이폰에서 사용되는 HEIC는 완전한 알파 투명도를 지원하지만 애플 생태계 외부의 소프트웨어 지원은 제한적입니다.
JPEG / JPG — 투명도 없음
JPEG는 알파 채널을 전혀 지원하지 않습니다. 투명한 이미지를 JPEG로 저장하면 투명한 영역이 단색으로 채워집니다 — 보통 흰색이나 검정색. JPEG 파일에서 투명도를 보존할 방법은 없습니다.
GIF 투명도 제한 상세
GIF는 팔레트에서 하나의 색상만 "투명"으로 표시할 수 있기 때문에 하드 픽셀 가장자리가 생깁니다. 안티앨리어싱 — 전경색과 배경색 사이에서 가장자리 픽셀을 혼합하여 곡선 및 대각선 가장자리를 부드럽게 하는 기법 — 이 올바르게 작동할 수 없습니다. 안티앨리어싱이 흰색 배경을 위해 적용된 경우, 이 밝은 회색 가장자리 픽셀은 어두운 배경 위에 흰색 후광으로 나타납니다. 이를 "후광 효과" 또는 "매트 컬러 번짐"이라고 합니다.
웹 애니메이션의 경우, GIF는 적절한 알파 투명도를 지원하는 WebP 애니메이션 이미지와 비디오 형식으로 대부분 대체되었습니다.
투명도가 필요한 경우
이미지가 나타날 배경이 다양하거나 알 수 없을 때 투명한 이미지를 사용하세요. 일반적인 경우는 다음과 같습니다:
- 로고 — 회사 로고는 흰색 페이지, 어두운 네비게이션바, 색상 버튼, 또는 인쇄된 문서에 배치되어도 올바르게 보여야 합니다
- 전자상거래 사이트의 제품 이미지 — 투명한 배경이 있는 컷아웃 제품 사진은 어떤 페이지 색상이나 패턴에도 배치할 수 있습니다
- 앱 및 UI 아이콘 — 아이콘은 운영 체제나 테마가 적용하는 어떤 표면 색상에도 깨끗하게 앉아야 합니다
- 워터마크 및 오버레이 — 반투명 오버레이는 워터마크를 전달하면서도 콘텐츠가 보이도록 합니다
- 스티커 및 장식 요소 — 다른 콘텐츠 위에 레이어링하려는 모든 그래픽
투명도가 필요하지 않은 경우
투명도는 오버헤드를 추가합니다. PNG 및 WebP 투명 파일은 동일한 시각적 콘텐츠의 JPEG 등가물보다 큽니다. 이미지가 항상 알려진 고정 배경 위에 나타날 경우, 평탄화하세요 — 배경색을 이미지에 적용하고 JPEG로 저장하세요.
불투명 형식을 사용하세요:
- 사진 및 사진 콘텐츠
- 전체 페이지 히어로 이미지 또는 배경
- 일관된 배경이 있는 썸네일 및 미리보기 이미지
- 배경이 절대 변하지 않는 이미지
사진을 투명 PNG로 저장하는 것은 아무 이점 없이 파일 크기를 부풀리는 일반적인 실수입니다. 대신 JPEG 또는 손실 WebP를 사용하세요.
배경을 제거하고 투명도 만들기
제거하고 싶은 단색 배경이 있는 사진이나 이미지가 있다면, 복잡한 소프트웨어가 필요하지 않습니다. Picovert의 배경 제거 도구는 AI를 사용하여 자동으로 피사체를 감지하고 배경을 제거하여, 어디서든 사용할 준비가 된 투명 PNG를 생성합니다.
투명 이미지를 위한 PNG vs WebP
웹 사용의 경우, WebP가 거의 모든 경우에 더 나은 선택입니다. 투명 WebP는 동등한 투명 PNG보다 약 세 배 더 작아, 페이지 로딩이 더 빠르고 대역폭이 덜 필요합니다. 모든 현대 브라우저는 알파가 있는 WebP를 지원합니다.
PNG는 작업 또는 아카이브 형식으로 더 나은 선택으로 남아있습니다. 디자인 도구, 사진 편집기, 콘텐츠 관리 시스템은 PNG를 보편적으로 처리합니다. 마스터 파일을 PNG로 유지하고 전달을 위해 WebP로 변환하세요. PNG는 최대 호환성이 필요할 때 — 예를 들어 이메일 첨부 파일, 프레젠테이션, 또는 WebP 지원 이전의 소프트웨어에서 — 여전히 선호할 가치가 있습니다.
투명도를 유지하면서 형식 변환
형식 간 변환 시 대상 형식이 투명도를 지원하지 않으면 알파 채널을 실수로 잃기 쉽습니다. Picovert의 이미지 변환 도구는 PNG, WebP, AVIF 간 변환 시 알파 채널을 보존하여 투명한 배경이 투명하게 유지됩니다.
투명 이미지를 JPEG로 변환하는 것을 피하세요 — 변환기가 경고를 표시하지만, 진행하면 투명한 영역이 흰색으로 채워집니다. 게시하기 전에 항상 출력을 확인하세요.
투명 이미지가 준비되면 알파 채널에 영향을 주지 않고 파일 크기를 더욱 줄일 수 있습니다. Picovert의 이미지 압축 도구는 투명도를 유지하면서 PNG 및 WebP 파일을 압축하여 품질이나 가장자리 정밀도 손실 없이 더 작은 파일을 얻을 수 있습니다.