운영: 지표 체계(선행·후행과 목표)

전(轉) 후반 또는 결(結). 보고 체계 다음 장. 최종 목표 하나를 위에 두고, 먼저 움직이는 선행 지표와 결과로 나타나는 후행 지표를 좌우로 나눠 현재값·목표값·진행 막대를 표시. 묶음마다 지표 3개. 바꿔야 할 값: 최종 목표 문장과 수치, 지표 6개(이름·정의·현재·목표·진행 폭), 확인 주기, 기준 시점. 값 바꾸는 법: .goal 의 문장과 숫자 교체. 묶음(.grp) 안 li 3개: .t 지표명, .m 정의, .cg 현재 → 목표, 막대 i 의 width = 현재 ÷ 목표 × 100%(낮을수록 좋은 지표는 목표 ÷ 현재 × 100%).

Kaplan·Norton 균형성과표의 선행·후행 지표 구분, Google 의 OKR 진행 막대, Stephen Few 의 불릿 그래프를 참고. 직접 제작.

<section class="slide lo-op-kpi">
  <div class="run"><b>온배움 코딩학원 2027 신학기 수강생 모집 제안</b><span>PART 04 · 운영 계획</span></div>
  <div class="hd"><p class="lb">지표 체계</p><h1>매주 보는 선행 지표 3개, 매월 판단하는 후행 지표 3개</h1><p class="lede">최종 목표는 상담 신청 월 480건. 선행 지표가 움직이면 후행 지표가 따라오는 구조</p></div>
  <div class="body">
<div class="goal"><p class="k">최종 목표</p><p class="g">상담 신청 월 <b class="num">480</b>건</p><p class="m">현재 월 310건. 2027년 3월 말까지 1.55배</p></div>
    <div class="two">
      <div class="cd grp"><p class="gh">선행 지표<span>매주 확인 · 대행사가 직접 움직이는 값</span></p><ul>
        <li class=""><div><p class="t">검색 광고 첫 화면 노출 비율</p><p class="m">대상 검색어 중 3위 이내 노출 비율</p></div><p class="cg num">46%<i>→</i><b>75%</b></p><u><i style="width:61%"></i></u></li>
        <li class=""><div><p class="t">랜딩 첫 화면 이탈률</p><p class="m">첫 화면만 보고 나간 방문 비율</p></div><p class="cg num">52%<i>→</i><b>44%</b></p><u><i style="width:85%"></i></u></li>
        <li class=""><div><p class="t">신청 시작 비율</p><p class="m">방문자 중 신청 화면에 들어간 비율</p></div><p class="cg num">14%<i>→</i><b>22%</b></p><u><i style="width:64%"></i></u></li>
      </ul></div>
      <div class="ar"><svg width="28" height="16" viewBox="0 0 28 16"><path d="M0 8h25M19 2l6 6-6 6"/></svg></div>
      <div class="cd grp"><p class="gh">후행 지표<span>매월 판단 · 결과로 나타나는 값</span></p><ul>
        <li class=""><div><p class="t">신청 완료율</p><p class="m">신청 시작 대비 완료 비율</p></div><p class="cg num">38%<i>→</i><b>61%</b></p><u><i style="width:62%"></i></u></li>
        <li class=""><div><p class="t">전환당 비용 지수</p><p class="m">현재 = 100, 낮을수록 좋음</p></div><p class="cg num">100<i>→</i><b>70</b></p><u><i style="width:70%"></i></u></li>
        <li class=""><div><p class="t">상담 후 등록률</p><p class="m">상담 신청자 중 수강 등록 비율</p></div><p class="cg num">31%<i>→</i><b>35%</b></p><u><i style="width:89%"></i></u></li>
      </ul></div>
    </div>
  </div>
  <div class="pg">30</div>
  <div class="src">현재값: 2026년 7~9월 평균. 목표값: 2027년 3월 말 기준</div>
</section>

.slide.lo-op-kpi .hd .lb{color:var(--mu)}
.slide.lo-op-kpi :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-op-kpi .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-op-kpi .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-op-kpi .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-op-kpi .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-op-kpi .body{gap:16px}
.slide.lo-op-kpi .goal{display:grid;grid-template-columns:96px auto 1fr;gap:24px;align-items:baseline;border-top:2px solid var(--ink);border-bottom:1px solid var(--line2);padding:10px 4px 12px}
.slide.lo-op-kpi .goal .g{font-size:var(--f-xl);font-weight:700;color:var(--ink)}
.slide.lo-op-kpi .goal .g b{font-size:var(--f-num);line-height:1.1;color:var(--ac);margin:0 2px 0 6px}
.slide.lo-op-kpi .goal .m{font-size:var(--f-sm);color:var(--ink2)}
.slide.lo-op-kpi .two{display:grid;grid-template-columns:1fr 48px 1fr;align-items:stretch}
.slide.lo-op-kpi .grp{padding:18px 24px 6px}
.slide.lo-op-kpi .gh{font-size:var(--f-lg);font-weight:700;color:var(--ink);display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.slide.lo-op-kpi .gh span{font-size:var(--f-cap);font-weight:400;color:var(--mu)}
.slide.lo-op-kpi .grp li{display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.slide.lo-op-kpi .grp li:last-child{border-bottom:0}
.slide.lo-op-kpi .grp .t{font-size:var(--f-body);font-weight:700;color:var(--ink)}
.slide.lo-op-kpi .grp .m{font-size:var(--f-cap);color:var(--mu)}
.slide.lo-op-kpi .cg{font-size:var(--f-sm);color:var(--mu);white-space:nowrap}
.slide.lo-op-kpi .cg i{font-style:normal;margin:0 6px}
.slide.lo-op-kpi .cg b{font-size:var(--f-lg);font-weight:700}
.slide.lo-op-kpi .grp u{grid-column:1 / 3;display:block;height:6px;border-radius:3px;background:var(--soft);text-decoration:none}
.slide.lo-op-kpi .grp u i{display:block;height:6px;border-radius:3px;background:var(--g3)}
.slide.lo-op-kpi .ar{display:flex;align-items:center;justify-content:center}
.slide.lo-op-kpi .ar path{fill:none;stroke:var(--mu);stroke-width:1.6}