유튜브 범퍼와 마스트헤드

D-목업-유튜브-범퍼와마스트헤드

언제 쓰는가

영상 제안에서 도달·빈도용 상품 2종의 화면을 나란히 보여줄 때. 화면 2개 고정(모바일 범퍼, PC 홈 마스트헤드). 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 범퍼에는 건너뛰기 버튼을 넣지 않음. 마스트헤드는 홈 첫 줄 위 고정.

참고

구글 광고 도움말 동영상 광고 규격(support.google.com/google-ads/answer/17091270), 유튜브 광고 규격 정리(megadigital.ai/en/blog/youtube-ad-specs). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mytbm">
  <div class="lf">
    <div class="fr">
      <div class="fc"><p class="fl">범퍼 6초</p><div class="ph mock n"><div class="sb"><span>9:41</span><i></i></div><div class="vd">16:9 영상<span class="ab" style="position:absolute;left:8px;bottom:9px;font-size:9px;color:#fff"><b>광고</b> · 0:04</span><span class="ns">잠시 후 영상 재생</span><i class="yp"></i></div>
<div class="fx" style="padding:8px 10px;border-bottom:1px solid #eee"><div class="g" style="width:22px;height:22px;border-radius:50%"></div><div class="col f1"><p class="t10 bd">숲길핏 30일 체험</p><p class="t9 mu">스폰서 · supgilfit.co.kr</p></div><span class="cta">방문</span></div>
<div class="pd col" style="gap:3px"><p class="t11 bd" style="line-height:1.3">초보자를 위한 전신 필라테스 20분</p><p class="t9 mu">조회수 48만회 · 2주 전</p></div>
<div class="fx" style="padding:4px 10px;align-items:flex-start"><div class="g" style="width:86px;height:50px"></div><div class="col f1" style="gap:5px;padding-top:4px"><span class="ln"></span><span class="ln" style="width:70%"></span></div></div>
<div class="fx" style="padding:4px 10px;align-items:flex-start"><div class="g" style="width:86px;height:50px"></div><div class="col f1" style="gap:5px;padding-top:4px"><span class="ln" style="width:85%"></span><span class="ln" style="width:55%"></span></div></div></div></div>
      <div class="fc"><p class="fl">마스트헤드 · PC 홈</p><div class="pc mock"><div class="cr"><i></i><i></i><i></i><span>www.youtube.com</span></div><div class="fx" style="padding:8px 12px"><span class="yl"></span><span class="t12 bd">YouTube</span><div class="f1" style="height:18px;border-radius:9px;border:1px solid #ddd;margin:0 20px"></div><span class="av" style="width:16px;height:16px"></span></div>
<div class="mh"><span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#888;font-size:10px">자동 재생 영상 16:9</span><div class="fx sp" style="position:relative;width:100%;padding:8px 10px;background:linear-gradient(transparent,rgba(0,0,0,.7))"><div class="col"><p class="t11 bd">거실 한 평, 15분 필라테스</p><p class="t9" style="color:#ccc">광고 · 숲길핏</p></div><span class="cta">자세히 알아보기</span></div></div>
<div class="fx" style="padding:10px 12px;gap:8px;align-items:flex-start"><div class="col f1" style="gap:5px"><div class="g" style="height:48px"></div><span class="ln"></span><span class="ln" style="width:60%"></span></div><div class="col f1" style="gap:5px"><div class="g" style="height:48px"></div><span class="ln"></span><span class="ln" style="width:60%"></span></div><div class="col f1" style="gap:5px"><div class="g" style="height:48px"></div><span class="ln"></span><span class="ln" style="width:60%"></span></div><div class="col f1" style="gap:5px"><div class="g" style="height:48px"></div><span class="ln"></span><span class="ln" style="width:60%"></span></div></div></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt tight">
    <p class="dk-lb">유튜브 · 범퍼 · 마스트헤드</p>
    <h3>건너뛸 수 없는 6초 광고와 홈 최상단 지면</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>범퍼는 영상 재생 전·중·후, 마스트헤드는 유튜브 홈 최상단</dd></div>
      <div><dt>과금 방식</dt><dd>범퍼는 노출당 과금, 마스트헤드는 일 단위 정액 예약</dd></div>
      <div><dt>소재 규격</dt><dd>범퍼 6초 이하, 건너뛰기 불가, 메시지 하나. 권장 1920×1080, 무음 시청 대비 자막 병기</dd></div>
      <div><dt>운영 포인트</dt><dd>범퍼는 긴 영상 뒤에 붙이는 재인지용으로 순차 노출에 배치, 성과는 도달과 광고 회상으로 판단. 마스트헤드는 대형 시즌 고지</dd></div>
    </dl>
  </div>
</div>

스타일

