제안 시스템

디자인킷 · 레이아웃

마무리: 다음 단계(고객 확인 사항 3가지와 일정)

D-레이아웃-마무리-다음단계

마무리: 다음 단계(고객 확인 사항 3가지와 일정)

언제 쓰는가

제안 끝에 광고주가 할 일과 착수 일정을 나란히. 확인 사항 3가지, 일정 4~5줄. 값 바꾸는 법: 왼쪽 li 3개(광고주가 할 일), 오른쪽 dl 4~5줄(주 차 + 할 일). 헤드카피에 건수와 기간을 그대로 기재.

참고

컨설팅 보고서 마지막 장의 next steps(누가, 무엇을, 언제) 구성, IR 자료의 일정 표. 구성 방식만 참고, 코드와 문구는 직접 제작.

조각

<section class="slide lo-next">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 04 · 운영과 보고</span></div>
  <div class="hd"><p class="lb">다음 단계</p><h1>착수 전 확인 사항 3가지와 4주 일정</h1><p class="lede">계약 체결 주간을 1주 차로 계산</p></div>
  <div class="body">
    <div class="grid">
      <div>
        <p class="k">모루리빙 확인 사항</p>
        <ol>
          <li><span class="n num">1</span><div><p class="t">광고 계정 열람 권한</p><p>검색, 디스플레이, SNS 광고 계정 3종의 조회 권한 부여</p></div></li>
          <li><span class="n num">2</span><div><p class="t">자사몰 주문 데이터 제공 범위</p><p>최근 12개월 주문 내역. 개인정보를 제외한 형태로 전달</p></div></li>
          <li><span class="n num">3</span><div><p class="t">담당자와 승인 절차 지정</p><p>소재와 예산 변경의 승인자 1명, 회신 기한 2영업일</p></div></li>
        </ol>
      </div>
      <div class="sch">
        <p class="k">4주 일정</p>
        <dl>
          <div><dt>1주 차</dt><dd>계약, 계정 권한 이관, 전환 추적 점검</dd></div>
          <div><dt>2주 차</dt><dd>키워드 재분류, 인플루언서 12명 섭외</dd></div>
          <div><dt>3주 차</dt><dd>소재 제작과 검수, 재방문 시나리오 확정</dd></div>
          <div><dt>4주 차</dt><dd>전 매체 집행 시작, 첫 주간 요약 발송</dd></div>
        </dl>
      </div>
    </div>
  </div>
  <div class="pg">32</div>
</section>

스타일

.slide.lo-next .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.slide.lo-next p{margin:0}
.slide.lo-next .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-next ol{list-style:none;margin:10px 0 0;padding:0;border-bottom:1px solid var(--line)}
.slide.lo-next li{display:grid;grid-template-columns:40px 1fr;padding:18px 0;border-top:1px solid var(--line);color:var(--ink2)}
.slide.lo-next li:first-child{border-top-color:var(--line2)}
.slide.lo-next .n{font-size:var(--f-lg);font-weight:700;color:var(--mu)}
.slide.lo-next .t{font-size:var(--f-lg);font-weight:700;color:var(--ink);margin-bottom:4px}
.slide.lo-next .sch{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:26px 32px 12px}
.slide.lo-next dl{margin:10px 0 0}
.slide.lo-next dl div{display:grid;grid-template-columns:88px 1fr;padding:16px 0;border-top:1px solid var(--line)}
.slide.lo-next dt{font-weight:700}
.slide.lo-next dd{margin:0;color:var(--ink2)}