설명
쿠팡이 자리 잡게 만든 한국 모바일 이커머스 상품 카드입니다. 정사각형이나 4:5 비율 이미지의 왼쪽 위에 '로켓배송' 또는 '쿠팡' 배지가 붙고, 이미지 아래로 짧은 상품명 1~2줄과 노란 별이 함께 표시되는 별점·리뷰 수가 이어져요. 그다음 줄에는 빨간색으로 강조한 할인율과 굵은 검은색 할인가가 나오고, 회색 취소선이 그어진 원래 가격이 옆에 작게 따라옵니다. 카드 가장 아래에는 '내일(목) 도착 보장' 같은 배송 칩이 자리해요. 11번가나 G마켓, 옥션, SSG도 비슷한 변형을 씁니다. Amazon 카드와 비교하면 같은 면적에 들어가는 정보 양이 더 많아요.
🖼️ 미니어처
💬 AI에게 이렇게 말하세요
- 쿠팡식 상품 카드를 만들어 주세요. 이미지 위에 '로켓배송' 배지(파란 작은 칩, 좌상단). 이미지 아래엔 상품명 2줄까지, 별점(노란별+숫자) + 리뷰수.
- 가격 줄: 좌측 빨강 할인율(예: '23%') + 굵은 검정 할인가('19,800원') + 우측 작은 회색 취소선 원가('25,800원').
- 가장 아래에 '내일(목) 도착 보장' 같은 배송 칩 (밝은 파랑 배경 + 작은 트럭 아이콘).
한국 vs 영어권 카드의 정보 밀도 차이
Amazon은 상품명, 가격, 별점, 배송 4가지를 비교적 균등하게 보여 줘요. 한국 이커머스는 가격, 특히 할인율을 가장 위에 둡니다. 같은 그리드에 6장 카드를 놓고 비교해 보면 한국 카드가 배송 칩이나 로켓 배지처럼 정보 항목이 1~2개 더 많고, 가격은 글씨가 굵고 큽니다. AI에게 '한국 이커머스 카드'라고 시킬 때 이 위계를 함께 적어 주면 결과가 자연스러워요.
필수 6요소
- 이미지 (1:1 또는 4:5)
- 배송 배지 (로켓배송·새벽배송·당일배송)
- 상품명 (1~2줄, 말줄임)
- 별점 + 리뷰수
- 가격 (할인율·할인가·원가 취소선)
- 도착 예정 (요일 1글자)
⚡ 사용 예 (한 줄)
<div className="rounded-xl overflow-hidden"><div className="relative aspect-square"><img/><span className="absolute top-2 left-2 bg-blue-600 text-white text-[10px] px-1.5 py-0.5 rounded">로켓배송</span></div>…</div>🧩 컴포넌트 매핑
자체 ProductCard 컴포넌트로 만들어요. shadcn/ui엔 직접 매칭되는 컴포넌트가 없습니다. lucide-react Star와 Truck 아이콘을 활용하고, 가격 정렬은 Tailwind tabular-nums로 맞춥니다.
Amazon처럼 상품명을 3~4줄 길게 쓰고 가격을 작게 두면 한국 이커머스 사용자에게는 어색해요. 한국에서는 가격이 먼저 눈에 들어와야 익숙하기 때문에, 가격이 시각 위계의 1순위가 아니면 카드가 묻혀 보입니다.
가격은 tabular-nums 폰트 변형을 적용해 자릿수가 맞아야 그리드에서 카드끼리 가격이 같은 자리에 깔끔하게 떨어집니다. '내일(목) 도착'처럼 요일을 한 글자로 줄이는 표기가 한국 표준이에요. 배송 칩 색상은 쿠팡은 파랑, 11번가는 빨강, SSG는 검정, 당근은 주황 식으로 브랜드마다 갈라집니다.
별점은 시각만 아니라 aria-label로 "별점 4.8(리뷰 1,234개)"처럼 명시해요. 취소선 원가는 aria-label="정가 25,800원", 할인가는 aria-label="할인가 19,800원"으로 분리해서 announce하면 좋습니다. 배지와 할인율은 색만으로 의미를 전달하지 않도록 텍스트도 함께 명시해야 해요.