연봉만 넣으면 끝? 진짜 정확한 실수령액 계산기 만들었습니다 [2편] 계산 로직 구현기

지난 [1편]에서는 연봉 실수령액 계산기를 왜, 무엇을 담아 만들었는지 다뤘습니다. 이번 편에서는 실제 계산 로직을 어떻게 구현했는지, 그리고 조선시대 등급의 근거가 된 국세청 통계를 어떻게 찾고 적용했는지 기록합니다.

1. 간이세액표는 “표”가 아니라 “계산식”이었다

처음엔 국세청이 매년 고시하는 근로소득 간이세액표를 통째로 코드에 넣을까 생각했습니다. 그런데 찾아보니 이 표는 월급여 구간 × 부양가족 수 조합으로 짜인 수천 개 행짜리 조견표라, 그대로 넣기엔 너무 방대했습니다.

대신 소득세법 시행령에 이런 문구가 있었습니다.

“이 간이세액표의 해당 세액은 근로소득공제, 기본공제, 특별소득공제 및 특별세액공제 중 일부, 연금보험료공제, 근로소득세액공제와 해당 세율을 반영하여 계산한 금액임”

즉 이 표는 무작위로 정해진 숫자가 아니라, 명확한 계산식으로 만들어진 결과물이었습니다. 그래서 표를 통째로 넣는 대신, 이 계산식 자체를 코드로 구현하는 방향으로 정했습니다.

2. 계산 흐름 코드로 옮기기

// 1. 근로소득공제 (구간별 누진공제)
let earnedIncomeDeduction;
if (annualTaxable <= 5000000) {
  earnedIncomeDeduction = annualTaxable * 0.7;
} else if (annualTaxable <= 15000000) {
  earnedIncomeDeduction = 3500000 + (annualTaxable - 5000000) * 0.4;
} else if (annualTaxable <= 45000000) {
  earnedIncomeDeduction = 7500000 + (annualTaxable - 15000000) * 0.15;
}
// ... 이하 구간 생략

// 2. 과세표준 산출
const taxBase = Math.max(0,
  earnedIncomeAmount - basicDeduction - pensionDeductionAnnual - socialInsuranceDeductionAnnual
);

// 3. 8단계 누진세율 적용
let calculatedTax;
if (taxBase <= 14000000) calculatedTax = taxBase * 0.06;
else if (taxBase <= 50000000) calculatedTax = taxBase * 0.15 - 1260000;
else if (taxBase <= 88000000) calculatedTax = taxBase * 0.24 - 5760000;
// ... 이하 구간 생략

여기서 끝이 아닙니다. 근로소득세액공제(산출세액의 55%, 구간별 한도 적용)까지 계산해서 한 번 더 차감하고, 8~20세 자녀가 있으면 자녀 수별 세액공제(1명 20,830원, 2명 45,830원)를 원천징수 단계에서 추가로 빼줍니다. 이 전체 흐름을 그대로 함수 하나로 구현했습니다.

3. 회사 원천징수 비율(80/100/120%) 반영하기

실제로 직장인은 매달 원천징수되는 세금 비율을 80%, 100%, 120% 중에서 선택할 수 있습니다. 낮게 선택하면 매달 실수령액은 늘지만 연말정산에서 추가로 낼 가능성이 커지고, 높게 선택하면 반대가 됩니다. 이건 계산이 끝난 월 소득세에 비율만 곱해주면 되는 부분이라 간단했습니다.

const monthlyIncomeTax = Math.round((determinedTax / 12) * withholdingRatio);

4. 조선시대 등급의 근거 — 국세청 통계 찾기

등급을 “그냥 감으로” 나누고 싶지 않아서, 실제 소득 분포 데이터를 찾았습니다. 국세청이 공개한 2023년 만근 근로자 근로소득 천분위 통계에서 주요 구간을 확인할 수 있었습니다.

구간	연봉
상위 0.1%	약 11억 3,769만원
상위 1%	약 2억 1,673만원
상위 10%	약 1억 57만원
상위 20%	약 7,624만원
평균	약 5,482만원
하위 20%	약 2,642만원
하위 10%	약 2,119만원

국세청이 공개한 원본 데이터는 천 단위(0.1% 간격)까지 세분화되어 있지만, 그 전체를 그대로 가져오기는 어려워서, 언론에 보도된 주요 구간 수치를 기준점(anchor)으로 삼고 그 사이 구간은 선형 보간(linear interpolation)으로 추정했습니다.

function estimateTopPercent(annualSalary) {
  // [연봉, 상위%] - 연봉 오름차순
  const anchors = [
    [21190000, 90], [26420000, 80], [54820000, 50],
    [76240000, 20], [100570000, 10], [216730000, 1], [1137690000, 0.1]
  ];

  for (let i = 0; i < anchors.length - 1; i++) {
    const [s1, p1] = anchors[i];
    const [s2, p2] = anchors[i + 1];
    if (annualSalary >= s1 && annualSalary <= s2) {
      const ratio = (annualSalary - s1) / (s2 - s1);
      return p1 + (p2 - p1) * ratio; // 두 기준점 사이를 비율대로 보간
    }
  }
}

정확한 개인별 순위는 아니지만, 실제 공개된 통계에 근거한 합리적인 추정치입니다. 이 점은 계산기 화면에도 명확히 고지해뒀습니다.

5. 금액 없는 공유 카드, 캔버스로 그리기

등급 카드를 이미지로 만들어 공유할 수 있게 하고 싶었는데, 여기서 중요한 원칙은 금액이 이미지 어디에도 들어가면 안 된다는 것이었습니다. <canvas>로 직접 그려서 이 부분을 확실히 통제했습니다.

const canvas = document.getElementById('shareCanvas');
const ctx = canvas.getContext('2d');

// 등급별 그라데이션 배경
const grad = ctx.createLinearGradient(0, 0, W, H);
grad.addColorStop(0, tier.color[0]);
grad.addColorStop(1, tier.color[1]);
ctx.fillStyle = grad;
ctx.fillRect(0, 0, W, H);

// 이모지, 관직명, 상위 퍼센트, 사극 대사만 순서대로 그리기
ctx.fillText(tier.emoji, W / 2, 260);
ctx.fillText(tier.name, W / 2, 360);
ctx.fillText(`대한민국 직장인 상위 ${topPercent}%`, W / 2, 420);

사극 대사처럼 긴 문장은 캔버스에 그대로 넣으면 화면 밖으로 잘려나가서, 지정한 너비를 넘어가면 자동으로 줄바꿈하는 함수를 따로 만들어 붙였습니다. 완성된 캔버스는 canvas.toDataURL('image/png')로 이미지 파일로 변환해서 바로 다운로드되게 했습니다.

6. 마무리하며

이번 작업에서 인상 깊었던 건, “복잡해 보이는 정부 조견표도 결국은 명시된 계산식의 결과물”이라는 점이었습니다. 표 자체를 베끼는 대신 그 표가 나온 원리를 이해하고 나니, 오히려 더 유연한 도구를 만들 수 있었습니다. 원천징수 비율 선택이나 자녀세액공제처럼, 정적인 표만으로는 다루기 어려웠을 옵션들도 자연스럽게 추가할 수 있었습니다.

무료로 직접 사용해보고 싶으시다면 [1편]에 링크해둔 계산기를 확인해보세요.