바이브코딩 실습 4편 — 미니 ERP ① 나만의 장부

오늘 60분 뒤, 매출·지출을 기록하는 웹앱이 손에 들어온다. 그런데 진짜 배울 건 앱 자체가 아니라 딱 하나 — 브라우저를 껐다 켜도 기록이 남는다는 감각이다.

이 글 3줄 요약

• 날짜·항목·금액·수입/지출을 입력하면 목록에 쌓이고 이번 달 수입·지출·잔액이 자동으로 계산되는 장부 웹앱을, 코드 한 줄 없이 말로 시켜 만든다.
• 오늘의 주인공은 저장이다. 브라우저를 닫아도 기록이 남는 이 기능의 정체가 localStorage(내 브라우저 안 개인 서랍)이고, 이게 바로 '데이터베이스의 씨앗'이다.
• 만들고(입력) → 모아 보고(목록) → 계산하는(합계) 이 뼈대는 모든 기록장 프로그램의 공통 구조다. 항목만 바꿔 말하면 용돈 기입장·재고 노트·예약 장부가 그대로 나온다.

이 글은 AI 바이브코딩 실습 시리즈 전 9편 중 4편이다. 코드를 한 줄도 몰라도 AI에게 일을 시켜 실제 쓸 수 있는 프로그램을 만드는 실습을 다룬다. 바로 앞 실습 3편에서 '망쳐도 되돌리는' git 안전벨트를 채웠다면, 오늘은 그 위에서 처음으로 데이터가 저장되는 걸 만진다. 이 실습의 이론 짝은 이론 4편 — 코드가 도는 곳과 이론 6편 — 데이터는 어디에 저장되나다. 오늘 손으로 만든 것이 그 두 편의 첫 실물이 된다.

60분 뒤 손에 들어오는 것

먼저 완성물을 그려보자. 화면 위쪽에는 이번 달 수입·지출·잔액이 큼직하게 뜬다. 그 아래에는 날짜·항목·금액·수입/지출을 입력하는 칸과 '추가' 버튼이 있고, 입력할 때마다 목록에 한 줄씩 쌓인다. 예를 들어 일일 매출 400,000원을 수입으로, 중고 판매 30,000원을 수입으로, 점심 식대 9,000원을 지출로 넣으면, 위쪽 합계가 수입 430,000 · 지출 9,000 · 잔액 421,000으로 자동으로 계산돼 바뀐다. 계산기를 두드릴 일이 없다.

여기까지는 앞 실습에서 만든 앱과 크게 다르지 않다. 오늘의 진짜 하이라이트는 따로 있다. 브라우저를 완전히 닫았다가 다시 열어도 그 기록이 그대로 남아 있다는 점이다. 이게 왜 특별한지는 실습 중반에 직접 껐다 켜보며 확인한다.

준비물 — 실습 0~3을 마쳤다면 이미 다 있다

새로 설치할 건 없다. 앞선 실습을 따라왔다면 필요한 건 전부 갖춰져 있다.

• AI 코딩 도구: 실습 0에서 설치·로그인해둔 그대로다. 터미널에 claude를 치면 켜진다.
• 말로 시키는 감각: 실습 1에서 겪은 요청 → 확인 → 수정 루프다. 오늘도 똑같이 말로 만든다.
• 되돌리기 안전벨트: 실습 3의 git이다. 오늘 앱도 마지막에 세이브(commit)를 한 번 남긴다.
• 크롬 브라우저: 완성한 장부를 띄우고, 오늘의 하이라이트인 '껐다 켜기' 실험을 여기서 한다.
• 시간 60분: 한 번 앉아서 끝까지. 앞 실습보다 조금 길지만 결과물은 훨씬 실용적이다.

새로 배우는 개념은 딱 하나뿐이다. "데이터가 저장된다"는 것. 오늘 처음으로 데이터베이스의 씨앗을 손으로 만져본다. 낯선 단어도 하나만 챙기면 된다 — localStorage(내 브라우저 안 서랍). 나머지는 이미 다 해본 것들이다.

전체 흐름은 여섯 단계이고, 절반은 그냥 '말하기'다. 설계도 정리 → 폴더 열고 주문 → 써보고 저장 확인 → 말로 다듬기 순서다.

STEP 1 — 코딩 전에 설계도를 말로 한 장

아직 만들지 않는다. 먼저 AI에게 "내가 뭘 원하는지"를 말하고, 빠진 게 없는지 같이 검토한다. 터미널에서 claude를 켠 뒤 이 문장을 붙여넣는다.

장부 앱을 만들기 전에, 내가 원하는 기능을 정리해줄게. 같이 빠진 게 없는지 검토해줘: 매출·지출을 기록하고 싶어. 입력 항목은 날짜·항목·금액·수입/지출 구분 4개. 화면 위엔 이번 달 수입·지출·잔액 합계가 크게 보이면 좋겠어.

