오디오 광고 재생 화면과 컴패니언 배너

오디오 광고 제안에서 음원 앱의 광고 재생 화면과 함께 뜨는 배너를 보여줄 때. 화면 1개. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 배너 문구는 오디오 대본의 행동 유도와 같게. 재생 시간 표기는 소재 길이에 맞춤.

음원 스트리밍 앱 오디오 광고 재생 화면과 컴패니언 배너 구성(스포티파이 광고 형식 안내 ads.spotify.com), 유튜브 오디오 광고 안내(구글 광고 도움말). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

<div class="dk dk-maupl">
  <div class="lf">
    <div class="fr">
      <div class="ph mock dkm"><div class="sb"><span>9:41</span><i></i></div><div class="fx sp" style="padding:4px 14px 8px"><span class="t10" style="color:#aaa">⌄</span><span class="t10 bd">광고</span><span class="t10" style="color:#aaa">···</span></div>
<div style="padding:0 34px"><div class="gd" style="height:146px;border-radius:8px">컴패니언 배너 1:1<br>오디오와 같은 문구</div></div>
<div class="col" style="padding:12px 20px 0;gap:8px"><div class="col" style="gap:1px"><p class="t13 bd">숲길핏 30일 체험</p><p class="t10" style="color:#aaa">광고 · 잠시 후 음악이 이어집니다</p></div>
<div class="pb"><i></i></div><div class="fx sp t9" style="color:#aaa;margin-top:-4px"><span>0:08</span><span>0:20</span></div>
<div class="ct"><span class="t10" style="color:#666">◀◀</span><span class="pl"><i></i><i></i></span><span class="t10" style="color:#666">▶▶</span></div>
<div class="cta">자세히 보기</div></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt">
    <p class="dk-lb">디지털 오디오 · 음원 스트리밍</p>
    <h3>곡 사이 오디오 광고와 컴패니언 배너</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>음원 스트리밍의 곡 사이 오디오와 화면의 컴패니언 배너. 팟캐스트 진행자 낭독·자동 삽입, 유튜브 오디오 지면</dd></div>
      <div><dt>과금 방식</dt><dd>노출당 과금과 자동 구매 중심. 진행자 낭독은 방송 분류 기준으로 선택</dd></div>
      <div><dt>소재 규격</dt><dd>길이 15~30초, 브랜드명 최소 2회. 주목, 핵심 메시지, 브랜드명 반복, 행동 유도 순서</dd></div>
      <div><dt>운영 포인트</dt><dd>장르·재생 목록·분위기로 청취 맥락 타깃. 채널마다 다른 검색어와 코드 부여, 배너와 오디오가 같은 행동 요구</dd></div>
    </dl>
  </div>
</div>

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

.dk-maupl .pb{height:3px;background:#444;border-radius:2px;position:relative}
.dk-maupl .pb i{position:absolute;left:0;top:0;bottom:0;width:42%;background:#fff;border-radius:2px}
.dk-maupl .ct{display:flex;justify-content:center;align-items:center;gap:26px}
.dk-maupl .pl{width:34px;height:34px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;gap:4px}
.dk-maupl .pl i{width:4px;height:12px;background:#111}
.dk-maupl .cta{border:1px solid #fff;border-radius:14px;padding:5px 0;text-align:center;font-size:10px;font-weight:700}