Shopify 이미지 크기 가이드: 500 KB 이하 유지가 핵심

Shopify 마스터 이미지로 2048 x 2048 픽셀을 사용하고, 업로드하는 각 파일 크기를 500 KB 이하로 유지하세요. Shopify는 최대 20 MB 및 4472 픽셀 정사각형 이미지까지 허용하지만, 이 수치는 플랫폼이 수용할 수 있는 최대치일 뿐 빠른 쇼핑몰 로딩 속도를 위해 권장되는 크기가 아닙니다.

대부분의 가이드에서 언급하는 20 MB라는 수치는 디자인 기준으로 삼기에는 적절하지 않습니다. Shopify가 허용하는 범위와 Shopify가 권장하는 최적의 범위는 다릅니다. 개당 3 MB짜리 이미지 8개가 포함된 상품 페이지는 총 24 MB에 달하며, 모바일 쇼핑객들은 페이지 로딩이 끝나기도 전에 이탈해 버립니다.

배치 위치별 Shopify 이미지 크기

상품 이미지는 2048 픽셀의 정사각형이어야 하며, 배너, 컬렉션 타일, 로고는 각각 고유한 규격이 필요합니다. 모든 위치에 동일한 크기를 사용하면 배너가 늘어나거나 컬렉션 이미지가 잘릴 수 있습니다.

테마마다 이미지를 자르는 방식이 다르기 때문에 데스크톱 미리보기에서 올바르게 보이는 배너가 모바일 화면에서는 중간 부분이 잘려 보이는 경우가 많습니다. 배너의 중요한 콘텐츠는 중앙 60% 영역 안에 배치하여 어떤 테마에서도 잘리지 않도록 하세요.

500 KB라는 수치가 중요한 이유

페이지 용량은 쇼핑몰의 로딩 속도를 결정하며, 일반적인 상품 페이지에서 이미지는 용량의 대부분을 차지합니다. 전체 용량이 2 MB 이하인 페이지는 모바일 데이터 환경에서도 원활하게 로드되지만, 24 MB짜리 페이지는 그렇지 못합니다.

대부분의 쇼핑몰에서 모바일 사용자가 트래픽의 과반수를 차지하며, 모바일 연결 속도는 사무실의 초고속 인터넷보다 훨씬 불안정합니다. 로딩 시간이 1초 늘어날 때마다 구매 전환율이 떨어지므로, 이미지 용량은 기술적인 문제를 넘어 매출과 직결되는 문제입니다. 8개의 상품 이미지 용량을 3 MB에서 300 KB로 줄이면 페이지에서 21 MB를 덜어낼 수 있으며, 화질 저하는 육안으로 거의 구분할 수 없습니다.

Shopify가 이미지를 자동으로 압축해 주나요

Shopify는 콘텐츠 전송 네트워크(CDN)를 통해 크기가 조정된 버전을 제공하며, 이를 지원하는 브라우저에서는 자동으로 WebP 형식으로 변환하여 서빙합니다. 플랫폼 자체에서 꽤 훌륭한 작업을 수행하며, 사용자가 업로드한 원본을 기반으로 작동합니다.

하지만 바로 그 원본이 한계로 작용합니다. Shopify는 사용자가 업로드한 원본을 기준으로 더 작은 버전을 생성하므로, 제대로 압축되지 않은 5 MB짜리 원본을 업로드하면 최적화된 400 KB짜리 원본을 업로드했을 때보다 결과물의 용량이 더 커지게 됩니다. 업로드 전에 압축을 진행하면 저장 공간을 절약할 수 있을 뿐만 아니라, 500개의 상품을 가져올 때 2.5 GB 대신 200 MB만 전송하면 되므로 대량 가져오기 속도가 훨씬 빨라집니다.

Shopify용 이미지를 준비하는 방법

빠른 상품 페이지를 만들기 위해 다음 6단계를 따르세요.

