상세페이지 기획·디자인 전문 하오스튜디오

■ 핵심 요약 ① 상세 이미지는 가로 860px 기준으로 잡아야 모바일 화면에서 글씨가 뭉개지지 않아요. ② 대표이미지는 1:1 정사각 1,000 × 1,000px, 최소선은 500 × 500px으로 잡는 게 안전해요. ③ 사진은 JPG, 누끼는 PNG로 나눠 받아두면 다른 플랫폼에 올릴 때 다시 찍지 않아도 돼요. 안녕하세요, 하오스튜디오입니다. 스마트스토어 상세페이지는 플랫폼이 안내하는 권장 가로폭과 대표이미지 비율에 맞춰 만들어야 잘리거나 흐려지는 화면 없이 보여요. 오늘은 실제로 진행한 포장용품 상세페이지 제작 프로젝트로 그 규격을 어떻게 맞췄는지 정리해볼게요. 스마트스토어 상세페이지, 권장 규격은 어디까지 맞춰야 할까요? 가로폭과 대표이미지 비율, 이 두 가지만 맞으면 나머지는 거의 따라옵니다. 스마트스토어 상세페이지는 상품 페이지 아래쪽에 세로로 길게 이어 붙이는 이미지와 텍스트 묶음이에요. 네이버가 안내하는 상세 이미지 권장 가로는 860px이고, 이 폭을 기준으로 설계하면 모바일에서 좌우가 잘리거나 글씨가 늘어나 뭉개지는 일이 줄어듭니다. 대표이미지는 성격이 다릅니다. 목록 썸네일·검색 결과·장바구니처럼 작게 축소되는 자리에 쓰이기 때문에 1:1 정사각으로 잡아야 어디서도 비율이 깨지지 않아요. 쿠팡은 대표이미지를 정사각 1,000 × 1,000px으로 권장하고 최소 500 × 500px을 기준선으로 둡니다. 스마트스토어와 함께 운영할 계획이라면 이 정사각 한 벌을 같이 만들어 두는 편이 번거로움이 적습니다. 이번 프로젝트는 식품을 담는 포장용품(진공포장지) 상세페이지였어요. 사진을 보면 파란 물속에 제품이 잠긴 장면을 메인으로 썼는데, 포장 안으로 물이 들어가지 않는다는 점을 글로 설명하는 대신 한 컷으로 보여주려는 연출이었습니다. 왼쪽 첫 화면을 휴대폰 프레임에 넣어 시안을 확인한 것도 이유가 있어요. 860px 기준으로 작업해도 실제 기기 화면에 올려보기 전까지는 로고 아래 작은 안내 문구가 읽히는 크기인지...