지난 [1편]에서는 52주 적금 검증기가 뭘 보여주는지 다뤘습니다. 이번 편에서는 표시금리 착시를 그래프로 어떻게 표현했는지, 납입 순서 비교와 목표금액 역산을 어떻게 구현했는지 기록합니다.
1. 두 개의 다른 데이터를 한 그래프에 겹치기
“납입액은 커지는데 예치기간은 짧아진다”는 걸 말로 설명하는 것보다, 두 데이터를 한 화면에 겹쳐 보여주는 게 훨씬 직관적이었습니다. 문제는 두 데이터의 단위가 완전히 다르다는 점입니다(원 단위 금액 vs 주 단위 기간). 이럴 땐 이중 축(dual axis) 그래프를 씁니다.
new Chart(ctx, {
data: {
labels,
datasets: [
{ type: 'bar', label: '납입액 (원)', data: deposits, yAxisID: 'yAmount' },
{ type: 'line', label: '만기까지 남은 예치기간 (주)', data: holdingWeeks, yAxisID: 'yWeeks' }
]
},
options: {
scales: {
yAmount: { position: 'left' },
yWeeks: { position: 'right', grid: { drawOnChartArea: false } }
}
}
});막대(납입액)는 왼쪽 축, 선(예치기간)은 오른쪽 축을 따로 쓰게 만들고, grid: { drawOnChartArea: false }로 오른쪽 축의 격자선은 안 그리게 해서 화면이 지저분해지지 않게 했습니다. 이렇게 하니 막대가 커질수록 선이 내려가는 “교차하는 모양”이 뚜렷하게 드러나서, 텍스트 설명 없이도 구조가 눈에 들어옵니다.
2. 납입 순서 세 가지, 함수 하나로 처리
오름차순·균등·내림차순은 사실 “같은 데이터를 다른 순서로 배열한 것”뿐입니다. 그래서 하나의 함수로 세 경우를 다 처리하게 만들었습니다.
function buildDeposits(unit, weeks, order) {
const base = Array.from({ length: weeks }, (_, i) => unit * (i + 1)); // 오름차순
if (order === 'asc') return base;
if (order === 'desc') return [...base].reverse(); // 그냥 뒤집기
// 균등: 총액을 주수로 나눠서 매주 동일하게
const total = base.reduce((a, b) => a + b, 0);
const flat = total / weeks;
return Array.from({ length: weeks }, () => flat);
}내림차순은 오름차순 배열을 reverse()로 뒤집기만 하면 되고, 균등은 합계를 구해서 주수로 나누기만 하면 됩니다. 세 경우 모두 별도의 계산식을 새로 만들 필요 없이, 기존 이자 계산 함수(calcInstallmentInterest)에 이 배열만 넣어주면 끝났습니다.
3. 목표금액 역산 — 등차수열 합 공식
“1주차 금액 = 매주 증액 단위”라는 조건을 걸어두면, 총 납입액은 등차수열의 합이 됩니다.
총 납입액 = 단위 × (1 + 2 + ... + 주수) = 단위 × 주수×(주수+1)/2목표 총액이 주어지면 이 식을 거꾸로 풀어서 단위를 구하면 됩니다.
function reverseCalc() {
const target = Number(document.getElementById('targetTotal').value);
const weeks = lastCalc.weeks;
const weekSum = weeks * (weeks + 1) / 2; // 1+2+...+weeks
const requiredUnit = Math.round(target / weekSum);
}이전 대출 계산기의 역산 기능(이분탐색)과 달리, 이번엔 수식이 명확하게 풀리는 경우라 반복 계산 없이 한 번의 나눗셈으로 끝났습니다. 같은 “역산”이라는 기능이라도, 문제의 구조에 따라 이분탐색이 필요할 때도 있고 이번처럼 공식으로 바로 풀릴 때도 있다는 걸 다시 확인했습니다.
4. 마무리하며
이번 작업에서 인상 깊었던 건, 시각화 하나(이중 축 그래프)가 문단 몇 개 분량의 설명을 대신할 수 있다는 점이었습니다. “왜 이자가 적은지”를 텍스트로 아무리 풀어써도 잘 안 와닿았는데, 막대와 선이 교차하는 그래프 하나로 그 원리가 훨씬 빠르게 전달됐습니다. 데이터가 두 종류 이상 얽혀 있을 때는, 글보다 먼저 “이걸 어떻게 겹쳐서 보여줄 수 있을까”를 고민하는 게 더 효율적이라는 걸 배웠습니다.
무료로 직접 사용해보고 싶으시다면 [1편]에 링크해둔 계산기를 확인해보세요.
