앱인토스 미니앱 12 – 연봉 계산기

앱인토스 미니앱 제작기 열두 번째는 연봉 계산기입니다. 연봉을 넣으면 4대보험과 소득세를 뺀 월 실수령 예상액이 나오고, 설정한 월급날까지 며칠 남았는지도 같이 보여 주는 앱이에요.

연봉 계산기는 흔한 앱인데, 이 연봉 계산기에서 신경 쓴 건 계산보다 어디까지가 정확하고 어디부터가 근사인지를 화면에 밝히는 일이었습니다. 공제 항목을 쪼개 보여 주는 방식과, 근사라는 사실을 알리는 문구가 코드와 화면에 어떻게 들어갔는지를 적었어요.

연봉 계산기는 어떤 앱인토스 미니앱인가

화면은 하단 탭 기준으로 오늘, 계산, 기록 세 개입니다. 오늘 화면에서는 월급날까지 남은 날과 이번 달 환산 추정액을, 계산 화면에서는 월 실수령 예상액과 공제 내역을, 기록 화면에서는 연도별 연봉과 제안 연봉의 월 실수령 차이를 봅니다.

위 화면은 로컬에서 앱을 실행해 찍은 것이고, 연봉과 날짜는 시연용으로 넣은 예시입니다. 연봉과 기록은 이 기기에만 저장돼요.

공제 항목을 쪼개서 보여 준다

실수령액 하나만 보여 주면 “왜 이만큼 빠지지?”라는 의문이 남습니다. 그래서 계산 화면은 세전 급여에서 무엇이 얼마 빠졌는지를 두 가지 방식으로 나눠 보여 줍니다.

목록은 건강보험과 장기요양, 소득세와 지방소득세를 한 줄씩 묶어 공제를 네 줄로 보여 줍니다. 막대 쪽은 계산 결과를 그대로 쪼갠 모양이에요. 코드는 항목마다 따로 계산해서 값을 들고 있고, 화면에 어떻게 묶어 보여 줄지만 달라집니다.

보험료는 요율에 상한과 하한이 붙는다

4대보험은 근로자가 내는 몫만 계산합니다. 2026년 기준으로 국민연금은 보험료율 9.5%의 절반인 4.75%, 건강보험은 보험료율 7.19%의 절반인 3.595%, 고용보험은 0.9%예요. 장기요양보험은 건강보험료에 일정 비율을 곱해 따로 계산합니다.

아래는 calculateSalary 함수 안에서 보험료를 계산하는 부분을 그대로 가져온 코드입니다.

  const monthlyGross = Math.round(annualGross / 12);

  // 국민연금 (상한/하한 적용)
  const pensionBase = Math.min(Math.max(monthlyGross, PENSION_LOWER_LIMIT), PENSION_UPPER_LIMIT);
  const nationalPension = Math.round(pensionBase * RATES.NATIONAL_PENSION);

  // 건강보험
  const healthInsurance = monthlyHealthInsurance(monthlyGross);

  // 장기요양보험
  const longTermCare = Math.round(healthInsurance * RATES.LONG_TERM_CARE);

  // 고용보험
  const employmentInsurance = Math.round(monthlyGross * RATES.EMPLOYMENT_INSURANCE);

  // 4대보험 합계
  const totalInsurance = nationalPension + healthInsurance + longTermCare + employmentInsurance;

장기요양 요율은 코드에서 0.009448 / 0.0719로 적혀 있습니다. 장기요양 보험료율 0.9448%를 건강보험료율 7.19%로 나눈 값, 그러니까 건강보험료의 약 13.14%예요. 두 요율 모두 국민건강보험공단의 2026년 안내와 같습니다.

소득세는 근사라고 적어 둔다

보험료와 달리 소득세는 요율 하나로 끝나지 않습니다. 이 앱은 월별 간이세액표를 쓰지 않고, 연봉에서 연간 세액을 구해 12로 나눕니다. 그 첫 단계가 근로소득공제예요.

// 근로소득공제
export function calcEarnedIncomeDeduction(annualSalary: number): number {
  if (annualSalary <= 5_000_000) {
    return annualSalary * 0.7;
  } else if (annualSalary <= 15_000_000) {
    return 3_500_000 + (annualSalary - 5_000_000) * 0.4;
  } else if (annualSalary <= 45_000_000) {
    return 7_500_000 + (annualSalary - 15_000_000) * 0.15;
  } else if (annualSalary <= 100_000_000) {
    return 12_000_000 + (annualSalary - 45_000_000) * 0.05;
  } else {
    return Math.min(20_000_000, 14_750_000 + (annualSalary - 100_000_000) * 0.02);
  }
}

구간별 비율과 맨 아래 2천만 원 한도는 국세청이 안내하는 근로소득공제표와 같습니다. 이렇게 공제한 금액에서 본인 기본공제와 보험료 공제를 빼 과세표준을 만들고, 세율표로 산출세액을 구한 다음 근로소득세액공제를 뺍니다.

세액공제도 같은 방식입니다. 산출세액이 130만 원 이하면 그 금액의 55%를 빼고, 넘으면 71만 5천 원에 초과분의 30%를 더한 만큼 뺍니다. 그다음 총급여에 따라 정해진 한도(20만 원에서 74만 원 사이)를 넘지 않게 Math.min으로 막아요. 이 구간과 한도도 국세청 안내와 같은 값입니다.

