Item Cards
Components
Item cards는 쓰임새에 따라 Gallery Item Cards, List Item Cards 2가지로 분류합니다. Gallery Item Cards는 상품 이미지에 집중이 필요할 경우, List Item Cards는 상품 정보에 집중이 필요한 경우 조합해 사용합니다.
- A
- B
Gallery Item Cards
Gallery Item Cards는 가장 기본적인 Item cards로 카테고리 및 쓰임새에 따라 세부 속성을 변경해 사용합니다. 세부 속성에 관한 자세한 내용은 Variants와 Table of Figma Properties를 참고합니다.
Anatomy
Variants
Basic
Basic은 상품에 관한 정보를 집약한 Item cards입니다. 해당 아이템 카드는 상품이 지닌 정보에 따라 노출 / 미노출로 리스팅됩니다.
Subscription
Subscription은 가입상품에 관한 정보를 집약한 Item cards입니다. Basic과 달리 상품 가격을 대체해 ‘가입상품’을 결합해 사용합니다.
Phone
Phone은 가입상품 중 휴대폰에 관한 정보를 집약한 Item cards입니다. Basic과 달리 상품 가격의 상단 ‘할부원금’이라는 텍스트를 결합해 사용합니다.
Rental
Rental은 가입상품 중 렌탈상품에 관한 정보를 집약한 Item cards입니다. Basic과 달리 상품 가격 좌측 ‘월’과 하단 ‘의무약정 개월 수’이라는 텍스트를 결합해 사용합니다.
Size
썸네일의 사이즈에 따라 Large, Medium, Small로 분류합니다. Large와 Medium은 썸네일의 사이즈 차이만 있고 Small은 썸네일 사이즈, 가격 폰트 사이즈에 차이가 있습니다.
Large 사이즈는 180 x 180을 사용하며, Medium은 128 x 128, Small은 104 x 104를 사용합니다. 사이즈에 따른 쓰임새를 확인하려면 컴포넌트 Thumbnail 가이드를 통해 확인할 수 있습니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Category | Basic, Call, Phone, Rental | Basic |
| Size | Large, Medium, Small | Large |
Behaviors
일시품절
재고 부족으로 인한 일시품절 케이스는 가격 위치에 ‘SOLD OUT’ 대문자로 대체해 사용합니다. 폰트는 Gmarket Sans, Bold로 색상은 gray-500를 사용합니다. 이외 선택적으로 썸네일의 투명도를 50%로 조정해 사용합니다. 이외 도메인에 따라 일시품절 노출 여부는 상이하므로, 해당 케이스를 고려 여부에 관해서는 각 담당자와 커뮤니케이션합니다.
Usage Guidelines
Do : 공식 브랜드 노출시 Blue-800을 사용
오픈마켓 특성상 수많은 상품 중 공식 브랜드사의 상품을 빠르게 찾기 위해 공식 브랜드 및 분류 정보는 Blue-800 컬러를 사용해 노출합니다.
Do : 상품명 최대 2줄, 이후 줄임표 사용
상품명은 최소 1줄에서 최대 2줄로 제한해 사용합니다. 2줄 이후 텍스트에 관해서는 줄임표 ‘...’로 사용합니다.
Do : 할인 전 가격, 취소선 ‘Strikethrough’ 사용
할인 전 가격은 텍스트 내 취소 선(Strikethrough)을 사용합니다. 일관성을 고려해 도형 선을 사용하지 않고, 텍스트 스타일 내 밑줄 선(Strikethrough)을 사용하는 부분을 참고합니다.
Don’t : Item Info 내 요소 삭제
Item Info 내 썸네일, 상품명, 가격은 필수 정보로 생략 불가합니다. 이외 실제 상품 DB에 따라 Additional Info, Listing Info는 노출 또는 미노출로 선택 사용 가능합니다.
