계산기 결과 화면, 저장 버튼 대신 다음 결정 버튼 만들기

계산기 화면을 만들다 보면 마지막에 꼭 '저장' 버튼을 붙이게 돼요. 그런데 직접 만들어 보니 저장한 결과를 다시 열어 보는 일은 거의 없었어요. 숫자 하나가 남는 걸로는 결정이 안 나기 때문이에요. 사용자가 진짜 알고 싶은 건 "그래서 금리를 더 깎아야 하나, 기간을 줄여야 하나"예요. 결과 화면은 답을 보여주는 곳이 아니라 다음 질문을 던지는 곳이어야 한다고 생각하게 됐어요.

입력값은 URL에, 결과는 화면에

첫 번째로 바꾼 건 저장 위치예요. 결과 숫자 대신 입력값 3개(원금·금리·기간)를 쿼리스트링에 넣었어요. 링크 하나로 같은 조건을 다시 열 수 있고, 다른 사람에게 보내서 "이 조건 어때?" 하고 물을 수도 있어요. 로그인도 DB도 필요 없어요. 플랜씨 대출이자 계산기처럼 로그인 없이 쓰는 화면이라면 이 방식이 특히 잘 맞아요.

const params = new URLSearchParams({ principal, rate, months });
history.replaceState(null, "", `?${params}`);

적용해 봤더니 pushState 대신 replaceState를 쓰는 게 핵심이었어요. 입력할 때마다 히스토리 항목이 쌓이면 뒤로가기 버튼이 쓸 수 없게 돼요.

결과 카드 옆에 비교 카드

두 번째는 비교예요. 결과 카드를 1장만 두지 않고, 조건 하나를 바꾼 카드를 옆에 2장 더 그려요. 1,000만 원을 연 5%로 빌려 1년 뒤 한 번에 갚으면 이자가 50만 원이에요. 금리를 4%로 바꾸면 40만 원이니까 차이는 10만 원이죠. 이 10만 원을 사용자가 계산하게 두지 말고 화면이 먼저 보여줘요.

구현은 단순해요. 같은 계산 함수에 금리만 ±1%p로 바꿔 세 번 돌리고, 차이가 가장 큰 항목에 색을 살짝 넣어요. 돌려 보니 렌더링 비용은 신경 쓸 게 없었어요. 계산이 순수 함수라 useMemo 한 줄로 끝나요.

'다음 행동' 버튼은 동사로

세 번째가 제목에 쓴 부분이에요. 비교 카드 아래 버튼을 3개 두는데, 이름이 "저장"이 아니라 "금리 0.5%p 낮춰 보기", "기간 6개월 줄여 보기", "이 조건 링크 복사"예요. 누르면 입력 폼으로 돌아가지 않고 그 자리에서 값이 바뀌며 카드가 다시 그려져요. 테스트해 보면 입력 폼으로 튕기는 순간 사용자의 생각이 끊기는 게 느껴지는데, 결과 화면 안에서 조건을 만지게 하면 그 흐름이 이어져요.

기록은 결정 노트처럼

저장 기능을 아예 뺀 건 아니에요. 대신 결과 숫자만 담지 않고 입력값 스냅샷과 한 줄 메모를 함께 localStorage에 넣어요. 브라우저마다 다르지만 용량이 5MB 안팎이라 수백 건은 넉넉히 들어가요. 나중에 열면 "그때 왜 이 조건을 봤지"가 메모로 남아 있어서, 숫자가 아니라 결정 과정이 복원돼요.

이 네 가지를 붙이는 데 반나절 정도 걸렸어요. 계산 로직은 한 줄도 안 바꿨고 결과 화면 컴포넌트만 손봤어요. 계산기를 만들고 있다면 저장 버튼을 믿지 말고, 그 버튼이 사용자의 다음 질문에 답하고 있는지 한 번 확인해 보세요.