HTML5 배너를 애드 서버에 맞게 준비하는 방법

화면에서는 완벽해 보이는 배너도 애드 서버에서 거부될 수 있어요. 대개 이유는 같습니다. 아무도 확인하지 않은 기술적인 세부 사항 하나. 이 가이드는 HTML5 배너를 올리기 전에 확인할 것들을 순서대로 정리합니다.

시작하기 전에

게재하는 쪽에 물어보거나(또는 대상 플랫폼의 문서를 읽으세요) 세 가지를 확인하세요. 어떤 크기를 받는지, 각 파일의 최대 용량은 얼마인지, 외부 리소스를 허용하는지. 이 세 가지가 나머지를 모두 결정하며, 플랫폼마다 기준이 다릅니다.

패키지: 루트에 index.html이 있는 .zip

배너는 .zip 파일로 전달됩니다. 안에서 index.html은 루트에 있어야 하고(폴더 안에 있으면 안 돼요), 이미지나 폰트 같은 리소스는 그 옆이나 하위 폴더에 두세요. 아주 흔한 실수는 내용물이 아니라 폴더 자체를 압축하는 것입니다. 그러면 애드 서버가 .zip을 열었을 때 루트에서 index.html을 찾지 못하고 거부합니다.

크기나 언어가 여러 개라면 조합마다 별도의 .zip이 필요한 별개의 조각입니다. BannerMotion은 기본적으로 이렇게 묶습니다(“조각당 .zip”). 또는 언어를 폴더로 묶을 수도 있어요(“크기당 .zip”).

선언된 크기

배너는 <head>의 meta 태그로 자신의 크기를 알립니다. 플랫폼은 이 값을 읽어 표시 방식을 정하고, 구매한 자리와 맞는지 확인합니다.

<meta name="ad.size" content="width=300,height=250">

태그의 크기, 배너 컨테이너의 크기, 구매한 자리의 크기는 픽셀 단위까지 맞아야 합니다. 300×250 배너를 300×600 자리에 넣는 것은 플랫폼의 문제가 아니라 제작상의 오류예요.

clickTag: 도착 링크

도착 링크는 배너 안에 고정해서 쓰지 않습니다. 배너는 플랫폼이 정의한 clickTag라는 변수를 읽고, 누군가 클릭하면 그 값을 사용해요. 그래야 애드 서버가 클릭을 집계한 뒤 여러분의 페이지로 넘길 수 있습니다.

<script>
  var clickTag = "https://tu-sitio.com";
</script>

<div id="hit" role="link" tabindex="0"></div>
<script>
  document.getElementById("hit").onclick = function () {
    window.open(window.clickTag, "_blank");
  };
</script>

자주 놓치는 세 가지: 변수 이름은 정확히 clickTag로 써야 합니다(대소문자 구분). 파일에 적은 주소는 테스트용이며, 많은 플랫폼이 광고를 제공할 때 이를 교체합니다. 그리고 배너에는 하나의 클릭 동작만 있어야 하고, 그 동작이 조각 전체를 덮어야 해요. 일부 플랫폼은 자체 라이브러리나 다른 이름을 쓰니 해당 플랫폼의 가이드를 확인하세요.

.zip의 최대 용량

플랫폼마다 .zip의 최대 용량이 정해져 있어요. 항상 압축된 최종 .zip을 재고(압축 풀린 폴더가 아니라), 여유를 두세요. 올린 뒤 거부당해 고치는 것보다 올리기 전에 줄이는 편이 쉽습니다. 일부 플랫폼은 초기 로드와 전체 로드를 구분하기도 합니다(polite load라고 부릅니다).

BannerMotion은 내보낼 때 각 조각의 용량을 재서 설정한 제한과 비교합니다. 다만 이 제한은 플랫폼의 실제 제한을 대신하지 않아요. 배너에는 서드파티 라이브러리가 들어가지 않아 용량을 낮게 유지하는 데 도움이 됩니다. [PLACEHOLDER: 조각 하나의 전형적인 측정 용량(공개할 수 있는 측정값이 생기면 기입).]

