구현 가이드

네이티브 광고

Native ads

구성 요소(제목, 이미지, 텍스트)로 조립되어 사이트의 디자인으로 꾸며지며, 광고임을 알리는 라벨이 항상 붙는 광고.

Ad Manager
모바일 및 데스크톱

형식 알아보기 내 사이트에서 확인하기

데스크톱

휴대폰

1분 만에 이해하기

네이티브 광고란

네이티브 광고는 완성된 그림이 아니라 낱개의 조각으로 도착합니다. 광고주가 제목, 이미지, 짧은 텍스트 같은 조각을 보냅니다. 옷을 입히는 일은 사이트가 합니다. 각 조각의 색, 글꼴, 크기, 위치를 정합니다. 조립 키트와 같습니다. 상자에는 부품이 들어 있고, 거실에 어울리게 조립하는 것은 여러분입니다. 그래서 글 목록의 카드 하나처럼 페이지의 일부로 보입니다.

Ad Manager에서는 이 광고에 옷을 입히는 방법이 두 가지 있습니다. 첫째는 Ad Manager 안에서 만드는 네이티브 스타일로, 기성 템플릿이 있는 안내형 디자인 편집기나 코드를 아는 사람을 위한 HTML 및 CSS를 사용합니다. Google에 따르면 스타일은 웹과 앱 모두에 쓸 수 있습니다. 둘째는 Android 및 iOS 앱 코드로, 앱 개발자가 Google Mobile Ads SDK로 구성 요소를 받아 앱 코드에서 모든 것을 그립니다. 사이트에서는 네이티브 스타일을 사용하는 것이 맞는 방법입니다.

네이티브는 콘텐츠처럼 보이기 때문에 Google은 한 가지를 매우 엄격하게 요구합니다. 방문자가 광고임을 알 수 있어야 한다는 것입니다. 표시 라벨과 AdChoices 아이콘이 카드를 광고로 표시해 줍니다. 이 라벨을 숨기거나 가리거나 위장해서는 안 되며, 광고는 콘텐츠와 분명히 구분되어야 합니다. 가게 안에 걸린 광고 포스터와 같습니다. 예쁘고 인테리어와 어울려도 광고라는 점은 분명해야 합니다.

Google은 광고주가 보낸 내용을 바꾸지 않고도 같은 광고가 사이트의 부분마다 다른 모양으로 나타나도록 이 형식을 만들었습니다. 웹에서 Google은 열 너비를 채우고 높이를 알아서 맞추는 유동(fluid) 크기를 권장합니다. 글 목록의 항목 사이처럼 페이지 디자인과 어울리는 광고를 원할 때 쓰기 좋으며, 광고 표시는 항상 잘 보이게 해야 합니다.

단계별 설명

구현 방법

네이티브 형식 선택Ad Manager에서 게재, 네이티브로 이동하세요. 필요한 요소가 있는 표준 형식을 사용합니다. 프로그래매틱 광고에는 Google이 표준 형식만 허용합니다.
스타일 만들기새 네이티브 스타일을 클릭하고 안내형 디자인 편집기 또는 HTML 및 CSS를 선택하세요. 안내형 편집기에서는 템플릿으로 시작하여 맞춤설정 경로가 기존 광고와 프로그래매틱 광고 모두에 사용됩니다.
크기와 타기팅 정의네이티브를 받을 광고 단위와 같은 크기를 선택하세요. Google은 유동을 권장합니다. 스타일이 유동이면 광고 단위도 유동이어야 하며, 스타일의 타겟팅이 광고 항목의 타겟팅과 맞아야 합니다.
라벨이 포함된 디자인 만들기광고 표시를 포함해 형식에 필요한 요소를 모두 표시하세요.
페이지에 태그 넣기GPT에서 fluid 크기로 슬롯을 정의하고, 너비가 0보다 큰 열 안에 div를 넣으세요.

구현 예시

코드와 화면에 보이는 모습

GPT 스크립트는 head에 넣고, 표시 호출이 있는 div는 네이티브 광고가 나타날 열 안의 body에 넣습니다.

<!-- No <head> -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    // Slot nativo com tamanho fluido.
    googletag
      .defineSlot("/1234567/exemplo", ["fluid"], "nativo-exemplo")
      .addService(googletag.pubads());
    googletag.enableServices();
  });
