앱인토스 미니앱 9 – 이자 계산기

앱인토스 미니앱 제작기 아홉 번째는 이자 계산기입니다. 대출 계산기, 적금 계산기, 복리 시뮬레이터 세 가지가 들어 있고, 이 글은 그중 대출 계산기 이야기입니다.

대출 이자 계산기는 흔합니다. 금액과 금리를 넣으면 월 상환액이 나오는 것까지는 어디나 같아요. 이 앱은 그다음 질문에 답하려고 했습니다. “금리가 오르면 나는 매달 얼마를 더 내지?”

이자 계산기는 어떤 앱인토스 미니앱인가

위 화면은 1억 원을 120개월 동안 연 4%로 빌린 경우를 시연용으로 넣은 것입니다. 금액, 기간, 금리 모두 버튼으로 고를 수 있고 직접 입력해도 됩니다. 값을 바꾸는 즉시 결과가 다시 계산돼요. 계산 버튼은 따로 없습니다.

숫자 하나로 끝내지 않는다

월 상환액 하나만 보여주면 “그렇구나” 하고 끝납니다. 대출을 알아보는 사람이 정말 궁금한 건 조건이 달라졌을 때의 차이예요.

슬라이더를 움직이면 지금 금리의 월 상환액과 바뀐 금리의 월 상환액이 막대 두 개로 나란히 보이고, “매달 48,203원 더 내요”처럼 차이를 문장으로도 알려 줍니다.

월 상환액을 계산하는 코드

가장 많이 쓰는 원리금균등 방식의 계산입니다.

// 대출 원리금균등
export function loanEqualPayment(principal: number, months: number, annualRate: number) {
  const r = annualRate / 100 / 12;
  let monthlyPayment: number;

  if (r === 0) {
    monthlyPayment = principal / months;
  } else {
    monthlyPayment = principal * (r * Math.pow(1 + r, months)) / (Math.pow(1 + r, months) - 1);
  }

  const totalPayment = monthlyPayment * months;
  const totalInterest = totalPayment - principal;

연이율을 12로 나눠 월 이율로 바꾼 뒤 공식에 넣습니다. 이율이 0이면 공식의 분모가 0이 되기 때문에 그 경우만 따로 원금을 개월 수로 나눠요. 함수는 이 뒤로 회차별 원금, 이자, 잔액을 담은 상환 스케줄까지 만들어 돌려줍니다.

원금균등과 만기일시도 같은 모양의 함수가 하나씩 있습니다. 상환 방식에 따라 “매달 내는 돈”의 뜻이 달라서, 화면의 이름도 월 상환액, 첫 달 상환액, 월 이자로 바꿔 보여줘요.

슬라이더는 지금 금리 기준으로 움직인다

슬라이더는 0%부터 끝까지 움직이는 게 아니라, 입력한 금리의 위아래 1%p 안에서만 움직입니다.

/** 슬라이더 범위. 하한은 0.1%를 넘지 않게 자른다. */
export function sliderBounds(rate: number): { min: number; max: number } {
  return {
    min: Math.max(MIN_SLIDER_RATE, round1(rate - SLIDER_SPAN)),
    max: round1(rate + SLIDER_SPAN),
  };
}

export function clampSliderRate(rate: number, value: number): number {
  const { min, max } = sliderBounds(rate);
  return Math.min(max, Math.max(min, round1(value)));
}

중도상환과 기간 변경

금리 말고 다른 조건을 바꾼 경우도 비교할 수 있습니다. 세 가지예요. 1,000만 원을 중도상환한 경우, 기간을 줄인 경우, 기간을 늘린 경우입니다. 기간은 최대 5년까지 움직입니다.

입력한 조건에 맞춰 폭을 조절하고, 성립하지 않는 경우는 빼고 보여줍니다. 대출 원금이 2,000만 원보다 적으면 중도상환 금액을 원금의 절반으로 줄여서 계산해요. 기간이 짧으면 줄이는 폭도 같이 줄고, 12개월 이하라 더 줄일 수 없으면 기간 단축은 목록에서 빠집니다. 중도상환수수료는 계산에 넣지 않았고, 화면에도 그렇게 적어 뒀습니다.

실제 앱에서는 추가 시나리오를 열 때 광고 안내가 나올 수 있습니다. 광고를 보면 세 개를 모두, 광고 없이 보기를 고르면 하나를 보여줘요. 처음 열 때는 안내 없이 전부 열립니다. 월 상환액 계산과 금리 슬라이더에는 이런 안내가 붙지 않아요. 위 영상은 로컬에서 찍어서 시나리오가 한 번에 열립니다.

대출 조건은 알아서 보관한다

결과가 입력하는 즉시 나오다 보니 굳이 저장을 누르지 않고 나가기 쉽습니다. 그래서 대출 계산기에는 저장 버튼을 두지 않고, 입력을 멈추면 그 조건을 알아서 보관하게 했어요. 최대 3개까지 기억합니다.

export function upsertCondition(id: string | null, terms: Omit<LoanCondition, 'id' | 'savedAt'>): { list: LoanCondition[]; id: string } {
  const current = loadConditions();
  const duplicate = current.find((c) => c.id !== id && sameTerms(c, terms));
  const keepId = duplicate?.id ?? id ?? `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
  const next: LoanCondition = { ...terms, id: keepId, savedAt: Date.now() };
  const rest = current.filter((c) => c.id !== keepId && c.id !== id);
  const list = [next, ...rest].slice(0, MAX_CONDITIONS);
  write(list);
  return { list, id: keepId };
}

자동 보관에서 조심할 건 칸이 금방 차 버리는 일입니다. 금리를 4%, 4.1%, 4.2%로 고쳐 볼 때마다 새 칸이 생기면 세 칸이 순식간에 비슷한 조건으로 채워지겠죠. 그래서 같은 화면에서 이어서 고치는 동안에는 같은 칸을 덮어씁니다. 이미 보관된 조건과 완전히 같으면 새로 만들지 않고 그 칸을 맨 앞으로 올려요.

이렇게 보관한 조건은 다음에 앱을 열 때 쓰입니다. 첫 화면에서 내 대출의 월 상환액부터 보여줘요.

다음에 할 일

적금 계산기와 복리 시뮬레이터에도 금리나 수익률이 더 높을 때를 비교하는 시나리오가 있습니다. 세 계산기의 비교 화면을 계속 다듬어 갈 생각이에요.

프로젝트를 어떤 식으로 진행하는지는 프로젝트 진행 방식에, 계산 로직을 한 파일에 모은 또 다른 앱 이야기는 K패스 환급 계산기 글에 있습니다.

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

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