상품 상세페이지 체크리스트: 구매를 막는 요소

Baymard·WebAIM 연구를 바탕으로 한 상품 상세페이지 체크리스트: 가격, 배송·반품, 이미지, 리뷰, 모바일 장바구니 버튼, 팝업, 검색, 키보드 사용.

FixReports 편집팀9분 분량

쇼핑객이 상품 페이지에서 구매를 멈추는 가장 흔한 이유는 총비용을 알 수 없을 때, 배송과 반품 조건을 찾을 수 없을 때, 사진과 리뷰만으로 상품을 판단할 수 없을 때, 그리고 특히 휴대전화에서 구매 버튼에 쉽게 닿거나 사용할 수 없을 때입니다. 페이지를 가리는 팝업, 찾기 어려운 정책 페이지, 간단한 질문에도 답하지 못하는 사이트 검색, 키보드로 작동하지 않는 컨트롤도 구매를 가로막습니다. 아래 수치는 다수의 사이트와 쇼핑객을 표본으로 한 Baymard Institute와 WebAIM의 업계 조사 결과로, 흔한 패턴을 설명할 뿐 특정 쇼핑몰의 결과를 예측하지는 않습니다.

핵심 요약

  • 최근 3개월 동안 온라인 쇼핑을 한 미국 성인 1,083명을 대상으로 한 Baymard의 2026년 조사에서, 40%는 배송비, 세금, 수수료 같은 추가 비용이 너무 높아 결제 단계에서 구매를 포기한 적이 있다고 답했습니다 (Baymard Institute (새 탭에서 열림)).
  • Baymard의 상품 페이지 벤치마크에 따르면 주요 전자상거래 사이트의 67%는 구매 영역 근처에 총비용 추정치를 제공하지 않으며, 44%는 주요 상품 콘텐츠에서 반품 정책을 보여 주거나 링크하지 않습니다 (Baymard Institute (새 탭에서 열림), 2026년 3월 18일 업데이트).
  • 같은 벤치마크에서 모바일 사이트의 62%는 상품 페이지 UX가 “보통(mediocre)” 이하였습니다.
  • WebAIM은 2026년 2월 상위 100만 개 홈페이지의 95.9%에서 WCAG 위반을 감지했습니다 (WebAIM (새 탭에서 열림)).
  • 매출 상위 전자상거래 사이트 33곳을 검토한 2021년 Baymard 조사에서는 45%에 키보드로 조작할 수 없는 기능이 있었습니다 (Baymard Institute (새 탭에서 열림)).

쇼핑객은 왜 구매를 포기하나요?

가장 흔한 답은 그냥 둘러보는 중이었다는 것이고, 그다음은 추가 비용, 느린 배송, 카드 정보 처리에 대한 낮은 신뢰, 강제 회원가입입니다.

Baymard의 장바구니 이탈 페이지는 50건의 연구를 바탕으로 계산한 평균 장바구니 이탈률을 70.22%로 제시합니다(페이지 최종 업데이트 2025년 9월 22일). 2026년 데이터로 표시된 이탈 이유 차트는 최근 3개월 동안 온라인 쇼핑을 한 미국 성인 1,083명을 대상으로 한 조사에서 나온 것입니다. 응답자는 이유를 여러 개 고를 수 있었습니다 (Baymard Institute (새 탭에서 열림), 2026년 10월 기준).

결제 단계에서 온라인 구매를 포기한 이유응답자 비율
그냥 둘러보는 중이었음 / 구매할 준비가 안 됨42%
추가 비용이 너무 높음(배송비, 세금, 수수료)40%
배송이 너무 느림20%
사이트에 신용카드 정보를 맡길 만큼 신뢰하지 못함19%
사이트가 회원가입을 요구함18%
결제 과정이 너무 길거나 복잡함17%
웹사이트에 오류가 있거나 다운됨17%
반품 정책이 만족스럽지 않음13%
총주문 금액을 미리 확인하거나 계산할 수 없음12%
신용카드 결제가 거절됨10%
결제 수단이 충분하지 않음9%