근사라는 말을 화면에 계속 둔다

이 앱은 결과를 정확한 원천징수 결과처럼 소개하지 않는다는 기준을 기획서에 적어 두었고, 화면에도 그대로 옮겼습니다. 계산 화면 맨 아래의 “계산 가정” 카드에는 이런 문구가 들어 있어요.

같은 카드에 2026년 7월 기준 근로자 부담 보험료와 본인 기본공제를 적용했다는 설명과, 부양가족·비과세 수당·상여·회사별 기준에 따라 실제 급여명세서와 달라질 수 있다는 문장이 이어집니다. 연간 금액에도 “현재 월 기준 연환산”이라는 이름을 붙였어요. 올해 실제로 받을 12개월 합계가 아니라, 지금 달의 계산을 열두 번 곱한 값이기 때문입니다.

입력 범위도 화면에 적어 둡니다. 연봉은 100만 원부터 10억 원까지만 계산하고, 범위 밖이면 예상액 대신 다시 입력해 달라는 안내를 보여 줘요.

월급날은 달마다 말일이 다르다

오늘 화면의 D-N은 getNextPayday 함수가 계산합니다. 월급날은 1일부터 31일 사이에서 고르는데, 31일로 정해 두면 30일까지만 있는 달에는 날짜가 없어요. 이 함수는 그런 달에 말일로 맞춥니다.

export function getNextPayday(payday: number, now = Date.now()): { date: string; daysRemaining: number } {
  const today = toKSTDateString(now);
  const { year, month, day } = partsForDate(today);
  let targetYear = year;
  let targetMonth = month;
  if (day > payday) {
    targetMonth += 1;
    if (targetMonth > 12) { targetMonth = 1; targetYear += 1; }
  }
  const lastDay = new Date(Date.UTC(targetYear, targetMonth, 0)).getUTCDate();
  const targetDay = Math.min(payday, lastDay);
  const target = new Date(Date.UTC(targetYear, targetMonth - 1, targetDay));
  const todayAtUtc = new Date(Date.UTC(year, month - 1, day));
  const daysRemaining = Math.max(0, Math.round((target.getTime() - todayAtUtc.getTime()) / 86400000));
  return { date: `${targetYear}-${String(targetMonth).padStart(2, '0')}-${String(targetDay).padStart(2, '0')}`, daysRemaining };
}

오늘 날짜가 월급날을 지났으면 다음 달로 넘기고, 12월이면 다음 해 1월로 넘깁니다. 날짜는 한국 시간 기준으로 읽어요. 주말이나 공휴일이어서 월급날이 앞뒤로 옮겨지는 경우는 반영하지 않고, 설정한 날짜를 그대로 씁니다. 회사별 지급일 차이는 사용자가 날짜를 직접 정해서 맞추는 방식이에요.

월급 시계는 환산 추정액이라고 밝힌다

연봉 계산기의 오늘 탭에서 월급날과 근무 일정을 설정하면 이 카드가 채워집니다.

D-N 아래에는 “근무 일정 기준 환산 추정액”이 나옵니다. 이번 달 평일 근무 일정이 얼마나 지났는지의 비율을 월 실수령 예상액에 곱한 값이에요. 기본 근무 일정은 평일 09:00부터 18:00까지, 12:00부터 13:00까지 휴게이고 직접 바꿀 수 있습니다.

이 숫자 바로 아래에는 “실제 누적 급여나 입금액이 아니에요”라는 문장을 고정으로 둡니다. 설정 화면에는 한국 공휴일, 휴가, 회사 급여 산정 기간을 반영하지 않는다는 안내도 있어요. 진행률 막대는 금액과 분리해 근무 시간의 몇 퍼센트가 지났는지만 보여 줍니다.

월급날 카드는 공유할 수 있는데, 공유 문구 기본값에는 월급날까지 남은 날, 근무 조건, 추정액이라는 안내 문구만 들어갑니다. 연봉과 월 실수령 예상액은 공유 미리보기에서 사용자가 켠 항목만 문구에 들어가요.

값이 바뀔 때 고칠 곳

요율과 한도는 salaryCalc.ts 맨 위와 각 함수 안에 숫자로 들어 있고, 국민연금 상·하한에는 적용 기간(2026.7.1 ~ 2027.6.30)이 주석으로 달려 있습니다. 해마다 바뀌는 값이라 계산 결과와 화면의 “2026년 7월 기준”이라는 문구도 이 값과 함께 맞춰야 해요.

프로젝트를 어떤 식으로 진행하는지는 프로젝트 진행 방식에, 기준표를 금액 하나로 바꿔 보여 주는 또 다른 계산기는 K패스 환급 계산기와 이자 계산기 글에 있습니다.

이 글은 앱인토스 미니앱 「연봉 계산기」의 기록입니다. 앱인토스는 토스 앱 안에서 미니앱을 서비스하는 플랫폼이고, 공식 안내는 앱인토스 개발자센터에 있습니다.

이 글은 직접 만들고 운영하며 남긴 기록입니다. 적힌 수치는 작성 시점의 제 계정 기준이며, 같은 결과나 수익을 보장하지 않습니다.