JJ AI+ · HRDer AX 바이브코딩
HRD 실전
Claude Code(데스크톱 앱)에서 실습

영수증 모으면
정산서가
알아서 채워진다

영수증 숫자를 옮겨 적던 매달의 정산을 확인만 하는 일로 바꿉니다

정산서 자동 작성 앱로컬판웹앱·서버판
JJ Creative 교육연구소
구성약 23분

이 자료는 이렇게 갑니다

0분5분10분15분20분25분오프닝·요청사항PART 1 설계서(PRD)PART 2 로컬판 만들기PART 3 웹앱·서버판점검·마무리 ← 오늘 실습의 중심: 로컬판
HRDer AX · 정산서 자동 작성 앱
요청사항

미리 보내 주신 요청사항

만들고 싶은 것

매월 작성하는 정산서에 대해 증빙자료를 한번에 모아주면 엑셀양식에 자동으로 작성이 되었으면 좋겠음

지금의 불편

일일이 영수증을 모으고 각 항목에 따라 값을 입력을 하다 보면 오타도 나고 실수가 생김

완성되면

예산 구분별 폴더에 사용 증빙내용을 저장하면 그 증빙자료를 보고 정산서 양식에 자동으로 기입될 수 있도록 함

쓰는 사람 · 우리팀 매니저 모두 사용, 저는 매월 1회 작성, 나머지 팀원들은 평균 2달에 1번 작성  |  꼭 있어야 하는 기능 · 이미지, 세금계산서 등 금액 인식 후 자동 입력

HRDer AX · 정산서 자동 작성 앱
오늘의 문제

매달 정산서,
영수증 숫자를 옮겨 적는다

HRDer AX · 정산서 자동 작성 앱
오늘 완성할 결과물예상 화면

완성하면 이런 화면이 됩니다

정산서 자동 작성 앱 예상 결과물 화면
  • 정산서 양식 화면(예산 구분별 배정액·사용액·건수·사용률·합계)
  • 증빙 목록 CSV 불러오기 + 새 증빙 이미지 4장은 Claude Code가 읽어 CSV에 추가
  • 예산 대비 사용률 차트(구분별 막대·비중 도넛·월별 추이)
  • 정산서 엑셀(.xlsx) 내보내기
HRDer AX · 정산서 자동 작성 앱
두 가지 버전

한 자료, 두 가지 버전

로컬판 · 오늘 실습

내 PC 안에서만

Claude Code가 Test 폴더에 앱을 만들고, 내 PC에서 열어 봅니다. 혼자·팀 공유 폴더로 쓰기엔 이것으로 충분합니다.

웹앱·서버판 · 교육 후

모두가 같은 주소로

여러 사람이 각자 접속해 같은 데이터를 쓰려면 서버가 필요합니다. 사내 서버를 IT에 요청하거나, 설치 프로그램으로 직접 연결합니다.

내 과제는 🟢 로컬로 충분 — 영수증 읽기는 Claude Code가 하고, 각자 자기 PC에서 작성

HRDer AX · 정산서 자동 작성 앱
PART 1
1
PART 1 · 설계서(PRD)

Claude Code가 읽을
설계서부터

PRD.md 한 장이 Claude Code에게 주는 작업 지시서입니다

설계서 ①무엇을 만드나

한 줄 정의

예산 구분별 폴더에 모은 영수증·세금계산서를 Claude Code가 읽어 금액을 CSV로 정리하면, 앱이 그 CSV로 정산서 양식을 자동으로 채우고 예산 대비 사용률을 그래프로 보여 주며 엑셀로 내보내는 앱.

원래 요청에서 오늘 조정한 부분

증빙 이미지를 앱이 바로 인식해 자동 입력→ Claude Code가 images 폴더를 읽어 receipts.csv 에 행을 추가 → 앱이 CSV를 읽어 정산서에 반영
실제 영수증·세금계산서와 회사 엑셀 양식→ 가상 영수증 3장·세금계산서 1장과 가상 정산서 양식
예산 구분별 폴더에 저장만 하면 자동 기입→ 폴더 이름(01_교육훈련비 …)을 예산 구분으로 쓰고, 정리는 Claude Code에게 한 번 요청
HRDer AX · 정산서 자동 작성 앱
설계서 ②데이터·완료 기준

