계산기 결과 URL 공유, 입력값 검증 설계법

계산기 결과를 URL로 공유하면 사용자는 링크 하나로 같은 화면을 다시 열 수 있어요. 다만 주소창의 값은 누구나 바꿀 수 있습니다. 화면이 링크를 받았다는 사실과, 그 안의 입력값이 계산에 적합하다는 사실은 다른 문제예요.

플랜씨(plan-c)처럼 로그인 없이 쓰는 금융계산기는 이 차이가 특히 눈에 들어와요. 대출 기간, 금액, 이율처럼 4개 입력칸을 URL에 담을 수 있지만, 화면은 값을 그대로 믿기보다 복원 과정에서 다시 확인해야 해요.

직접 만들어 보니 URL 파라미터 처리는 3단계로 나누는 편이 읽기 쉬웠어요. 먼저 문자열을 읽고, 숫자로 변환하고, 마지막으로 계산 조건을 검사합니다. NaN인지, 0보다 큰지, 허용한 범위 안인지가 화면 컴포넌트의 책임이 됩니다.

URL 문자열 읽기→숫자 변환→범위 검증 후 계산

적용해 봤더니 검증 실패를 조용히 기본값으로 바꾸는 방식은 혼란을 남겼어요. 링크를 연 사람이 왜 다른 결과를 보는지 알기 어렵기 때문이에요. 입력칸 가까이에 “값을 확인해 주세요”를 표시하고, 계산 결과 영역은 유효한 값이 모일 때만 갱신하는 쪽이 낫습니다.

테스트해 보면 입력값은 크게 2가지로 나뉘어요. 숫자로 바꿀 수 없는 값과, 숫자이지만 계산 규칙에 맞지 않는 값이에요. 예를 들어 금액이 빈 문자열이거나 기간이 음수라면 둘 다 결과 화면으로 넘어가면 안 됩니다. 각 경우에 같은 오류 문구를 쓰기보다, 어느 입력칸을 고쳐야 하는지 연결해 주면 키보드 사용자도 흐름을 따라가기 쉬워요.

돌려 보니 URL 상태와 폼 상태를 1개 객체로 바로 섞기보다 분리하는 편이 수정에 유리했어요. URL에서 읽은 원본값, 검증을 통과한 계산값, 화면에 보일 오류 상태를 나누면 공유 링크를 다시 만들 때도 기준이 선명해집니다.

• ✓원본 문자열 보존
• ✓검증된 값만 계산
• ✓오류 위치를 화면에 표시

공유 기능의 목표는 링크를 받아도 같은 결과를 보여 주는 데 있어요. 그래서 프론트엔드에서는 주소창을 데이터 저장소가 아니라 외부 입력으로 다루는 태도가 필요합니다. 계산기 UX는 빠른 복원과 분명한 검증 안내가 함께 있을 때 더 안정적으로 느껴져요.