금액 입력에 콤마를 붙였더니 커서가 튀었다, 통화 인풋 복원기

금액 입력창에 콤마를 자동으로 붙이는 기능, 직접 만들어 보니 생각보다 함정이 많았어요. 1,000,000을 입력하다 가운데 숫자를 고치려는 순간 커서가 맨 끝으로 튀어버리는 문제였죠. 혹시 이런 인풋을 쓰다가 조용히 창을 닫아버린 적 없나요?

커서가 튀면 신뢰도 같이 튀어요

혼자 운영하면서 느낀 건, 사용자는 기능 목록이 아니라 이런 작은 감촉으로 도구를 판단한다는 점이에요. 제가 만드는 플랜씨(plan-c)는 대출이자나 연봉 실수령을 계산하는 무료 금융계산기라 첫 접점이 항상 금액 입력창이에요. 로그인 없이 바로 쓰는 도구일수록 첫 3초의 입력 경험이 사실상 랜딩 페이지 역할을 하죠.

원인과 복원 순서

원인은 단순해요. 입력값을 콤마 붙인 문자열로 갈아끼우면 브라우저가 커서를 맨 끝으로 옮겨요. 그래서 포맷 전에 커서 앞에 숫자가 몇 개 있었는지 세어 두고, 포맷 후 같은 숫자 개수가 되는 위치를 찾아 setSelectionRange로 되돌려주면 돼요.

입력 감지→커서 앞 숫자 개수 기록→콤마 포맷→같은 숫자 개수 위치 계산→setSelectionRange 복원

적용해 봤더니 복원 로직은 15줄 안쪽이었어요. 함정이 하나 있는데, input type="number"에서는 setSelectionRange가 동작하지 않아요. type="text"에 inputmode="numeric"을 함께 주면 모바일 숫자 키패드도 유지되고 커서 제어도 가능해요. 백만 단위면 콤마가 2개 들어가니까, 콤마 개수가 아니라 숫자 개수 기준으로 세는 쪽이 안전했어요.

삽질 자체가 콘텐츠 자산이 돼요

여기서부터가 브랜딩 이야기예요. 이 수정은 릴리스 노트에 한 줄로 끝날 일이지만, 1인 브랜드에게는 귀한 콘텐츠 소재예요. 커서가 튀는 화면과 고쳐진 화면을 나란히 담은 10초짜리 녹화 하나면 Before→After 구조가 저절로 나오거든요. 돌려 보니 긴 기능 소개보다 이런 디테일 수정기가 "만드는 사람이 세심하다"는 인상을 남기는 데 훨씬 효과적이었어요.

• ✓작은 감촉이 신뢰를 만든다
• ✓수정기는 콘텐츠가 된다
• ✓Before→After 한 장이 설명보다 세다

테스트해 보면 알겠지만, 이런 글 하나 쓰는 데 30분이면 충분해요. 개발하면서 이미 겪은 일이라 따로 취재할 필요가 없으니까요.

작은 도구를 만드는 사람에게 버그 수정은 비용이 아니라 이야깃거리예요. 오늘 고친 커서 한 칸이 내일 독자가 기억하는 브랜드의 결이 될 수 있어요.