버스 래핑 도면과 배치 금지 구역

D-목업-옥외-버스래핑도면

언제 쓰는가

교통 래핑 제안에서 차량 측면 도면 위에 문구 배치 가능 구역, 금지 구역, QR 위치를 보여줄 때. 도면 1개, 번호 3개. 설명 4행. 값 바꾸는 법: 견본 안의 브랜드명·문구와 오른쪽 설명만 교체. 사진·영상 자리는 회색 또는 어두운 상자 유지. 금액은 넣지 않고 가격 자리는 회색 막대. 메시지 1줄, 검색 유도어 1개, QR 1개. 지하철 래핑이면 도면 제목과 금지 구역 이름만 교체.

참고

버스 외부광고 도면 설계 관행(창문·출입문·이음새 회피), 옥외광고물 표시 기준(지자체 조례). 화면 구성과 규격만 참고, HTML·CSS 직접 제작. 로고·캡처 이미지 미사용.

조각

<div class="dk dk-mohbw">
  <div class="lf">
    <div class="fr">
      <div class="sc mock"><p class="t10 mu" style="position:absolute;left:24px;top:16px">차량 좌측면 도면</p><p class="t10 mu" style="position:absolute;right:24px;top:16px">진행 방향 →</p>
<div class="bus"><span class="hx" style="left:14px;top:14px;width:68px;height:52px;border-radius:4px"></span><span class="hx" style="left:92px;top:14px;width:68px;height:52px;border-radius:4px"></span><span class="hx" style="left:170px;top:14px;width:68px;height:52px;border-radius:4px"></span><span class="hx" style="left:248px;top:14px;width:68px;height:52px;border-radius:4px"></span><span class="hx" style="left:326px;top:14px;width:68px;height:52px;border-radius:4px"></span><span class="hx" style="right:14px;top:14px;width:70px;height:148px;border-radius:4px"></span>
<span class="hx" style="left:252px;top:76px;width:5px;height:96px;border:0"></span>
<div class="adz" style="right:98px"><div class="col f1" style="gap:3px;position:relative"><span class="pin" style="left:-4px;top:-18px">1</span><p style="font-size:24px;font-weight:800;line-height:1.2;color:var(--ink)">거실 한 평 필라테스</p><p style="position:relative;align-self:flex-start;border:1.5px solid var(--ink);border-radius:12px;padding:0 12px;font-size:12px;font-weight:700">숲길핏 검색<span class="pin" style="right:-10px;top:-10px">2</span></p></div>
<div class="qr"><span class="pin" style="right:-10px;top:-12px">3</span><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>
<span class="wh" style="left:70px"></span><span class="wh" style="right:110px"></span></div>
<div class="lgd"><span><i class="hx" style="position:static"></i>배치 금지(창문·출입문·이음새)</span><span>흰 면 = 문구 배치 가능</span></div></div>
    </div>
    <p class="cap">구성 예시, 실제 소재 아님</p>
  </div>
  <div class="rt tight">
    <p class="dk-lb">교통 옥외 · 버스 래핑</p>
    <h3>차량 측면 도면과 전환 장치 위치</h3>
    <dl>
      <div><dt>노출 위치</dt><dd>버스 외부 측면. ① 큰 글자 한 가지 메시지 ② 검색 유도어 ③ QR(정지 상태에서 보이는 면). 빗금은 배치 금지 구역</dd></div>
      <div><dt>과금 방식</dt><dd>구좌·기간 단위 계약, 한 구좌를 한 브랜드가 독점. 초기 출력·시공비는 기간과 무관한 고정비</dd></div>
      <div><dt>소재 규격</dt><dd>차량 도면 기준 설계. 창문, 손잡이, 이음새에 문구와 로고 미배치. 창문 부위 표시 제한은 지자체 조례 확인</dd></div>
      <div><dt>운영 포인트</dt><dd>인기 노선은 조기 예약. 훼손 시 재시공 기한과 점검 주체를 계약서에 명시, 노선 이용자 대상 노출군·비노출군 비교로 측정</dd></div>
    </dl>
  </div>
</div>

스타일

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

.dk-mohbw .sc{width:548px;height:300px;position:relative;background:var(--card);border:1px solid var(--line2);border-radius:10px;overflow:hidden;font-size:11px;line-height:1.4;letter-spacing:-.01em;text-align:left}
.dk-mohbw .bus{position:absolute;left:24px;right:24px;top:48px;height:176px;border:3px solid var(--ink);border-radius:18px 26px 10px 10px;background:#fff}
.dk-mohbw .hx{background:repeating-linear-gradient(135deg,var(--g2) 0 3px,transparent 3px 8px);border:1.5px solid var(--g3);position:absolute}
.dk-mohbw .wh{position:absolute;bottom:-20px;width:40px;height:40px;border-radius:50%;background:var(--ink);border:7px solid var(--g3)}
.dk-mohbw .adz{position:absolute;left:14px;right:14px;top:84px;bottom:14px;display:flex;align-items:center;gap:14px}
.dk-mohbw .qr{width:44px;height:44px;border:2px solid var(--ink);padding:4px;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;position:relative;background:#fff}
.dk-mohbw .qr i{background:var(--ink)}
.dk-mohbw .qr i.w{background:#fff}
.dk-mohbw .lgd{position:absolute;left:24px;bottom:14px;display:flex;gap:16px;align-items:center;font-size:10px;color:var(--mu)}
.dk-mohbw .lgd i{display:inline-block;width:18px;height:10px;margin-right:5px;vertical-align:-1px}