투명 배경 이미지는 어떻게 만들어지고 어떤 파일 형식을 사용할까

블로그 썸네일이나 웹페이지에 이미지를 넣다 보면 사진 뒤에 흰색 사각형이 함께 보이는 경우가 있습니다. 편집 화면에서는 크게 신경 쓰이지 않았는데 배경색이 있는 웹페이지에 올려보면 이미지 주변의 흰색 영역이 눈에 띄기도 합니다.

반대로 로고나 아이콘처럼 피사체만 보이고 주변에는 웹페이지의 배경이 그대로 나타나는 이미지도 있습니다. 이런 이미지에는 흔히 투명 배경이 사용됩니다.

투명 배경은 단순히 배경을 흰색으로 만드는 것과는 다릅니다. 이미지에서 특정 영역을 실제로 투명하게 처리하고, 그 정보를 저장할 수 있는 파일 형식을 사용해야 합니다. 이번 글에서는 투명 배경이 어떤 원리로 만들어지는지와 PNG, JPG 같은 파일 형식의 차이를 중심으로 살펴보겠습니다.

투명 배경은 흰색 배경과 무엇이 다를까

이미지를 편집하면서 가장 먼저 구분해야 하는 것이 흰색과 투명 영역입니다.

예를 들어 흰색 배경 위에 파란색 원 하나가 있는 이미지를 만들었다고 가정해 보겠습니다.

배경을 실제 흰색으로 채웠다면 이미지에는 파란색 원뿐 아니라 주변의 흰색 영역도 이미지 정보로 존재합니다.

이 이미지를 흰색 웹페이지에 올리면 자연스럽게 보일 수 있습니다.

하지만 회색이나 검은색 배경 위에 올리면 이미지 주변에 흰색 사각형이 그대로 나타납니다.

투명 배경은 다릅니다.

파란색 원 주변을 투명하게 만들었다면 웹페이지에 올렸을 때 투명 영역을 통해 그 뒤에 있는 웹페이지의 색상이나 이미지가 보이게 됩니다.

이미지 편집 프로그램에서는 투명한 영역을 회색과 흰색이 번갈아 나타나는 체크무늬로 표현하는 경우가 많습니다.

이 체크무늬가 실제 이미지에 포함된 배경이라고 생각하기 쉽지만, 일반적으로는 편집 프로그램이 “이 부분에는 배경색이 없다”는 사실을 사용자가 알아보기 쉽게 표시하는 방식입니다.

따라서 투명 이미지를 만들 때는 배경을 흰색으로 칠하는 것이 아니라 배경 영역의 투명도 정보를 유지해야 합니다.

이미지의 투명도는 알파 채널과 관련이 있다

디지털 이미지는 각 픽셀의 색상 정보를 가지고 있습니다.

일반적인 컬러 이미지에서는 빨강, 초록, 파랑을 조합하는 RGB 정보를 많이 사용합니다. 여기에 픽셀이 얼마나 투명하게 보일지를 나타내는 정보를 추가할 수 있는데 이를 설명할 때 알파 채널(Alpha Channel)이라는 용어를 접하게 됩니다.

쉽게 생각하면 각 픽셀에 색상뿐 아니라 투명한 정도에 관한 정보가 추가되는 것입니다.

완전히 불투명한 부분도 있고 완전히 투명한 부분도 있을 수 있습니다. 파일 형식과 이미지 구성에 따라 그 중간 단계의 반투명 표현도 가능합니다.

이 기능이 중요한 이유는 물체의 가장자리 때문입니다.

예를 들어 둥근 로고를 배경에서 분리한다고 가정해 보겠습니다.

가장자리를 단순히 투명과 불투명 두 가지로만 나누면 곡선 부분이 거칠게 보일 수 있습니다. 가장자리 픽셀에 적절한 투명도 단계가 있으면 배경과 보다 자연스럽게 어우러질 수 있습니다.