이는 결제 단계에 관한 미국 설문 결과이며, 운영자의 쇼핑몰을 측정한 값이 아닙니다. 이 중 여러 가지는 그보다 앞선 상품 페이지에서 시작됩니다. 쇼핑객이 가격, 배송 조건, 반품 조건을 처음 보는 곳이기 때문입니다. 어떤 이유가 내 쇼핑몰에 중요한지는 자체 분석 데이터로만 알 수 있습니다.

상품 페이지에서 전체 가격이 명확하게 보이나요?

현재 가격, 원래 가격(있는 경우), 포함되거나 포함되지 않는 항목, 배송비 추정치가 모두 구매 버튼 옆에 있어야 합니다.

Baymard의 2026년 상품 페이지 벤치마크에 따르면 사이트의 67%는 구매 영역 근처에 “총주문 금액” 추정치를 제공하지 않으며, 81%는 여러 수량이나 용량으로 판매되는 상품에 단위 가격을 표시하지 않습니다 (Baymard Institute (새 탭에서 열림)). 페이지에 다음 내용이 표시되는지 확인합니다.

  • 현재 가격, 그리고 세일 상품이라면 원래 가격
  • 여러 용량으로 판매되는 상품의 단위 가격
  • 세금이나 관세 포함 여부
  • 배송비, 또는 무료 배송이 적용되는 주문 금액

Shopify: Dawn 테마에서는 관련 설정과 배송 정책이 있으면 가격 블록에 “Taxes included.”(세금 포함) 문구와 “Shipping calculated at checkout.”(배송비는 결제 시 계산) 링크가 추가됩니다 (Dawn 소스 (새 탭에서 열림)). 정확한 안내이지만 추정치는 아니므로, 텍스트 블록에 실제 배송비나 무료 배송 기준 금액을 추가합니다.

WooCommerce: WooCommerce > Settings > Shipping(설정 > 배송)에 있는 “Enable the shipping calculator on the cart page”(장바구니 페이지에서 배송비 계산기 사용)와 “Hide shipping costs until an address is entered”(주소를 입력할 때까지 배송비 숨기기) 옵션은 장바구니와 결제 화면에 영향을 줄 뿐 상품 페이지에는 영향을 주지 않습니다 (WooCommerce 소스 (새 탭에서 열림)). 배송비는 상품 템플릿이나 간단한 설명(short description)에 넣습니다.

장바구니에 담기 전에 배송·반품 정보를 찾을 수 있나요?

구매 버튼 근처에 배송 기간, 배송비, 반품 가능 기간을 짧게 요약하고 전체 정책으로 연결되는 링크를 둡니다.

1,032명을 대상으로 한 Baymard의 Consideration & Purchase Behavior 조사에서 60%는 상품 페이지에서 반품 정책 정보를 찾는다고 답했지만, 벤치마크 대상 사이트의 44%는 주요 상품 콘텐츠에서 이를 보여 주거나 링크하지 않습니다 (Baymard Institute (새 탭에서 열림)). 앞서 살펴본 2026년 이탈 조사에서는 20%가 느린 배송을, 13%가 만족스럽지 않은 반품 정책을 이유로 꼽았습니다.

<details class="product-policy">
  <summary>Shipping and returns</summary>
  <p>Ships in 1 to 2 business days. Free shipping on orders over $75.</p>
  <p>Free returns within 30 days. <a href="{{ shop.refund_policy.url }}">Read the return policy</a></p>
</details>

Shopify: 정책은 설정 > 정책(Settings > Policies)에서 작성합니다 (Shopify 도움말 센터 (새 탭에서 열림)). Dawn에서는 상품 페이지의 Collapsible row(접을 수 있는 행) 블록에 텍스트나 페이지 내용을 표시할 수 있으므로 (Dawn 소스 (새 탭에서 열림)), 배송·반품 페이지 하나를 모든 상품에 표시할 수 있습니다.

WooCommerce: WooCommerce는 “Refund and Returns Policy”(환불 및 반품 정책) 페이지를 임시 저장 상태로 만듭니다 (WooCommerce 소스 (새 탭에서 열림)). 직접 편집해 발행하기 전까지는 공개되지 않습니다.

