Churn rate

고객 이탈률

Measure the share of starting customers who leave during a period.

···
html
<div class="churn"><div class="figure"><b id="rate">0%</b><span>CHURN</span></div><div class="people"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><small>STARTING CUSTOMERS: 10</small></div>
css
.churn{width:min(88%,520px);font:900 clamp(10px,max(1.8vmin,1vw),15px)/1.2 sans-serif}.figure{display:flex;align-items:baseline;gap:12px}.figure b{font-size:clamp(38px,10vmin,84px);letter-spacing:-.07em;color:var(--accent)}.figure span{color:var(--muted)}.people{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(4px,1.5vmin,12px);margin:clamp(12px,4vmin,28px) 0}.people i{aspect-ratio:1;border-radius:50%;background:var(--accent);transition:background .5s,transform .5s}.people i.off{background:var(--line);transform:scale(.72)}.churn small{color:var(--muted)}small{font-size:max(.833em,10px,1vw)}
js
let gone=0;const dots=[...document.querySelectorAll('.people i')];function show(){dots.forEach((dot,i)=>dot.classList.toggle('off',i<gone));document.querySelector('#rate').textContent=gone*10+'%';gone=gone===5?0:gone+1}show();setInterval(show,1050);

Churn rate is the share of customer relationships lost during a period. Subscription businesses can use cancellation; repeat-purchase businesses may define a period of inactivity.

In the demo, customer dots turn gray and the churn rate rises. The denominator is the customers present at the start, excluding newcomers during the period.

The rate alone does not explain the cause. Break it down by acquisition cohort, product, and tenure to locate the change.

When to use

Use it to monitor cancellations or the loss of repeat buyers over time.

Open as page ↗