Thumbnails
Anatomy
Variants
Square
Thumbnail 형태에서 1:1 사각형은 기본 상품에 사용합니다. 사각형의 Radius는 8로 고정해 사용하며, 일부 영역에서 밸런스에 따라 4로 조정해 사용할 수 있습니다.
엘리먼트로 좌측 상단 Label과 우측 상단 Badge를 포함합니다. 이와 관련한 자세한 쓰임새는 아래 Usage Guidelines를 참고합니다.
Circle
Thumbnail 형태에서 1:1 원형은 프로모션 상품인 딜 상품에 사용합니다. 원형의 Radius는 썸네일 높이(Height)와 동일한 값으로 고정해 사용하며, 이외 커스텀은 제한합니다.
엘리먼트로 좌측 상단 Label과 우측 상단 Badge를 포함합니다. 이와 관련한 자세한 쓰임새는 아래 Usage Guidelines를 참고합니다.
Size
사이즈는 Large-Xxxxsmall(160, 128, 108, 104, 72, 64, 56)을 사용합니다.
가장 큰 사이즈인 Xlarge(360)은 디바이스 전체 사이즈 뷰 한정해 사용합니다. 탐색 타입은 추천형 및 검색 목적으로 Xsmall이상 사이즈를 사용됩니다. 체크 타입은 체크 확인 목적으로 Xxsmall이하 사이즈를 사용합니다. 가장 큰 사이즈인 Xlarge(360)은 디바이스 전체 사이즈 뷰 한정해 사용합니다. 탐색 타입은 추천형 및 검색 목적으로 Xsmall이상 사이즈를 사용됩니다. 확인 목적의 썸네일은 Xxsmall이하 사이즈를 사용합니다.
각 사이즈에 따라 엘리먼트(Label,Badge) 포함 여부 및 사이즈는 차이가 있으므로 자세한 내용은 Usage Guidelines를 확인합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Shape | Square, Circle | Square |
| Size | Xlarge, Large, Medium, Small, Xsmall, Xxsmall, Xxxsmall | - |
Usage Guidelines
Do : Thumbnail 좌측 상단 Label 사용
Label은 메타데이터(베스트 순위/상품군/프로모션 기간/지금 보고 있는)로 사용합니다. 위치는 좌측 상단이며, 색상은 Green-500 또는 테마 컬러를 쓰임새에 따라 사용합니다.
Do : Thumbnail 우측 상단 Badge 사용
프로모션 상품(빅스마일데이, 빅세일) 안내 시 사용합니다. Badge 사이즈는 Thumbnail 160에는 56 너비의 뱃지를 사용하고, 그외 128 이하는 42 너비 사이즈로 사용합니다.
Don’t : 로딩 및 timeout 시 커스텀 노출
로딩 및 timeout 시 로딩 가이드라인을 고려해 Background가 노출됩니다. 이외 썸네일에 임의 로고 추가 또는 색상 변경 등 커스텀은 제한합니다.
Spec
Sizes
전체 동선에서 탐색(인디고 색상) 또는 확인(그린 색상)으로 나누어진 사이즈를 참고합니다. 탐색 우선은 추천형 및 검색 목적으로 Xsmall이상, 확인 우선은 체크 확인 목적으로 Xxsmall 이하 사이즈를 사용합니다.
| Home | VIP | SRP | Cart | Checkout | MYG |
|---|---|---|---|---|---|
| 360x | |||||
| 160x | 160x | 160x | |||
| 128x | 128x | 128x | |||
| 108x | |||||
| 104x | 104x | 104x | |||
| 72x | 72x | 72x | 72x | 72x | |
| 64x |