상품 이미지가 쇼핑객의 궁금증에 답하나요?

많은 쇼핑객이 사양보다 사진으로 크기와 핏을 판단하므로, 이미지는 상품을 여러 각도에서, 크기를 가늠할 수 있게, 실제 사용하는 모습으로 보여 줘야 합니다.

Baymard의 테스트에서 사용자의 42%는 이미지로 상품 크기를 가늠하려 했지만, 벤치마크 대상 사이트의 37%는 사람이나 익숙한 사물 옆에 상품을 놓아 크기를 보여 주는 이미지를 제공하지 않았습니다. 또 23%는 모델 착용 이미지를 제공하지 않았는데, 이는 의류, 액세서리, 화장품에서 특히 중요합니다 (Baymard Institute (새 탭에서 열림)).

색상을 선택하면 갤러리가 해당 이미지로 바뀌는지, 휴대전화에서 확대가 작동하는지, 각 이미지에 “린넨 셔츠, 뒷면”처럼 그 이미지가 보여 주는 모습을 설명하는 대체 텍스트가 있는지도 확인합니다.

리뷰를 쉽게 찾고 신뢰할 수 있나요?

상품명 근처에 평균 별점과 리뷰 수를 표시하고, 전체 리뷰로 연결하고, 부정적인 리뷰에는 답글을 답니다.

Baymard에 따르면 벤치마크 대상 사이트의 89%는 부정적인 리뷰에 답하지 않으며, 63%는 쇼핑객이 한 리뷰어의 사진에서 다른 리뷰의 사진으로 이어서 넘겨 볼 수 없게 되어 있습니다 (Baymard Institute (새 탭에서 열림)). 늦게 로드되는 리뷰 위젯은 페이지를 아래로 밀어낼 수도 있으므로 자리를 미리 확보해 둡니다.

Shopify: Dawn의 Product rating(상품 평점) 블록은 리뷰 앱의 별점을 표시하며, 테마에는 앱이 필요하다고 명시되어 있습니다 (Dawn 소스 (새 탭에서 열림)).

WooCommerce: WooCommerce > Settings > Products(설정 > 상품)의 리뷰 옵션에는 “Enable product reviews”(상품 리뷰 사용), “Show 'verified owner' label on customer reviews”(고객 리뷰에 ‘인증된 구매자’ 표시), “Reviews can only be left by 'verified owners'”(‘인증된 구매자’만 리뷰 작성 가능), “Enable star rating on reviews”(리뷰 별점 사용)가 있습니다 (WooCommerce 소스 (새 탭에서 열림)).

휴대전화에서 장바구니 버튼에 쉽게 닿고 누를 수 있나요?

휴대전화에서 쇼핑객은 헤매지 않고 가격을 보고, 옵션을 선택하고, 장바구니 담기를 탭할 수 있어야 하며, 컨트롤은 정확히 누를 수 있을 만큼 커야 합니다.

Baymard의 2026년 벤치마크에서 데스크톱 사이트의 52%, 모바일 사이트의 62%는 상품 페이지 UX가 “보통” 이하였고, 사이트의 57%는 사이즈 선택에 버튼을 쓰지 않아 사이즈가 드롭다운 안에 숨겨져 있었습니다 (Baymard Institute (새 탭에서 열림)).

실제 휴대전화로 상품 페이지를 열고 다음을 확인합니다.

  • 첫 화면. 휴대전화의 세로 배치 레이아웃에서는 갤러리가 맨 위에 오는 경우가 많아, 세로로 긴 이미지가 상품명, 가격, 버튼을 첫 화면 아래로 밀어낼 수 있습니다.
  • 고정 구매 바. 사용한다면 포커스된 요소를 가려서는 안 됩니다. W3C의 WCAG 2.2 성공 기준 2.4.11(레벨 AA) 요약은 포커스된 항목을 가리는 고정 푸터를 예로 듭니다 (W3C (새 탭에서 열림)).
  • 탭 타깃. WCAG 2.5.8(레벨 AA)은 예외를 두고 최소 24 × 24 CSS 픽셀을 정하며 (W3C (새 탭에서 열림)), Shopify의 테마 가이드는 모바일에서 최소 48 × 48픽셀을 권장합니다 (Shopify (새 탭에서 열림)).
  • 가로 스크롤. WCAG 1.4.10 Reflow는 너비 320 CSS 픽셀에서 콘텐츠가 양방향 스크롤 없이 작동하도록 요구합니다 (W3C (새 탭에서 열림)). 폭이 넓은 사이즈표와 비교표가 흔한 원인입니다.

