Inventory 크기별 Native 광고 layout 가이드

Owned by Jin Yoon (Unlicensed)
Last updated: Mar 22, 2021 by George Kim (Unlicensed)
4 min read

 

개요

이 문서는 다양한 사이즈의 인벤토리에서 Native 광고 Asset 들을 어떻게 배열해야하는지를 가이드합니다.

글꼴 스타일부터 최소 배너 사이즈 등의 규칙을 가이드하여 광고주의 경험을 해치지 않는 룰을 제공합니다. 추가적으로 가장 많이 사용되는 배너 사이즈들에 대해 예시를 제공하지만, 연동 기획에 따라 알맞게 사이즈를 변경하여 사용하시면 됩니다.

버즈빌에서 제공되는 Native 광고는 아래의 asset들로 구성되어 있습니다.

  • 광고 이미지 (1200*627px, size는 변경가능하나 비율을 변경하시면 안됩니다..)

  • 아이콘 (80px 정사각형, size는 변경가능하나 비율을 변경하시면 안됩니다..)

  • 타이틀 (up to 25 char., 말줄임표를 사용하여 줄일 수 있습니다)

  • Description (up to 100 char., 말줄임표를 사용하여 줄일 수 있습니다)

  • CTA (up to 15 char., 말줄임표를 사용하여 줄일 수 있습니다)

  • 스폰서 태그

1. 광고 이미지

레이아웃이나 사이즈에 관계없이 이미지를 가능한한 크게 노출하는것이 중요합니다.
광고 이미지를 제외한 다른 asset들은 특정 규칙에 따라 조절할 수 있습니다.

광고 이미지 위에 다른 요소들을 overlay하는것은 허용하지 않습니다.

Custom style properties

  • 배너에 패딩이 있다면 이미지의 꼭지점을 round하게 만드는것은 허용합니다.
    다만 이때 radius를 8dp이상으로 사용하는것은 권장하지 않습니다.

2. CTA

CTA는 버즈빌 광고의 필수 요소이며 명확하게 구분되어져야합니다.
배너 전체가 clickable하지만 CTA는 유저들의 클릭을 발생하는데 중요한 요소입니다.

최소 font size는 10sp이며, 버즈빌에서는 16sp 사이즈에 bold를 사용하는것을 권장합니다.
또한, CTA 주변에 색상을 추가하여 CTA가 조금 더 “clickable” 하게 보일 수 있도록 디자인 하는것을 권장합니다.

스타일 커스터마이징

  • CTA 문구의 가독성을 해치지 않는다면 CTA 주변 색상은 원하시는 색상으로 설정하시면 됩니다.

  • CTA 아이콘으로 코인모양의 아이콘을 강하게 권장드립니다. 하지만, 작은 사이즈의 배너에서는 제외하셔도 됩니다.

  • CTA버튼의 너비와 높이는 글꼴 크기에 맞춰 변경 가능하나, 가로 8dp, 세로 4dp의 패딩이 확보되어야 합니다

3. 아이콘 및 타이틀

아이콘은 가능한 경우 아이콘과 타이틀과 한쌍을 이루며, description의 상단에 배치하는것을 권장합니다.

아이콘은 육안으로 인식 가능해야합니다.

  • 아이콘의 최소 크기는 16dp이며 24dp이상을 권장합니다.

  • 타이틀의 글꼴크기는 10sp이며 가독성 확보를 위해 시스템 글꼴을 권장합니다.
    타이틀은 작은 지면에 배치될때 말줄임표를 사용하여 줄일 수 있습니다.

스타일 커스터마이징

  • 배너 지면에 하얀색 배경을 사용하는 경우, 아이콘 주변에 1dp의 연회색(eg. #f1f2f3) 테두리를 추가하는 것을 권장합니다.

  • 아이콘과 타이틀은 수직으로 정렬해야합니다.

4. Description

Description 은 유저에게 광고에 대한 추가 정보와 컨텍스트를 전달할 수 있습니다. 광고 효율에 영향을 줄 수 있는 부분이기 때문에 최대한 노출되는것을 권장합니다.

  • Description에 사용되어야하는 글꼴 크기는 9sp이며 가독성 확보를 위해 시스템 글꼴을 사용하시길 권장합니다.
    타이틀은 작은 지면에 배치될때 말줄임표를 사용하여 줄일 수 있습니다.

스타일 커스터마이징

  • 지면의 크기가 큰 경우 description의 글꼴 크기는 20sp까지 사용 가능합니다.

  • 가독성 확보를 위해 언급된 내용 이외의 customization은 지양합니다.

스타일 가이드

이미지 영역과 텍스트 영역

이미지 영역과 텍스트 영역이 동일선상에 배치되는 경우, 보다 부드러운 유저 경험을 위해 2dp-4dp의 마진을 두는것을 권장합니다.

 

배너 지면에서 허용 가능한 부분

  • 라운드 코너를 구현할 수 있습니다.

  • 패딩을 포함할 수 있습니다. (8dp 권장)

    • 특히 round 코너를 구현하는 경우에 포함하는것을 권장합니다.

  • 마진을 추가할 수 있습니다.

UI 기획에 따라 마진을 구현할 수 있습니다. 각 마진은 배너의 가독성을 위해 20dp를 넘지 않는것을 권장합니다.

  • 다크 모드 지원을 위해 변경할 수 있습니다.

배너 지면에서 허용 가능하지 않은 부분

  • 이미지를 crop할 수 없습니다.

  • 이미지 비율을 지키지 않고 늘릴 수 없습니다.

  • 가이드 제시하는 최소 사이즈 보다 작은 크기로 줄일 수 없습니다.

     

템플릿 예시

하기 템플릿은 지면에 따른 일반적인 배너 사이즈에 대한 예시입니다. 실제 지면에 적용되어있는 사이즈에 맞춰 확대하여 사용할 수 있습니다. 하지만, 가이드에서 제시하는 최소 사이즈 보다 작은 지면에 적용하는 것은 허용하지 않습니다.

320*50

 

버즈빌에서 허용하는 가장 작은 사이즈의 배너입니다. 가능하다면 이보다 큰 배너에서 사용하는것을 권장합니다.

320*100

이 사이즈의 배너 지면에서는 320 X 50 배너 지면 대비 이미지를 명확하게 전달할 수 있습니다. 아이콘과 타이틀이 description 상단에 배치됩니다. 최소 이 사이즈의 배너를 사용하는것을 권장합니다.

320*130

 

이 사이즈의 배너는 native 광고의 asset들이 부자연스럽게 배열되므로 권장하지 않습니다. 가능하다면 320 X 100의 배너 사이즈를 사용함을 권장합니다.

320*480

 

Interstitial 지면에 주로 사용되는 배너 지면입니다. 상황에 맞춰 조정이 가능합니다.

300*250

 

Native 광고 노출을 위해 버즈빌에서 사용하고 있는 기본 지면 (feed) 와 가장 유사한 형태의 배너 사이즈 입니다. 패딩이나 asset들의 위치, border radius는 상황에 따라 가이드에 맞춰 조정할 수 있습니다.