상품 이미지 업로드 후 화질 저하는 카메라 문제인 경우가 거의 없습니다. 데스크톱에서 내보낸 파일은 선명했습니다. 다만 구매자의 휴대폰이 실제로 내려받은 파일은 그 파일이 아닙니다. 치수 표기가 아니라 페이지 속도에 맞춰 튜닝된 시스템들이 보통 네다섯 번에 걸쳐 리샘플링하고, 다시 인코딩하고, 상한을 걸고, 다시 서빙한 결과물입니다.
흐릿한 이미지를 일부러 올리는 판매자는 없습니다. 선명도는 업로드 순간에 잃는 것이 아니라 단계마다 조금씩 소모되며, 그 대부분은 판매자 대시보드에서 아예 보이지 않습니다. 전체 파이프라인을 표 하나로 정리한 뒤, 손실이 가장 큰 세 단계를 어떻게 다룰지 설명합니다.
상품 이미지 업로드 후 화질 저하: 여덟 단계를 순서대로
| # | 단계 | 파일에 일어나는 일 | 잃는 것 | 통제 가능 여부 |
|---|---|---|---|---|
| 1 | 촬영 | 흔들림, 초점 실패, 지나치게 조인 조리개에서의 회절 | 실제 디테일, 이후에는 복구 불가 | 가능 |
| 2 | 내보내기 리샘플링 | 출력 샤프닝 없이 목표 픽셀 크기로 축소 | 가장자리·화살촉·작은 글자의 미세 대비 | 가능 |
| 3 | 판매자 측 JPEG 인코딩 | 품질 설정과 크로마 서브샘플링이 색 정보를 버림 | 얇은 컬러 선, 빨강·파랑 표기 텍스트 | 가능 |
| 4 | 플랫폼 수집 | 마켓플레이스가 JPEG을 디코딩해 자체 설정으로 재인코딩 | 세대 손실, 경계선을 감싸는 링잉 헤일로 | 불가 |
| 5 | 픽셀 상한 | 플랫폼이 자체 최대 긴 변 기준으로 저장 | 상한을 넘는 모든 것, 영구적으로 | 내보내기 크기 선택으로만 |
| 6 | 파생 사이즈 | 페이지가 원본이 아니라 썸네일 크기 사본을 요청 | 축소 비율에 비례한 디테일 | 부분적, 어느 슬롯을 노리느냐에 따라 |
| 7 | 디바이스 픽셀 비율 | 3배 휴대폰 화면은 CSS 픽셀 하나당 이미지 픽셀 세 개를 요구 | 고밀도 화면에서 체감 선명도의 3분의 2 | 부분적 |
| 8 | 전송 | 지연 로딩 플레이스홀더, 테마 설정, 저속 네트워크 대체본 | 첫 렌더링에서의 일시적 또는 지속적 흐림 | 부분적 |
1단계와 2단계는 판매자의 몫입니다. 4단계와 5단계는 플랫폼의 영역이고 협상 대상이 아닙니다. 실무에서 상품 이미지 업로드 후 화질 저하 민원은 대부분 3, 4, 7단계로 거슬러 올라갑니다. 인코딩, 재인코딩, 그리고 화면입니다. 다시 촬영해도 좀처럼 해결되지 않는 이유가 여기에 있습니다.
3단계: 빨간 치수 화살표가 가장 먼저 뭉개지는 이유는 크로마 서브샘플링입니다
크로마 서브샘플링은 밝기는 전체 해상도로 저장하되 색은 그 일부만 저장하는 JPEG 인코딩 방식의 지름길입니다. 흔히 쓰이는 4:2:0 모드에서는 2x2 픽셀 블록마다 색 샘플을 하나만 남깁니다. 밝기 정보는 살아남지만, 색 정보는 파일이 판매자 컴퓨터를 떠나기도 전에 4분의 1로 줄어듭니다.
소파 사진에는 합리적인 거래입니다. 하지만 회색 판재 위에 그린 1픽셀 빨간 화살표에는 최악의 거래입니다. 중간 톤 회색 위의 중간 톤 빨강은 배경과 밝기 차이가 거의 없기 때문입니다. 그 선의 시인성은 거의 전적으로 색상(hue)이 떠받치고 있는데, 인코더가 가장 먼저 버리는 채널이 바로 그것입니다. 선이 사라지지는 않습니다. 대신 폭 2픽셀쯤 되는 흐릿한 분홍 멍처럼 번지고, 화살촉은 뾰족함을 잃습니다.
해법은 품질 슬라이더를 올리는 것이 아닙니다. 표기가 색상이 아니라 밝기로 이기게 만드는 것입니다.
- 밝은 배경에는 어두운 선을, 어두운 배경에는 밝은 선을 씁니다. 색상 대비가 아니라 휘도 대비입니다.
- 선에 얇은 대비 외곽선이나 후광을 넣어 2x2 색 평균화에도 가장자리가 살아남게 합니다.
- 치수 텍스트는 원본 크기가 아니라 실제 전송되는 크기에서 최소 2px 두께를 확보합니다.
- 중간 톤 제품 위에 채도 높은 빨강이나 파랑 텍스트를 바로 올리지 않습니다. 가장 먼저 무너지는 두 색상입니다.
4단계: 아무도 보지 못하는 재인코딩
모든 마켓플레이스는 업로드된 파일을 디코딩한 뒤 자기 사본을 새로 씁니다. JPEG은 손실 압축이므로, 두 번째 인코딩은 첫 번째의 오차를 그대로 반복하는 데 그치지 않습니다. 이미 압축 아티팩트가 들어 있는 이미지를 다시 양자화하고, 그 아티팩트를 보존할 가치가 있는 디테일로 취급합니다. 눈에 보이는 결과가 링잉입니다. 모든 경계선에 달라붙는 옅은 후광이며, 흰 배경 위 검은 글자와 스펙 도면의 직선에서 가장 두드러집니다.
이 과정을 끌 수는 없습니다. 다만 손상된 입력을 먹이는 일은 멈출 수 있습니다.
- 무손실 원본(PNG, TIFF 또는 레이어가 살아 있는 원본 파일)을 보관합니다. 내보낸 JPEG을 다시 편집해 저장하지 않습니다.
- 원본에서 최종 픽셀 크기로 한 번만 내보냅니다. 중간에 끼는 JPEG 저장은 그때마다 대가를 치르는 세대입니다.
- 플랫폼 자체 상한이 이미 처리하는 파일 크기 목표를 맞추겠다고 미리 압축하지 않습니다.
3단계와 4단계에서 도출되는 원칙은 이것입니다. 리스팅 이미지가 JPEG으로 몇 번 인코딩되었는지가, 개별 인코딩의 품질 슬라이더 값보다 더 중요합니다.
5단계: 확대 기능을 살려 두는 픽셀 하한선
확대는 구매자가 스펙이 읽히는지 확인할 때 쓰는 기능이며, 모든 플랫폼이 픽셀 임계값 뒤에 이 기능을 걸어 둡니다. 임계값을 넘기지 못하면 이미지가 흐린 것이 아니라, 애초에 고해상도 버전이 만들어지지 않아 서빙할 것이 없는 상태가 됩니다.
| 플랫폼 | 최소 허용 크기 | 확대 임계값 | 상한 |
|---|---|---|---|
| 아마존 | 긴 변 500px | 최소 1,000px, 최적의 확대 경험은 1,600px 이상 | 긴 변 10,000px |
| 이베이 | 긴 변 500px | 긴 변 1,600px | 사진당 12MB |
| 쇼피파이 | 공식 하한 없음 | 확대가 작동하려면 800 x 800px 초과 | 5,000 x 5,000px, 최대 20MB. 정사각형은 2,048 x 2,048px 권장 |
여기서 두 가지가 따라옵니다. 첫째, 물리적으로 더 큰 파일을 올린다고 애초에 촬영되지 않은 해상도가 생기지는 않습니다. 300 DPI와 72 DPI 비교 논쟁의 밑바탕에 깔린 것과 같은 착각으로, 파일 헤더에 적힌 숫자를 이미지 디테일로 오해하는 것입니다. 둘째, 플랫폼 상한에 맞춰 내보내는 일은 대체로 공짜이며, 지금 테마가 우연히 표시하는 크기에 맞춰 내보내는 것보다 언제나 안전합니다.
7단계: 고밀도 화면이 물리는 2배 세금
디바이스 픽셀 비율은 브라우저가 CSS 픽셀 하나를 그리는 데 쓰는 물리적 화면 픽셀 수입니다. 요즘 휴대폰은 보통 2나 3을 보고합니다. 1,000픽셀 이미지를 500 CSS 픽셀 슬롯에 넣으면 오래된 노트북에서는 또렷하지만 휴대폰에서는 눈에 띄게 흐립니다. 휴대폰은 1,500픽셀을 요구했는데 1,000픽셀을 받았기 때문입니다.
판매자가 "제 모니터에서는 멀쩡한데요"라고 말하는 가장 흔한 이유가 이것입니다. 실제로 멀쩡할 겁니다. 판매자 모니터가 구매자 휴대폰보다 적은 픽셀을 요구했을 뿐입니다. 파일에 문제가 없다고 결론짓기 전에, 모든 리스팅 이미지를 휴대폰에서 100% 배율로 확인합니다.
크롭은 이 문제를 더 키웁니다. 플랫폼 표시 슬롯의 비율이 내보낸 이미지와 다르면, 선명한 부분이 축소되기도 전에 잘려 나갈 수 있습니다. 원인은 다르지만 눈에는 같은 흐림으로 읽힙니다. 이는 별개의 판단이며 상품 이미지 화면 비율에서 다룹니다.
무엇부터 바꿔야 하는가, 효과가 큰 순서대로
- 무손실 원본에서, 플랫폼 상한 크기로, 한 번만 내보냅니다. 단일 항목 기준 효과가 가장 크고 비용은 0입니다.
- 품질 슬라이더를 만지기 전에 표기 대비부터 고칩니다. 모든 인코딩 단계를 통과하는 것은 색상이 아니라 휘도입니다.
- 샤프닝은 리사이즈 이후에, 절대 이전에 하지 않습니다. 6,000px 원본을 샤프닝한 뒤 축소하면 샤프닝은 버려지고 헤일로만 남습니다.
- JPEG 왕복 저장을 멈춥니다. 전송 크기마다 원본에서 한 번씩만 내보냅니다.
- 휴대폰으로 확인합니다. 데스크톱 미리보기나 업로드 창이 아닙니다.
이 모든 것보다 더 앞단에 다섯 번째 지렛대가 있습니다. 표기를 애초에 어떻게 만들었느냐입니다. 치수선과 스펙 텍스트를 도형(지오메트리)으로 그리고 전송 크기 그대로 한 번에 내보내면, 경계가 뚜렷하고 휘도 대비가 높은 형태가 네이티브 해상도로 렌더링되기 때문에 플랫폼 재인코딩을 견뎌 냅니다. 반면 같은 숫자를 이미지 편집기에서 확대한 화면 위에 타이핑한 뒤 축소하면, 압축이 시작되기도 전에 이미 흐린 상태로 도착합니다. 측정값을 제품의 실제 가장자리에 스냅해 주고, 각 플랫폼의 스펙 도면 크기로 주석 이미지를 내보내 주는 도구는 2단계와 3단계를 아예 건너뜁니다. 게다가 지오메트리가 생성된 값이 아니라 측정된 값이므로, 화살표 위의 숫자는 이미지 모델이 그럴듯하게 지어낸 수치가 아니라 실제 줄자의 숫자입니다. 접근 방식을 저울질하는 중이라면 상품 사진에 치수를 넣는 도구 목록이 합리적인 출발점입니다.
60초 진단
다시 촬영하기 전에 이것부터 돌려 봅니다. 상품 이미지 업로드 후 화질 저하의 세 가지 원인, 즉 픽셀 부족, 과도한 인코딩, 지나치게 조밀한 화면을 약 1분 만에 갈라냅니다.
- 휴대폰에서 실제 리스팅을 열고 손가락으로 확대해 봅니다. 확대가 작동하기는 합니까? 작동하지 않는다면 플랫폼 확대 임계값 아래에 있는 것이며, 선명도 문제가 아니라 픽셀 수 문제입니다.
- 실제 노출된 이미지를 우클릭해 새 탭에서 엽니다. 그 픽셀 크기를 업로드한 파일과 비교합니다. 숫자가 더 작다면 플랫폼이 상한을 걸었거나 파생본을 다시 만든 것입니다.
- 흰 배경 위 검은 경계선을 200% 배율로 봅니다. 양쪽에 옅은 밝은 후광이 보이면 초점 문제가 아니라 재인코딩입니다.
- 컬러 표기 선을 200% 배율로 봅니다. 선이 옆으로 번졌는데 근처의 검은 텍스트는 깨끗하다면 크로마 서브샘플링입니다.
- 업로드한 파일을 점검합니다. 한 번이라도 열어서 JPEG으로 다시 저장한 적이 있다면 원본에서 내보내기를 다시 합니다.
- 원본의 긴 변 길이를 플랫폼 상한과 비교합니다. 한참 아래라면 더 크게 다시 내보냅니다.
여섯 항목이 모두 통과했는데도 이미지가 흐려 보인다면, 그때야 비로소 촬영 문제입니다. 그 시점의 해법은 내보내기가 아니라 촬영입니다. 측정 가능한 상태를 유지하는 촬영 세팅은 그 자체로 하나의 분야이며 측정을 위한 제품 촬영 방법에서 다룹니다.
자주 묻는 질문
쇼피파이에 올린 상품 이미지가 제 데스크톱에서는 선명한데 업로드 후 화질 저하가 생기는 이유는 무엇입니까?
데스크톱은 원본을 보여 주고 스토어프론트는 파생본을 보여 주기 때문입니다. 쇼피파이는 작은 화면에 맞추기 위해 이미지를 자동으로 리사이즈하므로, 구매자가 받는 것은 대개 판매자의 파일이 아니라 축소된 사본입니다. 쇼피파이는 5,000 x 5,000px, 20MB까지 허용하고, 정사각형 상품 이미지는 2,048 x 2,048px를 권장하며, 확대가 작동하려면 800 x 800px보다 커야 합니다. 업로드가 이 기준을 크게 밑돌면 모든 파생본이 애초에 너무 적은 디테일에서 출발합니다.
더 큰 파일을 올리면 이미지가 더 선명해집니까?
실제로 촬영한 해상도까지만 그렇습니다. 플랫폼의 확대 임계값이나 파생 사이즈가 표시를 굶기고 있을 때는 픽셀이 늘어나는 것이 도움이 됩니다. 예를 들어 아마존이나 이베이에서 800px에서 1,600px로 올리면 확대 기능이 켜집니다. 하지만 900px 사진을 3,000px로 업스케일하면 파일 크기만 늘고 디테일은 늘지 않으며, 보간에서 오는 흐림까지 얹히는 경우가 많습니다.
메인 이미지에서는 치수 텍스트가 멀쩡한데 갤러리 썸네일에서는 뭉개지는 이유는 무엇입니까?
썸네일은 축소로 생성되는 별개의 파생본이기 때문입니다. 1,600px 원본에서 높이 14px인 텍스트는 450px 썸네일에서 약 4px가 되는데, 이는 글자 형태가 어떤 리샘플링도 견디지 못하는 크기입니다. 치수 텍스트 크기는 원본이 아니라, 그 텍스트가 등장할 가장 작은 슬롯을 기준으로 정합니다.
스펙 도면은 JPEG 대신 PNG로 올려야 합니까?
플랫폼이 허용한다면, 단색 면과 선과 텍스트가 대부분인 이미지에는 그렇습니다. PNG는 무손실이고 크로마 서브샘플링의 영향을 받지 않기 때문입니다. 다만 대부분의 마켓플레이스는 수집 시점에 어차피 JPEG으로 재인코딩하므로, PNG는 2단계와 3단계는 지켜 주지만 4단계는 지켜 주지 못합니다. 그래도 할 가치는 있습니다. 깨끗한 입력은 이미 열화된 입력보다 재인코딩 한 번을 훨씬 잘 견딥니다.
와이파이보다 모바일 데이터에서 이미지가 더 나빠 보이는 이유는 무엇입니까?
일부 브라우저와 네트워크는 제한된 연결에서 저품질 버전으로 대체하며, 많은 스토어프론트가 실제 파일이 로드되는 동안 작게 흐린 플레이스홀더를 보여 줍니다. 1초쯤 뒤에 이미지가 또렷해진다면 그것은 플레이스홀더이고 고칠 것이 없습니다. 계속 흐린 상태라면 5단계부터 7단계까지 거꾸로 짚어 봅니다.