지금 열어 둔 Test 폴더 안에 vehicle-log 폴더가 있고, 그 안에 PRD.md 와 data 폴더(CSV 4개, images 폴더에 사진 4장)가 있는지 확인해줘. 없으면 무엇이 없는지 알려주고 멈춰줘. 있으면 PRD.md 를 끝까지 읽고, 무엇을 만들지 5줄로 요약해줘. 아직 코드는 만들지 마.
보내고 나서 확인할 것
5줄 요약이 내 요청과 맞는지 — 아직 앱을 만들지 않았는지
HRDer AX · 차량 운행일지·주유 정산 자동화
로컬판 실습
STEP 2 · 화면 만들기
Claude Code 입력창에 붙여 넣기 Claude Code
PRD.md 의 «3. 오늘 만들 기능»과 «7. 기술 원칙»대로 vehicle-log 폴더 안에 앱을 만들어줘. 위쪽에 «총무 대시보드 / 운전자 모바일 입력 / 국세청 운행기록부» 탭 3개를 두고, 운전자 화면은 휴대폰 모양 틀 안에 보여줘. 인터넷에 올리거나 외부 주소(CDN·글꼴)를 불러오지 마. 다 만들면 내 PC에서 열어 볼 수 있게 실행하고 내가 열 주소를 알려줘.
보내고 나서 확인할 것
알려 준 주소를 크롬에서 열어 첫 화면이 뜨는지
HRDer AX · 차량 운행일지·주유 정산 자동화
로컬판 실습
STEP 3 · 데이터 연결
Claude Code 입력창에 붙여 넣기 Claude Code
data 폴더의 dispatch_erp.csv, trip_log.csv, fuel.csv, vehicles.csv 를 불러와서 대시보드에 차량별 분기 주행거리, 월별 유류비, 차량별 실연비(주행거리 ÷ 주유 리터)와 공인연비를 보여줘. 직전 운행의 주행 후 km와 다음 운행의 주행 전 km를 비교해서 빈칸이나 끊긴 곳을 «확인 필요»로 표시하고, 다음 운행 주행 전 km로 채우는 보정 버튼도 만들어줘. 그래프에 마우스를 올리면 수치가 보이게 해줘.
보내고 나서 확인할 것
가상 데이터를 불러온 뒤 숫자가 완료 기준과 같은지
HRDer AX · 차량 운행일지·주유 정산 자동화
로컬판 실습
STEP 4 · AI 사진 인식 (Claude Code)
Claude Code 입력창에 붙여 넣기 Claude Code
vehicle-log/data/images 폴더의 사진 4장을 하나씩 열어서 읽어줘. 계기판 사진은 누적 주행거리(ODO)와 TRIP 값을, 영수증 사진은 주유소·날짜·유종·단가·리터·합계 금액을 읽어줘. trip_log.csv 와 fuel.csv 에서 같은 사진 이름이 적힌 행을 찾아 짝을 맞추고, 결과를 vehicle-log/data/photo_read.csv 로 저장해줘. 앞뒤 주행거리가 맞는지도 검증해서 적고, 앱이 이 파일을 불러와 빈칸을 채우게 연결해줘.
보내고 나서 확인할 것
결과 파일이 폴더에 생기고 앱 카드에 보이는지
HRDer AX · 차량 운행일지·주유 정산 자동화
로컬판 실습
STEP 5 · 엑셀·테스트·마무리
Claude Code 입력창에 붙여 넣기 Claude Code
국세청 운행기록부 탭에서 차량을 고르고 버튼을 누르면 업무용승용차 운행기록부 서식(사용일자·부서·성명·주행 전/후 계기판·주행거리·출퇴근용·일반업무용·비고, 맨 아래 총 주행거리·업무용 사용거리·업무사용비율)대로 .xlsx 엑셀이 내려받아지게 해줘. 엑셀 라이브러리가 필요하면 파일을 폴더 안에 내려받아 써. 그다음 PRD.md 의 «9. 완료 기준»을 하나씩 확인해 ✅/❌ 표로 알려주고, 모두 ✅ 면 vehicle-log 폴더를 Test/zip/vehicle-log.zip 으로 묶어 파일 탐색기에서 보여줘.
보내고 나서 확인할 것
✅/❌ 표가 모두 ✅ 인지, zip 파일이 생겼는지
HRDer AX · 차량 운행일지·주유 정산 자동화
막힐 때
이럴 땐 이렇게
허락 묻는 창
내용 보고 [허용]
Test 폴더 밖을 건드리려 하면 [거부] 후 «Test 폴더 안에서만 해줘»
폴더에 생긴 파일
탐색기로 확인
«지금 폴더에 무슨 파일이 생겼는지 쉽게 설명해줘»
화면이 이상할 때
보이는 대로 말하기
«이 버튼을 눌렀는데 그래프가 그대로야. 원인 찾아 고쳐줘»
HRDer AX · 차량 운행일지·주유 정산 자동화
PART 3
3
PART 3 · 웹앱·서버판
여러 사람이 함께 쓰려면
교육 후, 사내 기준을 확인한 뒤에 하는 부분입니다
웹앱·서버판바뀌는 점
로컬판 → 웹앱판, 무엇이 바뀌나
운전자가 각자 휴대폰으로 계기판·영수증 사진을 올리려면, 밖에서도 같은 주소로 들어와 사진과 운행일지를 함께 쓰는 서버가 필요합니다. 총무 담당자의 집계·엑셀 내보내기만이라면 로컬판으로도 충분합니다.
운전자: 로그인 → 내 배차 고르고 사진 올리기 / 총무: 검증·보정·운행기록부 엑셀 내려받기
HRDer AX · 차량 운행일지·주유 정산 자동화
웹앱판 실습교육 후
W1 · 설계를 웹앱용으로
Claude Code 입력창에 붙여 넣기 Claude Code
지금 만든 vehicle-log 앱을 운전자가 각자 휴대폰으로 로그인해서 사진을 올리는 웹앱으로 바꾸고 싶어. PRD.md 의 «11. 웹앱·서버 버전»을 읽고, 무엇이 바뀌는지와 Supabase에 만들 표 4개를 쉬운 말로 먼저 정리해줘. 내가 OK 하기 전에는 아무것도 바꾸지 마.
보내고 나서 확인할 것
바뀌는 점과 표 3~4개 설명이 내 생각과 맞는지 — OK 전에는 아무것도 바뀌지 않았는지
HRDer AX · 차량 운행일지·주유 정산 자동화
웹앱판 실습교육 후
W2 · Supabase 연결
Claude Code 입력창에 붙여 넣기 Claude Code
좋아, 진행해줘. Supabase에 새 프로젝트를 만들고 차량·운행일지·주유·사진 표 4개와 사진 보관함을 만들어줘. 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
지금 만든 vehicle-log 앱을 회사에서 업무용 차량 5대를 쓰는 운전자들과 총무 담당자가 함께 쓰려고 해. 사내 IT 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명 쓰는지 ③ 저장되는 데이터 종류(운전자 이름·부서·운행 목적지와 계기판·영수증 사진 같은 개인정보) ④ 필요한 것(사내 서버, 휴대폰 접속, 사진 저장 공간, 로그인, 백업) ⑤ 지금은 가상 데이터로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어서 써줘.