그래서 머리카락, 그림자, 부드러운 곡선처럼 경계가 복잡한 이미지는 단순한 배경 삭제보다 세밀한 작업이 필요할 수 있습니다.

PNG가 투명 배경 이미지에 많이 사용되는 이유

웹에서 투명 배경 이미지를 다룰 때 가장 흔하게 접하는 형식 가운데 하나가 PNG입니다.

PNG는 투명도 정보를 지원할 수 있기 때문에 로고, 아이콘, 간단한 그래픽처럼 배경 없이 사용해야 하는 이미지에 적합한 경우가 많습니다.

예를 들어 컴퓨터 모양의 아이콘을 만들어 블로그의 흰색 화면과 어두운 화면 모두에서 사용하고 싶다고 가정해 보겠습니다.

아이콘 주변을 투명하게 만든 PNG로 저장하면 별도의 사각형 배경 없이 아이콘 부분만 보이도록 구성할 수 있습니다.

PNG는 글자나 선처럼 경계가 분명한 그래픽에도 자주 사용됩니다.

하지만 PNG라고 해서 모든 이미지가 자동으로 투명한 것은 아닙니다.

PNG 파일도 배경을 흰색이나 다른 색으로 채워 저장할 수 있습니다. 중요한 것은 PNG가 투명도를 지원할 수 있다는 것이지, PNG 확장자를 사용하면 자동으로 배경이 사라진다는 뜻이 아닙니다.

실제로 투명하게 만들려는 영역을 편집 단계에서 제거하거나 투명하게 처리해야 합니다.

JPG로 저장하면 투명 배경은 어떻게 될까

사진에서 흔히 사용하는 JPG 또는 JPEG는 일반적인 방식으로 투명 배경을 저장하는 용도로는 적합하지 않습니다.

편집 프로그램에서 배경을 투명하게 만든 뒤 JPG로 저장하려고 하면 투명 영역이 흰색이나 프로그램에서 지정한 다른 색으로 채워질 수 있습니다.

따라서 배경이 투명한 로고를 만들었는데 최종 파일을 JPG로 저장했다면 웹사이트에 올렸을 때 다시 사각형 배경이 나타날 수 있습니다.

이 때문에 투명도가 필요한 이미지라면 저장 단계에서 파일 형식을 확인하는 것이 중요합니다.

여기서 JPG가 PNG보다 나쁜 형식이라는 의미는 아닙니다.

두 형식의 용도가 다릅니다.

JPG는 일반적인 사진처럼 색과 명암 변화가 많은 이미지를 효율적인 파일 크기로 저장할 때 유용한 경우가 많습니다.

PNG는 투명도가 필요한 그래픽이나 선명한 요소를 유지해야 하는 이미지에서 활용하기 좋습니다.

따라서 사진인지, 투명 배경이 필요한 그래픽인지에 따라 파일 형식을 선택하는 것이 좋습니다.

배경을 투명하게 만드는 기본 과정

투명 배경 이미지를 만드는 방법은 사용하는 편집 프로그램에 따라 다릅니다.

하지만 기본적인 과정은 비슷합니다.

먼저 원본 이미지에서 남길 대상과 제거할 배경을 구분합니다.

예를 들어 흰색 배경 위에 키보드 하나가 있다면 키보드는 남기고 주변의 흰색 영역을 제거합니다.

배경 제거 기능을 제공하는 프로그램이라면 자동으로 피사체를 감지할 수도 있고, 선택 도구를 이용해 직접 영역을 지정해야 하는 경우도 있습니다.

배경이 제거된 부분이 체크무늬 등으로 표시된다면 투명 영역이 만들어졌는지 확인합니다.

그다음 투명도를 지원하는 파일 형식으로 저장합니다.

PNG를 사용하는 것이 대표적인 방법입니다.

저라면 저장한 뒤 파일을 다시 열어 실제로 배경이 투명하게 유지됐는지도 확인하겠습니다.

편집 화면에서는 투명해 보였더라도 저장 과정에서 다른 형식을 선택하면 결과가 달라질 수 있기 때문입니다.

