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 · 차량 운행일지·주유 정산 자동화
요청사항

미리 보내 주신 요청사항

만들고 싶은 것

운전자 모바일 간편 입력: 직원이 운행 전 모바일 웹에서 본인 배차 승인 건(또는 차량 번호)을 고르고, 운행 종료 시 '최종 계기판 사진'과 주유 시 '주유 영수증 사진'만 업로드하면 됨 . (사진 속 누적 주행거리 숫자와 영수증 금액/리터는 AI가 자동 인식 및…

지금의 불편

차량 배차 신청과 승인은 기존 사내 ERP로 처리하고 있지만, 문제는 차를 타고 난 뒤의 운행일지는 ERP에 추후 작성하고 외부 주유시 정산 증빙은 자동화가 어려움. 직원들이 운행을 마치면 계기판 사진이나 주행거리를 메신저로 찍어서 ERP에 작성하고, 종이 영수증을…

완성되면

운행 임직원 (모바일 사용자): 배차 건 선택, 계기판 및 영수증 사진 촬영/업로드 총무·회계 담당자 (PC 웹 관리자): 주행거리·유류비 데이터 검증, 국세청 서식 엑셀 원클릭 다운로드, 차량별 연비 및 누적거리 모니터링

쓰는 사람 · 전 직원  |  꼭 있어야 하는 기능 ·

HRDer AX · 차량 운행일지·주유 정산 자동화
오늘의 문제

월말이 되면
빈칸 운행일지를 채운다

HRDer AX · 차량 운행일지·주유 정산 자동화
오늘 완성할 결과물예상 화면

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

차량 운행일지·주유 정산 자동화 예상 결과물 화면
  • ERP 배차 CSV 불러오기 + 운전자 입력 화면(휴대폰 모양)
  • 사진 폴더를 Claude Code가 읽어 주행거리·리터·금액 CSV로 채우기
  • 직전·이번 주행거리 대조와 누락 보정 제안
  • 국세청 업무용승용차 운행기록부 엑셀 내보내기
  • 차량별 누적거리·유류비·실연비 대시보드
HRDer AX · 차량 운행일지·주유 정산 자동화
두 가지 버전

한 자료, 두 가지 버전

로컬판 · 오늘 실습

내 PC 안에서만

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

웹앱·서버판 · 교육 후

모두가 같은 주소로

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

내 과제는 🔴 서버 필요 — 운전자가 휴대폰으로 사진을 올림. 총무 집계 부분만은 로컬로 가능

HRDer AX · 차량 운행일지·주유 정산 자동화
PART 1
1
PART 1 · 설계서(PRD)

Claude Code가 읽을
설계서부터

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

설계서 ①무엇을 만드나

한 줄 정의

운전한 직원은 배차 건을 고르고 계기판·주유 영수증 사진만 올리고, 총무 담당자는 Claude Code가 사진에서 읽어 준 주행거리·리터·금액으로 빈칸 없는 국세청 업무용승용차 운행기록부 엑셀을 내려받고 차량별 누적거리·유류비·실연비를 한 화면에서 보는 앱.

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

배차 승인 건을 앱에서 바로 조회→ ERP에서 내보냈다고 가정한 dispatch_erp.csv 를 불러오기
앱이 사진 속 숫자를 AI로 자동 인식→ images 폴더의 사진을 Claude Code가 읽어 photo_read.csv 로 정리 → 앱이 불러오기
직원이 각자 휴대폰으로 입력→ PC 화면 안의 휴대폰 모양 화면으로 입력 흐름 시연
HRDer AX · 차량 운행일지·주유 정산 자동화
설계서 ②데이터·완료 기준

가상 데이터와 완료 기준

실습용 가상 데이터

  • vehicles.csv · 차량 목록 5행
  • dispatch_erp.csv · ERP 배차 내역 103행
  • trip_log.csv · 운행일지 97행
  • fuel.csv · 주유 내역 22행
  • dash_01.png · 계기판 사진 1 1행

이게 되면 완성

  • 분기 8,118 km·유류비 1,200,500원·실연비 11.3
  • 확인 필요 5건, 보정하면 7/22 운행이 77 km
  • photo_read.csv 에 dash_01 31,913 km 가 있다
  • 234나5678 엑셀 1,845 km·출퇴근 117·비율 100%
HRDer AX · 차량 운행일지·주유 정산 자동화
PART 2
2
PART 2 · 로컬판 만들기

Claude Code에게
말로 시킵니다

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

Claude Code 준비

Claude Code 준비 3가지

1

실습 자료 풀기

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

→
2

Code 탭 · Test

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

→
3

편집 자동수락

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

Test 안에 vehicle-log 폴더가 생기면 준비 끝

HRDer AX · 차량 운행일지·주유 정산 자동화
로컬판 실습
STEP 1 · 자료 확인

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

지금 열어 둔 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 · 웹앱·서버판

여러 사람이
함께 쓰려면

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

웹앱·서버판바뀌는 점

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

운전자가 각자 휴대폰으로 계기판·영수증 사진을 올리려면, 밖에서도 같은 주소로 들어와 사진과 운행일지를 함께 쓰는 서버가 필요합니다. 총무 담당자의 집계·엑셀 내보내기만이라면 로컬판으로도 충분합니다.

로컬판 (오늘)
웹앱판 (교육 후)
입력
Claude Code가 사진 폴더를 읽어 채움
운전자가 휴대폰으로 사진을 바로 올림
저장
총무 PC 브라우저 + CSV 파일
Supabase에 운행일지·주유·사진 저장
보기
총무 PC에서만
총무가 언제든 같은 주소로 확인
권한
필요 없음(혼자 사용)
운전자는 내 배차만, 총무는 전체 관리
HRDer AX · 차량 운행일지·주유 정산 자동화
웹앱·서버판준비

방법 ① 직접 연결 — 준비물

설치 프로그램 하나로

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

Supabase에 만들 표

  • 차량 · 차량번호·차종·연료·공인연비·관리 부서
  • 운행일지 · 배차·운전자·주행 전/후 km·출퇴근/업무 km
  • 주유 · 주유일·차량·리터·단가·금액·영수증 사진
  • 사진 · 종류·차량·올린 사람·올린 날·읽은 숫자

운전자: 로그인 → 내 배차 고르고 사진 올리기 / 총무: 검증·보정·운행기록부 엑셀 내려받기

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 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명 쓰는지 ③ 저장되는 데이터 종류(운전자 이름·부서·운행 목적지와 계기판·영수증 사진 같은 개인정보) ④ 필요한 것(사내 서버, 휴대폰 접속, 사진 저장 공간, 로그인, 백업) ⑤ 지금은 가상 데이터로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어서 써줘.

보내고 나서 확인할 것

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

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

HRDer AX · 차량 운행일지·주유 정산 자동화
최종 점검

최종 점검

HRDer AX · 차량 운행일지·주유 정산 자동화
마무리

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

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