Components/Thumbnails

Thumbnails

1.0.026 Aug, 2021
Design/ContentsCompleted
CodeCompleted
썸네일(Thumbnails)은 상품 대표 이미지로서 사이즈 및 엘리먼트(Label, Badge)를 포함합니다. 상품 이미지의 일관성을 고려해 스타일 커스텀 불가합니다.
Thumbnails

Anatomy

Anatomy
1. Overlay2. Image3. Background

Variants

Square
Square

Thumbnail 형태에서 1:1 사각형은 기본 상품에 사용합니다. 사각형의 Radius는 8로 고정해 사용하며, 일부 영역에서 밸런스에 따라 4로 조정해 사용할 수 있습니다.

엘리먼트로 좌측 상단 Label과 우측 상단 Badge를 포함합니다. 이와 관련한 자세한 쓰임새는 아래 Usage Guidelines를 참고합니다.

Circle
Circle

Thumbnail 형태에서 1:1 원형은 프로모션 상품인 딜 상품에 사용합니다. 원형의 Radius는 썸네일 높이(Height)와 동일한 값으로 고정해 사용하며, 이외 커스텀은 제한합니다.

엘리먼트로 좌측 상단 Label과 우측 상단 Badge를 포함합니다. 이와 관련한 자세한 쓰임새는 아래 Usage Guidelines를 참고합니다.

Size
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
Table of Figma Properties
PropertyValuesDefault Value
ShapeSquare, CircleSquare
SizeXlarge, 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 이하 사이즈를 사용합니다.

Thumbnail Size
360x
160x160x160x
128x128x128x
108x
104x104x104x
72x72x72x72x72x
64x
담당자구경하@kykoo

이전글
Text Fields