화면을 제대로 채우기

Amazon은 규칙을 말합니다. 상품이 이미지의 85 % 이상을 채워야 한다고. 그리고 기하는 말하지 않습니다. "화면의 85 %"는 면적으로도, 긴 변으로도, 경계 상자로도 합리적으로 읽히므로 해석이 중요합니다. 그리고 조심스러운 쪽으로 틀리는 것이야말로, 경쟁 상품 옆에서 내 상품을 작고 멀어 보이게 만드는 원인입니다.

여기서 85 %의 뜻

이렇게 적용합니다. 상품의 **경계 상자**가 자신의 긴 변 방향으로 화면의 85 % 이상에 이르고, 다른 변은 비율을 지키며 넘치지 않는다. 합리적인 읽기 중 가장 엄격한 것입니다. *면적*으로 85 %라고 읽으면, 상품이 한 방향으로 긴 변의 약 92 %만, 다른 방향으로는 훨씬 적게 차지해도 되게 됩니다. 그리고 마켓플레이스 자체 예시에 가장 가까운 읽기이기도 합니다. 규정이 아니라 해석이므로 채움은 고정값이 아니라 슬라이더입니다. 달리 읽는다면 옮기세요. 프리셋은 Amazon에 85 %, Etsy·Shopify·Trendyol·eBay에 90 %, 소셜 형식에 86 %를 씁니다.

여백은 규칙을 조용히 깬다

따로 다룰 값어치가 있습니다. 저희가 직접 빠졌던 함정이기 때문입니다. 화면 둘레에 넉넉한 여백을 두고 — 이를테면 한쪽 2 % — *그다음* 남은 부분의 85 %를 채우면, 상품은 실제 이미지의 약 81.6 %를 채우게 되고, 단정하려 한 도구 때문에 마켓플레이스 규칙을 놓칩니다. 그래서 여기 기본 여백은 **0**이고, 검사는 안쪽 덧댄 영역이 아니라 *화면 전체*에 대해 채움을 비교합니다. 숨 쉴 공간이 필요하면 여백을 의도적으로 열고 채움을 그만큼 올리세요.

기준: 가운데인가 바닥인가

그림자가 없을 때는 경계 상자를 가운데 두는 것이 옳습니다. 상품이 한가운데 있고 화면에 다른 것은 없습니다. 접지 그림자를 더하는 순간 가운데 정렬은 틀려 보입니다. 그림자가 상품 아래에 시각적 무게를 더해, 물체가 위로 미끄러져 나가는 듯한 구도로 읽히기 때문입니다. 대신 **바닥**에 맞추면 상품의 접점이 눈이 지면을 기대하는 자리에 놓입니다. 여기 기본값은 그림자를 켠 바닥 정렬이며, 흰색 위에 홀로 놓인 상품을 스티커가 아니라 사진처럼 보이게 하는 것이 바로 이 조합입니다.

계획은 하나, 출력은 둘

구도 계산은 그리기와 일부러 분리돼 있습니다. 순수 함수가 계획을 계산하고 — 배율, 위치, 그림자 기하 — 두 번째 단계가 그 계획을 캔버스에 그립니다. 미리보기도, 내려받는 파일도, 검증 테스트도 *같은* 계획을 씁니다. 화면에서 본 것이 파일에 그대로 들어가는 이유입니다. 어긋날 수 있는 두 번째 코드 경로가 없으니까요. 작은 설계 이야기지만 결과는 매우 실용적이며, 168가지 조합을 훑는 테스트가 당신이 내려받을 것에 대해 의미 있는 말을 할 수 있는 이유이기도 합니다.