Banner
Components
배너는 크게 4가지로 이미지의 사이즈와 사용처에 따라 분류됩니다.
- A
- B
- C
- D
Thumbnail Banner
Thumbnail Banner는 배너 타이틀 내용과 관련된 이미지를 메인으로 사용하여 배너 내용을 전달합니다. Logo와 Subtitle은 선택 적용됩니다.
Anatomy
Variants
Title
타이틀은 Title과 기간을 나타내는 Subtitle로 구성되어 있습니다. Title의 글자 수에 따라 선택 적용합니다.
Logo
Thumbnail Banner의 마케팅 내용에 따라 Logo · 캐치를 적용합니다. 캐치 사용 시, Subtitle 영역에 기한을 필수 명시합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Title | 1 Line, 2 Lines | 2 Lines |
| Logo | True, False | True |
Spec
Text Byte
Title의 최대 글자 수는 줄 당 11자로 제한되며 최대 두 줄까지 사용됩니다. Subtitle의 최대 글자 수는 19로 제한합니다.
Button Color
Icon Button은 Title Text와 동일한 컬러를 적용합니다.
Spacing
Title · Subtitle ·Logo는 이미지 좌측으로부터 간격 8을 두고 배치됩니다. Logo는 좌측과 하단으로부터 패딩 2를 두고 배치되며, 최대 너비는 124입니다. Icon Button은 이미지의 우측으로부터 간격 8을 두고 배치합니다.
Tappable area
Icon Button과 Button을 포함한 배너 전체를 탭이 가능한 영역으로 간주합니다. 해당 영역 터치 시 링크로 화면이 전환됩니다.
AD Banner
AD Banner는 상품의 이미지를 메인으로 사용합니다.
Anatomy
Spec
Text Byte
Title의 최대 글자 수는 12자로 제한합니다. Subtitle의 최대 글자 수는 19자로 제한합니다.
Tappable area
스와이프, 스크롤이 가능한 이미지 영역을 포함한 배너 전체를 탭이 가능한 영역으로 간주합니다. Number Indicator가 있는 경우 버튼으로 간주하여 탭 영역에 포함합니다. 해당 영역 터치 시 링크로 화면이 전환됩니다.
Full Image Banner
Full Image Banner는 프로모션 정보 전달을 목적으로 홈의 기획전에 주로 사용합니다. Divider와 Card 템플릿으로 분절되는 케이스에 모두 사용됩니다.
Anatomy
Spec
Text Byte
Title의 최대 글자 수는 줄 당 11자로 제한됩니다.
Button Color
Icon Button은 Title Text와 동일한 컬러를 적용합니다.
Tappable area
Icon Button과 Button을 포함한 배너 전체를 탭이 가능한 영역으로 간주합니다. 해당 영역 터치 시 링크로 화면이 전환됩니다.
Image Banner
Image Banner는 프로모션 정보 전달을 목적으로 상품 상세 페이지, 검색 결과 페이지에 주로 사용합니다.
Anatomy
Variants
Width
Image Banner는 페이지의 템플릿이 분절되는 케이스에 따라 Max와 Card를 선택 적용합니다. Divider로 템플릿을 분절하는 케이스는 Max를 적용합니다. Card 템플릿으로 분절되는 케이스는 Card를 적용합니다.
Button
Image Banner의 버튼은 Icon과 Text 버튼으로 나뉩니다. 넛징이 필요한 경우 Text 버튼을 사용합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Width | Card, Max | Max |
| Button | Icon, Text | Text |
Usage Guidelines
Do : APP 사용을 위한 넛징 배너
APP 사용을 위한 넛징 배너의 경우 썸네일 이미지 없이 텍스트와 버튼으로만 구성합니다.
Don’t : 이 외 케이스 사용 제한
APP 사용을 위한 넛징 배너의 경우 Text Button이 있는 Image Banner를 사용하되 썸네일 이미지 사용을 제한합니다.
Do : Image 없이 Image Banner 사용
Image Banner를 Image 없이 사용 시, Max를 적용합니다. Title, Subtitle의 최대 글자 수는 16자로 제한됩니다.
Do : 통 이미지 사용
Image Banner에 통 이미지 사용 시 Title, Subtitle, Button을 제거하고 통 이미지만 중앙 정렬됩니다. Container는 통 이미지와 동일한 높이 값과 컬러를 사용합니다.
Spec
Text Byte
해상도 360을 기준으로, Title과 Subtitle의 최대 글자 수는 11자로 제한됩니다. Card형 Text Button 적용 시, Title 과 Subtitle 최대 글자 수는 9자로 제한됩니다. Title과 Subtitle 위치를 바꿔 사용할 수 있습니다. Title은 단독 사용 시 최대 2줄 사용 가능합니다. Text Button 적용 시, 레이블은 최대 4자로 제한합니다.
- 1
- 2
Tappable area
Button을 포함한 배너 전체를 탭이 가능한 영역으로 간주합니다. 해당 영역 터치 시 링크로 화면이 전환됩니다.
- 1
- 2
