인포머셜 방송 화면과 고정 전화번호

D-목업-TV-인포머셜화면

언제 쓰는가

직접 반응 TV 광고 제안에서 큰 자막, 고정 전화번호, 구성 안내 영역 배치를 보여줄 때. TV 화면 1개, 번호 3개. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 전화번호 띠는 하단 고정. 번호 3개와 오른쪽 노출 위치 문구를 맞춤. 전화번호는 자리 표시.

참고

방송 인포머셜 화면 구성 관행(상시 자막, 하단 전화번호 띠, 우측 구성 안내), 표시광고 관련 유의 사항. 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mtvif">
  <div class="lf">
    <div class="fr">
      <div class="tvw"><div class="tv mock"><div class="ab" style="left:0;top:0;bottom:44px;right:170px;display:flex;align-items:center;justify-content:center;color:#888;font-size:10px">상품 시연 영상</div>
<div class="ab col" style="left:16px;top:14px;gap:2px"><span class="pin" style="left:-6px;top:-8px">1</span><p style="font-size:20px;font-weight:800;line-height:1.25;background:rgba(0,0,0,.55);padding:2px 8px">무릎 부담 줄인 접이식 구조</p><p class="t12 bd" style="background:#fff;color:#111;padding:1px 8px;align-self:flex-start">30일 써 보고 결정</p></div>
<div class="rc"><span class="pin" style="left:-8px;top:10px">3</span><p class="t12 bd">오늘 방송 구성</p><div class="bx"><p class="t10 bd">기본 구성</p><p class="t10" style="color:#444">리포머 본체, 전용 매트</p></div><div class="bx"><p class="t10 bd">추가 구성</p><p class="t10" style="color:#444">저항 밴드 3종, 영상 강의</p></div><p class="t9 mu">전화 결제·대리 결제 안내 가능</p></div>
<div class="tel"><span class="pin" style="left:6px;top:-9px">2</span><p class="t10" style="color:#bbb">전화 주문</p><p style="font-size:22px;font-weight:800;letter-spacing:.02em">080-000-0000</p><p class="t10" style="color:#bbb;margin-left:auto">상담원 연결 · 회신 예약</p></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">TV · 인포머셜</p>
    <h3>분 단위 구좌의 화면 구성</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>방송 채널의 분 단위 구좌(2~12분). ① 상시 자막 ② 고정 전화번호 ③ 구성 안내</dd></div>
      <div><dt>과금 방식</dt><dd>구좌 단위로 매체사·미디어렙과 개별 협의. 채널·시간대·회차별 콜 유입 시각으로 효율 점검</dd></div>
      <div><dt>소재 규격</dt><dd>핵심 차별점과 혜택을 큰 자막으로 상시 노출, 전화번호는 처음부터 끝까지 한 자리. 도입 3분 안에 문제 제기와 해결책</dd></div>
      <div><dt>운영 포인트</dt><dd>송출 시각에 맞춘 회선과 상담원 예약, 화면 내용과 통화 내용 일치. 실제와 다른 주문 폭주 문구 금지, 건강기능식품은 사전심의</dd></div>
    </dl>
  </div>
</div>

스타일

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

.dk-mtvif .tvw{display:flex;flex-direction:column;align-items:center}
.dk-mtvif .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-mtvif .tvn{width:14px;height:16px;background:var(--ink)}
.dk-mtvif .tvs{width:150px;height:7px;background:var(--ink);border-radius:3px}
.dk-mtvif .ab{position:absolute}

.dk-mtvif .tv{background:#2a2a2a}
.dk-mtvif .rc{position:absolute;right:0;top:0;bottom:44px;width:170px;background:#fff;color:#111;padding:14px 12px;display:flex;flex-direction:column;gap:8px}
.dk-mtvif .bx{border:1px solid #d0d0d0;border-radius:4px;padding:6px 8px}
.dk-mtvif .tel{position:absolute;left:0;right:0;bottom:0;height:44px;background:#111;display:flex;align-items:center;gap:12px;padding:0 16px}