Labels
Components
Label은 사용자가 상품을 쉽게 선택할 수 있도록 도와주는 요소입니다. 일반적인 정보분류는 Basic label을 사용합니다. AD label은 외부 광고임을 표기해줘야 할 경우 노출해 광고임을 명확히 표기합니다. Nudging label의 경우 사용자가 상품을 선택하는 데 있어서 구매 욕구를 높이기 위한 Label로써 쿠폰 / 사은품 / 카드사 할인 Nudging label이 있습니다.
- A
- B
- C
Basic Label
Basic label은 메타데이터를 활용한 상품 또는 카테고리에서 특정 속성을 강조하기 위해 사용됩니다.
Anatomy
Spec
![[Item card] Position & Spacing](/_next/static/images/spec-1-2fd7432739af579df1e79d0f45e60e16.svg)
[Item card] Position & Spacing
아이템 카드 내에 Basic label 노출 시 메타 데이터가 가격 및 상품명보다 우선하는 정보 순위이기에 가격 & 상품명에 앞서 위치합니다. 일반적으로 좌측 정렬이며 상세페이지의 경우 가격의 단위가 클 경우 줄 바꿈 할 수 있습니다.
Basic label과 이외 정보(가격, 상품명 등) 패딩값은 4입니다.
![[List] Position & Spacing](/_next/static/images/spec-2-9f2042625f5c98978e2199b6b3784144.svg)
[List] Position & Spacing
하나의 영역에 하나의 정보(아이템)만 노출되는 아이템 카드와는 다르게 리스트에 적용될 경우, 다른 정보들과의 정렬을 맞추기 위해 Basic label은 레이블 우측에 위치합니다.
리스트 내에 사용될 경우 레이블과 Basic label 패딩값은 4입니다.
AD Label
AD Label은 광고 표시로, 내부에서 자체적으로 큐레이션 하는 상품이 아닌 외부 광고 집행으로 인해 노출될 때 보여줍니다. 소비자의 폭넓은 선택권을 위해 광고 집행 시 무조건 영역 내 노출해야 합니다.
Anatomy
Usage Guidelines
Do : AD Label은 모듈 상/하단에 명확히 표기
광고 영역의 경우 고객의 알 권리를 위해 모듈 상/하단에 광고 표시를 명확히 해야 합니다.
Do : AD Label은 모듈 상/하단에 명확히 표기
광고 영역의 경우 고객의 알 권리를 위해 모듈 상/하단에 광고 표시를 명확히 해야 합니다.
Do : 검색 결과 페이지에서는 광고 Label로 노출
사용자가 직접 찾고자 하는 상품 검색 결과 페이지에 광고를 우선 노출할 경우에는 이 영역이 광고임을 명확히 하기 위해 광고 Label로 변경 노출합니다.
Don’t : 검색 결과 페이지에서 AD Label로 노출
사용자가 직접 찾고자 하는 상품 검색 결과 페이지에 광고를 우선 노출할 경우에는 이 영역이 광고임을 명확히 하기 위해 광고 Label로 변경 노출합니다.
Spec
Spacing (On the top)
heading과 함께 사용 시 타이틀과 중앙정렬을 맞추며, GDS의 기본 원칙인 좌우 16 마진을 두고 배치합니다.
Spacing (On the bottom)
모듈 하단에 배치 시 우측 하단에 배치합니다. 간격은 GDS의 기본 원칙인 좌/우16 마진, 하단 24 마진을 두고 배치합니다.
Nudging Label
Nudging Label은 혜택을 보여주는 요소로써 활용합니다. 3 타입이 있으며, 타입별 사용되는 아이콘이 상이하니 주의하여 사용하시기 바랍니다.
Anatomy
Variants
Coupon Label
Coupon Label은 판매자&내부에서 제공되는 쿠폰 혜택이 있을 때 노출됩니다. 정률 쿠폰과 정액 쿠폰이 있는데, 정률&정액은 모두 숫자로만 노출하며 쿠폰 레이블 좌측에 작성합니다.
Card Label
Card Label은 카드사에서 제공되는 혜택이 있을 때 노출됩니다. 정률 쿠폰을 기본으로 사용하되 정액 쿠폰으로 노출 시 금액은 카드 레이블 우측에 작성합니다.
Gift Label
Gift Label은 판매자 측에서 제공하는 혜택이 있을 때 노출됩니다. 현재 고정된 레이블 외에 커스터마이징은 불가합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Type | Coupon, Card, Gift | Coupon |
Usage Guidelines
Do : 주문서와 마이 페이지에서 Nudging Label 사용시 gift Label만 노출
사은품 외의 정보는 기 동선에서 소구 되기 때문에 gift Label만 노출합니다. 추가로 *마이 페이지에서 주문내역 및 상세내역에 사은품 정보를 꼭 표기합니다.
Don’t : 주문서와 마이 페이지에서 Nudging Label 사용시 gift Label외 미노출
사은품 외의 정보는 기 동선에서 소구 되기 때문에 gift Label만 노출합니다. 추가로 *마이 페이지에서 주문내역 및 상세내역에 사은품 정보를 꼭 표기합니다.
Do : 상세 페이지에만 한정하여 판매자 Nudging Label 사용 가능
판매자 정보는 부가 정보로써 상품 및 판매자의 상세정보를 가장 많이 포함한 상세 페이지에서만 사용 가능합니다.
Don’t : 그 외에는 제한
판매자 정보는 부가 정보로써 상품 및 판매자의 상세정보를 가장 많이 포함한 상세 페이지에서만 사용 가능합니다.
Spec
Size
좌우 8의 패딩을 사용하며, 내부에 아이콘과 텍스트는 패딩값 없이 노출합니다.
Spacing (Row)
수평 배치시 2의 패딩값을 갖습니다.
Spacing (Columns)
수직 배치시 4의 패딩값을 갖습니다.