왜 곧장 안 만들고 말로 먼저 정리할까. 식당에서 "알아서 주세요"와 "덜 맵게, 밥 많이요"는 나오는 음식이 완전히 다르다. AI도 똑같다. 원하는 걸 먼저 구체적으로 말할수록 결과물이 확 좋아진다. 이건 나중에 이론에서 다룰 '기획서 한 장(PRD)'의 씨앗이기도 하다.

STEP 2 — 장부만 쓸 새 책상 만들기

이번 장부만 담을 새 폴더를 하나 만든다. 아래 세 줄을 한 줄씩 복사해 Enter를 친다. 순서대로 폴더 만들기 → 그 안으로 들어가기 → AI 켜기다.

mkdir my-ledger
cd my-ledger
claude

실습마다 책상(폴더)을 따로 쓰면 파일이 섞이지 않는다. 장부는 장부 책상에서만 작업해야 나중에 찾기도, git으로 되돌리기도 깔끔하다.

체크포인트: 프롬프트가 ...\my-ledger>로 바뀌고, 이어서 AI 도구의 환영 화면과 > 입력창이 뜨면 준비 끝이다.

STEP 3 — 한 문장으로 장부 주문하기

이제 이 한 문장이 오늘의 장부를 만든다. > 뒤에 붙여넣고 Enter를 친다.

매출·지출 장부 웹앱을 만들어줘. 날짜/항목/금액/수입·지출 구분을 입력하면 목록에 쌓이고, 이번 달 수입 합계·지출 합계·잔액이 위에 크게 보여. 브라우저를 닫아도 기록이 남게 해줘. index.html 하나로.

AI가 "파일을 만들어도 될까요?"라고 물으면 허락(Yes)한다. 이 문장에는 숨은 한 마디가 있다. 바로 "브라우저를 닫아도 기록이 남게"다. 이 한 마디가 localStorage 저장 기능을 만들어낸다. 이걸 빼먹으면 새로고침할 때마다 기록이 날아간다. 말이 곧 설계다.

체크포인트: AI가 index.html을 다 만들고 "완성했습니다" 류의 메시지를 보이면 끝이다. 폴더 안에 index.html 파일이 생겼다.

STEP 4 — 진짜로 3건 기록해보기

계산이 맞는지는 실제 숫자를 넣어봐야 보인다. 세 건만 넣어보자.

1. 폴더의 index.html을 더블클릭하면 크롬에서 장부가 열린다.
2. 기록 3건을 입력한다. 예: 점심 식대 9,000원 지출 · 중고 판매 30,000원 수입 · 일일 매출 400,000원 수입.
3. 목록에 쌓이고 위 합계가 바뀌는지 확인한다.

수입 430,000에서 지출 9,000을 뺀 잔액 421,000이 제대로 나오면, AI가 덧셈·뺄셈 로직까지 알아서 짜준 것이다.

체크포인트: 입력할 때마다 목록이 늘고 합계·잔액이 자동으로 다시 계산되면 완성이다.

STEP 5 — 저장의 실체 확인하기 (오늘의 하이라이트)

이제 오늘의 진짜 실험이다. 브라우저를 완전히 껐다가 다시 열어본다.

1. 크롬 창을 완전히 닫는다. 탭만 닫지 말고 창을 X로 닫는다.
2. 다시 index.html을 더블클릭해서 연다.
3. 아까 넣은 기록 3건이 그대로 있는지 확인한다.

보통 웹페이지는 새로고침하면 입력이 날아간다. 그런데 남았다는 건, AI가 기록을 브라우저 안의 서랍(localStorage)에 몰래 넣어뒀다는 뜻이다. 껐다 켰는데도 숫자가 그대로라면 — 방금 여러분은 프로그램이 데이터를 '기억'하게 만든 것이다. 이게 오늘의 하이라이트다.

오늘의 개념 — 데이터베이스의 씨앗

방금 만진 것의 정체를 한 번만 정리하고 넘어가자.

localStorage는 내 브라우저 안의 개인 서랍이다. 입력한 기록을 이 컴퓨터·이 브라우저 안에 저장해두는 작은 서랍이라, 껐다 켜도 남는다. 단 한계가 분명하다. 이 컴퓨터의 이 브라우저에서만 보인다. 내 폰에서는 안 보인다. 바로 이 한계 — "내 폰이나 다른 사람 컴퓨터에서도 보고 싶다" — 가 다음 진도인 서버·데이터베이스(DB)로 가는 이유다. 오늘은 그 첫 계단을 밟았다.

