상세페이지 이미지
규격 정하기

먼저 정할 것은 가로 폭 하나입니다

상세페이지 이미지에서 실제로 결정해야 하는 값은 가로 폭 하나입니다. 세로는 내용이 정하고, 용량은 그 결과로 따라옵니다. 그런데 많은 사람이 순서를 거꾸로 잡아 세로 길이부터 고민하다가, 다 만든 뒤에 폭이 맞지 않아 전부 다시 그립니다.

폭을 정하는 기준은 하나입니다. 올릴 곳이 이미지를 몇 픽셀로 보여주는가. 그보다 크게 만들면 브라우저가 줄여서 보여주므로 용량만 낭비되고, 작게 만들면 늘려서 보여주므로 흐려집니다.

860px이 기본값인 이유

makeinfo의 기본 캔버스 폭은 860px입니다. 세로로 긴 상세페이지 이미지에 널리 쓰이는 값이라 출발점으로 삼기 좋습니다.

이 숫자는 데스크톱 화면 크기에서 온 것이 아닙니다. 상세페이지는 대부분 휴대폰에서 읽히고, 판매처 앱은 이미지를 화면 폭에 맞춰 늘려 보여줍니다. 860px은 그렇게 늘려도 흐려지지 않는 선에서 용량이 지나치게 커지지 않는 절충점입니다.

다만 이건 어디까지나 시작점입니다. 올릴 곳이 정한 폭이 따로 있으면 그 값이 우선입니다 — 판매처마다 다르고 같은 판매처도 정책을 바꿉니다.

더 선명하게 만들고 싶다면 작업 폭을 키우지 말고 내보내기 배율을 올리세요. 편집은 860px 기준으로 하면서 결과 파일만 2배(1720px)로 뽑는 방식입니다. 작업 폭을 1720px로 잡으면 글자 크기와 여백을 전부 다시 감각해야 하지만, 배율만 올리면 화면에서 보던 그대로가 두 배 해상도로 나옵니다.

dpi는 웹에서 아무 의미가 없습니다

"상세페이지는 72dpi로 만들어야 하나요, 300dpi로 만들어야 하나요"는 자주 나오는 질문인데, 웹에 올릴 이미지에서 dpi는 아무것도 바꾸지 않습니다.

dpi는 이 이미지를 종이에 인쇄할 때 1인치에 점을 몇 개 찍을 것인가를 적어둔 메모입니다. 파일 안에 숫자로 적혀 있을 뿐 화소를 늘리거나 줄이지 않습니다. 브라우저와 판매처 앱은 이 값을 읽지 않고 화소 수만 봅니다. 1000×1000 이미지는 72dpi로 저장하든 300dpi로 저장하든 화면에서 완전히 같습니다.

그래서 웹용 이미지에서는 dpi를 신경 쓸 필요가 없습니다. 대신 가로 화소 수를 봅니다. 반대로 인쇄물은 dpi가 실제 출력 크기를 결정하므로 그때는 반드시 챙겨야 합니다 — 그쪽은 다른 이야기입니다.

세로 길이와 나누는 기준

세로는 내용이 정합니다. 다만 한없이 길게 두면 세 가지가 걸립니다.

• 판매처의 한 장 제한 — 이미지 한 장의 최대 높이나 용량을 정해둔 곳이 많습니다. 넘으면 업로드 자체가 막힙니다.
• 로딩 — 긴 이미지 한 장은 전부 받아야 첫 화면이 뜹니다. 여러 장으로 나누면 위에서부터 차례로 보이기 시작해 체감이 훨씬 빠릅니다.
• 브라우저의 이미지 크기 한계 — 세로가 수만 픽셀에 이르면 일부 환경에서 아예 표시되지 않습니다.

나눌 때 중요한 것은 자르는 위치입니다. 문단 한가운데나 상품 사진 한복판이 잘리면 조각 사이의 미세한 간격이 그대로 흠집처럼 보입니다. makeinfo의 분할 PNG는 블록과 블록 사이의 빈 공간을 먼저 찾아 그 지점에서 나눕니다. 자동으로 잡은 자리가 마음에 들지 않으면 절취선을 직접 옮길 수 있습니다. 자르는 자리를 고르는 기준은 긴 상세페이지 나누기에서 자세히 다룹니다.

파일 용량 줄이기

용량 제한에 걸렸을 때 폭부터 줄이는 것은 마지막 수단입니다. 그 전에 볼 것이 있습니다.

폭을 줄이는 것은 이 모두를 해보고도 모자랄 때입니다. 폭은 선명함에 직접 영향을 주기 때문입니다.

판매처별로 자주 쓰이는 값

아래는 흔히 통용되는 값입니다. 다만 각 판매처가 정책을 바꾸므로, 실제 업로드 전에는 해당 판매처의 공지나 등록 화면 안내를 반드시 확인하세요. 이 표는 작업을 시작할 때의 출발점으로만 쓰시길 권합니다.

확인하는 법 — 상품 등록 화면의 이미지 첨부란에 대개 권장 크기와 용량 제한이 작은 글씨로 적혀 있습니다. 공지사항보다 이쪽이 최신인 경우가 많습니다.

SNS로 알릴 이미지는 따로 만듭니다

상세페이지를 그대로 SNS에 올리면 대부분 잘립니다. 타임라인은 세로로 긴 이미지를 접어서 보여주고, 사람들은 접힌 것을 펴보지 않습니다.

홍보용은 한 장으로 승부가 나야 합니다. 상품 사진, 이름, 가격, 판매 기간 정도만 남기고 나머지는 덜어냅니다. 상세페이지에서 쓴 색과 서체를 그대로 가져오면 두 이미지가 한 세트로 보여서, 링크를 타고 들어온 사람이 같은 상품임을 바로 알아봅니다.

makeinfo에서는 캔버스 폭을 1080px로 바꾸고 필요한 블록만 남기면 됩니다. 상세페이지 프로젝트를 복제해 두고 덜어내는 편이, 처음부터 다시 만드는 것보다 색과 서체가 어긋날 일이 없습니다.

올리기 전 확인

• 휴대폰에서 열어봅니다. 데스크톱에서 크게 보이던 글자가 손 안에서는 읽히지 않는 일이 흔합니다. 특히 규격 표기처럼 작게 넣은 글자를 봅니다.
• 판매처가 정한 폭과 맞는지 봅니다. 등록 화면 안내에 적힌 값과 내보낸 파일의 실제 가로 화소를 대조합니다.
• 나눈 조각의 순서를 확인합니다. 파일 이름 순서대로 올려야 내용이 이어집니다.
• 작업본을 남깁니다. 올린 이미지는 결과물이라 되돌릴 수 없습니다. 나중에 가격이나 일정만 고칠 일이 반드시 생기므로, 전체 PNG(또는 사진이 많을 때 나오는 zip)를 따로 보관해 두세요.