내가 오래된 Invoice App을 다시 만들고 있는데, 이번엔 정말 뭘 하는지 알고 있다
Source: Dev.to
그래서 저는 Invoicepedia라는 오래된 프로젝트를 가지고 있습니다. 이 프로젝트는 제가 풀스택을 배우기 시작한 지 약 6개월 전쯤에 만들었고, Next.js, Clerk, Neon, 그리고 기본적인 CRUD를 사용했습니다 – 흔히 “데이터베이스 연결 방법을 막 배운” 프로젝트죠.
최근에 다시 열어보니 솔직히 상태가 엉망이었습니다: 삭제 버튼을 누르면 앱이 가끔 충돌하고, 검증 없이 빈 인보이스 양식을 제출할 수 있었으며, Stripe 연동은 반쯤만 동작했고, Drizzle과 Prisma를 동시에 설치해 두었습니다. 거의 삭제하고 넘어가려 했지만, 대신 직접 고쳐서 실제로 쓸 수 있는 무언가로 만들기로 했습니다.
Why Not Just Start a New Project
새로운 프로젝트를 시작할 때마다 설정—인증, 데이터베이스, 환경 변수, 미들웨어—에만 3~4일을 소비한다. 실제 제품 코드를 한 줄도 쓰기 전에 말이다. 설정을 마칠 때쯤이면 흥미를 잃었거나 이상한 오류에 부딪혀 전체를 포기하게 된다.
Invoicepedia는 이미 그 모든 것을 갖추고 있었다. 깨져 있었지만 기본은 있었다: 인증이 작동했고, 데이터베이스가 연결돼 있었으며, 라우트도 존재했다. 그래서 나는 다시 처음부터 시작하기보다 이걸 고쳐보자는 생각이 들었다. 최악의 경우 뭔가를 배우고, 최선의 경우 실제로 무언가를 배포한다.
내가 먼저 한 일은 기능 추가를 멈추는 것이었다
예전의 나는 곧바로 새로운 것들을 추가하기 시작했을 것이다—차트, 다크 모드, AI 기능 등—멋져 보이는 것은 뭐든지.
이번에는 깨진 모든 것을 목록으로 만들고 먼저 그것을 고쳤다. 기존 기능이 제대로 작동하기 전까지는 새로운 기능을 추가하지 않았다.
- 죽은 의존성을 제거했다.
- 스키마를 다시 작성했다.
- 모든 서버 액션에 적절한 Zod 검증을 추가했다.
- 하드 삭제를 소프트 삭제로 변경했다 (재무 기록은 절대 하드 삭제해서는 안 된다).
- 미들웨어를 고쳤다.
- 실제 오류 처리를 추가했다.
일주일이 걸렸고 시각적으로는 아무것도 변하지 않았다; 앱은 그대로였다. 하지만 그 일주일이 지나고 나서는 코드베이스를 건드리는 것이 두렵지 않았고, 그것은 달라 보였다.
실제로 만들고자 하는 것
네, 또 다른 인보이스 앱입니다—이미 수십 개가 존재합니다. 대부분은 일반 프리랜서에게 너무 비싸거나 너무 복잡합니다:
- FreshBooks는 월 $19–30을 청구하고 저렴한 플랜에서는 고객 수를 제한합니다.
- Wave는 처음에 무료였지만 이제는 이전에 무료였던 기능에 대해 요금을 부과합니다.
- Invoice Ninja는 기능이 너무 풍부해서 UI가 마치 조종석처럼 느껴집니다; 일반 사용자는 탭을 바로 닫아버립니다.
제 목표 사용자는 개발자, 디자이너, 작가 등 전문적인 인보이스를 보내고, 누가 결제했는지, 누가 아직 결제하지 않았는지를 추적하기만 하면 되는 프리랜서들입니다. 목표는 기본적인 기능을 정말 잘 수행하는 것입니다. QuickBooks도, FreshBooks도 아니라—프리랜서를 위한 간단한 도구만 만들고 싶습니다.
내가 먼저 출시할 것
나는 최종적으로 원하는 약 열 가지 기능(AI 청구서 생성, 자동 결제 알림, 클라이언트 포털, 정기 청구서, 비용 추적 등)을 적어 두었다. 그런데 그 모든 기능을 다 기다리다 보면 절대 출시하지 못한다는 것을 깨달았다.
첫 번째 버전에는 세 가지 핵심 기능만 포함한다:
- PDF 생성 – PDF를 만들 수 없는 청구서 앱은 단지 양식에 불과하다.
- 이메일 전송 – 청구서를 다운로드해서 수동으로 첨부하는 대신 앱에서 직접 클라이언트에게 보낸다.
- 적절한 대시보드 – 평범한 테이블을 대신해 상단에 세 개의 메트릭 카드로 교체한다:
- 이번 달에 받은 금액.
- 아직 미수금인 금액.
- 연체된 청구서 수.
이것이 MVP의 전부다. 이 세 가지를 출시하고, 사용자를 확보한 뒤 그들이 실제로 원하는 다음 기능을 확인한다.
목표는 5명의 사용자
500도, 5 000도 아니라—그냥 실제로 사용하고 문제점을 알려줄 다섯 명의 사람만. 개발하면서 업데이트를 올릴게요: 추가하는 내용, 깨지는 부분, 사용자가 시도할 때 하는 말 등. 모든 것을 다 알지는 못해요; 진행하면서 알아가고 있습니다.
비싼 청구서 소프트웨어에 짜증나는 프리랜서라면, 이걸 주목하세요. 풀스택을 배우는 개발자라면, 깔끔한 튜토리얼 버전과는 달리 엉성하고 진행 중인 프로젝트를 엿볼 수 있길 바랍니다.
Stack: Next.js 15, Prisma, NeonDB, Clerk, Tailwind, shadcn/ui.