상품 상세페이지 스펙 표기 방법은 레이아웃 문제가 아니라 이해도 문제입니다. Baymard Institute가 상위 이커머스 사이트 344곳을 벤치마크한 결과 그중 82%가 심각한 상품 페이지 사용성 문제를 안고 있었고, 스펙 영역은 그 피해가 조용히 쌓이는 자리입니다. 스펙 표가 읽기 힘들었다고 메일을 보내는 구매자는 없습니다. 질문에 더 빨리 답해 준 상세페이지에서 그냥 살 뿐입니다.
요약하면 이렇습니다. 스펙 표와 치수를 표기한 이미지는 서로 다른 일을 하고, 팔리는 상세페이지에는 둘 다 필요합니다. 아래는 어떤 숫자를 어디에 둘지 결정하는 여섯 가지 질문이며, 조사 데이터와 수출 상세페이지에서 실제로 벌어지는 일을 근거로 답했습니다.
모든 카테고리에 통하는 정답 하나는 없습니다. 텍스트와 이미지 사이의 올바른 역할 분담이 있을 뿐이고, 성과가 나쁜 상세페이지는 거의 예외 없이 같은 방향으로 이 분담을 틀립니다.
스펙은 표에 넣어야 할까요, 이미지에 넣어야 할까요?
둘 다이며, 이 분담은 취향의 문제가 아닙니다.
스펙 표는 기계가 읽을 수 있는 텍스트입니다. 검색엔진이 색인하고, 마켓플레이스 필터가 읽고, 번역 도구가 변환하고, 스크린 리더가 읽어 주고, AI 쇼핑 어시스턴트가 추출합니다. 치수를 표기한 이미지는 이해를 돕는 장치입니다. 42cm가 문틀이나 손, 팔레트 옆에서 어떻게 보이는지를 알려 줍니다. 텍스트는 숫자를 나르고, 이미지는 그 숫자의 의미를 나릅니다.
스케일 비교 이미지란 구매자가 이미 크기를 알고 있는 기준물(사람, 문, 손, 표준 팔레트)을 함께 담은 상품 사진입니다. 그래서 크기를 계산하는 대신 그냥 읽게 됩니다. Baymard의 테스트에서 사용자의 42%는 이미지로 상품의 전체적인 크기와 규모를 가늠하려 했지만, 벤치마크 대상 사이트의 28%는 스케일 비교 이미지를 아예 제공하지 않았습니다. 네 곳 중 한 곳이 끝내 주지 않는 정보를, 그만큼 많은 구매자가 찾고 있다는 뜻입니다.
| 스펙 표 | 치수 표기 · 스케일 비교 이미지 | |
|---|---|---|
| 주된 역할 | 정확도와 비교 | 이해와 크기 감각 |
| 기계 판독 | 가능 | 불가능 |
| 번역 후에도 유지 | 유지됩니다 | 언어별로 다시 내보내야 유지됩니다 |
| "우리 공간에 들어갈까?"에 대한 답 | 느립니다 | 즉시 답합니다 |
| "공차가 정확히 얼마인가?"에 대한 답 | 가능 | 불가능 |
| 구매자가 먼저 보는 곳 | 갤러리 다음 | 갤러리 안 |
구매 결정을 좌우하는 정보라면 같은 사실에 두 가지 처리를 모두 해 주십시오. 전체 폭은 표에도 그리고 이미지에도 들어가야 합니다. 나사 피치는 표에만 넣으면 됩니다.
구매자는 어떤 스펙을 가장 먼저 확인할까요?
위에서 아래로 읽지 않습니다. 가구, 산업재, 건축자재 소싱에서 구매자는 소수의 항목만 훑어보고 그것부터 확인한 뒤에야 나머지를 읽습니다. 이 순서는 플랫폼 규정이 아니라 현장의 관행이지만, 카테고리를 가리지 않고 놀랄 만큼 일관됩니다.
| 단계 | 항목 | 먼저 확인하는 이유 |
|---|---|---|
| 1 | 전체 치수, 중량, 수용량 | 설치 가능 여부, 운임, 문의를 이어 갈지를 결정합니다 |
| 2 | 소재, 마감, 등급 | 품질 등급과 가격대를 결정합니다 |
| 3 | 호환성과 결합 규격(나사산, VESA, 타공, 개구부) | 이미 보유한 제품과 맞는지를 결정합니다 |
| 4 | 포장 정보(카톤 규격, CBM, 카톤당 수량) | 도착 원가를 결정합니다 |
| 5 | 인증, 시험 규격, 보증 | 상대방의 컴플라이언스 검토를 통과할지 결정합니다 |
다운로드용 문서를 만들 때도 같은 우선순위가 적용됩니다. 구매자가 실제로 읽는 상품 스펙 시트 만드는 법의 항목 순서는 구매자가 페이지에서 훑는 순서를 그대로 따릅니다.
스펙이 몇 개를 넘으면 구매자가 읽기를 멈출까요?
문제는 스펙이 적어서가 아닙니다. 구분 없이 한 덩어리로 쌓여 있어서입니다.
Baymard의 스펙 시트 조사는 여기에 숫자를 붙였습니다. 50%의 사이트는 스펙 시트 설계가 사용자가 훑어보기 어렵게 되어 있고, 23%는 스펙을 제목이 붙은 관련 하위 섹션으로 묶지 않으며, 핵심 스펙을 요약으로 강조하는 곳은 3%뿐이고, 23%는 훑어보기를 돕는 시각적 스타일링을 전혀 쓰지 않으며, 20%는 다단 레이아웃을 강요합니다. 여기에 더해 52%는 공급처가 준 데이터를 가공하지 않고 그대로 올려서, 같은 유형의 상품 두 개가 서로 다른 항목명과 서로 다른 단위를 달고 있습니다.
마지막 항목이 수출 상세페이지에서는 치명적입니다. 한 SKU에는 "폭 600 mm", 다음 SKU에는 "W: 23.6 in"이라고 적혀 있으면 구매자는 둘 다 신뢰하지 않게 됩니다.
효과가 큰 순서대로 대안을 정리하면 이렇습니다.
- 5~7줄짜리 핵심 스펙 요약을 맨 앞에 두십시오. 1단계 항목만 넣고 나머지는 뺍니다. 이걸 하는 사이트가 3%뿐이라 사실상 공짜로 차별화됩니다.
- 전체 표는 제목이 붙은 하위 섹션(치수, 소재, 포장, 인증)으로 묶으십시오.
- 단위 체계 하나를 기준으로 삼고, 환산값은 별도 열이 아니라 같은 칸에 넣으십시오.
- 공장 시트가 제각각이더라도 카테고리 안의 모든 SKU에서 항목명을 똑같이 유지하십시오.
치수는 상품 페이지 어디에 넣어야 할까요?
세 곳에, 이 순서로 넣습니다.
- 이미지 위에. 전체 폭, 깊이, 높이를 실제로 그 치수가 지나가는 자리에 그려 넣습니다. 대부분의 구매자가 읽는 유일한 버전입니다.
- 핵심 스펙 요약에. 같은 세 숫자를 단위까지 풀어 쓴 텍스트로 넣습니다.
- 전체 표와 구조화 데이터에. 마켓플레이스 필터와 AI 답변 엔진이 소비하는 형태입니다. 보통 비어 있는 채로 남는 필드는 상품 치수 구조화 데이터에서 확인하십시오.
1번에서 조용히 무너지는 상세페이지가 가장 많고, 이유는 대개 이견이 아니라 제작 비용입니다. 사진 위에 정확한 치수선을 손으로 그리는 일은 느리고, 특정한 방식으로 어긋납니다. 눈대중으로 그린 화살표는 실제 모서리에서 몇 밀리미터 벗어나고, 옆에 적힌 숫자는 상품과 맞지 않게 됩니다. 해법은 "사진을 더 잘 찍자"가 아닙니다. 실측한 치수를 이미지에 고정해 주는 소프트웨어입니다. 측정선을 상품 모서리에 스냅으로 붙이고, 실제 값을 한 번 입력한 뒤, 플랫폼별 이미지 규격으로 내보내는 방식입니다. 아무것도 측정하지 않고 그럴듯한 사이즈 그래픽만 만들어 주는 도구는 보기에는 설득력 있지만 틀린 숫자를 만들어 냅니다. 이건 숫자가 아예 없느니만 못합니다. 대표 이미지에 잘못된 치수가 박혀 있으면 상품 불일치 클레임이 접수되기를 기다리는 것과 같습니다.
같은 파일이 보통 카탈로그와 견적서에 함께 쓰이기 때문에, 수출 업체는 두 번 만들지 않고 상품 스펙 시트 제작 도구 결과물로 한 번에 만드는 편입니다.
스펙이 이미지 안에만 있으면 무엇이 깨질까요?
픽셀 바깥의 모든 것이 깨집니다.
- 검색과 필터. 마켓플레이스는 읽을 수 없는 숫자로는 필터링하지 못합니다. 이미지 안의 텍스트는, 노출 여부를 결정하는 바로 그 필터에게 보이지 않습니다.
- 접근성. 이미지 속 텍스트에 관한 W3C의 WCAG 지침이 존재하는 이유는, 이미지에 구워 넣은 텍스트는 크기를 조절하거나 스타일을 바꿀 수 없고 보조 기술이 안정적으로 읽어 낼 수도 없기 때문입니다.
- 번역. 11개 언어 버전은 표를 그대로 물려받습니다. 이미지는 언어마다 다시 내보내야 하고, 그래서 핵심 숫자는 반드시 텍스트로도 존재해야 합니다.
- AI 답변 엔진. 쇼핑 어시스턴트가 상품을 요약할 때 읽는 것은 텍스트입니다. 픽셀로만 존재하는 스펙은 그 답변에 들어가지 못합니다.
- 썸네일. 전체 화면 기준으로 맞춘 글자 크기는 갤러리 썸네일에서 사라집니다. 타일 크기에서 표기가 살아남는지는 상품 이미지 텍스트 크기 규칙이 결정합니다.
여기서 따라 나오는 원칙은 이렇습니다. 구매자가 필터링하거나 비교하거나 견적에 옮겨 적을 수 있는 숫자는, 이미지에도 그려 넣더라도 페이지 어딘가에 반드시 텍스트로 존재해야 합니다.
모바일에서는 달라지는 게 있을까요?
순서가 달라집니다. 휴대폰에서의 상품 상세페이지 스펙 표기 방법은 갤러리가 결정합니다. 모바일에서는 갤러리가 곧 페이지이고, 스펙 표는 한참 스크롤해야 나오거나 탭 하나 뒤에 숨어 있기 때문입니다.
여기서 중요한 Baymard 조사 결과는 두 가지입니다. 이커머스 사이트의 25%는 상품 이미지의 해상도나 확대 수준이 충분하지 않고, 모바일 사이트의 76%는 추가 상품 이미지에 썸네일을 쓰지 않아 구매자가 치수 이미지가 있다는 사실 자체를 알 수 없습니다. 둘을 합치면 흔한 실패 장면이 그려집니다. 판매자는 좋은 치수 도면을 만들었는데, 휴대폰에서는 아무도 그걸 찾지 못했거나 읽지 못한 것입니다.
실무적으로는 이렇게 됩니다.
- 치수 이미지는 갤러리 2번이나 3번 자리에 두십시오. 7번이 아닙니다.
- 표기는 타일 크기의 첫 화면에서도 살아남도록 설계하고, 확대했을 때 세부 정보로 보상하십시오.
- 핵심 스펙 요약은 모바일에서 첫 화면 안에 두십시오. 리뷰 블록 아래가 아닙니다.
상품 상세페이지 스펙 표기 방법: 10줄 점검표
카탈로그 전체에 바꾼 내용을 적용하기 전에 상세페이지 하나로 돌려 보십시오.
- 갤러리에 익숙한 기준물이 함께 담긴 스케일 비교 이미지가 최소 한 장 있다
- 전체 치수가 이미지, 요약, 전체 표 세 곳 모두에 나온다
- 핵심 스펙 요약이 5~7줄이고 전체 표보다 위에 있다
- 전체 표가 제목이 붙은 하위 섹션으로 묶여 있다
- 카테고리 안의 모든 SKU에서 항목명과 단위가 동일하다
- 기준 단위와 환산값이 같은 칸에 들어 있다
- 픽셀로만 존재하는 핵심 숫자가 없다
- 치수 이미지가 갤러리 2번이나 3번 자리에 있다
- 표기가 썸네일 크기에서도 읽힌다
- 구조화 데이터에 폭, 높이, 깊이, 중량이 들어 있다
한눈에 보는 정리
| 구매자의 질문 | 답이 있어야 할 자리 | 형식 |
|---|---|---|
| 실제로 얼마나 큰가? | 갤러리 이미지, 2~3번 자리 | 치수선을 그린 스케일 비교 사진 |
| 우리 공간에 들어가나? | 이미지 + 핵심 스펙 요약 | 전체 가로 x 세로 x 높이 표기 |
| 무엇으로 만들었나? | 핵심 스펙 요약 | 텍스트 한 줄 |
| 지금 쓰는 제품과 맞나? | 전체 표, 호환성 섹션 | 텍스트와 공차 |
| 카톤 하나 보내는 물류비는? | 전체 표, 포장 섹션 | 텍스트, 카톤 규격과 CBM |
| 우리 시장 인증을 받았나? | 전체 표, 인증 섹션 | 로고가 아니라 규격 번호 |
자주 묻는 질문
스펙은 표에 넣어야 하나요, 상세 설명에 넣어야 하나요?
표입니다. 서술형 설명은 숫자를 문장 안에 숨기기 때문에 훑어보기 느리고, 필터와 AI 어시스턴트가 추출하기도 어렵습니다. 설명에는 맥락(활용 사례, 마감 옵션, 리드타임)만 남기고, 측정 가능한 사실은 전부 묶음 표로 옮기십시오.
치수는 상품 상세페이지 어디에 나와야 하나요?
먼저 이미지에, 그다음 5~7줄짜리 핵심 스펙 요약에, 마지막으로 전체 스펙 표와 구조화 데이터에 넣습니다. 구매자는 이미지를 읽고 기계는 텍스트를 읽습니다. 전환도 되고 검색에도 걸리려면 둘 다 필요합니다.
상세페이지에 스펙을 몇 개나 보여 줘야 하나요?
전부 보여 주되 한꺼번에 보여 주지는 마십시오. 구매를 결정짓는 5~7개 항목을 앞에 두고, 그 아래에 묶음 표로 전체를 제공하십시오. 핵심 스펙 요약을 쓰는 사이트는 3%뿐이라고 Baymard가 밝혔는데, 그래서 그렇게 한 페이지가 눈에 띄게 읽기 편하게 느껴집니다.
구매자가 모바일에서 스펙 시트를 정말 읽나요?
모바일에서는 갤러리를, 데스크톱에서는 표를 읽습니다. 그래서 핵심 치수는 양쪽 모두에 있어야 합니다. 모바일 사이트의 76%가 추가 이미지 썸네일을 보여 주지 못하는 상황에서, 갤러리 7번 자리에 묻힌 치수 도면은 휴대폰에서 사실상 없는 것과 같습니다.
스펙을 전부 상품 이미지에 넣으면 안 되나요?
안 됩니다. 이미지에 구워 넣은 텍스트는 필터링도, 번역도, 크기 조절도, 보조 기술 판독도 되지 않고 썸네일 크기에서는 사라집니다. 설치 가능 여부를 좌우하는 두세 개 숫자만 이미지에 그리고, 모든 숫자는 텍스트로도 유지하십시오. 정확한 치수선을 그리는 일이 병목이라면, 그건 이미지를 포기할 문제가 아니라 실측 기반 표기로 풀어야 할 제작 문제입니다.
출처 및 참고 자료
- Baymard Institute — 상품 페이지 사용성: 상위 344개 사이트 벤치마크에서 82%가 심각한 UX 문제
- Baymard Institute — 상품 스펙 시트: 50%가 훑어보기 설계에 실패, 그룹화·요약·스타일링·다단 레이아웃 조사 결과 포함
- Baymard Institute — 스케일 비교 이미지를 최소 한 장 제공하라: 28%는 제공하지 않고, 사용자 42%는 이미지로 크기를 가늠
- W3C — WCAG 성공 기준 1.4.5 이미지 속 텍스트 이해하기
- Schema.org — Product: 구조화된 상품 데이터를 위한 width, height, depth, weight 속성
- GS1 — 모바일 대응 히어로 이미지 표준: 타일 크기에서의 상품 정보 가독성
