호스팅 무료 구간 비교

<div class="compare-demo"><div class="compare-title">STATIC SITE · MONTHLY COST</div><div class="compare-input"><label>Requests <b id="first-value"></b><input id="first" type="range" min="0" max="2000000" step="100000" value="1000000"></label><label>Transfer GB <b id="second-value"></b><input id="second" type="range" min="0" max="100" step="5" value="20"></label></div><div class="cost-rows"><div class="cost-row"><span>Pages static</span><div class="cost-track"><i id="cost-bar-0"></i></div><strong id="cost-value-0">$0</strong></div><div class="cost-row"><span>Netlify plan</span><div class="cost-track"><i id="cost-bar-1"></i></div><strong id="cost-value-1">$0</strong></div><div class="cost-row"><span>Amplify eligible</span><div class="cost-track"><i id="cost-bar-2"></i></div><strong id="cost-value-2">$0</strong></div></div><div class="compare-foot" id="compare-foot">2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외)</div></div>

.compare-demo{width:min(95vw,900px);height:min(92vh,350px);padding:clamp(8px,2.2vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(5px,1.4vmin,10px);overflow:hidden;font:600 clamp(11px,2.4vmin,16px)/1.2 ui-sans-serif,-apple-system,sans-serif}.compare-title{color:var(--accent);font-weight:800}.compare-input{display:flex;gap:clamp(5px,2vmin,14px)}.compare-input label{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;font-size:.72em;gap:2px}.compare-input b{color:var(--accent);font-variant-numeric:tabular-nums}.compare-input input{grid-column:1/3;width:100%;accent-color:var(--accent)}.cost-rows{flex:1;min-height:0;display:grid;align-content:center;gap:clamp(5px,1.6vmin,11px)}.cost-row{display:grid;grid-template-columns:minmax(80px,27%) 1fr minmax(45px,14%);align-items:center;gap:clamp(4px,1.4vmin,9px);font-size:.75em}.cost-track{height:clamp(13px,4vmin,26px);background:var(--line);border-radius:5px;overflow:hidden}.cost-track i{display:block;height:100%;background:var(--accent);width:0;transition:width .35s}.cost-row:nth-child(2) i{background:var(--accent-2)}.cost-row:nth-child(3) i{background:var(--accent-3)}.cost-row:nth-child(4) i{background:var(--muted)}.cost-row strong{text-align:right;font-variant-numeric:tabular-nums}.compare-foot{font-size:.66em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

const first=document.getElementById('first');const second=document.getElementById('second');let manual=false;function bar(index,cost,max){document.getElementById('cost-value-'+index).textContent='$'+cost.toFixed(2);document.getElementById('cost-bar-'+index).style.width=(cost===0?0:Math.max(5,cost/max*100))+'%'}function paint(){const a=Number(first.value),b=Number(second.value);document.getElementById('first-value').textContent=(a/1000000).toFixed(1)+'M';document.getElementById('second-value').textContent=b+' GB';const credits=b*20+a/10000*2+15;const personal=9+Math.ceil(Math.max(0,credits-1000)/500)*5;const pro=20+Math.ceil(Math.max(0,credits-3000)/1500)*10;const netlify=credits<=300?0:Math.min(personal,pro);const amplify=Math.max(0,b-15)*.15;const scale=Math.max(1,netlify,amplify);bar(0,0,scale);bar(1,netlify,scale);bar(2,amplify,scale);}paint();let direction=1;setInterval(()=>{if(manual)return;const next=Number(first.value)+100000*direction;if(next>2000000||next<0){direction*=-1;return}first.value=String(next);paint()},800);for(const input of [first,second])input.addEventListener('input',()=>{manual=true;paint()});