내 집 마련을 계획하거나, 급하게 목돈이 필요할 때 가장 먼저 고민되는 것. 바로 “그래서 내가 한 달에 얼마를 갚아야 하지?”입니다.
은행 앱을 켜자니 로그인이 귀찮고, 엑셀을 켜자니 수식이 복잡해서 머리 아프셨던 적 있으시죠?
그래서 준비했습니다. 복잡한 과정 없이 지금 바로, 이 페이지에서 월 납입금을 확인할 수 있는 계산기입니다. 딱딱한 금융 계산기 대신, 보기에도 편하고 예쁜 디자인으로 만들었으니 편하게 두드려보세요.
아래 계산기에서 대출 금액과 금리, 기간만 입력하고 ‘계산하기’ 버튼을 눌러보세요.
💸 대출 이자 계산기
예상 월 납입금을 확인해보세요
월 예상 납입금
0원
총 이자액
0원
총 상환 금액
0원
* 원리금균등분할상환 기준입니다.
💡 이 계산기는 ‘원리금 균등 상환’ 기준입니다. 이 방식은 대출 기간 동안 매월 납부하는 금액(원금+이자)이 동일하도록 계산된 방식입니다. 주택담보대출이나 전세자금대출을 받을 때 가장 흔하게 쓰이는 방식이죠. 매달 나가는 돈이 일정하기 때문에 자금 계획을 세우기에 가장 유리합니다.
활용 꿀팁:
- 전세 자금 대출: 요즘 금리인 3~4%대를 넣어 월세를 내는 것과 비교해보세요.
- 신용 대출: 마이너스 통장 대신 건별 대출로 받았을 때의 월 부담액을 체크해보세요.
- 차량 할부: 할부 원금과 이율을 넣으면 매달 나가는 자동차 할부금을 알 수 있습니다.
[결론] 대출은 받는 것보다 갚는 계획을 세우는 것이 훨씬 중요합니다. 막연하게 “어떻게든 되겠지” 생각하기보다, 이렇게 직접 숫자를 눈으로 확인하면 훨씬 더 구체적이고 현명한 자금 계획을 세우실 수 있을 거예요.
이 페이지를 즐겨찾기 해두시고, 필요할 때마다 언제든 와서 계산해보세요! 여러분의 똑똑한 금융 생활을 응원합니다. ✨
코드는 아래와 같으니 참고하세요.
<div id="pretty-loan-calculator">
<div class="calculator-card">
<div class="calculator-header">
<h3>💸 대출 이자 계산기</h3>
<p>예상 월 납입금을 확인해보세요</p>
</div>
<div class="input-group">
<label for="loan-amount">대출 금액 (만 원)</label>
<input type="number" id="loan-amount" placeholder="예: 5000" inputmode="numeric">
</div>
<div class="row">
<div class="input-group">
<label for="interest-rate">연 이자율 (%)</label>
<input type="number" id="interest-rate" placeholder="예: 3.5" step="0.1" inputmode="decimal">
</div>
<div class="input-group">
<label for="loan-period">대출 기간 (개월)</label>
<input type="number" id="loan-period" placeholder="예: 24" inputmode="numeric">
</div>
</div>
<button onclick="calculateLoan()" class="calc-btn">계산하기 ✨</button>
<div id="result-area" class="result-hidden">
<div class="result-divider"></div>
<div class="result-item highlight">
<span>월 예상 납입금</span>
<span class="value" id="monthly-payment">0원</span>
</div>
<div class="result-item sub">
<span>총 이자액</span>
<span class="value" id="total-interest">0원</span>
</div>
<div class="result-item sub">
<span>총 상환 금액</span>
<span class="value" id="total-payment">0원</span>
</div>
<p class="disclaimer">* 원리금균등분할상환 기준입니다.</p>
</div>
</div>
<style>
/* 스타일 정의 (이 영역 안에서만 작동하도록 스코핑) */
#pretty-loan-calculator {
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
display: flex;
justify-content: center;
margin: 40px 0;
width: 100%;
}
#pretty-loan-calculator .calculator-card {
background: #ffffff;
width: 100%;
max-width: 420px;
padding: 30px;
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.04);
transition: transform 0.3s ease;
}
#pretty-loan-calculator .calculator-header h3 {
margin: 0 0 8px 0;
font-size: 1.5rem;
color: #1a1a1a;
font-weight: 700;
}
#pretty-loan-calculator .calculator-header p {
margin: 0 0 24px 0;
color: #666;
font-size: 0.95rem;
}
#pretty-loan-calculator .input-group {
margin-bottom: 20px;
display: flex;
flex-direction: column;
}
#pretty-loan-calculator .row {
display: flex;
gap: 16px;
}
#pretty-loan-calculator .row .input-group {
flex: 1;
}
#pretty-loan-calculator label {
font-size: 0.9rem;
font-weight: 600;
color: #444;
margin-bottom: 8px;
display: block;
}
#pretty-loan-calculator input {
width: 100%;
padding: 14px;
border-radius: 12px;
border: 2px solid #eee;
background-color: #f9f9f9;
font-size: 1rem;
transition: all 0.2s;
outline: none;
box-sizing: border-box; /* 패딩 포함 크기 계산 */
}
#pretty-loan-calculator input:focus {
border-color: #6366f1;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
#pretty-loan-calculator .calc-btn {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: white;
border: none;
border-radius: 14px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
margin-top: 10px;
transition: transform 0.1s, box-shadow 0.2s;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
#pretty-loan-calculator .calc-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
#pretty-loan-calculator .calc-btn:active {
transform: translateY(1px);
}
#pretty-loan-calculator .result-hidden {
display: none;
opacity: 0;
transform: translateY(10px);
transition: all 0.5s ease;
}
#pretty-loan-calculator .result-show {
display: block;
opacity: 1;
transform: translateY(0);
}
#pretty-loan-calculator .result-divider {
height: 1px;
background: #eee;
margin: 25px 0;
}
#pretty-loan-calculator .result-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
#pretty-loan-calculator .result-item span {
font-size: 0.95rem;
color: #666;
}
#pretty-loan-calculator .result-item.highlight {
background: #f0f4ff;
padding: 15px;
border-radius: 12px;
margin-bottom: 15px;
}
#pretty-loan-calculator .result-item.highlight span {
color: #4f46e5;
font-weight: 700;
}
#pretty-loan-calculator .result-item.highlight .value {
font-size: 1.25rem;
}
#pretty-loan-calculator .result-item .value {
font-weight: 600;
color: #333;
}
#pretty-loan-calculator .disclaimer {
font-size: 0.75rem;
color: #999;
text-align: center;
margin-top: 15px;
}
</style>
<script>
function calculateLoan() {
// 입력값 가져오기
const amount = parseFloat(document.getElementById('loan-amount').value) * 10000; // 만원 단위 변환
const rate = parseFloat(document.getElementById('interest-rate').value) / 100 / 12; // 월 이자율
const months = parseFloat(document.getElementById('loan-period').value);
// 유효성 검사
if (!amount || !rate || !months) {
alert("모든 값을 올바르게 입력해주세요!");
return;
}
// 원리금 균등 상환 공식: PMT = P * r * (1+r)^n / ((1+r)^n - 1)
const x = Math.pow(1 + rate, months);
const monthly = (amount * rate * x) / (x - 1);
// 결과 계산
const totalPayment = monthly * months;
const totalInterest = totalPayment - amount;
// 화면 표시 (숫자 포맷팅)
document.getElementById('monthly-payment').innerText = Math.floor(monthly).toLocaleString() + '원';
document.getElementById('total-interest').innerText = Math.floor(totalInterest).toLocaleString() + '원';
document.getElementById('total-payment').innerText = Math.floor(totalPayment).toLocaleString() + '원';
// 결과창 애니메이션과 함께 보이기
const resultArea = document.getElementById('result-area');
resultArea.classList.add('result-show');
}
</script>
</div>