방문부터 구매까지 단계별로 남은 고객과 이탈한 고객을 봅니다.
<div class="funnel"><div class="row"><span>VISIT</span><div class="track"><i style="--w:100%;--d:0s"></i></div><b>100%</b></div><div class="row"><span>VIEW</span><div class="track"><i style="--w:72%;--d:.35s"></i></div><b>72%</b></div><div class="row"><span>CART</span><div class="track"><i style="--w:34%;--d:.7s"></i></div><b>34%</b></div><div class="row"><span>BUY</span><div class="track"><i style="--w:18%;--d:1.05s"></i></div><b>18%</b></div><div class="drop">↓ 82% DROP-OFF</div></div>.funnel{width:min(88%,620px);display:grid;gap:clamp(9px,2vmin,20px);font:800 clamp(9px,1.8vmin,15px)/1 sans-serif}.row{display:grid;grid-template-columns:clamp(40px,9vw,68px) 1fr clamp(34px,7vw,52px);align-items:center;gap:clamp(6px,1.5vw,18px)}.row span{color:var(--muted);letter-spacing:.05em}.track{height:clamp(17px,4vmin,34px);background:var(--line);border-radius:5px;overflow:hidden}.track i{display:block;height:100%;width:var(--w);background:var(--accent);transform-origin:left;animation:fill 3.3s ease-in-out var(--d) infinite}.row:nth-child(2) i{background:var(--accent-2)}.row:nth-child(3) i{background:var(--accent-3)}.row:nth-child(4) i{background:var(--fg)}.row b{text-align:right;font-size:clamp(10px,2vmin,17px)}.drop{text-align:right;color:var(--accent);font-size:clamp(9px,1.8vmin,14px);letter-spacing:.08em}@keyframes fill{0%,7%{transform:scaleX(0)}35%,75%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}전환 퍼널은 고객 여정을 순서가 있는 단계로 나눠 각 단계의 통과율을 보는 모델입니다. 전체 구매율만 보면 어느 지점에서 고객이 막히는지 알기 어렵습니다.
같은 기간과 같은 사용자 집합으로 방문·상품 조회·장바구니·구매 이벤트를 세어 단계별 전환율을 계산합니다. 데모의 막대는 한 단계씩 채워진 뒤 다음 단계로 갈수록 좁아집니다.
퍼널이 모든 고객의 실제 행동 순서를 뜻하지는 않습니다. 되돌아오거나 단계를 건너뛰는 경로도 별도로 살펴야 합니다.
가입·구매 여정에서 개선할 단계를 고를 때 씁니다. 분모와 이벤트 정의를 먼저 고정하세요.