깔때기 그래프(단계별 수치와 전환율)

유입에서 구매까지 단계별로 얼마나 남는지. 전환 경로 진단, 개선할 단계 지목. 단계 4~6개. 막대 폭은 실제 비율 그대로(보기 좋게 임의로 줄이지 않음). 마지막 단계만 강조색. 값 바꾸는 법: 막대 width = 값 ÷ 첫 단계 값 × 600, x = 500 − width ÷ 2, y = 26 + 단계 순번 × 64. 단계 사이 연결 면(polygon)의 네 점 = 위 막대 아래 양끝, 아래 막대 위 양끝. 첫 단계 대비 = 값 ÷ 첫 단계 값, 직전 단계 대비 = 값 ÷ 앞 단계 값. 막대 폭이 90px 미만이면 가운데 글자를 class="v" 로 바꾸고 막대 오른쪽 바깥에 배치. 단계가 6개면 막대 높이 40 → 34, 간격 24 → 18.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Flow 분류와 Datawrapper·분석 도구의 funnel 표기(단계별 수와 직전 단계 대비 비율 병기) 참고. 막대 폭을 값에 정확히 비례시키는 방식으로 직접 제작.

<div class="dk dk-funnel">
<div class="dk-card">
<p class="ttl"><span>광고 유입 방문자의 단계별 잔존 · 최근 4주</span></p>
<svg width="1088" height="322" viewBox="0 0 1088 322" role="img">
<text x="0" y="14">단계</text><text x="500" y="14" text-anchor="middle">방문자 수</text><text x="930" y="14" text-anchor="end">첫 단계 대비</text><text x="1088" y="14" text-anchor="end">직전 단계 대비</text>
<polygon points="200,66 800,66 686,90 314,90" class="sf"/>
<rect x="200" y="26" width="600" height="40" rx="3" class="g2"/><text x="0" y="51" class="k">광고 방문</text><text x="500" y="51" text-anchor="middle" class="v">10,000명</text><text x="930" y="51" text-anchor="end" class="v">100%</text>
<polygon points="314,130 686,130 602,154 398,154" class="sf"/>
<rect x="314" y="90" width="372" height="40" rx="3" class="g2"/><text x="0" y="115" class="k">상세 조회</text><text x="500" y="115" text-anchor="middle" class="v">6,200명</text><text x="930" y="115" text-anchor="end" class="v">62%</text><text x="1088" y="115" text-anchor="end" class="k">62%</text>
<polygon points="398,194 602,194 557,218 443,218" class="sf"/>
<rect x="398" y="154" width="204" height="40" rx="3" class="g2"/><text x="0" y="179" class="k">장바구니 담기</text><text x="500" y="179" text-anchor="middle" class="v">3,400명</text><text x="930" y="179" text-anchor="end" class="v">34%</text><text x="1088" y="179" text-anchor="end" class="k">55%</text>
<polygon points="443,258 557,258 535.4,282 464.6,282" class="sf"/>
<rect x="443" y="218" width="114" height="40" rx="3" class="g2"/><text x="0" y="243" class="k">결제 시도</text><text x="500" y="243" text-anchor="middle" class="v">1,900명</text><text x="930" y="243" text-anchor="end" class="v">19%</text><text x="1088" y="243" text-anchor="end" class="k">56%</text>
<rect x="464.6" y="282" width="70.8" height="40" rx="3" class="a"/><text x="0" y="307" class="v">구매 완료</text><text x="500" y="307" text-anchor="middle" class="on">1,180명</text><text x="930" y="307" text-anchor="end" class="va">11.8%</text><text x="1088" y="307" text-anchor="end" class="k">62%</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-funnel .dk-card{padding:22px 32px 20px}
.dk-funnel .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-funnel .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-funnel .lg span{display:flex;align-items:center;gap:6px}
.dk-funnel .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-funnel .lg i.c-a{background:var(--ac)}
.dk-funnel .lg i.c-s{background:var(--soft)}
.dk-funnel .lg i.c-g1{background:var(--g1)}
.dk-funnel .lg i.c-g2{background:var(--g2)}
.dk-funnel .lg i.c-g3{background:var(--g3)}
.dk-funnel .lg i.c-g4{background:var(--g4)}
.dk-funnel .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-funnel svg{display:block}
.dk-funnel svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-funnel svg .a{fill:var(--ac)}
.dk-funnel svg .sf{fill:var(--soft)}
.dk-funnel svg .g1{fill:var(--g1)}
.dk-funnel svg .g2{fill:var(--g2)}
.dk-funnel svg .g3{fill:var(--g3)}
.dk-funnel svg .g4{fill:var(--g4)}
.dk-funnel svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-funnel svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-funnel svg text.k{fill:var(--ink2)}
.dk-funnel svg text.v{fill:var(--ink);font-weight:600}
.dk-funnel svg text.va{fill:var(--ac);font-weight:700}
.dk-funnel svg text.on{fill:var(--card);font-weight:600}