진단: 고객 여정별 이탈 지점(5단계 잔존 막대와 이탈 표시)

기(起). 문제 구조 장의 앞이나 뒤. 여정 단계마다 남은 사람 수를 막대로, 빠져나간 몫을 옅은 막대로 보여주고 가장 크게 빠진 한 단계를 강조. 단계 4~5개. 바꿔야 할 값: 단계명 5개와 행동 설명, 잔존 값 5개, 이탈 폭 4개, 이탈 이유 5줄, 최대 이탈 단계 1개(class hot). 값 바꾸는 법: .st 5개. .bar 의 height = 앞 단계 값 × 1.6px, .bar i 의 height = 이 단계 값 × 1.6px(첫 단계는 둘 다 160px). .v 잔존 값, .dr 이탈 폭, .why 이탈 이유. 최대 이탈 단계에만 class="st hot".

Google Analytics 유입 경로 탐색 보고서의 단계별 잔존·이탈 막대, Storytelling with Data 의 "한 막대만 색" 원칙, McKinsey consumer decision journey 도식의 단계 구분을 참고. 직접 제작.

<section class="slide lo-dx-journey">
  <div class="run"><b>온배움 코딩학원 2027 신학기 수강생 모집 제안</b><span>PART 01 · 현황 진단</span></div>
  <div class="hd"><p class="lb">현황 진단</p><h1>광고 클릭 100명 중 신청 완료 9명, 최대 이탈은 신청 시작 직전</h1><p class="lede">광고 클릭부터 상담 신청 완료까지 5단계 잔존 비율</p></div>
  <div class="body">
<div class="steps">
      <div class="st"><p class="k">1 광고 클릭</p><div class="plot"><div class="bar" style="height:160px"><i style="height:160px"></i></div></div><p class="v num">100</p><p class="dr">기준</p><p class="why">검색 광고와 지역 타깃 광고 유입</p></div>
      <div class="st"><p class="k">2 랜딩 첫 화면</p><div class="plot"><div class="bar" style="height:160px"><i style="height:77px"></i></div></div><p class="v num">48</p><p class="dr">이탈 52</p><p class="why">첫 화면 표시 4초대, 수강 대상 안내 없음</p></div>
      <div class="st"><p class="k">3 과정 상세 조회</p><div class="plot"><div class="bar" style="height:77px"><i style="height:58px"></i></div></div><p class="v num">36</p><p class="dr">이탈 12</p><p class="why">과정 6개가 한 목록에 섞여 선택 어려움</p></div>
      <div class="st hot"><p class="k">4 신청 시작</p><div class="plot"><div class="bar" style="height:58px"><i style="height:22px"></i></div></div><p class="v num">14</p><p class="dr">이탈 22 · 최대 이탈 지점</p><p class="why">수강료와 시간표가 신청 화면 안에만 있음</p></div>
      <div class="st"><p class="k">5 신청 완료</p><div class="plot"><div class="bar" style="height:22px"><i style="height:14px"></i></div></div><p class="v num">9</p><p class="dr">이탈 5</p><p class="why">입력 항목 11개, 휴대폰 인증 2회</p></div>
    </div>
    <p class="say"><b>상세 조회까지 온 36명 중 22명이 신청 시작 전에 이탈.</b> 수강료와 시간표를 상세 화면으로 이동하는 것이 1순위</p>
  </div>
  <div class="pg">09</div>
  <div class="src">기준: 2026년 7~9월 광고 유입 방문자, 광고 클릭 = 100</div>
</section>

.slide.lo-dx-journey .hd .lb{color:var(--mu)}
.slide.lo-dx-journey :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-dx-journey .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-dx-journey .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-dx-journey .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-dx-journey .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-dx-journey .body{gap:20px}
.slide.lo-dx-journey .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.slide.lo-dx-journey .st{display:flex;flex-direction:column}
.slide.lo-dx-journey .st .k{color:var(--ink);font-size:var(--f-sm);padding-bottom:8px;border-bottom:1px solid var(--line2)}
.slide.lo-dx-journey .plot{height:176px;display:flex;align-items:flex-end;border-bottom:1px solid var(--ink)}
.slide.lo-dx-journey .bar{width:100%;background:var(--g1);border-radius:4px 4px 0 0;display:flex;align-items:flex-end}
.slide.lo-dx-journey .bar i{display:block;width:100%;background:var(--g3);border-radius:4px 4px 0 0}
.slide.lo-dx-journey .st .v{font-size:var(--f-num);font-weight:700;line-height:1.2;margin-top:8px;color:var(--ink)}
.slide.lo-dx-journey .st .dr{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-dx-journey .st .why{font-size:var(--f-sm);color:var(--ink2);margin-top:6px}
.slide.lo-dx-journey .st.hot .bar{background:var(--acm)}
.slide.lo-dx-journey .st.hot .dr{color:var(--ac)}