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

지난 시간 만든 장부에 오늘은 탭 3개를 단다. 차트로 한눈에 보고, 재고를 지키고, 엑셀로 내보낸다. 오늘도 코드는 한 줄도 안 친다.

이 글 3줄 요약

• 장부 하나가 오늘 탭 3개(장부·대시보드·재고) 달린 진짜 프로그램 꼴로 자란다. 대시보드엔 막대·원형 차트, 재고엔 빨간불, 그리고 엑셀 내보내기 버튼까지 붙는다.
• 오늘의 핵심은 "기능 추가를 어떻게 요청해야 안 망가지나"다. 정답은 한 번에 다 시키지 않고, 세이브 → 하나 추가 → 확인을 반복하며 기존 것 위에 하나씩 얹기다.
• 데이터를 CSV로 꺼내는 첫 경험과, 재고에 열을 추가하다 옛 데이터가 비는 마이그레이션 맛보기까지 다룬다.

이 글은 AI 바이브코딩 실습 9부작 시리즈의 5편이다. 코드를 한 줄도 몰라도 AI에게 일을 시켜 프로그램을 만드는 실습 시리즈다. 지난 실습 4편에서 수입·지출을 기록하는 장부를 만들었다면, 오늘은 그 장부를 진짜 "우리 가게 프로그램"처럼 키운다. 개념이 궁금하면 짝이 되는 이론 편을 함께 보면 좋다. 데이터를 저장하고 꺼내는 이야기는 이론 6편, 세이브·하나씩 얹기·마이그레이션 같은 운영 감각은 이론 12편에서 더 깊이 다룬다.

오늘 만드는 것 — 탭 3개 달린 "진짜 프로그램" 꼴

먼저 완성물을 그려보자. 위쪽에 장부 · 대시보드 · 재고 탭이 나란히 달린다. 지금까지 장부는 기록만 쌓는 페이지였는데, 오늘부터는 탭을 눌러 화면을 바꿔가며 쓰는 프로그램이 된다.

• 대시보드 탭에는 월별 수입·지출을 보여주는 막대 차트와, 지출을 카테고리별로 나눈 원형 차트가 그려진다.
• 재고 탭에는 품목·수량이 표로 뜨고, 최소 수량 아래로 떨어진 품목은 빨간 줄로 표시된다.
• 그리고 엑셀로 내보내기 버튼. 이제 남에게 "우리 가게 프로그램"이라고 보여줄 수 있는 꼴이 된다.

이걸 한 번에 다 시키지 않고 하나씩 얹는 게 오늘의 전부다. 순서대로 따라가 보자.

시작 전 준비물 — 딱 하나, 지난 시간 장부

필요한 건 하나뿐이다. 지난 실습 4편에서 만든 my-ledger 폴더. 오늘은 이 위에 얹기만 한다.

• 실습 4의 my-ledger 폴더 — 수입·지출을 기록하는 장부 프로그램이 든 폴더. 오늘은 새로 만들지 않고 이 위에 기능을 더한다.
• 터미널 + claude — 실습 0에서 깐 그대로다. cd my-ledger로 폴더에 들어가 claude만 켜면 준비 끝.
• 시간 60분 + 여유 — 기능 3개를 하나씩 얹는다. 서두르지 말고 한 STEP이 끝날 때마다 확인하며 간다.

혹시 실습 4의 장부가 없다면, claude에게 "간단한 수입·지출 장부 웹페이지를 index.html로 만들어줘"라고 먼저 시키면 5분이면 만들어진다. 그 위에서 오늘을 시작하면 된다.

STEP 1 — 큰 수정 전, 지금 상태를 먼저 저장

기능을 얹기 전에 할 일은 딱 하나, 세이브다. claude에 아래 문장을 붙여넣고 Enter를 친다.

지금까지 만든 장부의 현재 상태를 '장부 v1'이라는 이름으로 저장(커밋)해줘.

왜 이걸 먼저 할까. 큰 수정 전 세이브는 성형수술 전 사진과 같다. 오늘 탭·차트·재고를 얹다가 뭔가 어긋나도, "장부 v1으로 되돌려줘" 한마디면 오늘 시작 전으로 돌아간다. 이게 오늘의 안전벨트다. 실습 2에서 배운 세이브 습관을 큰 공사 전에 한 번 더 쓰는 것이다.

체크포인트 — claude가 "'장부 v1'으로 저장(커밋)했습니다" 같은 답을 하면 안전벨트 장착 완료다. 이제 마음 놓고 뜯어고쳐도 된다.

STEP 2 — 만들기 전에, 계획을 한 문단으로 먼저 받기