가상 데이터와 완료 기준

실습용 가상 데이터

  • budget.csv · 예산 구분 5행
  • receipts.csv · 10월 증빙 목록 32행
  • monthly_usage.csv · 1~9월 사용 실적 45행
  • receipt_meeting.png · 증빙 이미지 ① 회의비 영수증 1행
  • receipt_supplies.png · 증빙 이미지 ② 소모품 영수증 1행

이게 되면 완성

  • 예산 구분 5개·증빙 32건·합계 6,897,200원이 보인다
  • 그림 4장을 읽으면 36건·8,769,600원(89.5%)이 된다
  • 회의비 112,000원·택시 23,400원 등 4장 금액이 맞다
  • 회의비 사용률 112.4% 가 빨간색으로 표시된다
HRDer AX · 정산서 자동 작성 앱
PART 2
2
PART 2 · 로컬판 만들기

Claude Code에게
말로 시킵니다

코드는 Claude가 씁니다. 우리는 다섯 문장을 차례로 붙여 넣습니다

Claude Code 준비

Claude Code 준비 3가지

1

실습 자료 풀기

실습자료 전체.zip 을
다운로드 › Test 폴더에

→
2

Code 탭 · Test

입력창 아래
«이 컴퓨터 · Test» 확인

→
3

편집 자동수락

허락 묻는 창이 뜨면
내용 보고 [허용]

Test 안에 settlement-auto 폴더가 생기면 준비 끝

HRDer AX · 정산서 자동 작성 앱
로컬판 실습
STEP 1 · 자료 확인

Claude Code 입력창에 붙여 넣기 Claude Code

지금 열어 둔 Test 폴더 안에 settlement-auto 폴더가 있고, 그 안에 PRD.md 와 data 폴더(CSV 3개, images 폴더 안 그림 4장)가 있는지 확인해줘. 없으면 무엇이 없는지 알려주고 멈춰줘. 있으면 PRD.md 를 끝까지 읽고, 무엇을 만들지 5줄로 요약해줘. 아직 코드는 만들지 마.

보내고 나서 확인할 것

5줄 요약이 내 요청과 맞는지 — 아직 앱을 만들지 않았는지

HRDer AX · 정산서 자동 작성 앱
로컬판 실습
STEP 2 · 화면 만들기

Claude Code 입력창에 붙여 넣기 Claude Code

PRD.md 의 «3. 오늘 만들 기능»과 «7. 기술 원칙»대로 settlement-auto 폴더 안에 앱을 만들어줘. 첫 화면은 종이 정산서처럼 생긴 표(예산 구분·월 배정액·사용액·건수·사용률·합계)로 해줘. 인터넷에 올리거나 외부 서버를 쓰지 말고, 외부 인터넷 주소(CDN·글꼴)도 불러오지 마. 다 만들면 settlement-auto 폴더에서 내 PC에서 열어 볼 수 있게 실행하고, 내가 열 주소를 알려줘.

보내고 나서 확인할 것

알려 준 주소를 크롬에서 열어 첫 화면이 뜨는지

HRDer AX · 정산서 자동 작성 앱
로컬판 실습
STEP 3 · 데이터 연결

Claude Code 입력창에 붙여 넣기 Claude Code

앱이 data/budget.csv 와 data/receipts.csv 를 읽어 정산서 표를 자동으로 채우게 해줘. 예산 구분별 사용률을 가로 막대로, 구분별 비중을 도넛으로, data/monthly_usage.csv 로 월별 추이를 선 그래프로 보여 주고, 사용률이 100%를 넘는 구분은 빨간색으로 표시해줘. [엑셀로 내보내기] 버튼을 누르면 정산서 표가 .xlsx 파일로 저장되게 해줘(필요한 라이브러리는 폴더 안에 내려받아서).

보내고 나서 확인할 것

가상 데이터를 불러온 뒤 숫자가 완료 기준과 같은지