팝업이 구매를 방해하나요?

페이지에 들어오자마자 상품 페이지를 덮는 팝업은 쇼핑객이 찾아온 정보를 가리므로, 작은 배너를 쓰고 가입 유도는 최소화합니다.

Google 검색 센터의 가이드는 방해가 되는 전면 광고(interstitial)와 대화상자를 콘텐츠를 가리는 요소로 설명하고, 전체 페이지 오버레이 대신 작은 배너를 권장합니다 (Google 검색 센터 (새 탭에서 열림)). Shopify는 팝업 콘텐츠가 레이아웃 이동을 일으킬 수도 있다고 지적합니다 (Shopify 도움말 센터 (새 탭에서 열림)). 남겨 두는 대화상자는 모두 키보드로 닫을 수 있어야 합니다. WCAG 2.1.2 No Keyboard Trap(레벨 A)은 키보드만으로 포커스가 컴포넌트를 벗어날 수 있어야 한다고 요구합니다 (W3C (새 탭에서 열림)).

쇼핑객이 신뢰 페이지와 정책 페이지를 찾을 수 있나요?

모든 페이지의 푸터에 환불, 배송, 개인정보 처리방침, 이용약관, 문의 페이지 링크를 둡니다.

Baymard의 2026년 조사에서 응답자의 19%는 사이트에 카드 정보를 맡길 만큼 신뢰하지 못해 구매를 포기한 적이 있다고 답했습니다. 명확한 정책과 연락처는 쇼핑몰이 믿을 만하다는 것을 보여 주는 기본 신호입니다.

Shopify: 설정 > 정책에서 정책을 추가하면 Shopify가 결제 화면 푸터에 자동으로 링크를 넣습니다. 쇼핑몰 화면에 표시하려면 콘텐츠 > 메뉴(Content > Menus)에서 메뉴에 추가하거나 (Shopify 도움말 센터 (새 탭에서 열림)) Dawn의 Policy links(정책 링크) 푸터 설정을 켭니다.

WooCommerce: 임시 저장된 환불 페이지를 발행한 다음, 정책 페이지와 문의 페이지를 푸터에 추가합니다.

사이트 검색으로 상품과 답을 찾을 수 있나요?

검색은 상품명, 오타, 동의어에 대해 올바른 상품을 보여 줘야 하며, “반품”이나 “배송” 같은 질문에도 답할 수 있어야 합니다.

170개가 넘는 사이트와 앱을 대상으로 한 Baymard의 2026년 검색 벤치마크는 데스크톱 경험의 46%, 모바일의 58%, 앱의 64%를 “보통” 이하로 평가했으며, 66%의 사이트에서 반품 정책을 검색하면 상품이 나오는 것처럼 상품이 아닌 검색어를 처리하는 데 문제가 있었습니다 (Baymard Institute (새 탭에서 열림), 2026년 4월 29일 업데이트).

베스트셀러 상품명, 그 상품명의 오타, 카테고리 단어, “반품”으로 쇼핑몰을 테스트해 봅니다. Shopify의 스토어 검색은 상품, 블로그 게시물, 페이지를 결과로 보여 주고, 예측 검색과 오타 허용이 기본으로 켜져 있으며, Search & Discovery 앱은 필터와 상품 부스트 기능을 더합니다 (Shopify 도움말 센터 (새 탭에서 열림)). 따라서 배송과 반품을 요약한 일반 페이지를 만들어 두면 이런 검색 결과에 나타날 수 있습니다.

키보드만으로 구매할 수 있나요?

옵션 선택부터 결제 버튼에 이르기까지 모든 단계가 키보드만으로 작동해야 하며, 포커스 표시가 눈에 보여야 합니다.