바로 만들라고 시키지 않는다. 먼저 "이렇게 하려는데 어때?"라고 계획만 검토받는다. 말하자면 기능 세 개짜리 요청서(PRD 한 장)를 AI에게 먼저 읽히고, 문제 될 부분을 짚어달라는 것이다.

이 장부에 기능 3개를 더하려고 해. ① 탭을 나눠 '대시보드' 탭에 월별 수입·지출 차트, ② '재고' 탭에 품목·수량 관리, ③ 기록을 엑셀(CSV)로 내보내는 버튼. 지금 코드 위에 얹을 때 문제 될 부분이 있는지 먼저 검토만 해줘. 아직 만들지는 말고.

한 번에 다 시키면 AI도 사람도 길을 잃는다. 그래서 계획만 먼저 검토받는다. AI가 순서를 정리해주면, 우리는 다음 STEP부터 그 순서대로 하나씩 시키면 된다. 목수에게 집 전체를 한 번에 시키지 않고 방부터 짓게 하는 것과 같다.

체크포인트 — claude가 "이런 순서로 하면 좋겠다"는 계획·주의점을 글로 답하고, 아직 파일은 안 고쳤으면 성공이다. 계획이 마음에 들면 다음 STEP으로 넘어간다.

STEP 3 — 대시보드 탭에 차트 그리기

이제 첫 기능을 얹는다. 탭 구조로 바꾸고 대시보드 탭에 차트를 넣는다.

탭 구조로 바꾸고, '대시보드' 탭에 월별 수입/지출 막대 차트와 지출 카테고리 원형 차트를 넣어줘. 외부 라이브러리 없이.

여기서 "외부 라이브러리 없이"라는 말이 핵심이다. 라이브러리(남이 만든 부품 꾸러미)를 끌어오면 인터넷이 있어야 돌고 파일도 여러 개로 늘어난다. "없이"라고 못 박으면 인터넷 없이도 돌고, 파일 하나로 유지된다. 지금 단계는 단순함을 지키는 게 이득이다.

체크포인트 — 장부에 기록 몇 건을 넣은 뒤 대시보드 탭을 열어 막대·원형 차트가 그려지면 완료다. 차트가 텅 비어 보인다면 기록이 0건이라 그런 것이니, 장부 탭에서 수입·지출을 몇 건 먼저 입력하고 다시 열어보자.

STEP 4 — 모자라면 빨간불 켜지는 재고 탭

두 번째 기능은 재고다. 최소 수량이라는 선을 정해두고, 그 아래로 떨어지면 빨간불이 켜지게 한다.

'재고' 탭을 추가해줘. 품목 이름, 현재 수량, 최소 수량을 입력할 수 있고, 현재 수량이 최소 수량 아래로 떨어지면 그 줄을 빨간색으로 표시해줘.

"몇 개 남았나"만 보면 늦는다. "이 아래로 떨어지면 발주해야 한다"는 선을 정해두면, 프로그램이 대신 빨간불로 알려준다. 사장님 머릿속 걱정을 프로그램에 맡기는 것이다. 예를 들어 원두는 현재 12개에 최소 5개라 괜찮지만, 우유가 현재 2개에 최소 6개면 그 줄이 빨갛게 뜬다.

체크포인트 — 품목 하나의 현재 수량을 최소 수량보다 낮게 고쳤을 때 그 줄이 빨갛게 변하면 완료다.

STEP 5 — 내 데이터를 엑셀로 꺼내기

세 번째 기능은 CSV 내보내기다. 오늘의 하이라이트이기도 하다.

장부 기록을 엑셀에서 열 수 있는 CSV 파일로 다운로드하는 버튼을 만들어줘.

버튼이 생기면 눌러서 파일을 실제로 내려받아 엑셀이나 구글시트로 열어보자. 지금까지 데이터는 이 페이지 안에만 갇혀 있었다. CSV로 꺼내는 순간, 세무사에게 보내고 엑셀로 합계를 내는 진짜 업무로 이어진다. 내 데이터가 프로그램 밖으로 나오는 첫 경험이다.

그런데 엑셀에서 열었을 때 한글이 □□□로 깨질 수 있다. 이럴 때는 아래 문장을 그대로 붙여넣으면 된다. 원리를 몰라도 되고, 주문서처럼 쓰면 된다.

엑셀에서 한글이 깨져. CSV를 UTF-8 BOM으로 저장해줘.

UTF-8 BOM은 엑셀에게 "이 파일은 한글이 든 파일이야"라고 알려주는 작은 표식 정도로 알아두면 충분하다.