.dk-mytbm{display:grid;grid-template-columns:auto minmax(0,1fr);gap:36px;align-items:center}
.dk-mytbm .lf{display:flex;flex-direction:column;align-items:center;gap:10px}
.dk-mytbm .fr{display:flex;gap:18px;align-items:flex-start}
.dk-mytbm .fc{display:flex;flex-direction:column;align-items:center;gap:6px}
.dk-mytbm .fl{font-size:var(--f-cap);font-weight:600;color:var(--ink2);margin:0}
.dk-mytbm .cap{font-size:var(--f-cap);color:var(--mu);margin:0}
.dk-mytbm .rt .dk-lb{margin:0 0 4px}
.dk-mytbm .rt h3{font-size:var(--f-lg);font-weight:700;margin:0 0 var(--s3);letter-spacing:-.02em;line-height:1.35}
.dk-mytbm .rt dl{margin:0;border-top:1px solid var(--line2)}
.dk-mytbm .rt dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s4);padding:13px 0;border-bottom:1px solid var(--line)}
.dk-mytbm .rt dt{font-size:var(--f-sm);font-weight:600;color:var(--mu);padding-top:2px}
.dk-mytbm .rt dd{margin:0;font-size:var(--f-body);color:var(--ink2)}
.dk-mytbm .rt.tight dl div{padding:10px 0;grid-template-columns:76px minmax(0,1fr);gap:var(--s3)}
.dk-mytbm .rt.tight dd{font-size:var(--f-sm)}
.dk-mytbm .ph{width:300px;height:372px;border:5px solid var(--ink);border-radius:24px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:11px;line-height:1.4;color:#222;letter-spacing:-.01em;text-align:left;position:relative}
.dk-mytbm .ph.n{width:232px}
.dk-mytbm .ph.s{width:190px}
.dk-mytbm .ph.xs{width:150px;height:316px;border-width:4px;border-radius:18px;font-size:10px}
.dk-mytbm .ph.dkm{background:#242424;color:#fff}
.dk-mytbm .ph>*{flex:none}
.dk-mytbm p{margin:0}
.dk-mytbm .ph b,.dk-mytbm .pc b,.dk-mytbm .tv b{color:inherit;font-weight:700}
.dk-mytbm .sb{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 3px;font-size:10px;font-weight:600}
.dk-mytbm .xs .sb{padding:5px 12px 2px;font-size:9px}
.dk-mytbm .sb i{display:block;width:16px;height:8px;border:1px solid currentColor;border-radius:2px;opacity:.7}
.dk-mytbm .g{background:var(--soft);border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#a39d98;font-size:9px;text-align:center}
.dk-mytbm .gd{background:#3a3a3a;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:#9a9a9a;font-size:9px;text-align:center}
.dk-mytbm .ln{display:block;height:6px;border-radius:3px;background:var(--g1)}
.dk-mytbm .pr{display:block;height:9px;border-radius:3px;background:#c9c4bf}
.dk-mytbm .fx{display:flex;align-items:center;gap:6px}
.dk-mytbm .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.dk-mytbm .sp{justify-content:space-between}
.dk-mytbm .f1{flex:1;min-width:0}
.dk-mytbm .t8{font-size:8px}
.dk-mytbm .t9{font-size:9px}
.dk-mytbm .t10{font-size:10px}
.dk-mytbm .t12{font-size:12px}
.dk-mytbm .t13{font-size:13px}
.dk-mytbm .bd{font-weight:700}
.dk-mytbm .mu{color:#8b8f94}
.dk-mytbm .hr{height:6px;background:#f0f1f3}
.dk-mytbm .pd{padding:8px 12px}
.dk-mytbm .ic{display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:4px;flex:none}
.dk-mytbm .ic.o{border-radius:50%}
.dk-mytbm .av{width:22px;height:22px;border-radius:50%;background:var(--g1);flex:none}
.dk-mytbm .adb{font-size:9px;color:#8b8f94;border:1px solid #d5d8dc;border-radius:3px;padding:0 3px;line-height:13px;flex:none;white-space:nowrap}
.dk-mytbm .rel{position:relative}
.dk-mytbm .pin{position:absolute;z-index:6;width:17px;height:17px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;line-height:1;letter-spacing:0}
.dk-mytbm .nw{white-space:nowrap}

.dk-mytbm .pc{width:560px;height:356px;border:1px solid var(--line2);border-radius:10px;background:#fff;overflow:hidden;display:flex;flex-direction:column;font-size:11px;line-height:1.4;color:#222;letter-spacing:-.01em;box-shadow:var(--shadow);position:relative;text-align:left}
.dk-mytbm .pc>*{flex:none}
.dk-mytbm .cr{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;background:var(--soft)}
.dk-mytbm .cr i{width:7px;height:7px;border-radius:50%;background:var(--g2)}
.dk-mytbm .cr span{margin-left:10px;flex:1;height:14px;border-radius:7px;background:#fff;font-size:9px;color:#999;padding:0 8px;line-height:14px}

.dk-mytbm .fr{align-items:center}
.dk-mytbm .pc{width:396px;height:300px}
.dk-mytbm .vd{position:relative;height:124px;background:linear-gradient(#333,#181818);display:flex;align-items:center;justify-content:center;color:#888;font-size:10px}
.dk-mytbm .yp{position:absolute;left:0;bottom:0;height:3px;width:55%;background:#ffcc00}
.dk-mytbm .ns{position:absolute;right:8px;bottom:9px;font-size:9px;color:#fff;background:rgba(0,0,0,.6);padding:2px 7px;border-radius:2px}
.dk-mytbm .yl{width:18px;height:13px;border-radius:3px;background:#ff0000;display:block;flex:none}
.dk-mytbm .mh{position:relative;margin:0 12px;height:120px;border-radius:8px;overflow:hidden;background:linear-gradient(#3a3a3a,#1c1c1c);color:#fff;display:flex;align-items:flex-end}
.dk-mytbm .cta{background:#065fd4;color:#fff;border-radius:12px;padding:3px 10px;font-size:9px;font-weight:700;white-space:nowrap}