제안 시스템

디자인킷 · 레이아웃

본문: 질문과 답(Q 큰 글자 + A 본문)

D-레이아웃-본문-질문답

본문: 질문과 답(Q 큰 글자 + A 본문)

언제 쓰는가

광고주가 물을 만한 질문을 먼저 크게 싣고 답과 근거를 아래에. 예상 질문 장, 쟁점 정리. 질문 2줄, 답 1문장, 근거 3칸. 값 바꾸는 법: h1 질문(의문형 명사 종결 "~는가"), .t 답 한 문장, .cols 근거 2~3칸. 강조색은 Q 글자 한 곳.

참고

컨설팅 보고서의 key question 장과 FAQ 장 구성, 장 레이아웃 유형 정리(madegooddesigns.com/slide-layout-ideas), Behance·Dribbble pitch deck·editorial slide layout 검색 결과의 공통 구성 의 one big statement. 구성 방식만 참고, 코드와 문구는 직접 제작.

조각

<section class="slide lo-qa">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 02 · 전략 방향</span></div>
  <div class="body">
    <div class="q"><span class="m">Q</span><h1>검색 광고 비중을 줄여도<br>매출이 유지되는가</h1></div>
    <div class="a">
      <span class="m">A</span>
      <div>
        <p class="t">전환 없는 키워드만 줄이므로 매출 영향 3% 이내 추정</p>
        <div class="cols">
          <div><p class="k">근거 1</p><p>전체 480개 키워드 중 360개가 최근 6개월 전환 0건</p></div>
          <div><p class="k">근거 2</p><p>해당 360개의 예산 비중 34%, 매출 기여 3%</p></div>
          <div><p class="k">확인 방법</p><p>1월 첫 2주간 20%만 먼저 축소 후 매출 변화 측정. 이상 시 즉시 복구</p></div>
        </div>
      </div>
    </div>
  </div>
  <div class="pg">13</div>
</section>

스타일

.slide.lo-qa .body{gap:36px;padding:12px 0 28px}
.slide.lo-qa .q,.slide.lo-qa .a{display:grid;grid-template-columns:72px 1fr;align-items:start}
.slide.lo-qa .m{font-size:var(--f-num);font-weight:700;line-height:1.3;color:var(--g2)}
.slide.lo-qa .q .m{color:var(--ac)}
.slide.lo-qa h1{font-size:var(--f-num);font-weight:700;line-height:1.3;letter-spacing:-.03em;margin:0}
.slide.lo-qa .a{border-top:1px solid var(--line2);padding-top:28px}
.slide.lo-qa p{margin:0;color:var(--ink2)}
.slide.lo-qa .t{font-size:var(--f-xl);font-weight:700;color:var(--ink);letter-spacing:-.02em;padding-top:12px}
.slide.lo-qa .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:22px}
.slide.lo-qa .k{font-size:var(--f-cap);font-weight:600;color:var(--mu);margin-bottom:4px}