운영: 12주 일정(간트와 마일스톤)

전(轉)의 끝 또는 결(結)의 첫 장. 12주를 준비·집행·정리 구간으로 나누고 업무 6~7개의 기간을 막대로, 광고주가 결정해야 하는 시점 3개를 아래에 따로 정리. 업무 5~7행, 마일스톤 3개. 바꿔야 할 값: 구간 이름과 폭, 업무명, 막대 시작·끝 주차, 핵심 구간 1개(class hot), 마일스톤 3개(주차·이름·결정할 것), 착수 기준일. 값 바꾸는 법: .row 한 줄이 업무 하나. 막대 i 의 grid-column = (시작 주 + 1) / (끝 주 + 2). 예: 3~10주 → 4 / 12. 핵심 업무 막대에만 class="hot". .phs span 의 grid-column 도 같은 계산. 마일스톤은 .mrow 의 b(grid-column = 주 + 1)와 아래 .ms li 3개를 함께 수정.

Smartsheet·TeamGantt 프로젝트 일정 양식의 주 단위 간트, McKinsey 실행 계획 장의 "phase 띠 + 업무 막대 + decision point" 구성을 참고. 직접 제작.

<section class="slide lo-op-gantt">
  <div class="run"><b>모루리빙 2027 상반기 통합 디지털 마케팅 제안</b><span>PART 04 · 운영 계획</span></div>
  <div class="hd"><p class="lb">추진 일정</p><h1>준비 2주, 집행 8주, 정리 2주. 결정 시점은 세 번</h1><p class="lede">2027년 1월 1주차 착수 기준 12주 일정. 3주 차부터 광고 집행</p></div>
  <div class="body">
<div class="cd g">
      <div class="row phs"><p></p><span style="grid-column:2 / 4">준비</span><span style="grid-column:4 / 12">집행</span><span style="grid-column:12 / 14">정리</span><em></em></div>
      <div class="row wks"><p class="k">업무</p><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><em class="k">기간</em></div>
      <div class="row"><p class="nm">현황 진단과 목표 합의</p><s style="grid-column:2"></s><s style="grid-column:3"></s><s style="grid-column:4"></s><s style="grid-column:5"></s><s style="grid-column:6"></s><s style="grid-column:7"></s><s style="grid-column:8"></s><s style="grid-column:9"></s><s style="grid-column:10"></s><s style="grid-column:11"></s><s style="grid-column:12"></s><s style="grid-column:13"></s><i class="" style="grid-column:2 / 4"></i><em>1~2주</em></div>
      <div class="row"><p class="nm">추적 설정과 계정 정비</p><s style="grid-column:2"></s><s style="grid-column:3"></s><s style="grid-column:4"></s><s style="grid-column:5"></s><s style="grid-column:6"></s><s style="grid-column:7"></s><s style="grid-column:8"></s><s style="grid-column:9"></s><s style="grid-column:10"></s><s style="grid-column:11"></s><s style="grid-column:12"></s><s style="grid-column:13"></s><i class="" style="grid-column:2 / 5"></i><em>1~3주</em></div>
      <div class="row"><p class="nm">소재와 콘텐츠 제작</p><s style="grid-column:2"></s><s style="grid-column:3"></s><s style="grid-column:4"></s><s style="grid-column:5"></s><s style="grid-column:6"></s><s style="grid-column:7"></s><s style="grid-column:8"></s><s style="grid-column:9"></s><s style="grid-column:10"></s><s style="grid-column:11"></s><s style="grid-column:12"></s><s style="grid-column:13"></s><i class="" style="grid-column:3 / 11"></i><em>2~9주</em></div>
      <div class="row"><p class="nm">검색 광고와 쇼핑 검색 집행</p><s style="grid-column:2"></s><s style="grid-column:3"></s><s style="grid-column:4"></s><s style="grid-column:5"></s><s style="grid-column:6"></s><s style="grid-column:7"></s><s style="grid-column:8"></s><s style="grid-column:9"></s><s style="grid-column:10"></s><s style="grid-column:11"></s><s style="grid-column:12"></s><s style="grid-column:13"></s><i class="hot" style="grid-column:4 / 12"></i><em>3~10주</em></div>
      <div class="row"><p class="nm">블로그 후기와 숏폼 발행</p><s style="grid-column:2"></s><s style="grid-column:3"></s><s style="grid-column:4"></s><s style="grid-column:5"></s><s style="grid-column:6"></s><s style="grid-column:7"></s><s style="grid-column:8"></s><s style="grid-column:9"></s><s style="grid-column:10"></s><s style="grid-column:11"></s><s style="grid-column:12"></s><s style="grid-column:13"></s><i class="" style="grid-column:5 / 12"></i><em>4~10주</em></div>
      <div class="row"><p class="nm">재구매 알림 발송</p><s style="grid-column:2"></s><s style="grid-column:3"></s><s style="grid-column:4"></s><s style="grid-column:5"></s><s style="grid-column:6"></s><s style="grid-column:7"></s><s style="grid-column:8"></s><s style="grid-column:9"></s><s style="grid-column:10"></s><s style="grid-column:11"></s><s style="grid-column:12"></s><s style="grid-column:13"></s><i class="" style="grid-column:6 / 14"></i><em>5~12주</em></div>
      <div class="row"><p class="nm">종료 보고와 인수인계</p><s style="grid-column:2"></s><s style="grid-column:3"></s><s style="grid-column:4"></s><s style="grid-column:5"></s><s style="grid-column:6"></s><s style="grid-column:7"></s><s style="grid-column:8"></s><s style="grid-column:9"></s><s style="grid-column:10"></s><s style="grid-column:11"></s><s style="grid-column:12"></s><s style="grid-column:13"></s><i class="" style="grid-column:12 / 14"></i><em>11~12주</em></div>
      <div class="row mrow"><p class="nm">결정 시점</p><s style="grid-column:2"></s><s style="grid-column:3"></s><s style="grid-column:4"></s><s style="grid-column:5"></s><s style="grid-column:6"></s><s style="grid-column:7"></s><s style="grid-column:8"></s><s style="grid-column:9"></s><s style="grid-column:10"></s><s style="grid-column:11"></s><s style="grid-column:12"></s><s style="grid-column:13"></s><b style="grid-column:3"></b><b style="grid-column:7"></b><b style="grid-column:13"></b><em></em></div>
    </div>
    <ol class="ms">
      <li><p class="w">2주 차</p><p class="t">목표와 지표 합의</p><p class="m">목표 수치, 전환 기준, 보고 양식 확정</p></li>
      <li><p class="w">6주 차</p><p class="t">중간 점검</p><p class="m">매체별 성과에 따라 예산 20% 범위 재배분</p></li>
      <li><p class="w">12주 차</p><p class="t">종료 보고</p><p class="m">성과 정리, 계정과 자료 이관, 다음 분기 운영안 결정</p></li>
    </ol>
  </div>
  <div class="pg">27</div>
