Shopify 상품 이미지 크기 완벽 가이드

Shopify 상품 이미지는 두 방향 중 하나로 실패해요. 너무 작아서 고객이 솔기나 보석 세팅을 들여다보는 순간 확대 화면이 뭉개지거나, 카메라에서 뽑은 그대로라 너무 커서 트래픽 상당수가 몰리는 모바일에서 페이지가 기어가거나. 관리자 화면은 둘 다 경고 없이 받아들여요.

Shopify는 대부분의 스토어 운영자가 짐작하는 것보다 많은 일을 대신해 줘요. 이미지마다 스토어 각 위치에 맞는 크기를 만들어 두고, CDN은 브라우저가 지원하면 WebP나 AVIF 같은 최신 형식을 골라 내보내요. 하지만 들쭉날쭉한 가로세로 비율을 고쳐 주지는 않고, 어떤 사진이 어떤 변형(옵션)에 속하는지 알아맞히지도 않으며, 너덜너덜한 누끼를 살려 주지도 않아요. 여기서부터가 직접 통제할 영역이에요.

2048 x 2048에서 시작해 거기서 멈추기

Shopify가 직접 안내하는 값은 이래요. 정사각형 상품 이미지는 보통 2048 x 2048 px에서 가장 잘 보여요. 실제 상한선은 훨씬 위에 있어요 — 상품이나 컬렉션 이미지는 20 MB 미만이어야 하고, 5000 x 5000 px 또는 25메가픽셀까지 올라갈 수 있어요.

그 상한선은 목표치가 아니에요. Dawn에서 상품 갤러리는 CDN에 1946 px보다 넓은 파일을 요청하는 법이 없고, 확대 라이트박스조차 4096 px를 넘는 크기는 지정하지 않아요. 5000 px 원본으로 얻는 건 느려진 업로드와 그사이 느려진 편집뿐이에요. 메인 갤러리는 2048 px 정사각형을 지키세요. 업로드 지원 형식에 PNG, JPEG, WebP가 들어가니 6 MB짜리 TIFF 대신 압축된 파일을 넘기면 돼요.

정사각형이냐 세로형이냐, 비율은 하나만

비율이 뒤섞였다는 사실이 드러나는 곳은 컬렉션 그리드예요. Shopify가 대표 이미지 전체에 동일한 비율을 권하는 이유죠. Dawn 같은 테마는 프레임을 이미지마다 맞추거나 전부 고정 비율에 가두는 방식을 고를 수 있는데, 어느 쪽이든 들쭉날쭉함에는 대가가 따라요. 맞추면 그리드가 너덜너덜해지고, 고정하면 병 윗부분이 잘려 나가거나 반지 주위에 빈 공간이 남아요.

그러니 한 번에 정하세요. 정사각형(1:1)이 가장 안전한 기본값이고 좁은 화면에서도 잘 흘러가요. 4:5나 2:3 같은 세로 비율은 의류나 키 큰 병에 어울리고 모바일에서 세로 공간을 더 채워요. 절대 안 되는 건 한 컬렉션 안에서 둘을 섞는 거예요.

밀어붙이는 방법은 제품을 누끼로 따서 프레임을 직접 다시 짜는 거예요. remover.bg에 사진을 업로드해 배경을 지우고, 다른 리스팅과 똑같은 흰색이나 브랜드 컬러 단색으로 바꾸세요. 그다음 쓰던 내보내기 도구에서 정해 둔 프레임 크기로 맞추면, 손에 쥐는 머그컵과 전신 코트가 같은 규격으로 떨어져요. 같은 누끼는 더 엄격한 마켓플레이스 규정을 다룬 아마존 흰색 배경 가이드에도 그대로 쓰이고, 투명한 상태로 두었다가 나중에 합성해도 돼요 — 투명 PNG가 정답인 경우를 보세요.

크기는 CDN이 맞춰도, 원본은 내 몫

테마는 Liquid의 image_url과 image_tag 필터로 이미지를 요청하고, 이 필터가 srcset을 만들어 CDN이 기기마다 알맞은 크기와 형식의 파일을 내보내게 해요. 잘 만든 테마가 390 px 휴대폰에 2048 px 파일을 그대로 보내지 않는 이유죠.

여기서 해결되지 않는 게 두 가지 있어요. 먼저 업로드 시점의 형식 선택은 여전히 중요해요. WebP로 내보내면 CDN에 닿기 전부터 파일이 가벼워지고, remover.bg가 WebP를 처음부터 끝까지 처리하는 것처럼 Shopify도 변환 없이 WebP를 받아요. 그리고 SKU가 수백 개라면 폴더를 끌어다 놓는 지름길은 없어요. 그건 CSV 가져오기와 나란히 돌리는 배경 제거 API 스크립트의 몫이에요.

확대가 통하는 건 픽셀이 충분할 때

Shopify는 확대가 제대로 작동하려면 이미지가 800 x 800 px보다 커야 한다고 밝혀요. Dawn의 상품 템플릿에서는 확대 설정으로 클릭·호버, 라이트박스 열기, 확대 없음 중에 고를 수 있어요.

질감이 곧 판매 포인트일 때 확대를 켜세요. 니트, 가죽 결, 각인, 보석 커팅면, 나뭇결 같은 것들이요. 평면 그래픽이나 작은 아이콘에서는 끄세요. 확대가 압축 흔적만 광고하니까요. 확대는 가장자리에도 가차 없어요 — 퍼 트림, 흩날리는 머리카락, 얇은 스트랩은 실수를 전부 드러내요. 깔끔한 누끼가 값을 하는 지점이죠.

변형(옵션) 이미지와 미디어 순서

변형(옵션) 하나에 지정할 수 있는 이미지는 정확히 하나예요. 이미지만 되고 동영상이나 3D 모델은 안 돼요. 고객이 그 옵션을 선택하면 그 이미지가 미리보기로 떠요.

변형(옵션)당 한 장으로는 대개 부족하니 그 주위를 갤러리로 채우세요. 모든 컷을 상품 미디어에 넣고, 관련된 컷끼리 붙도록 순서를 잡고, 가장 강한 이미지를 맨 앞에 두세요. 첫 번째 미디어가 상품 카드와 기본 화면을 좌우해요.

대체 텍스트: 512자까지 되지만 125자면 충분

Shopify는 대체 텍스트를 512자로 제한하고 125자 이하를 권해요. 이건 가독성 지침이지 스크린 리더의 한계가 아니에요. 긴 대체 텍스트는 듣기 피곤해요. 듣는 사람은 훑어 읽을 수가 없으니까요. 변형(옵션)까지 포함해 화면을 설명하세요. ‘셔츠’보다 ‘네이비 린넨 셔츠, 정면, 단추 잠근 상태’가 낫죠. ‘~의 이미지’ 같은 군더더기와 키워드 나열은 빼세요. 대체 텍스트는 상품마다 하나씩 손대지 않고 CSV 업로드로 일괄 편집할 수 있어요.

업로드 전 짧은 체크리스트

한 묶음을 Shopify에 넣기 전에. 세로형을 고른 게 아니라면 2048 px 정사각형으로 내보내고, 20 MB 상한보다 넉넉히 아래를 유지하고, 컬렉션 전체에 배경 처리를 하나로 통일하고, 변형(옵션)마다 이미지를 하나씩 지정한 뒤 그 주위로 갤러리 순서를 잡고, 대체 텍스트는 125자 아래로 유지하세요. 화려한 구석은 하나도 없어요. 그리고 하나라도 어긋나는 순간, 전부 컬렉션 페이지에 드러나죠.