네이버 쇼핑라이브 방송 화면

D-목업-네이버-쇼핑라이브

언제 쓰는가

라이브 커머스 제안에서 방송 화면의 알림 버튼, 채팅, 쿠폰, 상품 카드 위치를 보여줄 때. 화면 1개, 채팅 3줄. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 채팅 3줄 이내, 상품 카드 1개. 쿠폰 문구 2줄.

참고

네이버 쇼핑라이브 방송 화면과 판매자 안내(i-boss.co.kr/ab-6141-60411 입문 가이드, 네이버 보도자료 navercorp.com/media/pressReleasesDetail?seq=30339). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mnvsl">
  <div class="lf">
    <div class="fr">
      <div class="ph mock dkm"><div class="bg">세로 라이브 영상</div><div class="ov"><div class="sb"><span>9:41</span><i></i></div><div class="fx sp" style="padding:4px 12px"><div class="fx"><span class="lv">LIVE</span><span class="t10">1,204명 시청</span></div><span class="al">알림받기</span></div><div class="fx" style="padding:2px 12px"><span class="av" style="width:20px;height:20px"></span><span class="t10 bd">숲길핏 공식스토어</span></div></div>
<div class="ch"><p><b>민트</b>접으면 높이가 얼마나 되나요</p><p><b>하루</b>알림 받고 들어왔어요</p><p><b>숲길핏</b>지금 화면의 쿠폰은 방송 중에만 적용</p></div>
<div class="cp">라이브 전용<br>쿠폰 받기</div>
<div class="pdc"><div class="g" style="width:38px;height:38px"></div><div class="col f1" style="gap:3px"><p class="t10 bd">접이식 리포머 미니</p><div class="fx"><span class="t9" style="color:#ff3b30;font-weight:700">라이브 특가</span><span class="pr" style="width:40px"></span></div></div><span class="buy">구매하기</span></div>
<div class="in">채팅을 입력해 주세요</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>60분 큐시트 5구간(오프닝, 제품 소개, 소통·이벤트, 소구점 반복, 클로징). 하이라이트 숏폼 1분 미만</dd></div>
      <div><dt>운영 포인트</dt><dd>방송 전 알림 신청 수 매일 확인, 쿠폰 팝업과 상품 카드는 소개 흐름에 맞춰 교체, 반응 좋은 구간은 숏폼으로 재사용</dd></div>
    </dl>
  </div>
</div>

스타일

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

.dk-mnvsl .bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#777;font-size:10px;background:linear-gradient(#333,#161616)}
.dk-mnvsl .ov{position:relative;z-index:2}
.dk-mnvsl .lv{background:#ff3b30;color:#fff;font-size:9px;font-weight:700;border-radius:3px;padding:1px 5px}
.dk-mnvsl .al{border:1px solid #03c75a;color:#03c75a;border-radius:12px;padding:2px 9px;font-size:10px;font-weight:700;background:rgba(0,0,0,.35)}
.dk-mnvsl .ch{position:absolute;left:12px;right:60px;bottom:118px;z-index:2;display:flex;flex-direction:column;gap:4px;font-size:10px}
.dk-mnvsl .ch b{color:#bdbdbd;font-weight:600;margin-right:4px}
.dk-mnvsl .cp{position:absolute;right:12px;bottom:124px;z-index:2;background:#fff;color:#111;border-radius:6px;padding:5px 8px;font-size:9px;font-weight:700;text-align:center;line-height:1.3}
.dk-mnvsl .pdc{position:absolute;left:10px;right:10px;bottom:44px;z-index:2;background:#fff;color:#111;border-radius:8px;padding:7px;display:flex;gap:8px;align-items:center}
.dk-mnvsl .buy{background:#03c75a;color:#fff;border-radius:5px;padding:5px 9px;font-size:10px;font-weight:700}
.dk-mnvsl .in{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;height:26px;border-radius:13px;background:rgba(255,255,255,.16);display:flex;align-items:center;padding:0 12px;font-size:10px;color:#bbb}