1. 사진 편집기에서 2048 x 2048 픽셀의 정사각형 마스터 이미지를 내보냅니다.
2. 배너나 라이프스타일 이미지는 실제 표시되는 너비의 2배(고해상도 화면 대응용)로 크기를 조정합니다.
3. 사진을 WebP로 변환하거나, 기존 작업 흐름상 필요한 경우 JPG를 유지합니다. Shopify가 어차피 변환을 처리해 줍니다.
4. 상품 사진은 300 KB, 배너는 400 KB를 목표로 압축합니다.
5. 대량 CSV 가져오기 시 이미지가 올바른 상품에 매핑되도록 파일 이름을 상품 코드와 뷰 이름으로 지정합니다.
6. 업로드 후 데스크톱 미리보기뿐만 아니라 실제 모바일 기기에서도 상품 페이지를 확인합니다.

Shopify에서의 WebP 사용

Shopify는 수년 동안 WebP를 기본적으로 지원해 왔으며, 업로드된 JPG 및 PNG 파일을 지원 브라우저에 맞춰 자동으로 변환해 줍니다. WebP 파일을 직접 업로드하는 것도 허용되므로, 플랫폼의 자동 변환에만 의존하지 않고 직접 압축률을 제어할 수 있습니다.

WebP는 JPG와 동일한 시각적 품질을 유지하면서도 파일 크기를 25%에서 35%까지 줄일 수 있어, 8장의 사진이 들어가는 페이지에서 매우 유용합니다. 단, 공급업체가 나중에 파일을 다운로드해야 하거나 인쇄소로 보내야 하는 경우에는 WebP 업로드를 피해야 합니다. 해당 환경에서는 여전히 JPG를 요구하기 때문입니다.

느린 상품 페이지 개선하기

가장 큰 이미지부터 시작하세요. 단일 파일 중 용량이 가장 큰 이미지가 대개 로딩 지연의 주원인이기 때문입니다. Shopify 쇼핑몰에서는 보통 홈페이지 배너나 첫 번째 상품 사진이 이에 해당합니다.

• 압축하기 전에 크기부터 조정하세요. 1920 픽셀 크기의 영역에 4000 픽셀 배너를 넣으면 데이터의 75%가 낭비됩니다.
• 스크롤 없이 바로 보이는 화면(Above the fold)의 이미지 수를 줄이세요. 12개의 갤러리 이미지가 한 번에 로드되면 다른 모든 요소의 로딩이 지연됩니다.
• 화면 아래 영역의 이미지에 지연 로딩(Lazy loading)이 적용되어 있는지 확인하세요. 최신 테마들은 대부분 이 기능을 기본적으로 지원합니다.
• 움직이는 GIF 파일을 비디오로 대체하세요. 짧은 GIF 파일 하나가 페이지의 나머지 모든 요소를 합친 것보다 더 무거운 경우가 많습니다.
• 설치된 앱들을 점검하세요. 리뷰 위젯, 팝업, 신뢰 배지 등은 종종 자체 이미지와 스크립트를 로드하여 속도를 저하시킵니다.

대체 텍스트(Alt Text) 및 이미지 파일 이름

스크린 리더를 사용하는 쇼핑객을 위해 상품을 설명하는 대체 텍스트를 작성하고, 카메라 기본 이름 대신 상품명을 반영하여 파일 이름을 지정하세요. IMG_4821.jpg와 같은 파일 이름은 검색 엔진과 쇼핑객에게 아무런 정보도 주지 못합니다.

navy-linen-shirt-front.jpg와 같은 형식을 사용하면 대량 가져오기 시에도 알아보기 쉽고, 폴더 내 정렬이 용이하며, 검색 결과에서 이미지를 잘 설명해 줍니다. 대체 텍스트는 상품명을 그대로 반복하기보다는 색상, 소재, 촬영 각도 등을 포함하여 사진이 무엇을 보여주는지 설명해야 합니다. 두 작업 모두 상품당 몇 초밖에 걸리지 않지만 이미지 검색 노출을 크게 개선해 줍니다.

전체 적용 전에 변경 사항 테스트하기

전체 카탈로그에 적용하기 전에 먼저 5개의 상품만 처리하여 게시하고, 실제 모바일 기기에서 페이지를 확인하세요. 500개 상품에 설정 오류가 한 번에 적용되면 이를 되돌리는 데 훨씬 더 많은 시간이 낭비됩니다.

