Components/Banners

Banner

1.0.026 Aug, 2021
Design/ContentsCompleted
CodeNot Started
배너(Banner)는 단순 마케팅 정보성으로 활용되지 않으며, 사용자의 행동 유도와 넛징을 목적으로 사용합니다. 배너는 한 번에 하나씩만 배치되며 닫을 수 없습니다.

Components

배너는 크게 4가지로 이미지의 사이즈와 사용처에 따라 분류됩니다.

  • A
    A
  • B
    B
  • C
    C
  • D
    D
A. Thumbnail BannerB. AD BannerC. Image BannerD. Full Image Banner

Thumbnail Banner

Thumbnail Banner는 배너 타이틀 내용과 관련된 이미지를 메인으로 사용하여 배너 내용을 전달합니다. Logo와 Subtitle은 선택 적용됩니다.

Thumbnail Banner
Thumbnail Banner와 AD Banner의 차이는 형상으로, 쓰임새에 제한이 없습니다. 해당 배너는 프로모션 정보 전달을 목적으로 홈, 검색 결과 페이지의 캐치와 기획전에 주로 사용됩니다.

Anatomy

Anatomy
1. Title2. Subtitle (Optional)3. Image4. Logo (Optional)5. Icon Button

Variants

Title

타이틀은 Title과 기간을 나타내는 Subtitle로 구성되어 있습니다. Title의 글자 수에 따라 선택 적용합니다.

TitleTitle
Logo

Thumbnail Banner의 마케팅 내용에 따라 Logo · 캐치를 적용합니다. 캐치 사용 시, Subtitle 영역에 기한을 필수 명시합니다.

TitleTitle
Table of Figma Properties
Table of Figma Properties
PropertyValuesDefault Value
Title1 Line, 2 Lines2 Lines
LogoTrue, FalseTrue

Spec

Text Byte
Text Byte

Title의 최대 글자 수는 줄 당 11자로 제한되며 최대 두 줄까지 사용됩니다. Subtitle의 최대 글자 수는 19로 제한합니다.

Button Color
Button Color

Icon Button은 Title Text와 동일한 컬러를 적용합니다.

Spacing
Spacing

Title · Subtitle ·Logo는 이미지 좌측으로부터 간격 8을 두고 배치됩니다. Logo는 좌측과 하단으로부터 패딩 2를 두고 배치되며, 최대 너비는 124입니다. Icon Button은 이미지의 우측으로부터 간격 8을 두고 배치합니다.

Tappable area
Tappable area

Icon Button과 Button을 포함한 배너 전체를 탭이 가능한 영역으로 간주합니다. 해당 영역 터치 시 링크로 화면이 전환됩니다.


AD Banner

AD Banner는 상품의 이미지를 메인으로 사용합니다.

AD Banner
Thumbnail Banner와 AD Banner의 차이는 형상으로, 쓰임새에 제한이 없습니다. 해당 배너는 프로모션 정보 전달을 목적으로 홈, 검색 결과 페이지의 캐치와 기획전에 주로 사용됩니다.

Anatomy

Anatomy
1. Image2. Title3. Subtitle

Spec

Text Byte

Title의 최대 글자 수는 12자로 제한합니다. Subtitle의 최대 글자 수는 19자로 제한합니다.

Text Byte
Tappable area

스와이프, 스크롤이 가능한 이미지 영역을 포함한 배너 전체를 탭이 가능한 영역으로 간주합니다. Number Indicator가 있는 경우 버튼으로 간주하여 탭 영역에 포함합니다. 해당 영역 터치 시 링크로 화면이 전환됩니다.

Tappable area

Full Image Banner

Full Image Banner는 프로모션 정보 전달을 목적으로 홈의 기획전에 주로 사용합니다. Divider와 Card 템플릿으로 분절되는 케이스에 모두 사용됩니다.

Full Image Banner

Anatomy

1. Container, Image2. Title3. Icon Button

Spec

Text Byte
Text Byte

Title의 최대 글자 수는 줄 당 11자로 제한됩니다.

Button Color
Button Color

Icon Button은 Title Text와 동일한 컬러를 적용합니다.

Tappable area
Tappable area

Icon Button과 Button을 포함한 배너 전체를 탭이 가능한 영역으로 간주합니다. 해당 영역 터치 시 링크로 화면이 전환됩니다.


Image Banner

Image Banner는 프로모션 정보 전달을 목적으로 상품 상세 페이지, 검색 결과 페이지에 주로 사용합니다.

Image BannerImage Banner

Anatomy

1. Background2. Image3. Title4. Subtitle5. Button

Variants

Width

Image Banner는 페이지의 템플릿이 분절되는 케이스에 따라 Max와 Card를 선택 적용합니다. Divider로 템플릿을 분절하는 케이스는 Max를 적용합니다. Card 템플릿으로 분절되는 케이스는 Card를 적용합니다.

WidthWidth
Button

Image Banner의 버튼은 Icon과 Text 버튼으로 나뉩니다. 넛징이 필요한 경우 Text 버튼을 사용합니다.

WidthWidth
Table of Figma Properties
Table of Figma Properties
PropertyValuesDefault Value
WidthCard, MaxMax
ButtonIcon, TextText

Usage Guidelines

Do : APP 사용을 위한 넛징 배너

APP 사용을 위한 넛징 배너의 경우 썸네일 이미지 없이 텍스트와 버튼으로만 구성합니다.

Do : APP 사용을 위한 넛징 배너
Don’t : 이 외 케이스 사용 제한

APP 사용을 위한 넛징 배너의 경우 Text Button이 있는 Image Banner를 사용하되 썸네일 이미지 사용을 제한합니다.

Don’t : 이 외 케이스 사용 제한
Do : Image 없이 Image Banner 사용

Image Banner를 Image 없이 사용 시, Max를 적용합니다. Title, Subtitle의 최대 글자 수는 16자로 제한됩니다.

Do : Image 없이 Image Banner 사용Do : Image 없이 Image Banner 사용
Do : 통 이미지 사용

Image Banner에 통 이미지 사용 시 Title, Subtitle, Button을 제거하고 통 이미지만 중앙 정렬됩니다. Container는 통 이미지와 동일한 높이 값과 컬러를 사용합니다.

Do : 통 이미지 사용

Spec

Text Byte

해상도 360을 기준으로, Title과 Subtitle의 최대 글자 수는 11자로 제한됩니다. Card형 Text Button 적용 시, Title 과 Subtitle 최대 글자 수는 9자로 제한됩니다. Title과 Subtitle 위치를 바꿔 사용할 수 있습니다. Title은 단독 사용 시 최대 2줄 사용 가능합니다. Text Button 적용 시, 레이블은 최대 4자로 제한합니다.

  • 1
    1
  • 2
    2
1. Max2. Card
Tappable area

Button을 포함한 배너 전체를 탭이 가능한 영역으로 간주합니다. 해당 영역 터치 시 링크로 화면이 전환됩니다.

  • 1
    1
  • 2
    2
1. Max2. Card
담당자이진아@jlee41

이전글
Badges
다음글
Buttons