SH 서울주택도시공사 등 공공임대주택에는 보증금을 더 내고 월세를 낮추거나, 그 반대로 조정하는 '상호전환' 제도가 있습니다. 전환 이율이 정해져 있어 계산은 가능하지만, 사람들은 대개 계산기를 두드리며 여러 조합을 시도해 봅니다. 나 역시 그랬고, 그래서 만들었습니다.
떠오른 아이디어를 바로 개발해 하나의 페이지로 완성했고, 배포한 뒤 공공임대주택 관련 네이버 카페에 공유했습니다. 반응이 예상보다 좋았습니다. 여기서부터가 이 프로젝트의 진짜 시작이었습니다.
처음에는 '동작하면 됐지'라는 생각으로 컴포넌트 분리 없이 한 파일에 밀어 넣었습니다. 그런데 사용자가 생기니 사정이 달라졌습니다. 입력할 때마다 폼 전체가 다시 그려져 숫자를 빠르게 입력하면 화면이 버벅였습니다. 내가 쓸 때는 몰랐던 것이, 남이 쓰기 시작하니 문제로 드러났습니다.
이후 컴포넌트를 나누고 Zustand로 상태를 옮기며 리렌더 범위를 좁히는 리팩터링을 진행했습니다. 지금도 계속 다듬고 있습니다.
문제가 무엇이었고, 무엇을 골랐고, 그래서 어떻게 됐는지.
결정 01
결정 02
결정 03
결정 04
기본 보증금과 월 임대료를 입력하면 전환 조합과 비율을 자동 계산.
입력을 바꾸는 즉시 결과가 갱신됩니다. 제출 버튼이 없습니다.
홈 화면에 설치해 앱처럼 쓰고, 네트워크 없이도 계산이 됩니다.
시스템 설정을 따르면서 수동 전환도 가능합니다.
구조화 데이터와 메타 태그를 정비해 검색 유입 경로를 확보.
이 프로젝트에서 가장 크게 배운 것은 '사용자가 있는 코드'와 '나만 쓰는 코드'는 다른 물건이라는 사실입니다. 혼자 쓸 때는 한 파일에 다 넣어도 아무 문제가 없었습니다. 남이 쓰기 시작하자 같은 코드가 갑자기 문제가 됐습니다.
리팩터링의 필요를 책이 아니라 실제 사용에서 배운 것이 컸습니다. '컴포넌트를 나눠야 한다'는 말은 여러 번 읽었지만, 왜 나눠야 하는지는 내가 만든 화면이 버벅이는 걸 보고서야 이해했습니다.
그리고 개인 프로젝트는 배포가 끝이 아니라 시작이라는 것. 공유하고, 반응을 받고, 고치는 과정이 있어야 프로젝트에서 배울 수 있는 것을 다 가져올 수 있습니다.