용량을 가장 많이 차지하는 것은(많은 순서대로): 동영상, 이미지(특히 레티나 화면을 위해 두 배 해상도로 만든 것), 스타일이 많은 폰트, 라이브러리. 줄이려면: 가능하면 이미지 대신 텍스트와 벡터 도형(SVG)을 쓰고, 작은 아이콘은 스프라이트로 모으고, 사진은 압축하고, 실제로 쓰는 폰트 굵기만 불러오세요.

외부 리소스 없이

배너에 필요한 모든 것은 .zip 안에 있어야 합니다. 이미지, 폰트, 라이브러리까지 전부. 많은 플랫폼은 다른 서버에 요청하는 파일(CDN의 폰트, 외부에 호스팅된 라이브러리)을 차단하거나 불이익을 줍니다. 그 파일이 계속 제공된다거나 안전하다고 보장할 수 없기 때문이죠. BannerMotion의 패키지는 자체 완결형이라 다른 도메인으로 요청을 보내지 않습니다.

애니메이션, 길이, 반복

플랫폼은 보통 애니메이션의 길이와 반복 횟수를 제한합니다(흔히 최대 약 30초와 적은 반복 횟수). 정확한 값은 플랫폼마다 다릅니다. BannerMotion의 내보내기는 일반 프리셋에서 최대 30초 길이를 기준으로 합니다.

누구에게 의존하지 않아도 되는 좋은 습관 두 가지: 마지막 프레임에 메시지와 버튼이 모두 있어야 합니다(그 프레임이 화면에 계속 남기 때문). 그리고 불안한 움직임을 많이 넣는 대신, 잘 고른 몇 개의 키프레임에 부드러운 이징 곡선을 쓰세요.

대체 이미지

일부 플랫폼은 HTML5를 실행하지 못하는 브라우저에 보여 줄 같은 크기의 대체 이미지(JPG, PNG 또는 GIF)를 요구합니다. 보통 애니메이션의 마지막 프레임을 씁니다. 플랫폼이 이를 요구하는지, 패키지 안에 넣을지 따로 보낼지, 최대 용량이 얼마인지 확인하세요. BannerMotion에서 정적 대체 이미지는 내보내기 화면에 “준비 중”으로 표시됩니다.

올리기 전에 테스트

.zip을 새 폴더에 풀고 index.html을 브라우저에서 여세요. 애니메이션이 끝까지 재생되는지, 텍스트가 잘리지 않는지, 클릭하면 예상한 주소가 열리는지, 브라우저 콘솔에 오류가 없는지 확인하세요. 캠페인에서 가장 작은 크기와 가장 큰 크기로 각각 반복하세요.

테스트할 수 없는 배너는 완성된 것이 아닙니다.

점검 목록

• .zip의 루트에 index.html이 있다.
• ad.size 태그가 배너 크기 및 구매한 자리와 일치한다.
• 클릭은 clickTag를 쓰고, 클릭 동작은 하나뿐이다.
• .zip 용량이 플랫폼 제한보다 작다(BannerMotion이 설정한 제한으로 알려 줍니다).
• 외부 리소스가 없다: 다른 도메인에 요청하는 것이 없다.
• 길이와 반복이 플랫폼이 허용하는 범위 안에 있다.
• 마지막 프레임에 메시지 전체와 버튼이 있다.
• 브라우저에서 테스트했다: 가장 작은 크기와 가장 큰 크기 모두.

업로드할 때: 트래피킹이란

배너를 올리고 캠페인, 날짜, 자리에 연결하는 일은 트래피킹의 작업입니다. 패키지가 잘 준비되어 있으면 이 단계는 업로드하고, 플랫폼의 미리 보기에서 확인하고, 연결하는 것으로 줄어듭니다. 게재한 뒤에는 애드 서버 보고서에서 클릭이 집계되고 있는지 확인하세요.

BannerMotion은 각 조각을 선언된 크기, 포함된 clickTag, 검증된 용량과 함께 내보내며, 빠진 것이 있으면 알려 줍니다. 애드 서버로의 직접 전송은 제품 계획에 있습니다. 지금은 패키지를 내려받아 직접 업로드하세요.