VM과 PaaS 운영·비용 비교

<div class="compare-demo"><div class="compare-title"><b class="compare-badge">VS</b>SELF-MANAGED VM VS MANAGED APP</div><div class="compare-input"><label>Runtime <b id="first-value"></b><input id="first" type="range" min="0" max="730" step="73" value="730"></label><label>Instances <b id="second-value"></b><input id="second" type="range" min="1" max="3" step="1" value="1"></label></div><div class="cost-rows"><div class="cost-row"><span>DigitalOcean VM · 0.5 GiB</span><div class="cost-track"><i id="cost-bar-0"></i></div><strong id="cost-value-0"></strong></div><div class="cost-row"><span>Azure App B1 · 1.75 GB</span><div class="cost-track"><i id="cost-bar-1"></i></div><strong id="cost-value-1"></strong></div></div><div class="compare-foot">2026-10-06 · Different RAM and operations · network/storage/tax excluded</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{display:flex;align-items:center;gap:6px;color:var(--fg);font-weight:800}.compare-badge{display:grid;place-items:center;width:2em;height:2em;border:1px solid var(--line);border-radius:50%;font-size:.7em;color:var(--accent)}.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(2px,.9vmin,7px)}.cost-row{display:grid;grid-template-columns:minmax(72px,27%) 1fr minmax(46px,15%);align-items:center;gap:clamp(3px,1vmin,7px);font-size:.71em}.cost-track{height:clamp(8px,2.5vmin,19px);border:1px solid 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 strong{text-align:right;font-variant-numeric:tabular-nums}.compare-foot{font-size:.65em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:700px){.compare-demo{font-size:16px}.compare-title{font-size:19px}.compare-input label{font-size:14px}.cost-rows{align-content:space-evenly}.cost-row{font-size:13px}.cost-track{height:18px}.compare-foot{font-size:11px}}

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+' h';document.getElementById('second-value').textContent=b+' ';const costs=[Math.min(a*.00595,4)*b,a*.017*b];const scale=Math.max(1,...costs);costs.forEach((cost,index)=>bar(index,cost,scale));}paint();let direction=1;setInterval(()=>{if(manual)return;const next=Number(first.value)+73*direction;if(next>730||next<0){direction*=-1;return}first.value=String(next);paint()},800);for(const input of [first,second])input.addEventListener('input',()=>{manual=true;paint()});