Claude로 제작한 가계부 Web 앱 1개월 운영 후기

약 1개월 전, Claude를 사용하여 가계부 Web 앱을 HTML/CSS/JavaScript로 제작하여 Vercel에 공개했습니다.

【심플 가계부】https://kakeibo-khaki.vercel.app/

공개 후에도 기능 추가 및 개선을 계속하여, 현재는 다음과 같은 기능을 갖춘 앱이 되었습니다.

• 월별 수지 관리
• 카테고리별 원형 그래프
• 예산 설정 및 초과 알림
• 고정비 자동 추가
• CSV 내보내기
• 카테고리 커스터마이징
• 다크 모드 (Dark Mode) 대응

이 기사에서는 1개월 동안 운영하며 깨달은 점을 정리합니다.

데이터를 localStorage에 저장하고 있기 때문에, 여러 기기 간의 동기화가 불가능합니다. 스마트폰에서 입력한 데이터를 PC에서 볼 수 없다는 제한이 있습니다.

장래에는 Supabase 등 서버 사이드 (Server-side)로 이전할 예정입니다.

처음에는 각 HTML 파일에 <style> 태그로 CSS를 작성했습니다. 페이지가 늘어남에 따라 동일한 CSS가 6개 파일에 중복되는 상태가 되었습니다.

style.css로 공통화한 이후부터는 디자인 변경이 파일 하나 수정하는 것으로 완결되게 되었습니다.

<!-- 변경 전: 각 파일에 <style> 태그 -->
<style>
/* 300줄의 CSS */
...

실제로 직접 사용해 보니 "불편하다"라고 느껴지는 점들이 많이 나타납니다.

• 카테고리가 고정되어 사용하기 불편함 → 커스터마이징 기능 추가
• 밤에 화면이 눈부심 → 다크 모드 (Dark Mode) 추가
• 매달 같은 고정비를 입력하는 것이 번거로움 → 자동 추가 기능 추가

"사용하면서 불편하다고 느낀 점"을 하나씩 고쳐 나가는 것이 앱 개선의 가장 빠른 지름길이었습니다.

지표	수치
표시 횟수	39회
...

공들여 만들었는데 아무도 봐주지 않는다... 그것은 당연한 일입니다!

아직 인지도도 낮고 클릭 수도 적지만, 앞으로도 계속 업데이트해 나가려고 합니다.

공개와 동시에 신청했지만, 3주가 경과한 현재도 "준비 중" 상태입니다. 액세스 수가 늘어나면 승인될 가능성이 높아질 것이라 판단하여, 계속해서 기사 투고를 이어가고 있습니다.

Claude에게 코드를 생성하게 하는 것뿐만 아니라, "왜 이 구현 방식을 선택했는지"를 묻거나, 코드의 의미를 문제 형식으로 확인하는 과정을 통해 조금씩 스스로의 이해가 깊어지고 있습니다.

처음부터 완벽한 것을 만들려고 하지 않는 것이 중요했습니다. 심플한 상태로 공개하고, 사용하면서 개선을 반복하는 편이 동기 부여도 지속됩니다.

깨달은 점	내용
기술 측면	localStorage의 한계 · CSS 공통화의 중요성
...

두 번째 앱(스위스 드로우 대전 관리 앱)의 개발도 시작했으므로, 다시 리포트하겠습니다!

★개발한 앱

【심플 가계부】https://kakeibo-khaki.vercel.app/