이미지 파일도 "종류"가 있다
우리가 흔히 보는 사진이나 그림 파일은 대부분 래스터(비트맵) 이미지입니다. 아주 작은 색깔 점(픽셀)들이 격자 모양으로 촘촘히 모여 하나의 그림을 이룬다고 생각하면 됩니다. PNG, JPG, GIF, WebP 같은 확장자는 이 픽셀 정보를 "어떻게 저장할지"를 정한 서로 다른 규격입니다.
JPG(JPEG) — 사진에 최적화된 손실 압축
JPG는 손실 압축(lossy compression) 방식을 씁니다. 사람 눈이 잘 알아채지 못하는 미세한 색 차이나 디테일을 과감히 버려서 파일 용량을 크게 줄이는 방식입니다. 그래서 색이 부드럽게 이어지는 사진에는 잘 맞고 용량도 작지만, 저장할 때마다 화질이 조금씩 깎이는 단점이 있습니다.
그리고 결정적으로, JPG 규격 자체에는 투명도를 저장하는 방법이 아예 없습니다. 아무리 좋은 프로그램을 써도 JPG로 저장하는 순간 반드시 어떤 배경색이든 채워져야 합니다. 이건 소프트웨어의 한계가 아니라 파일 형식 자체의 한계입니다.
PNG — 무손실 압축과 투명도
PNG는 무손실 압축 방식이라 압축을 해도 원본 정보가 그대로 보존됩니다. (다만 사진처럼 색이 복잡한 이미지는 JPG보다 용량이 커질 수 있어서, 사진엔 JPG가, 로고나 서명처럼 단순한 이미지엔 PNG가 더 잘 맞습니다.) 그리고 PNG는 빨강·초록·파랑(RGB) 세 가지 색 정보 외에 알파(Alpha) 채널이라는 네 번째 정보를 픽셀마다 함께 저장할 수 있습니다.
알파 채널, 조금 더 쉽게
투명 필름에 그림을 그린다고 상상해 보세요. 필름에서 그림을 그린 부분은 색이 보이고, 그리지 않은 빈 공간은 뒤에 있는 배경이 그대로 비칩니다. PNG의 알파 채널이 정확히 이 역할을 합니다. 픽셀마다 "완전히 불투명(255)"부터 "완전히 투명(0)"까지, 그 사이 값도 픽셀 단위로 세밀하게 저장할 수 있습니다. 그래서 서명 획의 가장자리처럼 살짝 반투명하게 흐려지는 부분까지 자연스럽게 표현됩니다.
SignPix가 배경 없는 서명을 만들 수 있는 것도 이 알파 채널 덕분입니다. 캔버스를 처음부터 완전히 투명한 상태로 두고, 실제로 붓이 지나간 픽셀에만 색과 불투명도 값을 채우는 방식으로 그리기 때문에, 별도로 "배경을 지우는" 작업 없이도 결과물이 항상 투명하게 저장됩니다.
그럼 SVG는요?
SVG는 픽셀이 아니라 좌표와 도형(선, 곡선, 채우기 값)으로 이미지를 표현하는 벡터 방식입니다. 그래서 아무리 확대해도 화질이 깨지지 않습니다. 다만 손글씨처럼 자연스러운 붓터치와 필압 변화를 표현하려면 각 점의 좌표와 굵기를 일일이 계산해야 해서, 실시간으로 손으로 그리는 서명 같은 용도에는 픽셀 기반의 래스터(PNG) 방식이 다루기 훨씬 간단합니다.
내가 받은 이미지가 진짜 투명인지 확인하는 법
이미지 뷰어나 편집 프로그램에서 파일을 열었을 때 배경이 흰색 한 가지 색으로 꽉 차 있다면 투명이 아닐 가능성이 높습니다. 반대로 회색과 흰색이 번갈아 있는 체크무늬로 보인다면 그 부분이 진짜로 투명하다는 뜻입니다. SignPix의 미리보기 화면에 있는 체크무늬 배경도 바로 이 "투명 표시" 관례를 그대로 따른 것입니다.