가계부 앱을 처음 쓰기 시작한 건 몇 년 전이었다. 뱅크샐러드도 써봤고, 토스 가계부도 써봤고, 심지어 엑셀 템플릿을 직접 만들어서 한동안 쓰기도 했다. 그런데 매번 비슷한 지점에서 흐지부지됐다.
앱은 자동 연동이 편한 대신, 내가 원하는 방식으로 데이터를 보는 게 생각보다 어려웠다. 카드 청구 기준으로 볼지, 실제 사용일 기준으로 볼지 같은 세세한 설정이 없거나, 있어도 내 상황에 딱 맞지 않았다. 엑셀은 자유롭긴 한데 매달 시트를 복사하고 수식 고치는 게 귀찮아서 결국 3개월쯤 지나면 손을 놓게 됐다.
그러다가 문득 이런 생각이 들었다. 어차피 NAS가 집에 있고, Web Station도 돌아가고 있는데, 그냥 내가 직접 만들면 안 되나?
왜 NAS였나
클라우드 서비스에 개인 금융 데이터를 올리는 게 영 찜찜했다. 앱에 카드 정보를 연동하면 편리하긴 한데, 그 데이터가 어디에 어떻게 저장되는지 명확히 알 수 없다는 게 마음에 걸렸다. 별 이유 없이 서비스가 종료되거나 유료 전환되면 그동안 쌓은 데이터가 한순간에 사라지는 경험도 이미 한 번 했었고.
NAS는 다르다. 데이터가 내 집 안에 있고, 백업 정책도 내가 정한다. Web Station을 이미 다른 용도로 쓰고 있어서 웹 서버 환경 자체는 이미 갖춰져 있었다. PHP도 되고, MariaDB도 붙일 수 있으니 가계부 정도는 충분히 돌아간다.
물론 직접 만드는 게 앱보다 훨씬 손이 많이 간다. 그건 처음부터 알고 있었다. 그래도 한번 만들어두면 내 마음대로 고칠 수 있다는 게 결정적이었다.
어떤 기능을 만들었나
처음엔 정말 단순하게 시작했다. 카드 내역 CSV를 올리면 DB에 저장하고, 월별로 합계를 보여주는 것만 해도 충분하다고 생각했다. 근데 쓰다 보면 욕심이 생긴다.
지금 시점 기준으로 들어간 기능을 대략 정리하면 이렇다.
- 대시보드 — 월별 수입/지출 요약과 카테고리별 분포. 항목을 누르면 상세 모달이 뜬다.
- 카드 내역 관리 — CSV 업로드, 태그·메모·국내외 여부 편집. 여러 건을 체크해서 한꺼번에 수정하는 일괄 편집도 된다.
- 카드 청구월 재분류 — 카드사마다 결제일과 사용기간 오프셋이 다르다. 예를 들어 어떤 카드는 전월 1일~말일 사용분이 당월에 청구되고, 어떤 카드는 며칠씩 밀린다. 이 설정을 카드사별로 따로 잡아두고 청구월을 자동으로 재분류한다.
- 월급 명세서 — 정기급여 외에 수시로 들어오는 항목은 이름을 직접 입력할 수 있게 했다.
- 기간 필터와 조건부 삭제 — 카드 내역에서 기간 조건을 걸고, 그 조건에 맞는 건만 골라서 삭제하는 것도 된다.
기능 목록만 보면 그럴듯해 보이지만, 하나하나 만드는 과정은 꽤 지저분했다. 잘 되다가 갑자기 안 되고, 고치면 다른 데서 터지고. 그게 직접 만드는 재미이기도 하고, 고역이기도 하다.
VS Code와 Claude Code를 연결한 이유
나는 개발자가 아니다. PHP나 JavaScript를 아예 모르는 건 아닌데, 뭔가를 처음부터 설계하고 짜는 수준은 아니다. 그래서 초반엔 ChatGPT에 코드를 물어보면서 붙여넣기 방식으로 진행했다.
그런데 이게 한계가 금방 왔다. 파일이 여러 개로 나뉘어지고, 함수가 서로 얽히기 시작하면 “이 코드에서 이 부분만 고쳐줘”라고 해도 맥락을 다시 설명해야 하는 상황이 반복됐다. 매번 관련 코드를 복사해서 붙여넣고, 돌아온 코드를 다시 파일에 옮기는 과정이 생각보다 피로했다.
그러다 Claude Code CLI를 알게 됐다. VS Code 터미널에서 실행하면 현재 작업 디렉토리 전체를 컨텍스트로 잡고, 파일을 직접 읽고 수정한다. “이 화면에서 이 버튼이 안 눌려”라고 하면 관련 파일을 찾아서 원인을 파악하고, 수정안을 바로 파일에 적용해준다.
처음엔 반신반의했는데, 실제로 써보니 흐름이 끊기지 않는다는 게 컸다. 예를 들어 튜토리얼 툴팁이 다른 요소에 가려지는 문제가 있었다. z-index를 올려봤는데도 안 됐고, 원인이 stacking context 문제라는 걸 파악하는 데 혼자였으면 한참 걸렸을 거다. Claude Code는 관련 CSS 파일을 직접 열어보고, 툴팁 요소를 body 최상위로 분리하는 방식을 제안하면서 style.css까지 같이 고쳐줬다.
iOS Safari에서 홈 화면에 추가했을 때 아이콘이 안 나오는 문제도 비슷했다. SVG로 아이콘을 만들어뒀는데, apple-touch-icon은 PNG만 된다는 걸 그때 처음 알았다. qlmanage와 sips 명령어로 PNG를 여러 사이즈로 뽑고, manifest.webmanifest를 추가하는 것까지 한 흐름으로 처리됐다.
혼자 구글링하면서 했으면 각 단계마다 탭을 수십 개 열었을 텐데, 그 과정이 많이 줄었다.
삽질도 있었다
물론 다 잘 된 건 아니다. 대시보드, 월급, 카드 화면에서 연도·월을 앞뒤로 이동하거나 오늘 버튼을 누를 때 가끔 반응이 없거나 이상하게 동작하는 문제가 꽤 오래 남아 있었다. 알고 보니 모듈 초기화 타이밍 문제였다. 버튼에 이벤트를 직접 붙이는 방식 대신, 이벤트 위임 방식으로 바꾸고 나서야 안정됐다.
카드 내역에서 체크박스를 드래그해서 여러 행을 한꺼번에 선택하는 기능도 만들었는데, 첫 번째 행이 드래그 시작할 때 토글이 안 되는 버그가 있었다. 이것저것 시도해보다가 결국 드래그 시작 시점에 첫 행 상태를 명시적으로 직접 토글하는 방식으로 해결했다. 돌아보면 별것 아닌 것 같은데, 그 순간엔 꽤 오래 붙들고 있었다.
카드 청구월 재분류 로직도 한번 바꾸고 나면 기존 데이터가 영향을 받는다는 걸 중간에 깨달았다. 예를 들어 하나카드 기준을 바꾸면 이미 입력돼 있던 거래가 청구월이 달라질 수 있다. 이건 편의 기능이기도 하고, 잘못 건드리면 혼란스러운 부분이기도 해서 변경 전에 어떤 데이터가 영향받는지 미리 확인하는 흐름을 넣었다.
앞으로 어떻게 쓸 건지
이 시리즈는 만들면서 겪은 것들을 편별로 정리할 생각이다. 설계부터 배포, 기능 추가, 버그 수정까지 순서대로 풀어볼 예정이다. 완성된 코드를 공개하는 방식이 아니라, 왜 이렇게 만들었는지, 어디서 막혔는지 위주로 쓸 거다.
NAS나 Web Station을 이미 쓰고 있는데 뭔가 직접 만들어보고 싶다는 생각이 있다면, 이 글들이 조금은 참고가 될 수도 있겠다. 완벽한 가이드는 아니고, 그냥 한 사람이 만들어나간 기록이다.
시리즈 글 모아보기
- 다음 편: 2. Synology Web Station에서 PHP 환경 구성
- 전체 목차: 바이브코딩 NAS 가계부 시리즈 전체 목차
- 참고: Claude Code 공식 문서