Freemium pricing

프리미엄 무료 모델

Offer a useful free tier and convert some users to paid.

···
html
<div class="free"><div class="flow" id="flow"></div><div class="labels"><span>FREE ZONE</span><span>UPGRADE ZONE</span></div><label>FREE LIMIT <b id="lim">5</b><input id="limit" type="range" min="2" max="10" value="5"></label><div class="note" id="note">3 users reach the upgrade point</div></div>
css
.free{width:min(92%,580px);font:900 clamp(10px,max(2vmin,1vw),14px)/1.2 sans-serif}.flow{display:flex;gap:3px;height:clamp(64px,20vmin,128px);align-items:end}.flow i{flex:1;background:var(--accent);height:55%;transition:.3s}.flow i.paid{background:var(--accent-2);height:85%}.labels{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted)}label{display:block;margin-top:clamp(12px,3vmin,20px)}label b{float:right;color:var(--accent)}input{display:block;width:100%;accent-color:var(--accent)}.note{text-align:center;background:var(--surface);border:1px solid var(--line);padding:8px}@media(min-width:700px){body>:first-child{transform:scale(1.25);transform-origin:center}}
js
const use=[1,2,3,4,5,6,7,8,9,10,11,12],box=document.querySelector('#flow');box.innerHTML=use.map(()=>'<i></i>').join('');const r=document.querySelector('#limit');function draw(){const lim=+r.value;document.querySelector('#lim').textContent=lim;document.querySelectorAll('#flow i').forEach((e,i)=>e.classList.toggle('paid',use[i]>lim));document.querySelector('#note').textContent=(use.filter(n=>n>lim).length)+' users reach the upgrade point'}r.oninput=draw;draw();setTimeout(()=>{r.value=8;draw()},650);setTimeout(()=>{r.value=5;draw()},2600);

Freemium pricing opens a useful basic experience for free, then charges for more capacity or features. The free tier must let people experience real value.

Move the free limit in the demo to shift the range available without payment and the point where an upgrade is needed. A very low limit blocks learning; a very high one weakens the reason to upgrade.

Measure support cost alongside conversion. Abrupt limit cuts can damage trust.

When to use

Use when users can discover value on their own and incremental usage costs are understood.

Open as page ↗