WCAG 2.2는 모든 기능이 키보드로 작동할 것(2.1.1, 레벨 A), 키보드 트랩이 없을 것(2.1.2, 레벨 A), 포커스 표시가 보일 것(2.4.7, 레벨 AA), 포커스된 항목이 다른 콘텐츠에 완전히 가려지지 않을 것(2.4.11, 레벨 AA)을 요구합니다 (W3C (새 탭에서 열림)). 이런 기본 사항이 빠져 있는 경우가 많습니다. 매출 상위 사이트 33곳을 검토한 Baymard의 2021년 조사에서 45%에는 키보드로 조작할 수 없는 기능이 있었고, 48%는 포커스 표시를 항상 보이게 유지하지 않았습니다 (Baymard Institute (새 탭에서 열림)). WebAIM의 2026년 2월 스캔에서는 홈페이지당 평균 56.1개, 쇼핑(Shopping) 카테고리 사이트는 평균 71.0개의 오류가 감지되었습니다 (WebAIM (새 탭에서 열림)).

5분이면 할 수 있는 테스트는 다음과 같습니다.

  1. 상품 페이지를 열고 마우스를 건드리지 않은 채 Tab 키를 누릅니다.
  2. 포커스가 어디에 있는지 항상 보이는지 확인합니다.
  3. 사이즈와 색상을 선택하고 수량을 변경합니다.
  4. 장바구니 담기를 누르고, 포커스가 장바구니 드로어 안으로 이동하는지, 드로어를 키보드로 닫을 수 있는지 확인합니다.
  5. 결제 버튼까지 이동합니다.
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

무료 스캔은 이런 항목 중 상당수를 약 1분 만에 확인합니다. 전환율 리포트는 가격 표시, 휴대전화에서의 장바구니 담기, 배송·반품 정보, 팝업, 푸터의 정책 링크, 검색, 키보드 구매 경로, 가로 스크롤 같은 페이지 점검 결과를 우선순위가 매겨진 권장 사항으로 정리합니다. 판매 데이터가 아닌 페이지 점검을 바탕으로 하며, 매출을 보장하지 않습니다.

자주 묻는 질문

쇼핑객이 구매를 포기하는 가장 흔한 이유는 무엇인가요?

미국 성인 1,083명을 대상으로 한 Baymard의 2026년 조사에서 가장 많은 답은 “그냥 둘러보는 중”(42%)이었습니다. 나머지 이유 중에서는 배송비, 세금, 수수료 같은 추가 비용이 40%로 가장 많았고, 느린 배송(20%)이 뒤를 이었습니다.

이런 문제를 고치면 전환율이 올라가나요?

누구도 그것을 약속할 수는 없습니다. 이 연구는 다수의 사이트와 쇼핑객에게서 흔히 나타나는 장벽을 설명할 뿐이며, 장벽을 없앴을 때 결과가 달라지는지는 상품, 가격, 트래픽에 따라 다르므로 변경할 때마다 전후를 측정해야 합니다.

배송·반품 정보는 상품 페이지의 어디에 두어야 하나요?

가격과 구매 버튼 근처에, 전체 정책으로 연결되는 링크와 함께 짧게 요약해 둡니다. Baymard 조사에서 응답자의 60%는 상품 페이지에서 반품 정책 정보를 찾는다고 답했습니다.

휴대전화에서 장바구니 버튼이 스크롤 없이 보여야 하나요?

그렇게 요구하는 규칙은 없지만, 쇼핑객이 가격을 보고 버튼에 빨리 닿을 수 있어야 합니다. 포커스된 요소나 다른 콘텐츠를 가리지 않는다면 고정 구매 바도 한 가지 방법입니다.

접근성도 전환율의 일부인가요?

네, 아주 단순한 의미에서 그렇습니다. 키보드나 스크린 리더로 옵션 선택기나 장바구니 버튼을 조작할 수 없는 쇼핑객은 구매할 수 없습니다. WCAG 2.2 레벨 AA는 이런 기본 사항을 다룹니다.

출처

전체 가이드