월급 계산기 만들기, 생각보다 재밌었습니다. “세전 300만원이면 실수령이 얼마지?” 하고 검색하다가 문득 “이거 직접 만들면 되잖아?”라는 생각이 들었습니다. 그런데 단순히 실수령액만 보여주면 재미없으니까, 소득 분위도 보여주고, LoL 티어로 매핑도 하고, 미국에선 어떤 소득계층인지, 이 월급이면 무슨 차를 살 수 있는지까지 — 한 번 입력하면 내 월급에 대한 모든 것을 보여주는 계산기를 만들어봤습니다. 오늘 pearsoninsight.com/tools/salary에 런칭했고, 이 글에서는 월급 계산기 만들기의 전 과정을 공유합니다.
월급 계산기 만들기 — 어떤 기능을 넣었나
단순한 실수령액 계산기로 시작했는데, 만들다 보니 기능이 점점 불어났습니다. 최종적으로 들어간 기능은 이렇습니다.
실수령액 계산
세전 월급을 입력하면 4대보험(국민연금 4.5%, 건강보험 3.545%, 장기요양보험, 고용보험 0.9%)과 소득세, 지방소득세를 공제한 실제 통장에 들어오는 금액을 계산합니다. 2026년 기준 요율을 적용했고, 소득세는 국세청 간이세액표를 기반으로 선형 보간 방식으로 계산합니다.
LoL 티어 매핑
이 기능이 제일 반응이 좋았습니다. 소득 수준을 League of Legends의 티어로 표현합니다. Iron(하위 10%)부터 Challenger(상위 1%)까지, 내 월급이 전체 근로자 중에서 어느 위치인지를 게임 티어로 직관적으로 보여줍니다. 월급 200만원이면 브론즈, 300만원이면 골드, 500만원이면 다이아몬드 — 이런 식으로요.
소득 분위 + 미국 비교
“상위 몇 %인지”를 프로그레스 바로 시각화하고, 같은 소득을 미국 환율(1,450원/USD)로 변환해서 미국 소득계층 8단계(빈곤층~최상위층)로 매핑합니다. 한국에서 골드 티어라도 미국에서는 저소득층이라는 현실을 보여주는 게 꽤 임팩트가 있었습니다.
추천 차량
실수령액 6개월치를 차량 예산으로 잡고, 70대 이상의 차량 데이터에서 “딱 맞는 차”, “조금만 더 하면”, “합리적인 선택” 3단계로 분류해서 보여줍니다. 경차부터 슈퍼카까지 18개 브랜드의 로고를 인라인 SVG로 구현했습니다.
학벌별 소득 분포 + 직업 비교
11개 학벌 그룹(해외 Top30~고졸)별 소득 분포를 바 차트로 보여주고, 12개 직업/직급과 비교해서 “편의점 알바보다 얼마나 더 많은지, IT 임원과 얼마나 차이나는지”를 보여줍니다.
맞벌이/가구 지원
1인부터 4인가구까지 선택할 수 있고, 맞벌이인 경우 구성원별(배우자/성인자녀/부모님) 월급을 따로 입력해서 합산 계산이 됩니다.
월급 계산기 만들기 — 기술 스택 선택
프레임워크 없이 Vanilla JavaScript 단일 HTML 파일로 만들었습니다. React나 Vue를 쓸까 고민했지만, 이 정도 규모(약 880줄)에는 오히려 과한 선택이었습니다.
| 구분 | 기술 | 선택 이유 |
|---|---|---|
| 프론트엔드 | Vanilla JavaScript (ES5) | 빌드 과정 불필요, 단일 파일 배포 |
| 스타일링 | Tailwind CSS (CDN) | 유틸리티 클래스로 빠른 UI 구현 |
| 폰트 | Pretendard Variable | 한글 최적화 웹폰트 |
| 이미지 캡처 | html2canvas | 결과를 이미지로 저장/공유 |
| 공유 | Kakao SDK + Web Share API | 카카오톡 + 모바일 네이티브 공유 |
| 데이터 | 별도 JSON 파일 | 코드와 데이터 분리, 연도별 업데이트 용이 |
| 배포 | Apache + Cloudflare | 기존 워드프레스 서버 활용 |
Vanilla JS를 선택한 결정적 이유는 워드프레스 환경에 쉽게 삽입할 수 있다는 점이었습니다. 번들러 설정, 빌드 프로세스 없이 HTML 파일 하나만 서버에 올리면 바로 동작합니다.
월급 계산기 만들기 — 핵심 구현 과정
세금 계산 엔진
가장 중요한 부분입니다. 4대보험은 비율이 정해져 있어서 단순 곱셈이지만, 소득세가 까다롭습니다. 국세청 간이세액표는 월급 구간별로 세액이 정해져 있는데, 모든 구간을 일일이 매핑하는 대신 선형 보간(linear interpolation) 방식을 썼습니다. 36개 구간의 [월급, 세액] 데이터를 JSON에 넣어두고, 입력된 월급이 두 구간 사이에 있으면 비례해서 세액을 계산합니다.
// 핵심 로직 (간략화)
function calc(monthlyWan) {
var gross = monthlyWan * 10000;
var nps = Math.min(gross * 0.045, 286650); // 국민연금 (상한 있음)
var hi = gross * 0.03545; // 건강보험
var ltc = hi * 0.1295; // 장기요양
var ei = gross * 0.009; // 고용보험
var tax = interpolateTax(monthlyWan); // 소득세 (선형 보간)
var localTax = tax * 0.1; // 지방소득세
var net = gross - nps - hi - ltc - ei - tax - localTax;
return { gross, net, ... };
}국민연금에는 상한액(월 286,650원)이 있다는 점도 반영했습니다. 월급이 아무리 높아도 국민연금은 이 금액을 넘지 않습니다.
데이터 분리 — salary-data.json
코드와 데이터를 완전히 분리한 건 잘한 선택이었습니다. 세율이 바뀌거나, 새 차량 데이터를 추가하거나, LoL 티어 구간을 수정할 때 코드를 건드리지 않고 JSON 파일만 수정하면 됩니다. 2027년이 되면 요율만 업데이트하면 바로 사용할 수 있습니다.
JSON에 들어있는 데이터 목록: 4대보험 요율, 간이세액표 36개 구간, 부양가족별 조정 배수, 1인/가구별 소득 분위, 직업별 비교 데이터, LoL 티어 10단계, 미국 소득계층 8단계 + 환율, 학벌별 소득 분포 11그룹, 차량 70대 이상 데이터.
차량 브랜드 SVG 로고
추천 차량 기능에서 브랜드 로고를 어떻게 표시할지 고민했습니다. 이미지 파일을 쓰면 18개 브랜드 로고를 따로 호스팅해야 하니까, 인라인 SVG로 전부 구현했습니다. 현대, 기아, 제네시스, BMW, 벤츠, 아우디, 테슬라, 포르쉐, 페라리 등 18개 브랜드 로고가 외부 요청 없이 즉시 렌더링됩니다.
월급 계산기 만들기 — 가장 삽질한 부분들
개발 과정에서 예상치 못한 문제들이 터졌습니다. 다른 개발자분들이 같은 실수를 안 하시길 바라며 공유합니다.
삽질 1: 카카오톡 공유에서 링크가 안 보임
카카오톡 공유 기능을 구현할 때, 처음에는 objectType: 'feed'로 카드 형태 공유를 시도했습니다. 멋있게 카드가 뜨긴 하는데 링크 버튼이 안 보이는 문제가 있었습니다. 도메인 등록도 했고, buttons 배열도 넣었는데 안 됐습니다.
| 시도 | 결과 |
|---|---|
objectType: 'feed' + buttons 배열 |
카드는 뜨지만 버튼 미표시 |
objectType: 'text' + buttons 배열 |
버튼 미표시 |
objectType: 'text' + buttonTitle |
해결! 텍스트에 URL 포함 + 버튼 표시 |
결론: 카카오톡 공유는 objectType: 'text' + buttonTitle 조합이 가장 안정적입니다.
삽질 2: 이미지 공유할 때 링크가 같이 안 감
결과를 이미지로 캡처해서 카카오톡으로 공유하면, 이미지만 가고 링크가 같이 전달되지 않는 문제가 있었습니다. navigator.share()에 files와 url을 같이 넣으면 카카오톡이 files만 보내고 나머지를 무시합니다.
최종 해결: 이미지는 기기에 저장하고, 링크는 별도로 공유하는 2단계 방식을 채택했습니다. 깔끔하진 않지만, 현재로서는 이게 최선이었습니다.
삽질 3: html2canvas에서 Tailwind CSS가 안 먹음
결과를 이미지로 캡처하는 기능에서 html2canvas를 사용했는데, Tailwind CSS 클래스가 적용되지 않았습니다. html2canvas는 computed style만 읽기 때문에, CDN으로 로드한 Tailwind 유틸리티 클래스가 제대로 반영이 안 됩니다.
해결: 캡처용 카드를 별도로 만들면서 모든 스타일을 인라인으로 작성했습니다. 오프스크린(left: -9999px)에 DOM을 생성하고, 캡처 후 즉시 제거하는 방식입니다. 번거롭지만 확실합니다.
월급 계산기 만들기 — 배포와 운영
배포는 기존 워드프레스 서버(AWS EC2)를 그대로 활용했습니다. 워드프레스와 별개로 /tools/salary/ 경로에 정적 파일로 서빙합니다.
# 로컬에서 서버로 배포
scp -i "키파일.pem" salary-calculator.html ubuntu@서버IP:/tmp/salary-index.html
# 서버에서 웹 디렉토리로 복사
sudo cp /tmp/salary-index.html /var/www/html/tools/salary/index.html
sudo chown www-data:www-data /var/www/html/tools/salary/index.htmlCloudflare CDN이 앞단에 있어서 캐싱도 되고, HTTPS도 자동 적용됩니다. 데이터를 업데이트할 때는 salary-data.json만 같은 방식으로 업로드하면 끝입니다.
월급 계산기 만들기 — 결과물
완성된 월급 계산기는 여기서 직접 사용해볼 수 있습니다. 주요 화면을 소개합니다.
월급을 입력하면 실수령액, LoL 티어, 소득 분위, 미국 비교가 한 화면에 나옵니다. 아래 탭에서 분위표, 직업 비교, 학벌별 위치, 추천 차량, 공제 내역을 확인할 수 있습니다. 결과는 카카오톡, 텔레그램, X(트위터)로 공유하거나 이미지로 저장할 수 있습니다.
가장 반응이 좋았던 건 역시 LoL 티어와 미국 비교였습니다. “나 골드인데 미국에선 저소득층이라고?” — 이런 반응이 공유를 자연스럽게 유도합니다.
마무리 — 월급 계산기 만들기, 사이드 프로젝트로 추천합니다
월급 계산기 만들기는 사이드 프로젝트로 꽤 괜찮은 주제입니다. 세금 계산이라는 실용적인 기능에 LoL 티어 같은 재미 요소를 더하면 사람들이 자발적으로 공유하고, 블로그 트래픽도 자연스럽게 올라갑니다. Vanilla JS 단일 파일로 만들면 배포도 간단하고, 데이터를 JSON으로 분리해두면 매년 업데이트도 쉽습니다.
직접 써보고 피드백 주세요! → 2026 월급 계산기 바로가기
블로그에 자체 도구를 올리는 방법이 궁금하면 AWS EC2 워드프레스 설치 가이드를 참고하고, 도메인 설정이 필요하면 워드프레스 도메인 연결 가이드를 읽어보세요. JavaScript 자동화에 관심 있다면 JavaScript 브라우저 자동화 가이드도 확인해보세요.