HRDer AX · 정산서 자동 작성 앱
로컬판 실습
STEP 4 · AI 일 (Claude Code)

Claude Code 입력창에 붙여 넣기 Claude Code

settlement-auto/data/images 폴더의 증빙 그림 4장을 하나씩 직접 보고, 각각 사용일·거래처·품목·증빙종류·공급가액·부가세·합계금액을 읽어줘. 영수증은 합계를 기준으로 공급가액과 부가세(합계÷11)를 나누고, 세금계산서는 적힌 칸을 그대로 써줘. 예산 구분은 그림 내용으로 정해서 data/receipts.csv 맨 아래에 E033~E036 으로 추가하고, 읽은 내용과 확인이 필요한 점을 scan_note.md 로 저장해줘. 앱을 새로고침하면 증빙이 36건으로 늘어나야 해.

보내고 나서 확인할 것

결과 파일이 폴더에 생기고 앱 카드에 보이는지

HRDer AX · 정산서 자동 작성 앱
로컬판 실습
STEP 5 · 테스트·마무리

Claude Code 입력창에 붙여 넣기 Claude Code

PRD.md 의 «9. 완료 기준»을 하나씩 직접 확인해서 ✅/❌ 표로 알려줘. ❌ 가 있으면 고친 뒤 다시 확인해줘. 모두 ✅ 면 settlement-auto 폴더를 Test/zip/settlement-auto.zip 으로 묶고 파일 탐색기에서 보여줘.

보내고 나서 확인할 것

✅/❌ 표가 모두 ✅ 인지, zip 파일이 생겼는지

HRDer AX · 정산서 자동 작성 앱
막힐 때

이럴 땐 이렇게

허락 묻는 창

내용 보고 [허용]

Test 폴더 밖을 건드리려 하면 [거부] 후 «Test 폴더 안에서만 해줘»

폴더에 생긴 파일

탐색기로 확인

«지금 폴더에 무슨 파일이 생겼는지 쉽게 설명해줘»

화면이 이상할 때

보이는 대로 말하기

«이 버튼을 눌렀는데 그래프가 그대로야. 원인 찾아 고쳐줘»

HRDer AX · 정산서 자동 작성 앱
PART 3
3
PART 3 · 웹앱·서버판

여러 사람이
함께 쓰려면

교육 후, 사내 기준을 확인한 뒤에 하는 부분입니다

웹앱·서버판바뀌는 점

로컬판 → 웹앱판, 무엇이 바뀌나

팀원 각자 자기 PC에서 한 달에 한 번 작성하는 동안은 로컬판으로 충분합니다. 팀 매니저들의 정산서를 한곳에 모아 팀 전체 예산 사용률을 함께 보려면 그때 웹앱이 필요합니다.

로컬판 (오늘)
웹앱판 (교육 후)
입력
Claude Code가 그림을 읽어 CSV에 추가
읽은 결과를 각자 로그인해 올리기
저장
내 PC 브라우저 + CSV 파일
Supabase에 팀 증빙·예산을 한 곳에
보기
내 정산서만
팀 전체 예산 사용률을 같은 주소로
권한
필요 없음(혼자 사용)
매니저는 내 증빙만, 담당자는 전체
HRDer AX · 정산서 자동 작성 앱
웹앱·서버판준비

방법 ① 직접 연결 — 준비물

설치 프로그램 하나로

  • 무료 계정 3개: GitHub · Supabase · Vercel
  • HRD-AX-Setup 실행 → 설치·연결 시작
  • 로그인·승인은 본인이 직접
설치 프로그램HRD-AX-Setup.exe (Windows)

Supabase에 만들 표

  • 예산 구분 · 구분·계정코드·연간예산·월배정액·담당자
  • 증빙 · 사용일·거래처·품목·공급가액·부가세·합계·사용자
  • 월별 실적 · 월·예산구분·사용금액

매니저: 로그인 → 내 증빙 올리기·내 정산서 내려받기 / 정산 담당자: 팀 전체 정산서·예산 사용률 보기

HRDer AX · 정산서 자동 작성 앱
웹앱판 실습교육 후
W1 · 설계를 웹앱용으로

