애드온HOSPITAL MARKETING
메뉴
마케팅·협업 운영

배경을 지운 작은 썸네일에서 상품의 윤곽이 사라지는 이유

작은 썸네일의 메시지를 단순하게 만들려고 배경과 장식을 지우고 상품 하나만 남길 수 있습니다. 그런데 같은 파일이 어두운 목록에서는 또렷하고 밝은 목록에서는 일부가 사라진 것처럼 보인다면, 설명 문구를 다시 늘리기 전에 투명한 영역이 무엇 위에 놓였는지 봐야 합니다.

애드온 편집팀

작은 썸네일의 메시지를 단순하게 만들려고 배경과 장식을 지우고 상품 하나만 남길 수 있습니다. 그런데 같은 파일이 어두운 목록에서는 또렷하고 밝은 목록에서는 일부가 사라진 것처럼 보인다면, 설명 문구를 다시 늘리기 전에 투명한 영역이 무엇 위에 놓였는지 봐야 합니다. 남긴 피사체가 주제를 전달하는 구성에서는 그 피사체의 경계가 보여야 한 가지 메시지도 유지됩니다.

투명 배경은 흰 배경과 다릅니다. 흰색으로 채운 영역은 이미지의 일부지만 완전히 투명한 영역에서는 뒤에 놓인 화면이 보입니다. W3C의 PNG 규격은 이미지의 색과 불투명도를 다루며, 투명한 이미지를 표시할 때 앞의 그림과 뒤의 배경이 합성되는 관계를 설명합니다. 그래서 배경을 지운 파일만 확인해서는 최종 화면의 모습을 모두 알 수 없습니다. 실제 목록의 바탕도 표시 결과에 참여하기 때문입니다.

흰색 손잡이가 달린 생활용품을 배경 없이 잘라낸 가상의 썸네일을 생각해 봅니다. 어두운 바탕에서는 손잡이 모양이 보이지만 흰색 바탕에서는 바깥 경계가 구별되기 어려울 수 있습니다. 상품이 잘렸거나 다른 모델로 바뀐 것이 아닌데도 작은 화면에서는 형태를 알아보기 어려워지는 상황입니다. 여기서 손잡이 자체를 검게 칠하면 보이기는 쉬워져도 실제 상품의 색을 바꿔 보여 주게 됩니다. 제품 정보의 정확성을 지키면서 배치 조건을 바꿀 방법을 찾아야 합니다.

선택할 수 있는 방법 중 하나는 상품 뒤에 확인한 배경을 함께 넣어 내보내는 것입니다. 물건과 배경의 관계를 파일 안에서 정하면 페이지 바탕이 달라져도 그 관계는 유지됩니다. 다만 이미지 주위가 사각형으로 보이는 점이나 목록의 다른 이미지와 어울리는지는 실제 사용 위치에서 판단해야 합니다. 투명함을 유지하는 디자인이 필요한 경우에는 밝은 바탕과 어두운 바탕 모두에서 형태를 알아볼 수 있는 다른 사진이나 구도를 검토할 수 있습니다. 모든 이미지에 한 가지 처리법을 강제할 이유는 없습니다.

작업용 편집기에서 보이던 바탕이 최종 파일에도 들어 있다고 가정하지 않습니다. 내보낸 파일을 다시 열어 배경이 포함됐는지 확인하고, 투명하게 남겼다면 실제 게시할 목록 위에서 확인합니다. 업로드 과정에서 플랫폼이 이미지를 변환하거나 별도의 배경을 붙일 수 있으므로 원본 미리보기와 게시 위치의 표시가 같은지도 봅니다. 이런 기능이 있는지 확인하지 않은 채 특정 플랫폼은 항상 투명도를 보존한다고 약속하지 않습니다.

반투명한 가장자리도 작은 크기에서 살펴볼 부분입니다. 윤곽을 부드럽게 만든 가장자리 픽셀은 바탕과 함께 보일 수 있어, 큰 화면에서 자연스럽던 경계가 다른 바탕에서는 흐리거나 테두리처럼 느껴질 수 있습니다. 상품명, 강조선, 그림자를 차례로 더해 가리기보다 어느 배경에서 무엇이 달라졌는지 확인합니다. 설명을 덜어낸 자리에 장식이 다시 쌓이면 원래 전달하려던 물건보다 보정 흔적이 눈에 띌 수 있습니다.

썸네일에 한 가지 메시지를 남기는 일은 요소를 삭제한 수로 끝나지 않습니다. 배경을 없앤 뒤에도 남은 대상이 실제 노출 화면에서 같은 물건으로 읽히는지 확인해야 합니다. 투명 파일을 유지할지 배경을 포함할지는 이 관계를 보고 정하고, 상품 자체의 색이나 구성을 바꾸어 가독성 문제를 해결하지 않습니다. 작은 화면에서 정확한 대상을 알아보게 하는 것이 배경을 덜어낸 목적이어야 합니다.

투명도와 배경 합성의 기술적 근거는 W3C Portable Network Graphics Specification Third Edition의 Alpha channel processing 절입니다: https://www.w3.org/TR/png-3/#13Alpha-channel-processing (2026년 10월 4일 확인).

참고 자료

같은 카테고리 글 보기 · 전체 글 보기

CONSULTATION

어떤 정보를, 어디에 전할지
함께 정리해보세요.

병원의 현재 운영 채널과 필요한 작업을 알려주세요.
원고·이미지·홈페이지 중 필요한 업무 범위부터 확인합니다.

이메일로 문의하기 카카오 오픈채팅