쇼핑 카트 UI 시스템은(는) 무엇을 하나요?
목적
쇼핑 카트 UI 시스템은 DTC(Direct-to-Consumer) 및 멀티채널 전자상거래 쇼핑 카트를 위한 접근 가능하고 전환율이 높은 시각적 및 구조적 프레임워크를 제공합니다. 상품 발견(PDP)과 결제 완료 사이의 필수적인 거래 연결 고리로서, 쇼핑 카트는 주문 업데이트, 프로모션 알림, 교차 판매, 실시간 배송 진행 상태 표시를 우아하게 처리해야 합니다.
체계적인 디자인 접근 방식은 상품 업데이트 시 예상치 못한 레이아웃 이동(CLS), 식별하기 어려운 상품 요약, 모바일에서 숨겨진 대화형 컨트롤, 접근 불가능한 수량 선택기, 결제로 가는 명확한 심리적 경로 부족과 같은 일반적인 카트 마찰 지점을 해결합니다. 이 시스템은 일관된 스타일링, 부드러운 마이크로 인터랙션, 레이아웃 탄력성, 그리고 WCAG AA 접근성 규칙의 엄격한 준수를 보장합니다.
사용 사례
- 전자상거래 및 DTC 포털: 지속적인 미니 카트와 전용 결제 검토를 활용하는 고속 소매 플랫폼.
- B2B 및 도매 카탈로그 주문: 표 형식 목록, 다중 SKU 선택기, 빠른 추가 도구를 갖춘 대량 주문 데스크.
- 서비스 및 경험 예약 엔진: 여러 날의 티켓, 예약, 렌탈 추가 상품 또는 이벤트 패스를 구성.
- 소프트웨어, SaaS 및 디지털 상품 번들러: 최종 결제 전에 라이선스, 서비스 추가 기능 및 구독 등급을 집계.
사용하지 말아야 할 경우
- 단일 상품 또는 원클릭 결제: 카트를 건너뛰고 바로 결제로 이동하는 플랫폼(예: PDP의 Apple Pay)의 경우
checkout-flow-optimization및product-detail-layout-system을 사용하세요. - 기본 상품 브라우징: 상품 카드 또는 목록 결과를 표시하려면
card-ui-system및filter-and-sort-system을 사용하세요. - 나란히 상품 비교: 서로 다른 요금제나 제품 기능을 비교하려면
comparison-matrix-system또는pricing-table-ui-system을 사용하세요. - 대량 CSV 주문: 매우 특수화된 표 형식의 관리 입력 패널의 경우
data-table-ui-system을 사용하세요.
입력
- 전자상거래 디자인 토큰: 전역 타이포그래피 척도, 브랜드 색상 팔레트(기본 CTA, 경고 빨강, 성공 초록), 유동적 간격 척도, 표면 그림자 고도.
- 제품 SKU 메타데이터: 이미지 종횡비 규칙, 제목 제약 조건, 변형 문자열(예: "색상: 오닉스 / 사이즈: L"), 단위 가격, 할인/판매 상태.
- 이행 및 로직 구성: 무료 배송 임계값, 쿠폰 코드 규칙, 배송 예상, 수량 제한.
- 교차 판매 카탈로그 데이터: 충동 구매 모듈을 채우기 위해 현재 카트 항목에 매핑된 추천.
- 모바일 뷰포트 경계: 기기 크기, 터치 탭 대상 지침, 환경 안전 영역 제약.
출력
- 슬라이딩 미니 카트 드로어(슬라이드 아웃 사이드 패널): 빠른 카트 개요 및 모바일 우선 빠른 경로 결제를 위한 컴포넌트 수준 그리드 청사진.
- 전용 카트 페이지(전체 페이지 그리드): 심층 검토를 위한 공간적 2열 레이아웃(기본 카트 목록 + 주문 요약 사이드바).
- 카트 라인 항목 행 아키텍처: 단일 행 내의 간격, 레이아웃, 대화형 수량 컨트롤 및 삭제 요소에 대한 세부 사양.
- 무료 배송 및 프로모션 진행 표시줄: 실시간 피드백 및 동적 메시지 임계값을 보여주는 공간적 레이아웃.
- A11y 라우팅 및 스크린 리더 사양: 포커스 트랩, 키보드 탭 순서, 로빙 tabindex,
aria-live알림 및 터치 대상 규칙에 대한 세부 지침.
워크플로우
1. 공간 메커니즘 정의: 미니 카트 드로어 vs. 전용 카트 페이지
최적화된 디자인은 화면 크기와 맥락에 따라 두 가지 고영향 시각적 형식을 모두 지원해야 합니다.
- 미니 카트 드로어(데스크톱 및 모바일): 오른쪽 가장자리에서 슬라이드되어 데스크톱에서는 화면 오른쪽 400px~460px를, 모바일에서는 화면의 100%를 덮습니다. 반투명 배경(
background: rgba(0,0,0,0.5)) 뒤에 기본 뷰포트를 오버레이합니다. 드로어를 세 개의 고정 영역으로 나누는 탄력적 레이아웃을 사용합니다.- 헤더(고정 높이): 카트 제목(개수 포함), 닫기 버튼(✕), 무료 배송 진행 추적기.
- 스크롤 가능한 라인 항목(Flex grow/auto scroll): 추가된 항목 목록(
overflow-y: auto;). - 푸터(고정 높이, 고정): 소계, 세금/배송 안내, 프로모션 메시지, 눈에 띄는 결제 CTA.
- 전용 카트 페이지(데스크톱 >1024px): 비대칭 2열 레이아웃 그리드를 사용합니다.
- 왼쪽 열(60~65% 차지): 카트 라인 항목의 깔끔하고 왼쪽 정렬된 표와 유사한 보기와 대량 제거 작업 및 빈 상태를 포함합니다.
- 오른쪽 열(35~40% 차지): 고정된 주문 요약 카드(
position: sticky; top: var(--header-height);)를 포함하며, 소계 계산, 예상 배송비, 쿠폰 코드 입력, 동적 결제 배지 및 기본 체크아웃 버튼을 포함합니다.
2. 카트 라인 항목 행 아키텍처 설계
카트의 각 행은 미니어처 계층 구조를 나타냅니다. CSS Flexbox 또는 Grid를 사용하여 100% 너비 컨테이너 내에서 레이아웃 흐름을 표준화합니다.
+-------------------------------------------------------------+
| [썸네일] [상품 제목] [삭제 X] |
| (64x64px) 사이즈: M / 색상: 블루 |
| |
| [-] [ 1 ] [+] [가격] |
| (수량 입력) $120.00 |
+-------------------------------------------------------------+
- 제품 썸네일:
border-radius: var(--radius-s)및object-fit: cover;와 함께 컴팩트한 고정 종횡비 컨테이너(64x64px에서 최대96x96px)를 사용하여 고정합니다. 대체 텍스트가 있어야 하지만 설명적이어야 합니다(예:alt="네이비 블루 울 재킷"). - 메타데이터 스택: 다음을 포함하는 표준 수직 레이아웃:
- 제목: 굵게, 중립-어두운 색상, PDP에 연결.
- 변형 속성: 흐린 회색, 더 작은 글꼴 크기(예:
12px/0.75rem). - 단가: 단일 항목이면 미묘하게, 수량이 1보다 많으면 강조.
- 접근 가능한 수량 선택기: 버튼이 일반 텍스트보다 더 큰지 확인하십시오. 값 입력을 평평한 시각적 테두리로 감쌉니다.
- 감소 버튼(
-), 수량 입력 상자(텍스트 또는 숫자), 증가 버튼(+). - 수량이
1이면 감소 버튼이 눈에 띄는 휴지통 삭제 아이콘으로 변환되어 클릭하면 카트에서 항목이 제거됨을 나타냅니다.
- 감소 버튼(
- 라인 가격: 행의 오른쪽 아래에 정렬합니다. 항목이 할인된 경우, 원래 가격을 밝은 회색으로 줄을 그어 활성 판매 가격(고대비 빨간색 또는 브랜드 굵게 표시) 바로 옆에 렌더링합니다.
- 삭제 버튼: 행의 오른쪽 상단에 배치합니다. 스크린 리더가 "버튼" 또는 "X"만 알리지 않도록 명시적인
aria-label="[상품명]을(를) 카트에서 제거"를 사용합니다.
3. 무료 배송 및 프로모션 진행 엔진 구축
사용자에게 이행 목표에 대한 즉각적인 피드백을 제공하여 평균 주문 가치(AOV)를 높이도록 장려합니다.
- 시각적 진행 표시줄: 둥근 끝이 있는 가로 컨테이너(
height: 8px)를 사용하고 밝은 회색으로 스타일을 지정하며, 사용자의 소계가 목표에 가까워짐에 따라 왼쪽에서 오른쪽으로 밝은 악센트 색상(예: 녹색, 파란색)으로 채워집니다. - 동적 마이크로 카피: 표시줄 위나 아래에 명확하고 행동 중심의 메시지를 작성합니다.
- 임계값 미만: "무료 배송까지 $15.00 남았습니다! [더 추가하기]"
- 임계값 초과: "🎉 축하합니다! 무료 배송이 해제되었습니다!"
- 레이아웃 위치: 미니 카트 드로어와 기본 카트 페이지의 맨 위에 진행 엔진을 배치하여 스크롤 없이 볼 수 있도록 유지합니다.
4. 체크아웃 CTA 및 주문 요약 푸터 최적화
체크아웃 앵커는 쇼핑 카트 경험의 초점입니다. 견고하고 신뢰할 수 있는 블록으로 읽혀야 합니다.
- 계산 목록: 소계, 적용된 할인(프로모션 코드 배지가 있는 녹색 텍스트(예:
SUMMER20 [x])), 예상 배송비(또는 "결제 시 계산됨"), 최종 예상 총액을 명확한 점선 또는 정렬된 그리드가 있는 키-값 목록 레이아웃을 사용하여 렌더링합니다. - 기본 체크아웃 버튼: 고대비, 전체 너비(100%), 굵은 타이포그래피. 클릭 시 명확한 로딩 표시기를 표시해야 하며(예: 레이블 텍스트 "안전한 결제"를 스피너로 변환) 이중 클릭을 방지합니다.
- 지원되는 결제 배지: 신뢰를 구축하기 위해 체크아웃 버튼 바로 아래에 흐릿한 회색조 또는 표준 색상 결제 아이콘 배지(Visa, Mastercard, Amex, PayPal, Apple Pay, Klarna)를 배치합니다.
5. 반응형 유체 레이아웃 적응 생성
쇼핑 카트는 모바일에서 많이 사용됩니다. 극도로 정밀하게 중단점을 설계하십시오.
- 미니 카트 모바일 오버레이: 뷰포트 너비
<768px에서 미니 카트가100vw에 걸쳐 있도록 강제합니다. 닫기 트리거를 크고 쉽게 탭할 수 있는 왼쪽 상단 또는 오른쪽 상단 대상에 명시적으로 배치합니다. - 카트 페이지 라인 항목 스태킹: 모바일 뷰포트에서 가로 행이 축소됩니다.
- 제품 썸네일과 제목이 나란히 배치됩니다.
- 수량 선택기와 가격이 제목 아래로 축소되며, 수량은 왼쪽 정렬, 가격은 동일한 수평 축에서 오른쪽 정렬됩니다.
- 고정 모바일 체크아웃 드로어: 모바일 카트 페이지에서
padding-bottom: env(safe-area-inset-bottom);을 활용하여 소계와 체크아웃 CTA를 브라우저 UI 요소 위에 안전하게 고정하는 하단 푸터를 구현합니다.
6. 키보드 포커스 라우팅 및 ARIA 라이브 트리거 설정
접근 불가능한 카트는 스크린 리더 및 키보드 전용 사용자가 구매를 완료하지 못하게 차단합니다.
- 미니 카트 포커스 트랩: 미니 카트 드로어가 열리면:
- 즉시 첫 번째 대화형 요소(일반적으로 닫기 버튼 또는 상단 항목 제목)로 포커스를 트리거합니다.
- 포커스 트랩을 구현하여 사용자가 배경 뒤에 숨겨진 요소로 탭 이동하는 것을 방지합니다.
- 이스케이프 키(
Esc)를 가두어 드로어를 닫습니다. 원래 카트를 연 트리거 버튼(예: 헤더 카트 아이콘)으로 포커스를 깔끔하게 되돌립니다.
- 동적 알림(
aria-live): 수량 토글, 항목 삭제 또는 쿠폰 적용은 보이지 않는aria-live="polite"요소를 통해 즉시 업데이트를 전달해야 합니다. 스크린 리더는 "오닉스 재킷 수량이 2개로 업데이트되었습니다. 소계가 240달러로 업데이트되었습니다."와 같이 알려야 합니다. - 포커스 링: 표준 브라우저 윤곽선을 피하고, 카트의 모든 대화형 컨트롤 주위에 사용자 정의된 고대비의 잘리지 않는 포커스 표시기 링을 구현합니다.
결정 규칙
전용 카트 페이지 vs. 미니 카트 드로어 트리거
| 트리거 이벤트 | 최적 UX 응답 패턴 | 설계 근거 |
|---|---|---|
| 사용자가 PDP에서 항목 추가 | 미니 카트 드로어 열기 | 장바구니 추가 성공을 확인하고 소계를 즉시 업데이트하며 즉각적인 피드백을 제공하지만 사용자가 계속 쇼핑할 수 있도록 PDP에 유지합니다. |
| 사용자가 글로벌 카트 헤더 아이콘 클릭 | 미니 카트 드로어 토글(항목 수 > 0인 경우) / 카트 페이지로 이동(선택 사항) | 새 페이지를 로드하지 않고 항목 목록을 빠르게 편집할 수 있습니다. 카탈로그가 매우 복잡한 경우(예: 수백 개의 B2B 부품) 전용 카트 페이지로 직접 이동합니다. |
| 카트가 비어 있음(0개 항목) | CTA가 있는 인라인 빈 상태 표시 | 빈 페이지를 표시하거나 드로어를 닫는 대신 3~4개의 타겟팅된 카테고리 기반 기본 쇼핑 링크와 함께 명확한 메시지(예: "카트가 현재 비어 있습니다")를 렌더링합니다. |
수량 입력 스타일 선택
| 인터페이스 스타일 | 사용 사례 적용 | 설계 근거 |
|---|---|---|
버튼 스테퍼 [-] [ 1 ] [+] | DTC, 소매, 의류, 표준 전자상거래 | 모바일에서 가장 쉬운 단일 탭 상호 작용, 입력 오류 방지, 간단한 증가. |
| 네이티브 텍스트 입력 필드 | 대량 B2B 카탈로그 주문 시트, 도매 수량 | 사용자가 150번 클릭하는 대신 큰 임의의 숫자(예: 150)를 직접 입력할 수 있습니다. |
표준 선택 드롭다운 (수량: 1) v | 고가 항목, 전자제품, 단일 수량 제한 구독 | 구매를 사전 설정된 수량 척도(예: 최대 10개)로 제한하고 처리되지 않은 대량 재고 요청을 방지합니다. |
제약 조건
- 접근성(WCAG AA 최소):
- SC 2.4.7 포커스 표시 가능: 카트 드로어는 닫기 버튼, 제목 앵커, 스테퍼 및 입력에 매우 가시적인 포커스 윤곽선을 유지해야 합니다.
- SC 2.5.8 대상 크기: 수량 증가(
+) 및 감소(-) 버튼, 삭제 휴지통, 프로모션 제거 링크의 탭 대상은 데스크톱에서 최소 24x24px, 모바일 뷰포트에서 44x44px여야 합니다. - SC 1.1.1 비텍스트 콘텐츠: 모든 이미지에는 명확한 대체 텍스트가 있어야 합니다. 빈 상태 내부의 장식용 배경은 무시되어야 합니다(
role="presentation"또는alt="").
- 누적 레이아웃 이동(CLS) 방지:
- 로딩 상태 동안 라인 항목 높이를 표준화하거나 최소 스켈레톤 상태 높이를 예약합니다.
- 동적 프로모션 계산으로 인해 체크아웃 CTA 버튼이 화면 밖으로 밀려나거나 갑자기 접히지 않아야 합니다.
- 동적 오버레이 스크롤 잠금:
- 미니 카트 드로어 오버레이를 열면 기본 본문 요소의 백그라운드 스크롤을 잠가야 합니다(
overflow: hidden;을<body>에 적용). 이는 이중 스크롤 및 점프 탐색 아티팩트를 방지합니다.
- 미니 카트 드로어 오버레이를 열면 기본 본문 요소의 백그라운드 스크롤을 잠가야 합니다(
일반적인 실패 패턴
- 유령 카트 닫기: 드로어를 닫거나 밖을 클릭하면 포커스 인덱스가 완전히 재설정되어 키보드 사용자가 기본 페이지의 맨 위로 다시 떨어지고 모든 것을 다시 탭해야 합니다.
- 난해한 삭제 대상: 휴지통 아이콘이나 "X" 삭제 트리거를 레이블이 없는 텍스트 기호로 설계하여 스크린 리더가 "버튼" 또는 "레이블이 없는 버튼"을 출력하게 하여 사용자가 카트를 정리할 수 없게 만듭니다.
- 지연 업데이트 드리프트: 로딩 스피너를 표시하지 않고
+를 클릭하고 가격이 업데이트되는 사이에 지연을 허용합니다. 사용자가+를 세 번 빠르게 클릭하면 가격이 작업보다 뒤쳐져 부정확한 총액이 발생합니다. - 차단된 모바일 키보드: 모바일 장치의 기본 키보드가 열릴 때 완전히 차단되거나 보이는 화면 밖으로 밀려나는 레이아웃 스택의 전용 카트 페이지 중앙에 쿠폰 입력을 배치합니다.