체크포인트 — 내려받은 .csv를 엑셀로 열었을 때 기록이 표로, 한글도 안 깨지고 보이면 완료다.

STEP 6 — 데이터 구조가 바뀔 때 (마이그레이션 맛보기)

마지막으로, 프로그램이 자랄 때 벌어지는 일을 눈으로 관찰한다. 재고에 '단가' 열을 하나 추가해보자.

재고 항목에 '단가' 열을 추가해줘. 앞으로 입력하는 품목은 단가도 함께 적을 수 있게.

추가한 뒤 재고 탭을 보면, 전에 넣어둔 품목들은 단가 칸이 비어(—) 있을 것이다. 원두·우유는 단가가 비고, 새로 넣은 연유만 단가가 채워진다. 이게 오늘 관찰할 포인트다.

왜 옛 데이터는 비어 있을까. 단가 열은 방금 생겼으니, 그 전에 넣은 품목에는 단가 정보가 애초에 없기 때문이다. 프로그램이 자라면 옛 데이터와 새 구조가 어긋나는 순간이 온다. 이사를 가면 옛 짐을 새 집에 맞춰 정리하듯 말이다. 진짜 서비스들은 이 정리를 DB 마이그레이션(옛 데이터를 새 구조에 맞게 옮기는 작업)이라고 부른다. 오늘 그 맛보기를 한 셈이다.

체크포인트 — 단가 열이 생기고, 옛 품목은 —, 새 품목은 값이 채워지는 차이를 눈으로 확인했으면 완료다.

골라서 더 해보기

차트·표·버튼을 얹는 요령은 어디서나 똑같다. 내 프로그램에 맞게 문장만 바꿔서 시키면 된다. 물론 먼저 세이브하고 하나씩. 아래는 오늘 배운 걸로 만들 수 있는 것들이다.

• 예약 노트에 '이번 주 예약 현황' 달력 뷰 — 날짜마다 예약 건수가 보이고 많은 날은 진하게.

  예약 노트에 '이번 주 예약 현황' 달력 뷰를 추가해줘. 날짜마다 예약 건수가 보이고, 많은 날은 진하게. 외부 라이브러리 없이.
  

• 운동 기록장에 월별 횟수 차트 — 달마다 몇 번 운동했는지 막대로.

  운동 기록장에 월별 운동 횟수를 막대 차트로 보여주는 부분을 추가해줘. 외부 라이브러리 없이.
  

• 재고 노트에 '발주 필요 목록만 보기' 버튼 — 최소 수량 밑으로 떨어진 품목만 걸러서.

  재고 노트에 '발주 필요 목록만 보기' 버튼을 추가해줘. 누르면 현재 수량이 최소 수량 아래인 품목만 걸러서 보여주게.
  

• 용돈 기입장에 '이번 달 남은 예산' 게이지 — 쓴 만큼 채워지는 동그란 게이지로.

  용돈 기입장에 '이번 달 남은 예산'을 동그란 게이지로 보여주는 부분을 추가해줘. 예산 대비 쓴 비율만큼 채워지게. 외부 라이브러리 없이.
  

막혔을 때 — 자주 나는 3가지

이런 화면이 나와도 놀라지 말자. 증상별로 원인과 대처를 정리했다.

대원칙은 하나다. 오늘도 뭐가 안 되면 AI에게 그대로 물어보면 된다. 화면을 캡처하거나 증상을 그대로 붙여넣으면 된다.

오늘 배운 것 + 다음 편

오늘 얻은 건 기능을 얹는 요령과 새 단어 몇 개다. 정리하면 이렇다.

• 하나씩 얹기 — 한 번에 다 시키지 않고 세이브 → 하나 추가 → 확인을 반복하는 것. 오늘의 핵심 기술이다.
• 차트 — 숫자를 막대·원형으로 그려 한눈에 보게 하는 것. "외부 라이브러리 없이"로 단순하게.
• CSV 내보내기 — 내 데이터를 엑셀에서 열 수 있는 파일로 꺼내기. 한글이 깨지면 UTF-8 BOM.
• 마이그레이션 — 프로그램이 자랄 때 옛 데이터를 새 구조에 맞춰 정리하는 일. 오늘은 맛보기.

오늘 만든 대시보드는 아직 내 컴퓨터 안에만 있다. 다음 시간엔 여기에 인터넷 주소(링크)를 달아, 그 링크를 내 폰으로 열면 주방에서도 홀에서도 대시보드를 확인할 수 있게 만든다. 진짜 서비스처럼 말이다.

다음 편 — 실습 6편