구독 비용 실험실 — 첫 달 할인과 갱신 비교
by SolarViper777 lines5.1 KB
<!doctype html><html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>구독 비용 실험실</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:#eef7f6;color:#193c43;line-height:1.65}main{max-width:880px;margin:auto;padding:24px}h1{line-height:1.3}section,.card{background:white;border-radius:18px;padding:20px;margin:16px 0}label{display:block;margin:12px 0}input{width:130px;padding:9px;border:1px solid #85aaa8;border-radius:8px;font:inherit;float:right}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.result{font-size:1.5rem;font-weight:700}.bar{height:20px;background:#188981;border-radius:6px;max-width:100%;transition:width .15s}button{padding:12px 20px;font:inherit;background:#176963;color:white;border:0;border-radius:10px;cursor:pointer}a{color:#1060a2}.small{font-size:.88rem;color:#4b6870}output{display:block}@media(max-width:600px){.grid{grid-template-columns:1fr}main{padding:14px}input{width:100px}}</style></head><body><main><p>지원미디어 · 생활 수학</p><h1>구독 비용 실험실</h1><p>“첫 달은 저렴하니까 계속 저렴할까?” 숫자를 바꾸며 <strong>월별 결제</strong>와 <strong>묶음 결제</strong>를 비교하세요. 아래 숫자는 모두 학습용 예시입니다.</p>
<section><h2>숫자를 바꿔 보세요</h2><label>이용할 개월 수 <input id="months" type="number" min="1" max="36" value="6"></label><label>첫 달 금액(원) <input id="first" type="number" min="0" max="1000000" value="3000"></label><label>둘째 달부터 월 금액(원) <input id="renew" type="number" min="0" max="1000000" value="6000"></label><label>묶음 상품 이용 개월 수 <input id="packMonths" type="number" min="1" max="36" value="3"></label><label>묶음 상품 한 번 결제액(원) <input id="packPrice" type="number" min="0" max="1000000" value="15000"></label></section>
<div class="grid"><section><h2>월별로 결제하면</h2><output id="monthlyTotal" class="result" aria-live="polite"></output><div id="monthlyBar" class="bar"></div><p id="monthlyFormula"></p></section><section><h2>묶음으로 결제하면</h2><output id="packTotal" class="result" aria-live="polite"></output><div id="packBar" class="bar"></div><p id="packFormula"></p></section></div>
<section><h2>어떻게 읽으면 될까요?</h2><p id="difference" aria-live="polite"></p><p id="unused"></p><p>묶음 상품은 일부 기간만 쓰더라도 묶음 전체를 결제한다고 가정합니다. 남은 기간 환불, 환율, 세금과 별도 수수료는 계산에 포함하지 않았습니다. 실제 상품끼리는 기능과 이용 조건도 같아야 가격을 제대로 비교할 수 있습니다.</p><button id="reset" type="button">처음 예시로 돌아가기</button></section>
<section><h2>실제 안내에 적용해 보기</h2><p>계산기에 넣을 금액은 광고의 가장 큰 숫자보다 실제 선택한 상품의 최종 결제 화면에서 확인하세요. 겜스고를 이용한다면 지원미디어가 운영하는 <a href="https://xn--479a2ex65d.kr/discount-guide/" target="_blank" rel="noopener">할인 적용 순서 안내</a>와 <a href="https://xn--479a2ew9ufzovvf66mtjk.kr/discount-guide/" target="_blank" rel="noopener">할인코드 입력 안내</a>를 참고하고, 첫 결제에만 적용되는 할인인지도 확인할 수 있습니다.</p><p class="small">지원미디어는 위 두 안내 사이트의 독립 제휴 운영자이며, 해당 사이트의 제휴 링크를 통해 구매가 이루어지면 수수료를 받을 수 있습니다. GamsGo 공식 운영사와는 별개입니다. 이 실험실은 특정 상품의 가격이나 할인 적용을 보장하지 않습니다.</p></section>
<script>const $=id=>document.getElementById(id);const ids=['months','first','renew','packMonths','packPrice'];const defaults=[6,3000,6000,3,15000];const won=n=>n.toLocaleString('ko-KR')+'원';function number(id,min,max){const n=Number($(id).value);return Math.min(max,Math.max(min,Math.floor(Number.isFinite(n)?n:min)));}function update(){let m=number('months',1,36),f=number('first',0,1000000),r=number('renew',0,1000000),p=number('packMonths',1,36),b=number('packPrice',0,1000000);let monthly=f+(m-1)*r,count=Math.ceil(m/p),pack=count*b,max=Math.max(monthly,pack,1);$('monthlyTotal').textContent=won(monthly);$('packTotal').textContent=won(pack);$('monthlyFormula').textContent=won(f)+' + '+(m-1)+'개월 × '+won(r);$('packFormula').textContent=count+'회 × '+won(b)+' = '+(count*p)+'개월 이용분';$('monthlyBar').style.width=monthly/max*100+'%';$('packBar').style.width=pack/max*100+'%';$('difference').textContent=monthly===pack?'두 방식의 계산상 총 결제액이 같습니다.':(monthly<pack?'월별 결제':'묶음 결제')+'의 계산상 총 결제액이 '+won(Math.abs(monthly-pack))+' 적습니다.';$('unused').textContent='묶음 결제 시 계획한 '+m+'개월을 넘는 기간: '+(count*p-m)+'개월. 그 기간도 사용할지 함께 판단하세요.';}ids.forEach(id=>$(id).addEventListener('input',update));$('reset').addEventListener('click',()=>{ids.forEach((id,i)=>$(id).value=defaults[i]);update();});update();</script></main></body></html>
Game Source: 구독 비용 실험실 — 첫 달 할인과 갱신 비교
Creator: SolarViper77
Libraries: none
Complexity: simple (7 lines, 5.1 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-solarviper77" to link back to the original. Then publish at arcadelab.ai/publish.