딱 하나 주의할 게 있다. 크롬에서 인터넷 방문기록(캐시·쿠키)을 삭제하면 이 서랍도 같이 비워진다. 즉 장부 기록도 지워진다. 중요한 기록의 백업은 다음 편에서 엑셀(CSV)로 내보내기를 배워 해결한다.

STEP 6 — 마음에 안 드는 곳은 말로 다듬기

완성됐으면 마음에 안 드는 부분을 그냥 말로 고친다. 한 번에 하나씩만 시키는 게 핵심이다.

1회전, 색으로 구분하기:

지출은 빨간색, 수입은 파란색으로 보여줘.

2회전, 골라 보기:

항목별로 골라 보는 필터를 넣어줘.

한 번에 하나씩 시키고 → 새로고침해 확인 → 다음 요청. 앞 실습에서 배운 요청 → 확인 → 수정 루프 그대로다. 한 번에 여러 개를 바꾸면 어디서 어긋났는지 찾기 어렵지만, 하나 고치고 확인하는 걸 반복하면 문제가 생겨도 방금 시킨 그 한 가지만 되돌리면 된다. 천천히 가는 게 결국 빠르다.

마음에 드는 상태가 되면 실습 3에서 배운 대로 git 세이브(commit)를 한 번 남긴다. "오늘 것 저장 완료"의 확실한 도장이다.

골라서 더 해보기

구조는 전부 같다 — 기록하고, 모아 보고, 계산한다. 이게 모든 기록장 프로그램의 뼈대다. 항목만 바꿔 말하면 완전히 다른 앱이 나온다. 아래 문장을 골라 STEP 3 자리에 넣어보면 된다.

용돈 기입장 (자녀용) — 아이가 쓰기 쉽게 큼직하고 귀엽게.

아이가 쓰는 용돈 기입장 웹앱을 만들어줘. 받은 돈·쓴 돈을 입력하면 남은 용돈이 크게 보이고, 브라우저를 닫아도 남게. 큼직하고 귀엽게.

재고 노트 — 품목·수량 관리에 최소수량 알림까지.

가게 재고 노트 웹앱 만들어줘. 품목·수량·최소수량을 입력하면 목록으로 보이고, 수량이 최소수량 밑으로 내려가면 빨갛게 '부족' 표시. 닫아도 남게.

알바 근무시간 기록 — 시급을 곱해 이번 달 월급 자동 계산.

알바 근무시간 기록 웹앱 만들어줘. 날짜·근무시간을 입력하면 쌓이고, 시급을 곱해 이번 달 월급이 위에 크게. 시급은 내가 정함. 닫아도 남게.

손님 예약 노트 — 날짜·인원·연락처를 적어 두는 간단 예약 장부.

손님 예약 노트 웹앱 만들어줘. 날짜·인원·연락처를 입력하면 날짜순 목록으로 보이고, 브라우저를 닫아도 남게. index.html 하나로.

운동 기록장 — 종목·세트·무게를 남겨 성장 추적.

운동 기록장 웹앱 만들어줘. 날짜·종목·무게·세트 수를 입력하면 목록으로 쌓이고, 브라우저를 닫아도 남게. 종목별로 골라 볼 수 있게.

막혔을 때

자주 나는 세 가지다. 이 상황이 나와도 놀라지 않아도 된다.

대원칙은 하나다. 뭐가 안 되면 AI에게 그대로 물어보면 된다. 화면에 뜬 문제를 복사해 "이거 왜 이래?"라고 붙여넣으면 된다.

오늘 배운 것과 다음 편

기록장 하나로 네 가지 개념을 만졌다.

• localStorage: 내 브라우저 안의 개인 서랍. 껐다 켜도 기록이 남는 이유다 (이 컴퓨터·이 브라우저 한정).
• 데이터 저장: 입력한 내용이 사라지지 않고 기억되는 것. 오늘 만진 '데이터베이스의 씨앗'이다.
• 목록·합계: 기록을 쌓아 보여주고 모아서 자동 계산하는, 장부의 기본 뼈대다.
• 설계도 먼저: 만들기 전에 원하는 걸 말로 정리하면 결과물이 좋아진다 (PRD의 씨앗).

오늘 만든 것이 바로 이론 4편 「코드가 도는 곳」(브라우저 안에서 돈다)과 이론 6편 「데이터는 어디에 저장되나」의 첫 실물이다. localStorage의 한계가 왜 서버·DB로 이어지는지 그 두 편에서 이어진다.

다음 편에서는 이 장부에 차트·재고 탭을 달아 한눈에 보는 대시보드로 키운다. 엑셀(CSV) 내보내기로 백업하는 법도 배운다. 오늘 것 git 세이브를 잊지 말고 넘어가자.

다음 편 — 바이브코딩 실습 5편 — 미니 ERP ② 사장님 대시보드