Claude Code 입력창에 붙여 넣기 Claude Code

지금 만든 settlement-auto 앱을 팀 매니저들이 각자 로그인해서 증빙을 올리고, 정산 담당자가 팀 전체를 보는 웹앱으로 바꾸고 싶어. PRD.md 의 «11. 웹앱·서버 버전»을 읽고, 무엇이 바뀌는지와 Supabase에 만들 표 3개를 쉬운 말로 먼저 정리해줘. 내가 OK 하기 전에는 아무것도 바꾸지 마.

보내고 나서 확인할 것

바뀌는 점과 표 3~4개 설명이 내 생각과 맞는지 — OK 전에는 아무것도 바뀌지 않았는지

HRDer AX · 정산서 자동 작성 앱
웹앱판 실습교육 후
W2 · Supabase 연결

Claude Code 입력창에 붙여 넣기 Claude Code

좋아, 진행해줘. Supabase에 새 프로젝트를 만들고 예산 구분·증빙·월별 실적 표 3개를 만들어줘. data 폴더의 가상 데이터를 채우고, 로그인한 사람만 보고 매니저는 자기 증빙만 고치게 잠금 설정까지 해줘. 비밀번호나 열쇠 같은 비밀값은 화면에 보여 주지 말고, 내가 직접 넣을 게 있으면 어디에 넣는지만 알려줘.

보내고 나서 확인할 것

로그인 화면이 뜨고, 가상 데이터가 들어갔는지 — 비밀값이 화면에 안 보였는지

HRDer AX · 정산서 자동 작성 앱
웹앱판 실습교육 후
W3 · GitHub에 올리고 Vercel로 배포

Claude Code 입력창에 붙여 넣기 Claude Code

이제 GitHub에 비공개 저장소로 올리고 Vercel로 배포해줘. 비밀값이 저장소에 올라가지 않았는지 먼저 확인하고, 배포가 끝나면 접속 주소를 알려줘.

보내고 나서 확인할 것

접속 주소를 휴대폰으로도 열어 보기

HRDer AX · 정산서 자동 작성 앱
웹앱판 실습교육 후
W4 · 다른 사람 화면으로 확인

Claude Code 입력창에 붙여 넣기 Claude Code

배포된 주소에서 PRD.md 의 «웹앱판 완료 기준»을 하나씩 확인해서 ✅/❌ 표로 알려줘. 매니저 계정과 정산 담당자 계정을 하나씩 가상으로 만들어서, 각각 로그인했을 때 할 수 있는 일이 다른지도 확인해줘.

보내고 나서 확인할 것

역할별로 보이는 화면이 다른지, 로그인 안 하면 안 보이는지

HRDer AX · 정산서 자동 작성 앱
웹앱·서버판사내 서버
방법 ② · 사내 서버를 IT에 요청

Claude Code 입력창에 붙여 넣기 Claude Code

지금 만든 settlement-auto 앱을 우리 팀 매니저들이 함께 쓰려고 해. 사내 IT 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명 쓰는지(팀 매니저 전체, 월 1회~2달에 1회) ③ 저장되는 데이터 종류(예산·영수증 금액·거래처, 개인정보는 사용자 이름 정도) ④ 필요한 것(사내 서버, 로그인, 백업, 나중에 법인카드 내역 대조) ⑤ 지금은 가상 데이터로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어줘.

보내고 나서 확인할 것

요청서에 가상 데이터로 만들었다는 점과 필요한 것(사내 서버·로그인·백업)이 들어갔는지

회사 업무용은 이 방법이 기본입니다. 오늘 만든 앱 화면이 가장 좋은 기획서가 됩니다.

HRDer AX · 정산서 자동 작성 앱
최종 점검

최종 점검

HRDer AX · 정산서 자동 작성 앱
마무리

오늘은 로컬판,
함께 쓰려면 웹앱·서버판

JJ Creative 교육연구소 · jjh@jjcreative.co.kr
← → 넘기기 / T 목차 / G 전체 미리보기 / S 발표자 모드 / F 전체 화면