단계별 전환 깔때기와 업종 평균 비교

깔때기의 어느 단계가 업종 평균보다 처지는지 짚어 개선 과제를 정하는 장면. 현황 진단, 랜딩 페이지 개선 제안. 단계 4~5개(전환 구간 3~4개). 평균에 못 미치는 구간 하나만 강조색. 값 바꾸는 법: 왼쪽 단계 상자: 폭 = 400 − 순번 × 62(값 비례 아님, 순서 표시용), y = 26 + 순번 × 54. 오른쪽 행은 두 단계 사이(y = 71 + 순번 × 54). 단계 전환율 = 아래 단계 건수 ÷ 위 단계 건수. 평균 대비 지수 = 우리 전환율 ÷ 업종 평균 × 100, 막대 width = 지수 × 1.625(지수 100 = 기준 점선). 지수가 가장 낮은 행만 막대 class a, 글자 class va.

Looker Studio 전환 깔때기 대시보드 구성(https://supermetrics.com/blog/looker-studio-examples)과 불릿 차트의 기준선 비교, Storytelling with Data(https://www.storytellingwithdata.com)의 기준 대비 막대 표기 참고. 단계 전환율을 "평균 대비 지수"로 바꿔 한 기준선에 맞춘 구성은 직접 제작.

<div class="dk dk-fnlb">
<div class="dk-card">
<p class="ttl"><span>단계별 건수와 단계 전환율 · 최근 4주</span></p>
<svg width="1088" height="290" viewBox="0 0 1088 290" role="img">
<text x="200" y="14" text-anchor="middle">단계별 건수</text>
<text x="470" y="14">단계 전환율</text>
<text x="600" y="14">업종 평균</text>
<text x="902.5" y="14" text-anchor="middle" class="k">업종 평균 100</text>
<text x="1088" y="14" text-anchor="end">평균 대비 지수</text>
<line x1="902.5" y1="22" x2="902.5" y2="286" class="tg"/>
<rect x="0" y="26" width="400" height="36" rx="4" class="g1"/>
<text x="200" y="49" text-anchor="middle" class="v">광고 노출 200,000</text>
<rect x="31" y="80" width="338" height="36" rx="4" class="g1"/>
<text x="200" y="103" text-anchor="middle" class="v">클릭 5,000</text>
<rect x="62" y="134" width="276" height="36" rx="4" class="g1"/>
<text x="200" y="157" text-anchor="middle" class="v">신청 페이지 도달 3,400</text>
<rect x="93" y="188" width="214" height="36" rx="4" class="g1"/>
<text x="200" y="211" text-anchor="middle" class="v">상담 신청 완료 310</text>
<rect x="124" y="242" width="152" height="36" rx="4" class="g1"/>
<text x="200" y="265" text-anchor="middle" class="v">계약 96</text>
<text x="470" y="76" class="v md">2.5%</text>
<text x="600" y="76" class="k">2.1%</text>
<rect x="740" y="62" width="193.4" height="18" rx="3" class="g3"/>
<text x="1088" y="76" text-anchor="end" class="v md">119</text>
<path d="M381,71 H452" class="gr"/>
<text x="470" y="130" class="v md">68%</text>
<text x="600" y="130" class="k">62%</text>
<rect x="740" y="116" width="178.8" height="18" rx="3" class="g3"/>
<text x="1088" y="130" text-anchor="end" class="v md">110</text>
<path d="M350,125 H452" class="gr"/>
<text x="470" y="184" class="va md">9.1%</text>
<text x="600" y="184" class="k">14.0%</text>
<rect x="740" y="170" width="105.6" height="18" rx="3" class="a"/>
<text x="1088" y="184" text-anchor="end" class="va md">65</text>
<path d="M319,179 H452" class="gr"/>
<text x="470" y="238" class="v md">31%</text>
<text x="600" y="238" class="k">28%</text>
<rect x="740" y="224" width="180.4" height="18" rx="3" class="g3"/>
<text x="1088" y="238" text-anchor="end" class="v md">111</text>
<path d="M288,233 H452" class="gr"/>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-fnlb .dk-card{padding:22px 32px 20px}
.dk-fnlb .ttl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin:0 0 var(--s3)}
.dk-fnlb .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-fnlb .lg span{display:flex;align-items:center;gap:6px}
.dk-fnlb .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-fnlb .lg i.c-a{background:var(--ac)}
.dk-fnlb .lg i.c-w{background:var(--acw)}
.dk-fnlb .lg i.c-s{background:var(--soft)}
.dk-fnlb .lg i.c-g1{background:var(--g1)}
.dk-fnlb .lg i.c-g2{background:var(--g2)}
.dk-fnlb .lg i.c-g3{background:var(--g3)}
.dk-fnlb .lg i.c-g4{background:var(--g4)}
.dk-fnlb .lg i.c-o{background:none;border:2px solid var(--ac)}
.dk-fnlb .lg i.c-e{background:var(--soft);border:1px dashed var(--g3)}
.dk-fnlb .lg i.c-t{width:14px;height:3px;border-radius:0;background:var(--ink)}
.dk-fnlb .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-fnlb svg{display:block}
.dk-fnlb svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-fnlb svg .a{fill:var(--ac)}
.dk-fnlb svg .aw{fill:var(--acw)}
.dk-fnlb svg .sf{fill:var(--soft)}
.dk-fnlb svg .g1{fill:var(--g1)}
.dk-fnlb svg .g2{fill:var(--g2)}
.dk-fnlb svg .g3{fill:var(--g3)}
.dk-fnlb svg .g4{fill:var(--g4)}
.dk-fnlb svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-fnlb svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-fnlb svg .tg{stroke:var(--g3);stroke-width:1;stroke-dasharray:4 4;fill:none}
.dk-fnlb svg text.k{fill:var(--ink2)}
.dk-fnlb svg text.v{fill:var(--ink);font-weight:600}
.dk-fnlb svg text.va{fill:var(--ac);font-weight:700}
.dk-fnlb svg text.on{fill:var(--card);font-weight:600}
.dk-fnlb svg text.big{font-size:24px;font-weight:700}
.dk-fnlb svg text.md{font-size:16px}
.dk-fnlb svg .ln{fill:none;stroke:var(--g4);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.dk-fnlb svg .ln.hot{stroke:var(--ac)}
.dk-fnlb svg .ln.sub{stroke:var(--g2);stroke-width:2}
.dk-fnlb svg .dot{fill:var(--ac);stroke:var(--card);stroke-width:2}
.dk-fnlb svg .dot.m{fill:var(--g4)}
.dk-fnlb svg .dot.s{fill:var(--g2)}
.dk-fnlb svg .ol{fill:none;stroke:var(--ac);stroke-width:2.5}
.dk-fnlb svg .al{stroke:var(--ac);stroke-width:1.5;fill:none}