계산기를 만들어 본 경험을 토대로, 연말정산 계산기를 만들어 보려 한다. 아직 미완성이다.
작동시켜 보려면 아래 result 부분에서 총급여를 입력하고 세액 계산 버튼을 눌러 보면 된다
연말정산 모의계산 서비스는 이미 국세청에서 제공하고 있으므로, 정확한 계산이 필요하다면 아래 사이트 이용하면 된다.
(https://www.hometax.go.kr/websquare/websquare.wq?w2xPath=/ui/pp/index_pp.xml)
See the Pen TaxCalculator by YYYSYYY (@SayYoung) on CodePen.
1. 계산 로직 확인
근로소득자의 세액 계산 구조를 살펴보면 아래와 같다. 계산과정이 많다. 아마 작년에 세금 얼마 냈는지 모르는 사람도 많을거 같다(나도 잘 모름)
2. 만들어야 하는 페이지 예상 화면 구상
복잡한 것은 빼고 뼈대만 만들어 두고, 나중에 보완하자
위에서 기납부세액은 나중에 간이세액표에 따라서 원천징수금액 추정하는 로직을 만들어서 추가해야 할 것 같다. 여기서는 패스하자. 결정세액까지만 계산해 본다.
3. HTML 뼈대 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaxCalculator</title>
<!--css 파일 연결-->
<link rel="stylesheet" href="TaxCalculatorStyle.css">
</head>
<body>
<main>
<table class="type08">
<thead>
<tr>
<th scope="cols">구분</th>
<th scope="cols">금액</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">총급여</th>
<td>
<!--총급여는 input으로 받을 예정-->
<input type="number" name="총급여">
</td>
</tr>
<tr>
<th scope="row">근로소득공제</th>
<td>
<!--근로소득공제는 미리 설정된 공식에 따라 자동계산됨-->
<output type="number" name="근로소득공제">
</td>
</tr>
<tr>
<th scope="row">근로소득금액</th>
<td>
<output type="number" name="근로소득금액">
</td>
</tr>
<tr>
<th scope="row">소득공제</th>
<td>
<input type="number" name="소득공제">
</td>
</tr>
<tr>
<th scope="row">과세표준</th>
<td>
<output type="number" name="과세표준">
</td>
</tr>
<tr>
<th scope="row">산출세액</th>
<td>
<output type="number" name="산출세액">
</td>
</tr>
<tr>
<th scope="row">세액감면</th>
<td>
<input type="number" name="세액감면">
</td>
</tr>
<tr>
<th scope="row">세액공제</th>
<td>
<input type="number" name="세액공제">
</td>
</tr>
<tr>
<th scope="row">결정세액</th>
<td>
<output type="number" name="결정세액">
</td>
</tr>
<tr>
<th scope="row">기납부세액</th>
<td>
<input type="number" name="기납부세액">
</td>
</tr>
<tr>
<th scope="row">차감납부(환급)세액</th>
<td>
<output type="number" name="차감납부(환급)세액">
</td>
</tr>
</tbody>
</table>
</main>
<!--자바스크립트 파일 연결-->
<script src="TaxCalculatorScript.js"></script>
</body>
</html>
*여기까지 결과화면
4. 근로소득금액 산출
근로소득공제가 무엇인지 간단히 이해해 보자.
원칙적으로 소득세는 소득에 대해 내는 세금이다. 사업자의 경우에는 벌어들인 돈에서 쓴 돈을 빼고 남은 순이익에 대해 과세한다. 그런데 근로자의 경우에는 하나하나 이렇게 계산할 수가 없다. 그래서 일괄적으로 이정도 벌었으면 생활하는 데 이정도 쓰지 않겠느냐 하고 정해놓은 금액이 근로소득공제다. 그러니까 이 부분만큼에 대해서는 과세대상으로 보지 않겠다는 의도가 있는 것이다.
아래 계산식을 보면 알 수 있듯이, 총급여가 높아질수록 공제율이 현저히 낮아진다. 500만원 이하에서는 총급여의 70%를 빼주지만, 1억원 초과분에 대해서는 2%만 빼준다. 저소득층의 경우 벌어들인 돈의 대부분을 생존을 위해 써야 하지만, 고소득층의 경우에는 그렇지 않다는 점을 고려한 것이다.
/*총급여 5천만원으로 두고 작성 시작*/
총급여 = 500000000
/*근로소득공제 금액 산출*/
if(총급여 < 50000001){
근로소득공제 = 총급여*0.7
} if(총급여 > 5000000){
근로소득공제 = (총급여-5000000)*0.4 + 3500000
} if(총급여 > 15000000){
근로소득공제 = (총급여-15000000)*0.15 + 7500000
} if(총급여 > 45000000){
근로소득공제 = (총급여-45000000)*0.05 + 12000000
} if(총급여 > 100000000){
근로소득공제 = (총급여-100000000)*0.02 + 14750000
}
/*근로소득금액 산출*/
근로소득금액 = 총급여-근로소득공제
4. 소득공제 산출
소득공제는 지금은 pass하고 나중에 기능을 추가하자. 인적공제 1인 150만원만 있다고 가정
/*소득공제 기능은 나중에 추가하는 것으로 하자 지금은 150만원으로 가정*/
소득공제 = 1500000
5. 과세표준 산출
/*과세표준*/
과세표준 = 근로소득금액-소득공제
6. 산출세액 계산
과세표준에 누진세율을 적용하면 산출세액이 나온다.
누진세가 적용되므로 소득이 높아질수록 적용 세율(한계세율)도 높아진다.
/*산출세액 계산*/
if(과세표준 < 12000001){
산출세액 = 과세표준*0.06
} if(과세표준 > 12000000){
산출세액 = 720000 + (과세표준-12000000)*0.15
} if(과세표준 > 46000000){
산출세액 = 5820000 + (과세표준-46000000)*0.24
} if(과세표준 > 88000000){
산출세액 = 15900000 + (과세표준-88000000)*0.35
} if(과세표준 > 150000000){
산출세액 = 37600000 + (과세표준-150000000)*0.38
} if(과세표준 > 300000000){
산출세액 = 94600000 + (과세표준-300000000)*0.40
} if(과세표준 > 500000000){
산출세액 = 174600000 + (과세표준-500000000)*0.42
}
7. 세액감면
중소기업 취업자는 취업일부터 3년간 70% 한도 내에서 150만 원의 소득세를 감면해 준다(단, 만 15~35세에 취업한 경우에는 90%의 감면율과 5년의 기간을 적용한다).
세액감면 = 0
8. 세액공제
일단 pass
세액공제 = 0
9. 결정세액
결정세액 = 산출세액 - 세액감면 - 세액공제
10. 기납부세액
패스
11. 차감납부(환급)세액
패스
12. HTML 코드 수정
총급여, 근로소득공제 등 값이 자바스크립트에서 계산되고 나면 이를 다시 html 파일 테이블로 보내서 표시해야 한다. 그런데 테이블의 총급여, 근로소득공제 등을 표시하는 <td>태그에 들어가는 내용을 자바스크립트에서 컨트롤하려면 각 <td>에 id를 부여해야 한다. 지금은 <output> 태그, <input>태그에 name을 부여했는데, 자바스크립트에서 id는 중복해서 사용이 불가능, name은 중복해서 사용이 가능한 속성이라고 한다. 세액 계산에서 각 <td>태그의 속성은 고유하므로 id 속성을 사용하여 제어하는 것이 좋겠다.
HTML 코드를 수정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaxCalculator</title>
<!--css 파일 연결-->
<link rel="stylesheet" href="TaxCalculatorStyle.css">
</head>
<body>
<main>
<table class="type08">
<thead>
<tr>
<th scope="cols">구분</th>
<th scope="cols">금액</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">총급여</th>
<td id="총급여">
<!--총급여는 input으로 받을 예정-->
<input type="number">
</td>
</tr>
<tr>
<th scope="row">근로소득공제</th>
<td id="근로소득공제">
<!--근로소득공제는 미리 설정된 공식에 따라 자동계산됨-->
<output type="number">
</td>
</tr>
<tr>
<th scope="row">근로소득금액</th>
<td id="근로소득금액">
<output type="number">
</td>
</tr>
<tr>
<th scope="row">소득공제</th>
<td>
<input type="number" id="소득공제">
</td>
</tr>
<tr>
<th scope="row">과세표준</th>
<td>
<output type="number" id="과세표준">
</td>
</tr>
<tr>
<th scope="row">산출세액</th>
<td>
<output type="number" id="산출세액">
</td>
</tr>
<tr>
<th scope="row">세액감면</th>
<td>
<output type="number" id="세액감면">
</td>
</tr>
<tr>
<th scope="row">세액공제</th>
<td>
<output type="number" id="세액공제">
</td>
</tr>
<tr>
<th scope="row">결정세액</th>
<td>
<output type="number" id="결정세액">
</td>
</tr>
<tr>
<th scope="row">기납부세액</th>
<td>
<input type="number" id="기납부세액">
</td>
</tr>
<tr>
<th scope="row">차감납부(환급)세액</th>
<td>
<output type="number" name="차감납부세액">
</td>
</tr>
</tbody>
</table>
<button name="세액계산">세액계산</button>
</main>
<!--자바스크립트 파일 연결-->
<script src="TaxCalculatorScript.js"></script>
</body>
</html>
13. 자바스크립트에서 세액계산 과정에서 계산된 값을 HTML 테이블로 보내기
document.getElementById("총급여").innerText = 총급여;
document.getElementById("근로소득공제").innerText = 근로소득공제;
document.getElementById("근로소득금액").innerText = 근로소득금액;
document.getElementById("소득공제").innerText = 소득공제;
document.getElementById("과세표준").innerText = 과세표준;
document.getElementById("산출세액").innerText = 산출세액;
document.getElementById("세액감면").innerText = 세액감면;
document.getElementById("세액공제").innerText = 세액공제;
document.getElementById("결정세액").innerText = 결정세액;
document.getElementById("기납부세액").innerText = 기납부세액;
document.getElementById("차감납부할세액").innerText = 차감납부할세액;
* 여기까지 결과화면
14. 테이블의 금액을 테이블 오른쪽에 정렬
CSS 파일 수정
text-align 설정이 없으면 기본적으로 <th>는 가운데 정렬, <td>는 왼쪽 정렬됨. css의 td 속성에서 text-align을 right로 설정한다.
table.type08 td {
width: 350px;
padding: 10px;
vertical-align: top;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: right;
}
여기까지 결과화면
15. 계산과정에서 소수점 이하 절사하기
총급여에 아래와 48,755,009를 입력했더니 계산과정에서 소수점이 표시된다.
소수점 절사 하도록 식을 수정하도록 하자.
Math()함수를 이용한다.
Math.ceil() : 올림
Math.floor() : 내림
Math.round() : 반올림
각 계산과정에 아래 항목들을 추가해준다.
총급여 = Math.floor(총급여)
근로소득공제 = Math.floor(근로소득공제)
소득공제 = Math.floor(소득공제)
산출세액 = Math.floor(산출세액)
세액감면 = Math.floor(세액감면)
세액공제 = Math.floor(세액공제)
여기까지 결과화면
16. 숫자에 천단위 콤마 표시하기
number.toLocaleString(locales, options) 함수를 이용한다.
자바스크립트 코드를 아래와 같이 수정해 준다.
document.getElementById("총급여").innerText = 총급여.toLocaleString();
document.getElementById("근로소득공제").innerText = 근로소득공제.toLocaleString();
document.getElementById("근로소득금액").innerText = 근로소득금액.toLocaleString();
document.getElementById("소득공제").innerText = 소득공제.toLocaleString();
document.getElementById("과세표준").innerText = 과세표준.toLocaleString();
document.getElementById("산출세액").innerText = 산출세액.toLocaleString();
document.getElementById("세액감면").innerText = 세액감면.toLocaleString();
document.getElementById("세액공제").innerText = 세액공제.toLocaleString();
document.getElementById("결정세액").innerText = 결정세액.toLocaleString();
document.getElementById("기납부세액").innerText = 기납부세액.toLocaleString();
document.getElementById("차감납부할세액").innerText = 차감납부할세액.toLocaleString();
* 여기까지 결과화면
17. 총급여 input으로 받아서 값 계산하도록 js 변수 선언부분 변경
지금까지는 js코드에 계산과정의 값을 총급여 = 50000000 같이 강제로 숫자로 넣어주었지만,
사용자에게 값을 받아서 계산하도록 바꿔 줘야 한다. 숫자로 지정해 준 것들 지우고, querySelector를 통해 가져오도록 바꾼다.
let 총급여 = document.querySelector("#총급여")
let 근로소득공제 = document.querySelector('#근로소득공제')
let 근로소득금액 = document.querySelector('#근로소득금액')
let 소득공제 = document.querySelector('#소득공제')
let 과세표준 = document.querySelector('#과세표준')
let 산출세액 = document.querySelector('#산출세액')
let 세액감면 = document.querySelector('#세액감면')
let 세액공제 = document.querySelector('#세액공제')
let 결정세액 = document.querySelector('#결정세액')
let 기납부세액 = document.querySelector('#기납부세액')
let 차감납부세액 = document.querySelector(‘#차감납부세액')
바로 문제가 생긴다
let 총급여 = document.querySelector(“#총급여")
이 부분은 “총급여”라는 id가 부여된 HTML <td>태그를 가져온다. 그런데 값을 받아야 하는 input 태그에는 아무 아이디도 없고, 사실은 <td>의 아이디가 아니라 사용자가 값을 입력하는 <input> 태그에 아이디를 부여한 후 계산해야 한다.
HTML 총급여 input 태그에 name을 부여하고 js에서는 input 태그의 name을 가져와서 사용하도록 한다.
<HTML>
<td id="총급여">
<!--총급여는 input으로 받을 예정-->
<input name="총급여입력" type=“number">
<JS>
let 총급여 = document.querySelector("input name=[총급여입력]”)
아래 부분도 주석처리 해서 없애준다.
총급여를 소수점으로 입력하는 사람은 없을 테니 상관 없을 것 같다.
//총급여 = Math.floor(총급여)
*여기까지 결과화면
18. 총급여 input 태그 오른쪽 화살표 증가 감소 버튼 삭제
총급여 입력하는 부분 오른쪽에 저 화살표도 좀 안나왔으면 좋겠다. 클릭하면 숫자를 증가시키는 버튼인데, 1원씩 증가시키는 사람은 어차피 없기 때문이다.
css에 아래 부분을 추가해준다
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
이제 안나온다
19. 세액 계산부분을 함수로 만들어 주기
function TaxCalculate{
if(총급여 < 50000001){
근로소득공제 = 총급여*0.7
} if(총급여 > 5000000){
근로소득공제 = (총급여-5000000)*0.4 + 3500000
} if(총급여 > 15000000){
근로소득공제 = (총급여-15000000)*0.15 + 7500000
} if(총급여 > 45000000){
근로소득공제 = (총급여-45000000)*0.05 + 12000000
} if(총급여 > 100000000){
근로소득공제 = (총급여-100000000)*0.02 + 14750000
}
근로소득공제 = Math.floor(근로소득공제)
/*근로소득금액 산출*/
근로소득금액 = 총급여-근로소득공제
/*소득공제 기능은 나중에 추가하는 것으로 하자 지금은 150만원으로 가정*/
소득공제 = 1500000
소득공제 = Math.floor(소득공제)
/*과세표준*/
과세표준 = 근로소득금액-소득공제
/*산출세액 계산*/
if(과세표준 < 12000001){
산출세액 = 과세표준*0.06
} if(과세표준 > 12000000){
산출세액 = 720000 + (과세표준-12000000)*0.15
} if(과세표준 > 46000000){
산출세액 = 5820000 + (과세표준-46000000)*0.24
} if(과세표준 > 88000000){
산출세액 = 15900000 + (과세표준-88000000)*0.35
} if(과세표준 > 150000000){
산출세액 = 37600000 + (과세표준-150000000)*0.38
} if(과세표준 > 300000000){
산출세액 = 94600000 + (과세표준-300000000)*0.40
} if(과세표준 > 500000000){
산출세액 = 174600000 + (과세표준-500000000)*0.42
}
산출세액 = Math.floor(산출세액)
/*세액감면*/
세액감면 = 0
세액감면 = Math.floor(세액감면)
/*세액공제*/
세액공제 = 0
세액공제 = Math.floor(세액공제)
/*결정세액*/
결정세액 = 산출세액 - 세액감면 - 세액공제
/*차감납부할세액*/
차감납부세액 = 결정세액 - 기납부세액
}
20. HTML의 세액계산 버튼에 자바스크립트 함수 연결해 주기
<button name="세액계산" onclick="TaxCalculate()">세액계산</button>
21. 버튼 클릭해봤는데 계산이 안된다
‘총급여입력’이라는 Id를 가진 요소를 가져오는 것과
‘총급여입력’이라는 Id를를 가진 요소의 값을 가져오는 것은 다르다. 이 부분도 고쳐준다
let 총급여 = document.getElementById(‘총급여입력').value;
변수 선언부분과 출력부분도 function 선언부분 안쪽으로 넣어준다.
function TaxCalculate(){
let 총급여 = document.getElementById('총급여입력').value;
let 근로소득공제 = document.querySelector('#근로소득공제');
let 근로소득금액 = document.querySelector('#근로소득금액');
let 소득공제 = document.querySelector('#소득공제');
let 과세표준 = document.querySelector('#과세표준');
let 산출세액 = document.querySelector('#산출세액');
let 세액감면 = document.querySelector('#세액감면');
let 세액공제 = document.querySelector('#세액공제');
let 결정세액 = document.querySelector('#결정세액');
let 기납부세액 = document.querySelector('#기납부세액');
let 차감납부세액 = document.querySelector('#차감납부세액');
if(총급여 < 50000001){
근로소득공제 = 총급여*0.7
} if(총급여 > 5000000){
근로소득공제 = (총급여-5000000)*0.4 + 3500000
} if(총급여 > 15000000){
근로소득공제 = (총급여-15000000)*0.15 + 7500000
} if(총급여 > 45000000){
근로소득공제 = (총급여-45000000)*0.05 + 12000000
} if(총급여 > 100000000){
근로소득공제 = (총급여-100000000)*0.02 + 14750000
}
근로소득공제 = Math.floor(근로소득공제)
/*근로소득금액 산출*/
근로소득금액 = 총급여-근로소득공제
/*소득공제 기능은 나중에 추가하는 것으로 하자 지금은 150만원으로 가정*/
소득공제 = 1500000
소득공제 = Math.floor(소득공제)
/*과세표준*/
과세표준 = 근로소득금액-소득공제
/*산출세액 계산*/
if(과세표준 < 12000001){
산출세액 = 과세표준*0.06
} if(과세표준 > 12000000){
산출세액 = 720000 + (과세표준-12000000)*0.15
} if(과세표준 > 46000000){
산출세액 = 5820000 + (과세표준-46000000)*0.24
} if(과세표준 > 88000000){
산출세액 = 15900000 + (과세표준-88000000)*0.35
} if(과세표준 > 150000000){
산출세액 = 37600000 + (과세표준-150000000)*0.38
} if(과세표준 > 300000000){
산출세액 = 94600000 + (과세표준-300000000)*0.40
} if(과세표준 > 500000000){
산출세액 = 174600000 + (과세표준-500000000)*0.42
}
산출세액 = Math.floor(산출세액)
/*세액감면*/
세액감면 = 0
세액감면 = Math.floor(세액감면)
/*세액공제*/
세액공제 = 0
세액공제 = Math.floor(세액공제)
/*결정세액*/
결정세액 = 산출세액 - 세액감면 - 세액공제
/*차감납부할세액*/
// 차감납부세액 = 결정세액 - 기납부세액
document.getElementById("총급여").innerText = 총급여.toLocaleString();
document.getElementById("근로소득공제").innerText = 근로소득공제.toLocaleString();
document.getElementById("근로소득금액").innerText = 근로소득금액.toLocaleString();
document.getElementById("소득공제").innerText = 소득공제.toLocaleString();
document.getElementById("과세표준").innerText = 과세표준.toLocaleString();
document.getElementById("산출세액").innerText = 산출세액.toLocaleString();
document.getElementById("세액감면").innerText = 세액감면.toLocaleString();
document.getElementById("세액공제").innerText = 세액공제.toLocaleString();
document.getElementById("결정세액").innerText = 결정세액.toLocaleString();
//document.getElementById("기납부세액").innerText = 기납부세액.toLocaleString();
//document.getElementById("차감납부할세액").innerText = 차감납부할세액.toLocaleString();
}
*여기까지 결과화면
22. 오류 수정(1) 소득공제 하한 설정
세액계산이 불완전한 것은 둘째치고 각종 오류들이 많다. 우선, 소득이 150만원 이라이면 과세표준과 세액이 음수로 나오는 문제가 있다.
과세표준의 하한을 0으로 설정해 준다.
과세표준 = Math.max(근로소득금액-소득공제,0)
23. 오류 수정(2) 세액계산 버튼 클릭 이후 다시 총급여 입력이 불가능해지는 문제 수정
한번 계산하고 나면 아래처럼 총급여 부분을 다시 입력할 수 없게 되고, 새로고침을 해야만 다시 계산해 볼 수 있다. 이런 점도 고쳐야한다.
자바스크립트에서 값들을 계산한 후에 각 칸에 입력 해 줄 때,innerText라는 속성을 이용하여 입력했기 때문인 것으로 보인다.
document.getElementById(“총급여”). innerText = 총급여.toLocaleString();
아래와 같이 바꿔 준다.
document.getElementById(“총급여”). value = 총급여.toLocaleString();
*수정 후에는 세액 계산 후에도 input 부분이 그대로 남아 있다.
24. 오류 수정(3) 총급여 입력시 천단위 콤마 표시하도록 설정
숫자 입력할 때, 천단위에서 콤마를 표시하도록 하고 싶다.
구글링 해 보니 방법이 있다.
(출처: https://velog.io/@gicomong/12)
여기를 참고하여 아래와 같이 작성해 준다.
[HTML]
<input id="총급여입력" type="text" onkeyup="inputNumberFormat(this)"/>
[JS]
function inputNumberFormat(obj) {
obj.value = comma(uncomma(obj.value));
}
function comma(str) {
str = String(str);
return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}
function uncomma(str) {
str = String(str);
return str.replace(/[^\d]+/g, '');
다만 이렇게 하고 나면, input에 들어간 것이 숫자가 아니라 텍스트가 되기 때문에, 세액계산 할 때는 콤마를 떼고 다시 숫자로 바꿔주는 작업이 필요하다.
세액 계산 JS함수를 아래와 같이 바꿔 준다.
let 총급여 = Number(document.getElementById('총급여입력').value.replaceAll(',',''));
* 작동 화면
25. 오류 수정(4) 총급여 입력 오른쪽 정렬
아래처럼 바꿔준다. HTML태그에서 스타일을 지정해 주는 것이다.
<input id="총급여입력" type="text" onkeyup="inputNumberFormat(this)" style = "text-align:right;"/>
코딩 능력이 부족하다 보니 단순한 것 바꾸는데도 시간이 많이 걸린다.
앞으로 갈 길이 멀다
'코딩 > 뭔가 만들어 보기' 카테고리의 다른 글
| [Python] Selenium과 python selenium bot을 이용하여 취소표 빈자리 알림 보내기 (1) | 2022.09.29 |
|---|---|
| [Python] 특정 페이지에 새 글이 올라오면 알림을 보내는 코드 (0) | 2022.09.14 |
| 근로소득 구간별 세금 부담 비율 (0) | 2021.09.29 |
| 내 연봉, 근로소득자 중 상위 몇 퍼센트일까?(+ 세금은 얼마나 내고 있을까?) (0) | 2021.09.07 |
| 자바스크립트 계산기 만들어서 티스토리 블로그에 올리기 (2) | 2021.08.16 |
댓글