단색 배경과 복잡한 배경은 작업 난이도가 다르다

모든 이미지의 배경을 똑같이 쉽게 제거할 수 있는 것은 아닙니다.

예를 들어 흰색 배경에 검은색 마우스 하나가 놓여 있다면 피사체와 배경의 차이가 분명합니다. 이런 이미지는 비교적 쉽게 영역을 구분할 수 있습니다.

반면 책상 위에 여러 물건이 있고 그 사이에 키보드가 놓인 사진이라면 경계를 판단하기 어려울 수 있습니다.

머리카락이나 털처럼 매우 가는 요소도 마찬가지입니다.

그림자까지 자연스럽게 남겨야 한다면 더 세밀한 작업이 필요합니다.

자동 배경 제거 기능도 이런 차이에 영향을 받습니다. 단순한 사진에서는 결과가 깔끔할 수 있지만 복잡한 이미지에서는 피사체 일부가 함께 사라지거나 배경 조각이 남을 수 있습니다.

따라서 자동 기능을 사용했더라도 피사체의 가장자리를 확대해서 한 번 확인하는 습관이 좋습니다.

특히 썸네일처럼 이미지를 작게 사용할 때는 크게 문제가 없어 보이더라도 다른 배경색 위에 올리면 잘못 제거된 가장자리가 눈에 띌 수 있습니다.

투명 이미지 가장자리에 흰 테두리가 생기는 이유

배경을 제거했는데 피사체 주변에 얇은 흰색 선이 남는 경우가 있습니다.

원본 사진의 피사체 가장자리와 흰색 배경이 섞여 있던 픽셀이 완전히 제거되지 않았을 가능성을 생각해 볼 수 있습니다.

흰색 배경에서만 확인할 때는 잘 보이지 않지만 검은색이나 진한 배경 위에 올리면 흰 테두리가 갑자기 눈에 띕니다.

그래서 투명 이미지를 만든 뒤에는 서로 다른 배경색 위에서 확인해 보는 방법이 유용합니다.

흰색 배경에서 한 번 보고, 어두운 배경에서도 한 번 확인하면 가장자리 문제가 훨씬 쉽게 보입니다.

그림자가 있는 이미지도 주의할 필요가 있습니다.

그림자를 전부 제거하면 물체가 공중에 떠 있는 것처럼 보일 수 있고, 반대로 원래 배경과 섞인 그림자를 그대로 남기면 새로운 배경에서 부자연스러울 수 있습니다.

결국 좋은 투명 이미지를 만드는 데는 단순히 배경을 지우는 것뿐 아니라 피사체의 경계를 얼마나 자연스럽게 처리하는지도 중요합니다.

투명 PNG는 파일 용량이 커질 수도 있다

PNG가 투명도를 지원한다고 해서 모든 블로그 이미지를 PNG로 저장하는 것이 좋은 것은 아닙니다.

고해상도 사진을 PNG로 저장하면 파일 용량이 상당히 커질 수 있습니다.

특히 색상과 세부 정보가 많은 일반 사진이라면 사용 목적에 따라 JPG 등의 형식이 더 효율적일 수 있습니다.

예를 들어 블로그 본문에 일반적인 책상 사진을 올리는데 투명 배경이 전혀 필요하지 않다면 굳이 PNG를 선택할 이유가 크지 않을 수 있습니다.

반대로 배경 없는 로고나 아이콘이라면 투명도를 유지하기 위해 PNG가 적합할 수 있습니다.

따라서 파일 형식은 다음처럼 목적을 기준으로 생각하면 쉽습니다.

일반적인 사진이고 투명도가 필요 없다면 사진에 적합한 형식을 검토하고, 배경 없는 로고나 그래픽처럼 투명도가 필요하다면 PNG처럼 투명도를 지원하는 형식을 사용합니다.