</section>

.slide.lo-op-gantt .hd .lb{color:var(--mu)}
.slide.lo-op-gantt :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-op-gantt .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-op-gantt .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-op-gantt .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-op-gantt .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-op-gantt .body{gap:16px}
.slide.lo-op-gantt .g{padding:14px 22px 8px}
.slide.lo-op-gantt .row{display:grid;grid-template-columns:230px repeat(12,1fr) 72px;align-items:center;height:30px;border-top:1px solid var(--line)}
.slide.lo-op-gantt .row.phs,.slide.lo-op-gantt .row.wks{border-top:0;height:26px}
.slide.lo-op-gantt .phs span{font-size:var(--f-cap);font-weight:600;color:var(--ink2);background:var(--soft);border-radius:var(--r-sm);text-align:center;margin:0 2px;line-height:1.7}
.slide.lo-op-gantt .wks span{font-size:var(--f-cap);color:var(--mu);text-align:center;font-variant-numeric:tabular-nums}
.slide.lo-op-gantt .wks + .row{border-top-color:var(--line2)}
.slide.lo-op-gantt .row .nm{font-size:var(--f-sm);font-weight:600;color:var(--ink)}
.slide.lo-op-gantt .row s{grid-row:1;align-self:stretch;border-left:1px solid var(--line)}
.slide.lo-op-gantt .row i{grid-row:1;height:12px;border-radius:6px;background:var(--g2);margin:0 3px}
.slide.lo-op-gantt .row i.hot{background:var(--ac)}
.slide.lo-op-gantt .row em{grid-column:14;grid-row:1;font-style:normal;font-size:var(--f-cap);color:var(--mu);text-align:right}
.slide.lo-op-gantt .mrow b{grid-row:1;justify-self:end;width:12px;height:12px;background:var(--ink);transform:translateX(6px) rotate(45deg)}
.slide.lo-op-gantt .ms{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.slide.lo-op-gantt .ms li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline}
.slide.lo-op-gantt .ms .w{font-size:var(--f-md);font-weight:700;color:var(--ink);grid-row:1 / 3}
.slide.lo-op-gantt .ms .w::before{content:"";display:inline-block;width:9px;height:9px;background:var(--ink);transform:rotate(45deg);margin-right:10px;position:relative;top:-2px}
.slide.lo-op-gantt .ms .t{font-size:var(--f-body);font-weight:700;color:var(--ink)}
.slide.lo-op-gantt .ms .m{font-size:var(--f-sm);color:var(--ink2)}