깔때기 3단(단계별 전환율)

노출에서 구매까지 단계마다 얼마나 줄어드는지, 어느 구간이 문제인지 보여줄 때. 띠는 3개 고정. 띠 안에는 단계 이름과 수치, 오른쪽에는 전 단계 대비 비율과 해석 1줄. 값 바꾸는 법: .b=띠(이름과 수치), 오른쪽 .r=같은 순서의 비율·제목·해석. 띠의 기울기는 고정(값에 비례하지 않음)이므로 실제 수치는 글로 적는다. 강조할 구간 하나의 .b 와 .r 에 class="hot". 띠 수를 바꾸려면 다른 단 수 조각 사용.

SlideModel Timeline Funnel Concept(https://slidemodel.com/templates/timeline-funnel-concept-powerpoint-template/). SlideModel Innovation Process Funnel(https://slidemodel.com/templates/innovation-process-funnel-diagram-powerpoint-template/). 띠 옆에 해석을 같은 높이로 맞춰 적는 컨설팅 장표 방식. 구성 방식만 참고, 그림과 코드는 직접 제작.

<div class="dk dk-funnel3">
  <div class="fn"><div class="b" style="clip-path:polygon(0.0% 0,100.0% 0,88.7% 100%,11.3% 100%)"><span>방문</span><b class="num">지수 100</b></div><div class="b" style="clip-path:polygon(11.3% 0,88.7% 0,77.3% 100%,22.7% 100%)"><span>장바구니</span><b class="num">지수 17</b></div><div class="b hot" style="clip-path:polygon(22.7% 0,77.3% 0,66.0% 100%,34.0% 100%)"><span>구매</span><b class="num">지수 3.2</b></div></div>
  <div class="rt"><div class="r"><b class="num">기준</b><div><h3>광고 유입 방문</h3><p>검색과 SNS 광고를 거쳐 들어온 방문 전체</p></div></div><div class="r"><b class="num">17%</b><div><h3>상세페이지 설득</h3><p>혜택 안내가 화면 아래에 있어 내려 보기 전 이탈</p></div></div><div class="r hot"><b class="num">19%</b><div><h3>결제 완료</h3><p>장바구니에 담고도 81%가 결제하지 않음</p></div></div></div>
</div>

.dk-funnel3{display:grid;grid-template-columns:500px minmax(0,1fr);gap:56px;align-items:start}
.dk-funnel3 .fn,.dk-funnel3 .rt{display:flex;flex-direction:column;gap:6px}
.dk-funnel3 .b{height:100px;background:var(--g1);display:flex;align-items:center;justify-content:center;gap:10px;font-size:var(--f-body);color:var(--ink2)}
.dk-funnel3 .b b{font-size:var(--f-lg);font-weight:700}
.dk-funnel3 .b.hot{background:var(--ac);color:var(--card)}
.dk-funnel3 .b.hot b{color:var(--card)}
.dk-funnel3 .r{height:100px;display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;border-bottom:1px solid var(--line)}
.dk-funnel3 .r:last-child{border-bottom:0}
.dk-funnel3 .r>b{font-size:var(--f-xl);font-weight:700;color:var(--g3)}
.dk-funnel3 .r h3{font-size:var(--f-md);font-weight:700;margin:0;line-height:1.35}
.dk-funnel3 .r p{margin:0;font-size:var(--f-sm);color:var(--ink2)}
.dk-funnel3 .r.hot>b,.dk-funnel3 .r.hot h3{color:var(--ac)}