코드 한 줄 안 쓰고 실제 카페에 투입한 재고관리 앱을 하루 만에 만든 방법

  코드를 직접 안 쓰고 실제로 운영 중인 카페에 투입할 수 있는 웹앱을 하루 만에 만들었다.

  말이 안 되는 것 같지만 진짜다. 이 글은 그 과정을 솔직하게 정리한 글이다.

  ---
  시작은 현실적인 불편함

  카페를 운영하는 지인이 있다. 매일 아침 매니저들이 세 곳을 직접 돌아다니며 재고를 수기로 체크한다.

  - 매장 카운터
  - 팬트리
  - 사무실

  어떤 품목이 부족한지 한눈에 볼 방법이 없다. 부족한 걸 발견하면 쿠팡을 따로 열어 검색하고 주문한다. 번거롭고 느리고, 타이밍을 놓치는 일도 자주 생긴다.

  웹앱을 만들면 해결된다. 근데 나는 이걸 직접 코딩하지 않기로 했다.

  ---
  AI 에이전트에게 "어떻게"를 전부 맡겼다

  사용한 건 Claude Code다. 터미널에서 돌아가는 AI 에이전트인데, 파일을 읽고 쓰고, git 커밋까지 직접 한다.

  내 역할은 딱 하나였다. 무엇을 만들지만 결정하는 것.

  대화는 이런 식이었다.

  ▎ "모바일에서 화면이 잘려. 상세 제품명이 길어서 재고 수정이 어려워"

  그러면 AI가 어떤 파일의 어떤 부분을 어떻게 고칠지 결정하고 직접 수정했다. 나는 결과를 확인하고 다음 요청을 했다.

  기술적인 지시는 한 번도 안 했다. 문제를 설명했을 뿐이다.

  ---
  만든 것들

  핵심 플로우

  재고 입력 → 부족 자동 감지 → 클릭 1회 → 쿠팡/네이버쇼핑 즉시 연결

  구현된 기능들

  재고 관리
  - 매장/팬트리/사무실 3위치 통합 입력
  - 최소 수량 기준으로 위험(빨강)/주의(노랑)/정상(초록) 자동 분류
  - +/- 버튼 + 숫자 직접 클릭 입력

  알림 & 검색
  - 전 카테고리 부족 품목 한 화면에 표시
  - 상단 검색창 → 카테고리 자동 전환 + 해당 품목으로 스크롤

  편의 기능
  - 드래그앤드롭으로 품목 순서 변경
  - 유통기한 캘린더 클릭 입력
  - 재고 변경 시 "저장됨" 토스트 메시지
  - API 실패 시 자동 롤백

  모바일 대응
  - 테이블 가로 스크롤
  - 긴 상세명 모바일에서 자동 숨김
  - 알림 패널 1열 표시

  기술 스택(Next.js, Supabase, Tailwind 등)도 AI가 선택했다. 나는 이유를 듣고 OK 했을 뿐이다.

  ---
  중간에 생긴 빌드 오류들

  AI가 완벽하지 않다는 걸 처음부터 알고 있었다. 실제로 두 번 터졌다.

  첫 번째 — Vercel 빌드 실패

  Module not found: Can't resolve '@/components/PriceCompareModal'

  AI가 로컬에서 파일을 만들었는데 git에 안 올라간 것이었다. 커밋하니 해결됐다.

  두 번째 — TypeScript 타입 오류

  Property 'onProductNameChange' is missing in type

  커밋 안 된 파일이 있는 상태에서 일부만 먼저 올라가면서 타입이 안 맞아진 케이스. 미커밋 파일을 전부 반영하니 해결됐다.

  두 케이스 모두 에러 로그를 AI에게 그대로 붙여넣으니 원인부터 수정까지 알아서 처리했다.

  ---
  낙관적 업데이트 — AI가 스스로 고른 설계

  재고 +1 버튼을 누를 때 어떻게 처리할지에 대해 AI가 먼저 설계를 제안했다.

  API 응답을 기다렸다가 UI를 업데이트하면 정확하지만 느리다. 반대로 UI를 먼저 바꾸면 빠르지만 API가 실패했을 때 데이터가 꼬인다.

  AI가 선택한 방법은 UI 먼저 반영 + 실패 시 자동 롤백이었다.

  속도 저하 없이 데이터 정합성도 잡는 구조다. 처음에 "속도가 느려지는 거 아니냐"고 물었더니 "롤백은 실패했을 때만 동작해서 정상 케이스에서 속도 차이 없다"고 설명해줬다. 납득했다.

  ---
  AI와 개발하면서 배운 것

  1. What만 말해라

  "반응형 레이아웃 구현해줘"가 아니라 "모바일에서 화면이 잘린다"고 말해라. 문제를 설명하면 AI가 방법을 찾는다. 기술 용어로 지시하면 오히려 AI의 판단을 제한한다.

  2. 에러 로그는 그냥 붙여넣어라

  원인을 분석하려 하지 말고 통째로 붙여넣어라. AI가 훨씬 빠르게 찾는다.

  3. 작게 쪼개서 반복해라

  한 번에 큰 덩어리로 요청할수록 놓치는 게 생긴다. 하나씩 확인하면서 쌓아가는 게 결과가 훨씬 낫다.

  4. git 상태는 직접 챙겨라

  AI는 파일을 편집하지만 커밋은 명시적으로 요청해야 한다. 작업 후 "커밋하고 푸쉬해줘"를 습관적으로 붙이거나, git status를 직접 확인하는 게 좋다.

  ---
  결과

  ┌──────────────┬──────────────────────────┐
  │     항목     │           내용           │
  ├──────────────┼──────────────────────────┤
  │ 개발 기간    │ 1일 (기획 포함)          │
  ├──────────────┼──────────────────────────┤
  │ 직접 쓴 코드 │ 0줄                      │
  ├──────────────┼──────────────────────────┤
  │ 현재 상태    │ 실제 카페 현장 투입 완료 │
  └──────────────┴──────────────────────────┘

  ---
  AI가 코드를 잘 짜는 시대가 됐다. 근데 정작 중요한 건 그게 아니다.

  무엇을 만들어야 하는지, 왜 만들어야 하는지를 정의하는 능력은 여전히 사람 몫이다.

  AI는 How를 실행하는 엔진이다. What을 설계하는 건 결국 사람이다.

  ---
  GitHub: https://github.com/forexms78/cafe-inventory