진단: 문제 구조(원인 트리와 핵심 원인 강조)

기(起)의 마지막 장. 진단을 한 문제로 묶고 원인을 나눠 핵심 원인 하나를 지목. 다음 장(전략 방향)의 근거가 됨. 원인 3개 고정, 원인마다 세부 요인 2개. 바꿔야 할 값: 문제 문장과 수치, 원인 3개(이름·기여 비중), 세부 요인 6개(문장·수치), 핵심 원인 1개(class hot), 결론 한 줄. 값 바꾸는 법: .root 의 문제 문장, .row 3개의 .cause(원인명 .t, 기여 비중 .p)와 ul li 2개(요인 문장 + 수치 b) 교체. 핵심 원인 행에만 class="row hot". 기여 비중 합은 100.

McKinsey 이슈 트리(문제 → 원인 → 세부 요인, MECE 분해), Bain 보고서의 기여도 표기 방식을 참고. 직접 제작.

<section class="slide lo-dx-tree">
  <div class="run"><b>온배움 코딩학원 2027 신학기 수강생 모집 제안</b><span>PART 01 · 현황 진단</span></div>
  <div class="hd"><p class="lb">현황 진단</p><h1>상담 신청 감소의 절반은 신청 화면에서 발생</h1><p class="lede">상담 신청 24% 감소를 3개 원인, 6개 세부 요인으로 분해</p></div>
  <div class="body">
<div class="tree">
      <div class="root"><p class="k">문제</p><p class="t">신규 상담 신청 전년 대비 24% 감소</p><p class="m">월 평균 410건에서 310건</p></div>
      <div class="join"></div>
      <div class="rows">
        <div class="row"><div class="cause"><p class="t">찾아오는 사람 감소</p><p class="p">감소분의 <b class="num">20%</b></p></div>
          <ul><li>학원명 검색량 지수 100에서 88<b>-12</b></li><li>지역 검색어 광고 평균 순위 2.1위에서 3.4위<b>-1.3</b></li></ul></div>
        <div class="row"><div class="cause"><p class="t">들어와서 바로 나감</p><p class="p">감소분의 <b class="num">28%</b></p></div>
          <ul><li>랜딩 첫 화면 이탈률 44%에서 52%<b>+8%p</b></li><li>수강료 안내 위치가 화면 4번째 아래<b>3회 스크롤</b></li></ul></div>
        <div class="row hot"><div class="cause"><p class="tag">핵심 원인</p><p class="t">신청 화면에서 포기</p><p class="p">감소분의 <b class="num">52%</b></p></div>
          <ul><li>신청 시작 대비 완료 비율 61%에서 38%<b>-23%p</b></li><li>입력 항목 2월 개편 때 5개에서 11개로 증가<b>+6개</b></li></ul></div>
      </div>
    </div>
    <p class="say"><b>광고 증액보다 신청 화면 정비가 먼저.</b> 입력 항목 축소만으로 감소분의 절반 회복 가능</p>
  </div>
  <div class="pg">08</div>
  <div class="src">근거: 2026년 1~9월 광고 계정과 상담 접수 기록</div>
</section>

.slide.lo-dx-tree .hd .lb{color:var(--mu)}
.slide.lo-dx-tree :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-dx-tree .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-dx-tree .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-dx-tree .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-dx-tree .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-dx-tree .body{gap:20px}
.slide.lo-dx-tree .tree{display:grid;grid-template-columns:250px 32px 1fr;align-items:center}
.slide.lo-dx-tree .root{background:var(--ink);color:var(--card);border-radius:var(--r);padding:22px 24px}
.slide.lo-dx-tree .root .k{color:var(--g2)}
.slide.lo-dx-tree .root .t{font-size:var(--f-xl);font-weight:700;line-height:1.35;margin-top:6px}
.slide.lo-dx-tree .root .m{font-size:var(--f-sm);color:var(--g1);margin-top:8px}
.slide.lo-dx-tree .join{border-top:1px solid var(--line2);height:0}
.slide.lo-dx-tree .row{position:relative;padding:7px 0 7px 32px;display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:stretch}
.slide.lo-dx-tree .row::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px solid var(--line2)}
.slide.lo-dx-tree .row:first-child::before{top:50%}
.slide.lo-dx-tree .row:last-child::before{bottom:50%}
.slide.lo-dx-tree .row::after{content:"";position:absolute;left:0;top:50%;width:32px;border-top:1px solid var(--line2)}
.slide.lo-dx-tree .cause{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 20px;display:flex;flex-direction:column;justify-content:center}
.slide.lo-dx-tree .cause .t{font-size:var(--f-lg);font-weight:700;color:var(--ink)}
.slide.lo-dx-tree .cause .p{font-size:var(--f-sm);color:var(--mu)}
.slide.lo-dx-tree .cause .p b{font-size:var(--f-md);font-weight:700;margin-left:2px}
.slide.lo-dx-tree .cause .tag{font-size:var(--f-cap);font-weight:600;color:var(--ac)}
.slide.lo-dx-tree .row ul{display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.slide.lo-dx-tree .row li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;font-size:var(--f-sm);color:var(--ink2);padding:9px 4px}
.slide.lo-dx-tree .row li + li{border-top:1px solid var(--line)}
.slide.lo-dx-tree .row li b{flex:none;font-variant-numeric:tabular-nums}
.slide.lo-dx-tree .row.hot .cause{background:var(--acw)}
.slide.lo-dx-tree .row.hot .cause .t,.slide.lo-dx-tree .row.hot .cause .p b{color:var(--ac)}