홈페이지, 탐색, 카테고리, 검색, 제품 페이지와 모바일까지 쇼핑 여정별 전자상거래 디자인 원칙과 포함할 내용, 피해야 할 실수를 안내합니다.
고객의 사고방식에 맞는 명확한 탐색, 빠른 페이지, 확대 가능한 큰 제품 사진, 장바구니 추가 버튼 근처의 가격과 배송 정보, 눈에 띄는 후기, 작동하는 사이트 검색, 비회원 구매가 가능한 짧은 결제가 중요합니다. 대부분의 탐색이 휴대전화에서 이뤄지므로 모바일부터 디자인하세요.
페이지를 끝없이 넘기지 않고 비교할 수 있을 만큼 표시하세요. 많은 스토어는 페이지당 24~48개를 보여 주거나 더 보기 버튼을 사용합니다. 크기, 색상, 가격, 재고 같은 고객의 선택 기준에 맞는 필터가 더 중요합니다.
제품명, 대표 이미지, 가격, 주요 옵션(크기, 색상), 재고 상태, 장바구니 추가 버튼, 배송비 또는 배송 시간 안내가 있어야 합니다. 후기가 있다면 별점과 후기 수도 보여 주세요.
대체로 필요하지 않습니다. 자동으로 바뀌는 슬라이더는 무시되기 쉽고 접근성과 로딩 속도에 해를 줄 수 있습니다. 명확한 메시지 하나와 주요 카테고리 링크가 있는 대표 이미지 하나가 대체로 더 효과적입니다.
좋은 전자상거래 웹 디자인은 고객이 세 가지를 빠르게 하도록 돕습니다. 적절한 제품 찾기, 구매할 만큼 신뢰하기, 마찰 없이 결제하기입니다. 실제로는 고객의 사고방식에 맞는 탐색, 빠른 모바일 페이지, 큰 제품 사진, 일찍 보여 주는 가격과 배송 정보, 눈에 띄는 후기, 짧은 결제가 필요합니다.
일반 원칙을 나열하기보다 페이지마다 고객의 질문이 달라지므로 페이지별로 살펴보겠습니다.
홈페이지는 무엇을 누구에게 판매하는지 몇 초 안에 알려야 합니다.
포함할 항목:
피할 항목: 자동으로 바뀌는 캐러셀, 페이지가 로드되기도 전에 뜨는 팝업, 모바일 첫 화면을 늦추는 대표 동영상.
대부분의 제품 비교가 이뤄지는 페이지입니다.
| 요소 | 모범 사례 |
|---|---|
| 제품 카드 | 모든 제품에서 같은 이미지 비율, 이름, 가격, 평점, 마우스를 올리면 두 번째 사진 표시 |
| 필터 | 실제 선택 기준인 크기, 색상, 가격, 소재, 재고 여부에 맞추고 결과 수 표시 |
| 정렬 | 기본값은 “추천” 또는 “인기 상품”, 가격과 최신순 제공 |
| 재고 | 품절 상품은 숨기거나 품절임을 명확히 표시 |
| 페이지 이동 | 더 보기 또는 페이지 번호 사용, 뒤로 갔을 때 필터 상태 유지 |
| 모바일 | “34개 결과 보기” 버튼이 있는 아래에서 올라오는 패널에 필터 표시 |
흔한 문제는 상품을 열었다가 돌아오면 필터가 초기화되는 것입니다. 브라우저 뒤로 가기를 테스트하세요.
검색하는 고객은 구매 의도가 높으므로 검색창 성능이 약하면 직접 매출이 줄어듭니다.
제품 페이지가 판매를 맡습니다. 위에서 아래로 살펴보세요.
사양보다 고객에게 제공하는 가치를 먼저 설명하세요. 크기, 소재, 관리 방법은 짧은 사양 표로 정리합니다. 사이즈 안내는 고객을 다른 페이지로 보내지 말고 같은 페이지 패널에서 여세요.
이름, 이미지, 가격, 재고, 후기를 포함한 Product 구조화 데이터를 추가하면 검색 결과에 가격과 평점이 표시될 수 있습니다.
결제 화면 디자인은 별도 분야입니다. 핵심은 총비용을 미리 보여 주고, 비회원 결제를 허용하고, 양식을 줄이며, Apple Pay 및 Google Pay 같은 빠른 결제를 제공하는 것입니다. 자세한 내용은 결제 최적화 안내를 참고하세요.
디자인은 결제 버튼에서 끝나지 않습니다. 거의 모든 구매자가 주문 확인 페이지와 이메일을 꼼꼼히 봅니다.
스토어 방문은 대부분 휴대전화에서 이루어지므로 모바일 레이아웃을 먼저 디자인하고 테스트한 뒤 데스크톱으로 확장하세요.
둘 다 기술 작업만이 아니라 디자인 결정입니다.
속도: 이미지를 압축해 WebP 또는 AVIF로 제공하고 이미지 크기를 지정해 레이아웃이 움직이지 않게 하며 타사 앱과 스크립트를 제한하고 Google PageSpeed Insights에서 Core Web Vitals를 확인하세요.
접근성: WCAG 2.2 AA에 맞는 색상 대비, 제품 이미지 대체 텍스트, 레이블이 있는 양식, 키보드로 접근 가능한 메뉴와 필터, 문제를 설명하는 오류 메시지를 갖추세요. 접근성이 좋으면 누구나 더 쉽게 사용하며 많은 지역에서 법적 기대 사항이기도 합니다.
처음부터 시작한다면 결정 부담을 줄이는 좋은 레이아웃에서 출발하세요. 스토어 디자인은 템플릿을 둘러보거나 채팅에서 We.Inc에 매장을 설명하면 제품 페이지, 장바구니, 결제가 포함된 온라인 스토어를 만듭니다. 이후 시각 편집기나 코드에서 다듬을 수 있고 호스팅과 SSL도 포함됩니다.
무료로 시작하기 · 신용카드 필요 없음