디지털 옥외 전광판 화면 배치

디지털 옥외 제안에서 전광판 화면의 메시지 배치, 가장자리 여백, 가림 구역을 보여줄 때. 화면 1개, 번호 3개. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 메시지 2줄 이내, 검색 유도어 1개. 점선 = 여백 기준선, 빗금 = 가림 구역. 세로형 지면이면 화면 상자 비율만 조정.

옥외광고 자유표시구역 대형 전광판 사례(서울 코엑스 일원, 광화문·명동), 디지털 옥외 소재 제작 관행(한 화면 한 메시지, 가장자리 여백, 현장 답사). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

<div class="dk dk-mohdb">
  <div class="lf">
    <div class="fr">
      <div class="sc mock"><div class="bd1"></div><div class="bd2"></div><div class="win"></div>
<div class="scr"><div class="sf"></div><div class="hz"></div>
<div style="position:absolute;left:36px;top:34px"><p style="font-size:26px;font-weight:800;line-height:1.2">거실 한 평,<br>15분 필라테스</p><p style="font-size:12px;margin-top:8px;border:1.5px solid #fff;border-radius:12px;padding:1px 12px;display:inline-block;font-weight:700">숲길핏 검색</p></div>
<span class="pin" style="left:12px;top:26px">1</span><span class="pin" style="right:2px;top:2px">2</span><span class="pin" style="right:130px;bottom:10px">3</span></div>
<div class="rd"></div><span class="tk" style="left:119px"></span><span class="tr" style="left:98px"></span><span class="tk" style="left:331px"></span><span class="tr" style="left:310px"></span>
<span class="t9" style="position:absolute;right:14px;bottom:12px;color:var(--g4)">보행자 시점 원거리</span></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt tight">
    <p class="dk-lb">디지털 옥외 · 대형 전광판</p>
    <h3>전광판 화면 배치와 현장 가림 구역</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>상권 대형 전광판. ① 한 줄 메시지 ② 가장자리 여백 ③ 가로수·시설물 가림 구역(핵심 요소 배치 금지)</dd></div>
      <div><dt>과금 방식</dt><dd>고정 예약은 기간 내 같은 단가로 송출, 조건 송출은 유동인구·날씨 조건 충족 시에만 입찰. 사전 협의 거래가 국내 주류</dd></div>
      <div><dt>소재 규격</dt><dd>한 화면 한 메시지, 굵고 큰 글자와 명도 대비. 매체별 화면 비율과 해상도 사전 확인</dd></div>
      <div><dt>운영 포인트</dt><dd>시간대별 최소 송출 횟수를 계약서에 명시하고 재생 기록 전수 대조. 효과는 노출 구역 안팎 검색량 비교로 추정</dd></div>
    </dl>
  </div>
</div>

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

.dk-mohdb .sc{width:548px;height:340px;position:relative;background:var(--soft);border-radius:10px;overflow:hidden;font-size:11px;line-height:1.4;letter-spacing:-.01em;text-align:left}
.dk-mohdb .bd1{position:absolute;left:36px;right:120px;top:26px;bottom:40px;background:var(--g3)}
.dk-mohdb .bd2{position:absolute;right:28px;width:84px;top:86px;bottom:40px;background:var(--g2)}
.dk-mohdb .scr{position:absolute;left:58px;right:142px;top:44px;height:190px;background:#151515;border:5px solid var(--ink);color:#fff}
.dk-mohdb .sf{position:absolute;inset:10px;border:1px dashed rgba(255,255,255,.45)}
.dk-mohdb .hz{position:absolute;left:0;right:0;bottom:0;height:40px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 4px,transparent 4px 9px)}
.dk-mohdb .rd{position:absolute;left:0;right:0;bottom:0;height:40px;background:var(--g1)}
.dk-mohdb .tr{position:absolute;bottom:34px;width:46px;height:98px;border-radius:50% 50% 46% 46%;background:var(--g4);opacity:.9}
.dk-mohdb .tk{position:absolute;bottom:14px;width:5px;height:26px;background:var(--g4)}
.dk-mohdb .win{position:absolute;left:58px;right:142px;top:248px;height:34px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 16px,transparent 16px 26px)}