제안 시스템

디자인킷 · 레이아웃

조건: 착수 조건과 다음 단계(고객 준비물과 4주 일정)

D-레이아웃-완성-조건-착수다음단계

조건: 착수 조건과 다음 단계(고객 준비물과 4주 일정)

언제 쓰는가

결(結)의 마지막 본문 장. 계약 뒤에 광고주가 무엇을 내주어야 하고 첫 4주에 무슨 일이 일어나는지를 좌우로. 준비물 4~6개, 일정 4주 고정. 바꿔야 할 값: 준비물(이름·설명·기한), 주차별 할 일과 산출물, 첫 집행 주차(class hot), 다음 단계 한 줄(회신 기한·연락처). 값 바꾸는 법: 왼쪽 .need li: b(준비물) span(설명) em(기한). 오른쪽 .wk li 4개: .w 주차, .t 할 일, .m 산출물. 첫 집행이 일어나는 주에만 class="hot". 맨 아래 .nx 는 광고주가 다음에 할 일 한 줄.

참고

McKinsey 제안서의 next steps 장(고객 요청 사항 + 첫 30일 계획), 온보딩 체크리스트 양식(Asana·Notion), 국내 대행사 제안서의 착수 일정 장을 참고. 직접 제작.

조각

<section class="slide lo-tm-start">
  <div class="run"><b>온배움 코딩학원 2027 신학기 수강생 모집 제안</b><span>PART 05 · 제안 조건</span></div>
  <div class="hd"><p class="lb">착수 조건</p><h1>준비물 5가지가 모이면 계약 후 4주 차에 첫 집행</h1><p class="lede">광고주가 준비할 것과 착수 후 4주 일정. 2027년 1월 1주차 착수 기준</p></div>
  <div class="body">
<div class="grid">
      <div class="cd need">
        <p class="k">광고주 준비물</p>
        <ul>
          <li><i></i><div><b>광고 계정 접근 권한</b><span>검색 광고, 분석 도구 관리자 초대</span></div><em>계약 당일</em></li>
          <li><i></i><div><b>최근 12개월 상담 접수 기록</b><span>월별 신청 수와 등록 수</span></div><em>1주 차</em></li>
          <li><i></i><div><b>과정별 수강료와 시간표</b><span>2027년 신학기 확정본</span></div><em>1주 차</em></li>
          <li><i></i><div><b>랜딩 수정 담당자 지정</b><span>개발 수정 2건 처리 창구</span></div><em>1주 차</em></li>
          <li><i></i><div><b>승인 담당자 1명</b><span>소재와 예산 최종 확인</span></div><em>계약 당일</em></li>
        </ul>
      </div>
      <div class="r">
        <p class="k">착수 후 4주</p>
        <ol class="wk">
          <li><p class="w num">1주</p><div><p class="t">진단과 목표 합의</p><p class="m">계정 점검 결과, 목표 수치와 전환 기준 확정</p></div></li>
          <li><p class="w num">2주</p><div><p class="t">추적 설정과 검색어 재편</p><p class="m">이벤트 4개 설정, 검색어 그룹 4개 구성안</p></div></li>
          <li><p class="w num">3주</p><div><p class="t">랜딩 정비와 소재 제작</p><p class="m">신청 입력 4개로 축소, 그룹별 문구 3종</p></div></li>
          <li class="hot"><p class="w num">4주</p><div><p class="t">첫 집행 시작</p><p class="m">검색 광고 집행, 첫 주간 보고 발송</p></div></li>
        </ol>
      </div>
    </div>
    <p class="say nx"><b>다음 단계</b> 제안 검토 회신 후 1주 안에 착수 회의. 회의 전 계정 접근 권한만 먼저 요청</p>
  </div>
  <div class="pg">36</div>
</section>

스타일

.slide.lo-tm-start .hd .lb{color:var(--mu)}
.slide.lo-tm-start :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-tm-start .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-tm-start .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-tm-start .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-tm-start .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-tm-start .body{gap:18px}
.slide.lo-tm-start .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.slide.lo-tm-start .need{padding:20px 26px 8px}
.slide.lo-tm-start .need ul{margin-top:6px;border-top:1px solid var(--line2)}
.slide.lo-tm-start .need li{display:grid;grid-template-columns:18px 1fr auto;gap:14px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.slide.lo-tm-start .need li:last-child{border-bottom:0}
.slide.lo-tm-start .need i{width:16px;height:16px;border:1px solid var(--g3);border-radius:4px}
.slide.lo-tm-start .need b{display:block;font-size:var(--f-body)}
.slide.lo-tm-start .need span{font-size:var(--f-sm);color:var(--ink2)}
.slide.lo-tm-start .need em{font-style:normal;font-size:var(--f-cap);font-weight:600;color:var(--mu);white-space:nowrap}
.slide.lo-tm-start .wk{margin-top:6px}
.slide.lo-tm-start .wk li{display:grid;grid-template-columns:76px 1fr;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.slide.lo-tm-start .wk li:first-child{border-top-color:var(--line2)}
.slide.lo-tm-start .wk .w{font-size:var(--f-h);font-weight:700;line-height:1.2;color:var(--g2)}
.slide.lo-tm-start .wk .t{font-size:var(--f-md);font-weight:700;color:var(--ink)}
.slide.lo-tm-start .wk .m{font-size:var(--f-sm);color:var(--ink2)}
.slide.lo-tm-start .wk li.hot .w,.slide.lo-tm-start .wk li.hot .t{color:var(--ac)}
.slide.lo-tm-start .nx b{margin-right:8px}