</script>

<!-- No <body>, dentro de uma coluna com largura -->
<div id="nativo-exemplo"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("nativo-exemplo");
  });
</script>

데스크톱사이트와 어울리는 카드 형태로 나타나며 이미지, 제목, 텍스트, 광고 표시가 들어 있습니다. 유동(fluid) 크기에서는 놓인 열의 너비를 가득 채웁니다.

모바일화면 너비에 맞춰 조정되어 같은 방식으로 나타납니다. 프로그래매틱 스타일에서는 AdChoices 아이콘이 오른쪽 위 모서리에 보입니다.

Google의 안내

허용 및 금지 사항

허용

Ad Manager 안에서 안내형 디자인 편집기 또는 HTML 및 CSS로 네이티브 스타일을 만듭니다.
더 자유로운 디자인을 위해 Google이 권장하는 유동(fluid) 크기를 사용하세요.
읽기 쉬운 상태를 유지하는 한, 레이아웃에 맞게 기여 라벨의 디자인 바꾸기.
같은 광고를 사이트의 부분마다 다른 레이아웃으로 표시하기.
기존 광고용 맞춤 네이티브 형식 만들기(프로그래매틱 광고는 받을 수 없음).

허용 안 됨

기여 라벨이나 AdChoices 아이콘을 숨기거나 가리거나 위장하기.
광고를 콘텐츠와 구별하기 어렵게 만들기. Google은 광고가 콘텐츠와 분명히 구분되어야 한다고 요구합니다.
광고 구성 요소가 페이지의 탐색 버튼을 흉내 내게 만들기.
광고 표시나 제목처럼 형식에 꼭 필요한 요소를 표시하지 않는 것.
이미지와 동영상을 자르거나 비율을 바꾸거나 요소가 서로 겹치게 하는 것.
AdChoices 전용으로 비워 둔 모서리에 광고의 다른 부분 넣기.

팁

올바르게 하는 방법

프로그래매틱 콘텐츠 형식에서 제목은 최대 90자입니다. 이를 고려해서 공간을 계획하세요.
유동 광고는 너비가 0픽셀보다 큰 열 안에서 가장 잘 작동합니다.
대비가 좋은 텍스트를 쓰고 허용된 글꼴만 사용하세요. 프로그래매틱 스타일에서 Google은 서드파티 글꼴이나 라이브러리를 허용하지 않습니다.
Google은 유동 광고가 표시되는 데 더 오래 걸릴 수 있고, 높이가 바뀔 때 주변 콘텐츠가 움직일 수 있다고 알립니다.

주의

흔한 오류

광고 단위와 다른 스타일 크기

스타일이 유동이면 광고 단위도 유동이어야 합니다. Google은 크기가 같아야 한다고 설명합니다.

프로그래매틱을 기대하는 맞춤 형식

맞춤 네이티브 형식은 프로그래매틱 광고를 받지 않습니다. 프로그래매틱에는 기본 형식만 유효합니다.

너비가 없거나 높이가 고정된 상자

너비가 0인 열 안에 있거나, 광고보다 작은 고정 높이의 상자 안에 있는 유동 광고는 잘못 표시될 수 있습니다.

자주 묻는 질문

네이티브 광고도 꼭 광고라고 표시해야 하나요?

네. 기여 라벨과 AdChoices는 광고를 콘텐츠로 착각하지 않게 하기 위한 것이므로 숨기거나 위장해서는 안 됩니다.

Android 및 iOS 앱 코드가 사이트에서도 작동하나요?

아니요. Google은 이 방법을 Google Mobile Ads SDK를 사용하는 Android 및 iOS 앱용으로 설명합니다. 사이트에서는 네이티브 스타일을 사용하는 것이 맞는 방법입니다.

다른 광고에도 유동 크기를 쓸 수 있나요?

GPT 문서에 따르면 현재 Ad Manager가 허용하는 유동 유형은 네이티브 광고뿐입니다.

자료실

Google 공식 출처

이 페이지의 모든 내용은 Google 공식 문서를 따릅니다. 원문에서 바로 읽어 보세요.

내 사이트가 이 형식을 올바르게 쓰고 있나요?

감사는 사이트를 방문자처럼 읽고, 아무것도 클릭하지 않으며, 무엇을 고쳐야 하는지 알려 줍니다.

감사 실행하기