테스트 상품에서 3가지를 확인하세요. 쇼핑객들은 의류나 보석류를 볼 때 확대 기능을 많이 사용하므로 최대 확대 시에도 이미지가 선명한지 확인합니다. 컬렉션 그리드에서 크롭이 일관되게 보이는지 확인합니다. 사무실 초고속 인터넷이 아닌 모바일 데이터 환경에서 페이지가 빠르게 로드되는지 확인합니다. 이 확인을 마친 후에만 나머지 모든 상품에 동일한 설정을 적용하세요.

이미지 앱 사용과 업로드 전 직접 처리 비교

이미지 압축 앱은 업로드 전에 한 번만 처리하면 해결될 문제에 대해 매월 비용을 청구합니다. 이러한 앱은 여러 사람으로부터 지속적으로 새로운 이미지를 전달받고 업로드 규격을 통제하기 어려운 대형 쇼핑몰에서 유용합니다.

카탈로그가 안정적이고 한 사람이 이미지를 관리하는 쇼핑몰이라면 매달 고정 비용을 지출할 필요가 없습니다. 기존 라이브러리를 한 번 압축하고, 새로 추가되는 사진을 그때그때 압축해서 업로드하면 동일한 효과를 얻을 수 있습니다. 수작업으로 처리하기 힘들 정도로 카탈로그가 커지거나, 여러 직원이 가이드라인 없이 이미지를 업로드하는 시점이 되면 앱 도입을 다시 고려해 보세요.

흔히 하는 Shopify 이미지 실수

카메라에서 촬영한 원본을 그대로 업로드하는 것이 가장 치명적인 실수입니다. 2400만 화소 사진은 웹 화면에 표시할 수 있는 데이터보다 10배나 많은 데이터를 담고 있기 때문입니다. 플랫폼은 파일을 받아주지만, 그 대가는 느려진 페이지 속도로 치르게 됩니다.

자주 발생하는 다른 두 가지 실수도 있습니다. 컬렉션 내에서 이미지 비율을 혼용하면 그리드가 지저분해집니다. 테마가 이미지를 정사각형으로 자르기 때문에 세로가 긴 사진은 위아래가 잘려 나가게 됩니다. 또한 상품 사진에 PNG 형식을 사용하면 파일 용량이 3배에서 5배까지 늘어납니다. PNG는 모든 픽셀을 무손실로 저장하므로, 단색 영역이 없는 실제 사진에서는 시각적 이점 없이 용량만 낭비하게 됩니다.

일관성 있는 카탈로그 유지하기

전체 카탈로그를 한 번에 일괄 처리하여 모든 상품 사진이 동일한 크기, 압축률, 구도를 공유하도록 하세요. 쇼핑객들은 상품을 비교할 때 구체적인 원인을 모르더라도 미세한 불일치를 본능적으로 감지합니다.

일관성은 컬렉션 그리드 화면에서도 중요합니다. 크기와 밝기가 일치하는 이미지들은 개별적으로 흩어져 있는 느낌 대신 잘 기획된 하나의 페이지처럼 보이게 만듭니다. 규격과 목표 용량을 한 번 설정한 다음, 개별 상품마다 조절하지 말고 모든 파일에 일괄 적용하세요.

한 번에 카탈로그 일괄 처리하기

최대 500개의 이미지를 한 번에 넣거나 사진작가에게 받은 ZIP 압축 파일을 그대로 끌어다 놓으면, 모든 파일이 동일한 사양으로 크기 조정 및 압축되어 반환됩니다. 데스크톱 소프트웨어로 반나절이 걸리던 카탈로그 작업이 단 몇 분 만에 끝납니다.

모든 작업은 서버를 거치지 않고 사용자의 브라우저 내부 프로세서에서 실행되므로 미공개 상품, 시즌 캠페인 컷, 공급업체 사진 등이 외부 서버로 전송되지 않습니다. 엠바고 하에 출시를 준비하는 쇼핑몰의 경우, 파일을 로컬에서 안전하게 처리하는 것이 정보 유출을 방지하는 핵심이며 추가 비용도 들지 않습니다.