전자상거래 UI 디자인

전자상거래 UI의 목표

쇼핑몰 UI의 목표는 쇼핑을 방해하지 않는 것이다. 대부분의 구매자는 같은 길을 걷는다.

flowchart LR
  home["홈·카테고리 진입"] --> explore["탐색(메뉴·필터·검색)"]
  explore --> pdp["상품 페이지 검토"]
  pdp --> cart["옵션 선택·장바구니"]
  cart --> pay["결제"]

관련 상품 보기, 위시리스트 저장 같은 샛길도 있지만 이 주 경로가 가장 많이 쓰인다. 이 경로의 UI에 마찰이 있으면 샛길로 빠지는 것을 넘어 사이트를 떠난다. 그래서 주 경로의 세 구간(탐색, 상품 정보, 옵션 선택)에 집중한다.

요소	원칙
메인 메뉴	깊은 메가 메뉴 대신 상위 카테고리 아래 한 단계로 정리한다. 신상품·세일·시즌 카테고리처럼 지금 중요한 것만 색이나 이미지로 강조하고, 강조는 아낀다
모바일 메뉴	데스크톱 메뉴를 축소하지 않고 모바일에 맞게 다시 짠다. 탭이 몇 번 늘어도 깊이가 얕으면 괜찮다
필터·정렬	재고가 많으면 상품 목록에 필터(사양으로 좁히기)와 정렬(우선순위로 줄 세우기)을 둔다. 결과 위에 가로로 두면 공간을 아끼고, 기기마다 같은 방식으로 보여 준다
브레드크럼	하위 카테고리가 깊은 사이트에서 상품 페이지의 현재 위치와 되돌아갈 길을 보여 준다
검색	여정 어디서든 항상 보이게 둔다. 입력 중에 검색어 제안과 상위 상품을 함께 보여 주면 찾는 시간이 준다

구매자가 필요한 정보를 찾아 헤맬수록 다른 상점으로 갈 확률이 오른다. 특히 배송비 같은 추가 비용을 결제 직전에야 알리는 것은 장바구니 이탈의 대표 원인이다. 구매자는 반품·환불 정책, 결제 수단, 매장 픽업 여부도 미리 알고 싶어 한다.

모든 걸 첫 화면에 넣을 순 없지만 첫 화면만으로 팔 수 있어야 한다.

첫 화면에 둘 것	나머지
상품명, 가격, 필수 옵션, 장바구니·위시리스트 버튼, 배송·반품 한 줄 요약	아코디언으로 접고, 리뷰·사이즈 표는 페이지 아래로 가는 링크를 위쪽에 둔다

데스크톱은 이미지 갤러리를 왼쪽에, 요약 정보를 오른쪽에 둔다. 모바일은 이미지가 위, 요약이 아래다.
할인 팝업, 채팅, 적립 위젯은 작게, 클릭할 때만 열리게 한다. 반품 정책 같은 사이트 공통 정보는 상단 고정 바로 빼서 상품 정보에 집중하게 한다.

색 12가지를 드롭다운에 넣으면 색 이름만 보고 골라야 하고, 고를 때마다 사진이 바뀌길 기다려야 한다. 옵션마다 맞는 형태가 있다.

옵션	맞는 UI	이유
색	한 줄 색상 칩. 누르면 이름이 나오고 사진이 바뀐다	색은 보는 것이 가장 빠르다
의류 사이즈	XS~XL 버튼 나열 + 사이즈 표 링크	짧은 약어라 버튼에 맞고, 상점마다 기준이 달라 표가 필요하다
색과 사이즈를 함께	사이즈는 빈 사각형, 색은 채운 원처럼 모양을 달리한다	필수 옵션을 빠뜨리지 않게 구분한다
이름이 길거나 가격이 다른 옵션 (매트리스 크기 등)	드롭다운, 항목에 가격·할인가 함께 표시	버튼으로 나열하면 크기가 들쭉날쭉하고, 좁은 공간에 정보를 더 담는다

품절은 선택 전에 보여 준다. 품절 사이즈를 흐리게 하거나 줄을 그어 둔다. 모든 옵션을 고른 뒤에야 품절을 알리면 이미 마음을 정한 구매자를 실망시킨다. 색이나 흐림만으로 품절을 표시하지 않고 텍스트나 선을 함께 쓴다(색과 움직임의 접근성).

슬라이더는 범위 안에서 값을 고르게 할 때 직관적이고 공간을 적게 차지한다. 하지만 잘못 만들기도 쉽다.

구분	종류	맞는 경우
값 개수	싱글 / 듀얼	값 하나 / 범위(최소~최대)
움직임	연속형(continuous) / 분할형(discrete)	온도처럼 정확한 값이 의미 없는 연속량 / 신발 사이즈처럼 정해진 값

슬라이더의 흔한 문제와 해결책:

터치로 정밀하게 맞추기 어렵다. 손가락은 굵고, 화면이 클수록 긴 트랙을 정확히 조절하기 더 어렵다. 1원 단위 연속 슬라이더 대신 몇 단계로 나눈 분할형을 쓴다. 가격 1센트 차이로 구매를 망설이는 사람은 없다.
임의의 범위를 보여 준다. "0원~~무제한" 대신 실제 재고의 최저가~~최고가를 보여 준다.
손가락이 숫자를 가린다. 조절하는 동안 현재 값을 핸들 위, 손가락에 가리지 않는 곳에 띄운다.
결과 0건이 나온다. 재고가 특정 가격대에 몰려 있으면 균등 간격 슬라이더로 빈 구간을 고르기 쉽다. 두 가지 해결책이 있다.

해결책	방법
막대그래프 슬라이더	슬라이더 위에 구간별 재고량을 막대그래프로 보여 준다. 빈 구간을 실수로 고르지 않는다
재고 기반 분할	구간 간격을 가격이 아니라 재고 수로 균등하게 나눈다(100개를 5구간이면 20개씩). 어느 구간을 골라도 결과가 있다

균등 가격 구간:  $0 ── $20 ── $40 ── $60 ── $80 ── $100   (재고가 $62~65에 몰려 있으면 대부분 0건)
재고 기반 구간:  $12 ── $48 ── $61 ── $63 ── $65 ── $98   (각 구간 재고 20개씩)

태블릿에서는 슬라이더를 화면 정중앙보다 엄지가 닿는 가장자리 쪽에 두는 편이 조작하기 쉽다.

구매 결정에는 상품 사진과 색, 전체 디자인의 신뢰감이 크게 작용한다. 내비게이션이 불편하고 디자인이 조악하면 다시 오지 않는다. 느린 페이지도 구매를 포기하게 한다.

색의 연상(파랑은 신뢰, 빨강은 긴급함과 세일, 검정은 고급스러움)은 마케팅에서 자주 쓰이지만 문화와 맥락에 따라 다르고 근거가 약한 통계가 많다. 색 하나가 전환율을 정한다고 믿기보다 브랜드 일관성, 버튼과 배경의 대비, A/B 테스트로 확인한다.