제안 시스템

디자인킷 · 레이아웃

한 장 요약: 왼쪽 결론 문장과 오른쪽 근거 3개

D-레이아웃-요약-결론근거

한 장 요약: 왼쪽 결론 문장과 오른쪽 근거 3개

언제 쓰는가

결론 한 문장을 왼쪽에 크게, 그 근거 3개를 오른쪽에 줄로 나열. 요약 장이나 파트의 첫 장. 결론 3줄 이내(줄당 9자 안팎), 근거 3개. 값 바꾸는 법: h1 에 결론(강조할 낱말 하나만 em). li 3개에 근거 제목과 수치 한 줄.

참고

피라미드 원칙(결론 먼저, 근거 3개) 해설(deckary.com/blog/pyramid-principle-consulting), McKinsey·BCG·Bain 장 구성 해설(slidemodel.com/mckinsey-presentation-structure, deckary.com/blog/consulting-slide-standards, deckary.com/blog/executive-summary-slides). 구성 방식만 참고, 코드와 문구는 직접 제작.

조각

<section class="slide lo-sum-claim">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>요약</span></div>
  <div class="body">
    <div class="grid">
      <div class="l">
        <p class="k">결론</p>
        <h1>상반기 과제는<br>신규 확대가 아닌<br><em>재구매 회복</em></h1>
        <p class="n">2026년 1~9월 자사몰 주문 데이터 기준</p>
      </div>
      <ol>
        <li><p class="k">근거 1</p><p class="t">신규 고객 획득 비용 상승</p><p>비브랜드 키워드 클릭 단가 전년 대비 1.4배. 같은 예산으로 유입 28% 감소</p></li>
        <li><p class="k">근거 2</p><p class="t">재구매율의 지속 하락</p><p>90일 내 재구매율 12%. 2025년 같은 기간 17% 대비 5%p 하락</p></li>
        <li><p class="k">근거 3</p><p class="t">재구매 고객의 높은 객단가</p><p>두 번째 구매 객단가가 첫 구매의 1.6배. 광고를 거치지 않은 직접 방문 비중 64%</p></li>
      </ol>
    </div>
  </div>
  <div class="pg">03</div>
</section>

스타일

.slide.lo-sum-claim .grid{display:grid;grid-template-columns:5fr 6fr;gap:72px;align-items:center}
.slide.lo-sum-claim .k{font-size:var(--f-cap);font-weight:600;color:var(--mu);margin:0}
.slide.lo-sum-claim h1{font-size:var(--f-num);font-weight:700;line-height:1.3;letter-spacing:-.03em;margin:12px 0 20px}
.slide.lo-sum-claim h1 em{font-style:normal;color:var(--ac)}
.slide.lo-sum-claim .n{color:var(--mu);margin:0}
.slide.lo-sum-claim ol{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.slide.lo-sum-claim li{padding:20px 0;border-top:1px solid var(--line)}
.slide.lo-sum-claim li:first-child{border-top-color:var(--line2)}
.slide.lo-sum-claim li p{margin:0;color:var(--ink2)}
.slide.lo-sum-claim li .t{font-size:var(--f-lg);font-weight:700;color:var(--ink);margin:2px 0 6px}