본문: 그림 3종 나란히(시안 비교)

광고 소재 시안, 화면 캡처, 사례 사진 3개를 같은 크기로 나란히 놓고 아래에 이름·의도·규격. 지면 목업 조각(D-지면…)을 자리에 끼워 사용. 3열 고정. 값 바꾸는 법: .slot 3개를 시안 그림이나 지면 목업으로 교체(높이 230). 아래 .t(이름) 설명 2줄 .k(규격). 추천안을 표시하려면 해당 .t 색을 var(--ac) 로(그때는 .lb 를 무채색으로).

매체 제안서의 시안 3종 비교 장, Behance pitch deck 의 3-up 목업 배치. 구성 방식만 참고, 코드와 문구는 직접 제작.

<section class="slide lo-mock3">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 03 · 매체별 실행안</span></div>
  <div class="hd"><p class="lb">매체별 실행안</p><h1>디스플레이 광고 소재 시안 3종</h1><p class="lede">같은 리뷰 영상에서 추출, 모바일 화면 기준</p></div>
  <div class="body">
    <div class="cols">
      <div><div class="slot">시안 A 자리</div><p class="t">시안 A · 사용 장면 중심</p><p>거실 배치 장면 3초로 시작. 제품 크기와 분위기 전달 우선</p><p class="k">세로 4:5 · 15초</p></div>
      <div><div class="slot">시안 B 자리</div><p class="t">시안 B · 리뷰 문장 중심</p><p>구매 고객 한 줄 평을 첫 화면 자막으로 배치</p><p class="k">세로 4:5 · 10초</p></div>
      <div><div class="slot">시안 C 자리</div><p class="t">시안 C · 교체 주기 안내</p><p>필터 교체 시기와 방법 안내. 기존 구매 고객 대상</p><p class="k">정사각 1:1 · 10초</p></div>
    </div>
  </div>
  <div class="pg">19</div>
</section>

.slide.lo-mock3 .slot{background:var(--soft);border:1px dashed var(--line2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:var(--f-cap);color:var(--mu)}
.slide.lo-mock3 .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.slide.lo-mock3 .slot{height:230px;margin-bottom:14px}
.slide.lo-mock3 p{margin:0;color:var(--ink2)}
.slide.lo-mock3 .t{font-size:var(--f-lg);font-weight:700;color:var(--ink);margin-bottom:4px}
.slide.lo-mock3 .k{font-size:var(--f-cap);color:var(--mu);margin-top:8px}