고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
SMALL
안녕하세요! 이번 글에서는 대출 이자 계산기 웹사이트를 개발하는 과정을 공유하고자 합니다.
HTML, CSS, JavaScript와 같은 기본 웹 기술을 사용했으며, Bootstrap을 활용하여 디자인을 손쉽게 구현했습니다.
1. 프로젝트 목표
대출 이자 계산기는 사용자가 입력한 대출 금액, 연 이자율, 상환 기간을 기준으로 월별 상환 내역과 총 상환 금액을 계산해주는 웹 애플리케이션입니다. 이를 통해 사용자는 상환 계획을 더욱 명확히 세울 수 있습니다.
2. 개발 도구 및 기술 스택
- HTML: 웹페이지의 구조를 작성.
- CSS: 스타일링.
- JavaScript: 계산 로직 구현 및 동적 업데이트.
- Bootstrap: UI 디자인 프레임워크.
3. 주요 기능
- 대출 정보 입력: 대출 금액, 연 이자율, 상환 기간 입력.
- 상환 방식 선택:
- 원리금 균등 상환
- 원금 균등 상환
- 만기 일시 상환
- 결과 표시:
- 월 상환 금액
- 총 상환 금액
- 총 이자 금액
- 월별 상환 내역
4. 코드 구현
HTML 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>대출 이자 계산기</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center mt-4">대출 이자 계산기</h1>
<form id="loan-form" class="mt-4">
<div class="mb-3">
<label for="amount" class="form-label">대출 금액</label>
<input type="number" id="amount" class="form-control" required>
</div>
<div class="mb-3">
<label for="interest" class="form-label">연 이자율 (%)</label>
<input type="number" id="interest" class="form-control" step="0.01" required>
</div>
<div class="mb-3">
<label for="years" class="form-label">상환 기간 (년)</label>
<input type="number" id="years" class="form-control" required>
</div>
<button type="button" id="equal-principal-interest" class="btn btn-primary">원리금 균등</button>
<button type="button" id="equal-principal" class="btn btn-secondary">원금 균등</button>
<button type="button" id="bullet-payment" class="btn btn-success">만기 일시 납</button>
</form>
<div id="results" class="mt-4" style="display:none;">
<h3>계산 결과</h3>
<p>월 상환 금액: <span id="monthly-payment">0원</span></p>
<p>총 상환 금액: <span id="total-payment">0원</span></p>
<p>총 이자 금액: <span id="total-interest">0원</span></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
대출 이자 계산기
JavaScript 로직
대출 계산 로직은 JavaScript로 구현되었으며, 상환 방식에 따라 다른 계산 방법을 사용합니다.
// 대출 계산 로직
function calculateLoan(type) {
const amount = parseFloat(document.getElementById('amount').value);
const annualInterest = parseFloat(document.getElementById('interest').value) / 100;
const months = parseFloat(document.getElementById('years').value) * 12;
if (isNaN(amount) || isNaN(annualInterest) || isNaN(months) || amount <= 0 || annualInterest <= 0 || months <= 0) {
alert('유효한 값을 입력하세요.');
return;
}
let monthlyPayment, totalPayment, totalInterest;
if (type === 'equal-principal-interest') {
const monthlyRate = annualInterest / 12;
const x = Math.pow(1 + monthlyRate, months);
monthlyPayment = (amount * monthlyRate * x) / (x - 1);
totalPayment = monthlyPayment * months;
totalInterest = totalPayment - amount;
}
// 결과 표시
document.getElementById('monthly-payment').textContent = `${monthlyPayment.toLocaleString()}원`;
document.getElementById('total-payment').textContent = `${totalPayment.toLocaleString()}원`;
document.getElementById('total-interest').textContent = `${totalInterest.toLocaleString()}원`;
document.getElementById('results').style.display = 'block';
}
5. 배포
웹사이트는 Netlify를 통해 무료로 배포되었습니다. GitHub와 연동하여 코드를 푸시하면 자동으로 배포됩니다.
6. 마무리
대출 이자 계산기는 사용자에게 실질적인 도움을 줄 수 있는 간단하면서도 유용한 웹 애플리케이션입니다.
더 나은 사용자 경험을 위해 향후 광고를 추가하거나 다양한 상환 방식을 지원할 예정입니다.
여러분도 따라 해보시고, 궁금한 점은 댓글로 남겨주세요! 😊
사이트 주소 : https://loancalculator2.netlify.app/
대출 이자 계산기
사이드 광고 (왼쪽) 사이드 광고 (오른쪽)
loancalculator2.netlify.app
728x90
반응형
LIST
'공부 > WEB' 카테고리의 다른 글
| 자바스크립트 함수(Function) 기초 배우기 (1) | 2025.02.02 |
|---|---|
| 자바스크립트 객체(Object) 기초 배우기 (1) | 2025.02.02 |
| 자바스크립트 배열(Array) 기초 배우기 (1) | 2025.02.02 |
| UPBIT API를 이용한 웹사이트 개발 (2) | 2025.01.29 |
| Google AdSense 연동하기: 웹사이트로 수익 창출하기 (0) | 2025.01.22 |
