CTV·TV 광고 화면과 QR 배치

CTV·OTT·TV 광고 제안에서 대화면 소재의 글자 여백, QR, 검색 유도 위치를 보여줄 때. TV 화면 1개. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 점선 = 가장자리 여백 기준선. QR은 오른쪽 아래, 검색 유도어는 왼쪽 아래 고정. 방송 TV 광고에도 라벨만 바꿔 사용.

OTT 광고형 요금제 프리롤·미드롤 지면 구성, CTV 소재 제작 관행(가장자리 여백, QR 반응 측정). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

<div class="dk dk-mtvct">
  <div class="lf">
    <div class="fr">
      <div class="tvw"><div class="tv mock"><div class="ab" style="inset:0;display:flex;align-items:center;justify-content:center;color:#777;font-size:10px">16:9 영상</div><div class="sf"></div>
<span class="ab t9" style="left:36px;top:22px;background:rgba(0,0,0,.5);padding:1px 6px;border-radius:2px">광고 1/2 · 0:15</span><span class="ab t9" style="right:36px;top:22px;color:rgba(255,255,255,.6)">글자·로고 안전 영역</span>
<div class="ab col" style="left:44px;bottom:84px;gap:2px"><p style="font-size:22px;font-weight:700;line-height:1.25">거실 한 평, 15분 필라테스</p><p class="t12" style="color:#ddd">숲길핏 접이식 리포머</p></div>
<div class="ab fx" style="left:44px;bottom:30px;gap:8px"><span style="border:1.5px solid #fff;border-radius:12px;padding:2px 12px;font-size:11px;font-weight:700">숲길핏 30일 체험</span><span class="t10" style="color:#ccc">검색</span></div>
<div class="ab fx" style="right:40px;bottom:28px;gap:8px;align-items:flex-end"><p class="t9" style="text-align:right;color:#ddd;line-height:1.35">휴대폰으로<br>체험 신청</p><div class="qr"><i></i><i class="w"></i><i></i><i></i><i class="w"></i><i></i><i></i><i class="w"></i><i></i><i class="w"></i><i></i><i></i><i class="w"></i><i></i><i class="w"></i><i></i></div></div></div><div class="tvn"></div><div class="tvs"></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt tight">
    <p class="dk-lb">CTV·OTT · 프리롤·미드롤</p>
    <h3>16:9 TV 화면의 소재 배치</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>OTT 광고형 요금제의 프리롤(콘텐츠 시작 전)과 미드롤(재생 도중). 건너뛸 수 없는 지면</dd></div>
      <div><dt>과금 방식</dt><dd>일반 지면은 실시간 입찰, 프리미엄 지면은 대행사·미디어렙 직접 예약. 평가는 완시청률과 완시청당 비용</dd></div>
      <div><dt>소재 규격</dt><dd>가로 16:9. 15초는 핵심 메시지 하나, 30초는 인지·메시지·행동 유도까지. 글자와 로고는 가장자리 여백 확보</dd></div>
      <div><dt>운영 포인트</dt><dd>가구 단위 시청이라 타깃은 넓게. 송출 시간대와 브랜드 검색량 대조, QR·전용 코드로 직접 반응 집계, 실제 TV 화면으로 검수</dd></div>
    </dl>
  </div>
</div>

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

.dk-mtvct .tvw{display:flex;flex-direction:column;align-items:center}
.dk-mtvct .tv{width:548px;height:312px;border:8px solid var(--ink);border-radius:8px;background:linear-gradient(#333,#191919);position:relative;overflow:hidden;color:#fff;font-size:11px;line-height:1.4;letter-spacing:-.01em;text-align:left}
.dk-mtvct .tvn{width:14px;height:16px;background:var(--ink)}
.dk-mtvct .tvs{width:150px;height:7px;background:var(--ink);border-radius:3px}
.dk-mtvct .ab{position:absolute}

.dk-mtvct .sf{position:absolute;inset:16px 28px;border:1px dashed rgba(255,255,255,.4);border-radius:2px}
.dk-mtvct .qr{width:54px;height:54px;background:#fff;border-radius:3px;padding:5px;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.dk-mtvct .qr i{background:#111}
.dk-mtvct .qr i.w{background:#fff}