실제 웹사이트에서는 이미지의 크기와 압축 방식도 로딩 속도에 영향을 줄 수 있으므로 필요 이상으로 큰 픽셀 크기의 파일을 사용하는 것도 피하는 편이 좋습니다.

워드프레스에 올린 뒤에도 실제 화면을 확인한다

투명 PNG를 만들었다면 마지막으로 실제 사용 위치에서 확인하는 것이 좋습니다.

편집 프로그램에서는 제대로 보였지만 워드프레스 테마의 이미지 영역에 자체적인 배경색이나 스타일이 적용되어 있을 수 있기 때문입니다.

예를 들어 투명한 로고를 업로드했는데 뒤에 회색 사각형이 보인다면 이미지 자체가 아니라 이미지가 들어간 웹페이지 영역에 배경색이 설정되어 있을 가능성도 있습니다.

반대로 이미지 파일 자체에 흰색 배경이 들어 있는 것일 수도 있습니다.

이 둘을 구분하려면 같은 이미지를 다른 배경에서 열어보거나 편집 프로그램에서 투명 영역을 확인하면 됩니다.

썸네일에서는 투명 이미지가 항상 유리한 것도 아닙니다.

목록에서 썸네일이 표시되는 방식에 따라 배경이 없는 물체만 작게 떠 있는 것처럼 보일 수 있기 때문입니다. 이런 경우에는 의도적으로 배경색이나 간단한 그래픽을 넣어 썸네일을 구성하는 편이 더 자연스러울 수도 있습니다.

투명 배경은 반드시 사용해야 하는 효과가 아니라 필요할 때 선택하는 이미지 표현 방식입니다.

투명 배경은 편집과 저장 형식이 함께 맞아야 한다

투명 배경 이미지를 만들기 위해서는 단순히 흰색 배경을 없애는 것만으로 끝나지 않습니다.

먼저 이미지에서 남길 대상과 제거할 영역을 구분하고, 배경 부분을 실제 투명 영역으로 처리해야 합니다.

그다음 그 투명도 정보를 유지할 수 있는 파일 형식으로 저장해야 합니다.

웹에서 흔히 사용하는 선택지 가운데 하나가 PNG입니다.

반면 JPG는 일반적인 투명 배경을 유지하기 위한 형식으로 사용하기 어렵기 때문에 투명 영역이 필요한 이미지를 저장할 때는 파일 형식을 확인해야 합니다.

또 PNG라고 해서 자동으로 배경이 투명해지는 것도 아닙니다. 편집 과정에서 투명 영역이 실제로 만들어져 있어야 합니다.

마지막으로 저장한 이미지를 흰색과 어두운 배경에서 각각 확인해 보면 가장자리나 남아 있는 배경을 발견하기 쉽습니다.

결국 기억해야 할 핵심은 간단합니다. 배경을 실제로 투명하게 처리하고, 투명도를 지원하는 형식으로 저장하고, 최종 사용 화면에서 다시 확인하는 것입니다.

FAQ

PNG 파일이면 무조건 배경이 투명한가요?

아닙니다. PNG는 투명도를 지원할 수 있는 형식이지만 배경색을 포함한 PNG도 만들 수 있습니다. 실제 이미지에 투명 영역이 만들어져 있는지 확인해야 합니다.

배경을 지운 뒤 JPG로 저장했더니 흰색 배경이 생겼습니다. 왜 그런가요?

일반적인 JPG 형식은 PNG처럼 투명 배경 정보를 저장하는 용도로 사용되지 않습니다. 투명도가 필요한 이미지라면 편집한 뒤 PNG 등 투명도를 지원하는 적절한 형식으로 저장해야 합니다.

투명 PNG는 블로그 이미지에 항상 좋은가요?

그렇지는 않습니다. 로고나 아이콘처럼 투명 배경이 필요한 이미지에는 유용하지만 일반적인 사진에서는 파일 크기 등을 고려해 다른 형식이 더 적합할 수 있습니다. 이미지의 내용과 실제 사용 목적을 기준으로 선택하는 것이 좋습니다.