제안 시스템

디자인킷 · 레이아웃

본문: 인용문 크게, 출처와 근거

D-레이아웃-본문-인용문

본문: 인용문 크게, 출처와 근거

언제 쓰는가

고객 인터뷰·리뷰·담당자 발언 한 문장을 크게 싣고, 아래에 누구의 말인지와 뒷받침 수치 3개. 인용문 2줄(줄당 16자 안팎), 근거 3개. 값 바꾸는 법: blockquote 인용문(강조 낱말 하나만 em), .who 화자와 조사 방법, .ev 근거 3개(수치 + 한 줄).

참고

장 레이아웃 유형 정리(madegooddesigns.com/slide-layout-ideas), Behance·Dribbble pitch deck·editorial slide layout 검색 결과의 공통 구성 의 quote slide(짧은 인용, 출처, 넓은 여백)에 컨설팅식 근거 수치 줄을 더한 구성. 구성 방식만 참고, 코드와 문구는 직접 제작.

조각

<section class="slide lo-quote">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 01 · 현황 진단</span></div>
  <div class="body">
    <div>
      <p class="k">구매 고객 인터뷰</p>
      <blockquote>“필터 바꿀 때가 됐는지 몰라서<br>그냥 <em>다른 데서</em> 샀어요”</blockquote>
      <p class="who">30대 구매 고객, 공기청정기 구매 후 5개월 경과 · 2026년 9월 전화 인터뷰</p>
    </div>
    <div class="ev">
      <div><p class="n num">12명 중 9명</p><p>교체 시기 안내를 받은 적 없다고 응답</p></div>
      <div><p class="n num">68%</p><p>소모품을 타 쇼핑몰에서 재구매</p></div>
      <div><p class="n num">3개월</p><p>필터와 커버류의 평균 교체 주기</p></div>
    </div>
  </div>
  <div class="pg">07</div>
</section>

스타일

.slide.lo-quote .body{justify-content:space-between;padding:28px 0 36px}
.slide.lo-quote p{margin:0}
.slide.lo-quote .k{font-weight:600;color:var(--mu)}
.slide.lo-quote blockquote{font-size:var(--f-num);font-weight:700;line-height:1.35;letter-spacing:-.03em;margin:16px 0 20px;text-indent:-20px}
.slide.lo-quote blockquote em{font-style:normal;color:var(--ac)}
.slide.lo-quote .who{color:var(--ink2)}
.slide.lo-quote .ev{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--line2);padding-top:20px}
.slide.lo-quote .ev p{color:var(--ink2)}
.slide.lo-quote .ev .n{font-size:var(--f-xl);font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:2px}