유류 374건은 2022년 8월부터 2025년 6월까지 35개월치. 한 달에 열 건 남짓을 영수증 보고 옮겨 적은 셈입니다.
설명02 · 자료로 그려 본 업무 흐름
빨간 상자는 이미 적힌 것을 다시 옮겨 적는 곳입니다
주유영수증을 서식에 붙이고 아래 칸을 손으로 적은 뒤, 10-다에 한 줄씩 다시 칩니다
정비견적서 품목·금액을 품의서 표에 다시 적고, 예산 잔액을 매번 새로 계산합니다
검사재검사 기한이 우편과 진단서 종이에만 있습니다
그림에서 실제와 다른 곳이 있는가. 있으면 지금 말씀해 주세요.
02 · 자료로는 모르는 것
자료만 봐서는 답을 못 찾은 것, 네 가지를 여쭙겠습니다
1
감사자료 주유·수리 내역
언제, 무엇을 보고 채우시나요. 영수증을 보고 치시나요, 카드사 내역을 받으시나요
2
ERP 검사·사고수리 화면
실제로 입력하시나요
3
품의서 "이미 쓴 금액"
어디서 보고 적으시나요
4
다음 검사 날짜
누가 어디에 적어 두시나요
세 분 답이 2회차 첫 순서에 Claude에게 알려 줄 우리 부서 사정이 됩니다.
03 · 활동 · 시간 적기
빨간 상자마다 한 달에 몇 분 쓰시는지 적어 봅니다
하는 일
한 달 몇 번
한 번 몇 분
한 달 합계
영수증 붙이고 아래 칸 적기
유류 내역 엑셀(10-다)에 옮기기
견적서를 품의서 표로 옮기고 예산 잔액 계산
수리 내역 엑셀(10-나)·ERP 입력
검사 기한 챙기기
감사 때 10-가·나·다·라 모으기
3회차에 대시보드로 같은 일을 재서 옆에 적습니다. 그 차이가 성과발표회에 들고 가는 숫자입니다.
설명04 · 검사는 돈이 나가는 곳
검사 기한을 넘기면 과태료가 붙습니다
시청 안내 우편
자동차 정기(종합)검사안내서
자동차등록번호 : 97부****
유효기간만료일 : 2025.07.13 ~ 2026.07.12
자동차검사기간 : 2026.04.13 ~ 2026.08.12
과태료부과금액
· 검사기간만료일부터 30일 이내 : 4만원
· 30일 초과 이후 3일마다 2만원씩 증가
(최고 60만원)
설명04 · 839너 재검사
839너는 10월 28일까지 재검사를 받아야 합니다
검사일2026-09-10 · 기능종합 진단
결과검사부적합. 주차브레이크 제동력 미달
재검사2026년 10월 28일까지. 오늘(10/7) 기준 3주
견적같은 달 주차브레이크 케이블 교체 163,495원
이 날짜는 진단서 한 장에만 있습니다. 그래서 대시보드는 검사 기한을 기름값보다 위에 둡니다.
839너 재검사는 지금 어떻게 되어 가고 있는가. 정비 품의가 올라갔는가.
05 · 옮겨 적다 생긴 흔적
같은 내용을 여러 번 옮기면 어딘가 한 군데는 틀립니다
어디
무엇이 다른가
검사용 품의
제목은 "97부", 본문과 지급내역 표는 "97무"
감사자료 10-나 수리
보유 6대에 없는 "83부"(10줄, 1,412,000원)와 "87무"(1줄, 90,000원)
감사자료 10-가 보유
80보만 등록일이 날짜가 아니라 숫자(45797)
83부가 83무의 오타인지 처분한 다른 차인지는 여러분이 아십니다. 모르면 다음 주까지 확인할 사람을 정합니다.
06 · 오늘 만들 것
한 번에 다 없앨 수는 없으니 보는 것부터 만듭니다
회차
만드는 것
줄어드는 일
1회차 (오늘)
차량별 기름값·수리비, 검사 기한, 확인 필요가 보이는 첫 화면
감사 때 차량별 합계 내기, 검사 기한 챙기기
2회차
영수증·견적서를 Claude가 읽어 이어 붙이기, 감사자료 양식 엑셀
영수증 보고 한 줄씩 치기, 감사자료 만들기
3회차
GitHub에 올려 같이 고치기, 다른 PC에서 주소로 열기, 보안 점검
파일을 메일로 주고받기
화면에 숫자가 뜨면 엑셀과 맞는지부터 보게 됩니다. 맞추다 보면 83부 같은 것이 나옵니다.
Break · 쉬는 시간
15분 쉬고 2부를 시작합니다
11:00
다음은 Claude를 처음 써 봅니다. 노트북에서 Claude 앱을 열어 두세요.
Part 02
Claude 처음 써 보기
Claude는 처음 온 신입 직원과 같습니다. 일은 빠른데 우리 부서 사정은 모릅니다. 자료를 주고, 말하고, 결과를 확인합니다.
설명07 · Code 탭이란
Code 탭은 답을 글로 주는 곳이 아니라 파일을 직접 만드는 곳입니다
내 PC의 폴더 하나를 열어 주면 그 안의 엑셀·PDF·사진을 열어 보고, 새 파일을 만들고, 필요한 프로그램을 깔고 실행까지 합니다. 영어 설명서에서는 Claude Code라고 부릅니다.
대화 탭엑셀을 올리면 답을 글로 줍니다. 엑셀에 옮기는 일은 내가 합니다
Code 탭"합계 표 만들어서 저장해줘"라고 하면 파일이 폴더에 생깁니다
오늘처음부터 끝까지 Code 탭만 씁니다
07 · 일 시키는 순서
신입에게 일을 줄 때와 같은 순서로 갑니다
1
자료를 준다
폴더에 넣어 둡니다. 폴더에 없는 것은 모릅니다
Docs/
2
원하는 것을 말한다
평소 말로 합니다. 명령어나 정해진 형식은 없습니다
"~해줘"
3
결과를 확인한다
숫자는 원본과 맞춰 봅니다. 신입 보고서를 그대로 결재 올리지 않는 것처럼
원본 엑셀
오늘 남은 시간은 전부 이 세 가지를 반복하는 것입니다.
07 · Claude가 일하는 순서
Claude는 읽고, 정하고, 실행하고, 확인한 뒤 보고합니다
허용 창은 3번 "실행"에서 뜹니다. 좋은 답은 5번에서 한 것과 안 한 것을 나눠 적어 옵니다. 영어로는 이렇게 일하는 AI를 에이전트라고 부릅니다.
설명08 · 로컬과 클라우드
오늘은 로컬로 합니다. 내 PC 폴더를 직접 다루기 때문입니다
Code 탭 입력창 위 맨 왼쪽 칸에서 고릅니다. 같은 Claude지만 일하는 곳이 다릅니다.
로컬내 PC에서 실행. 내 폴더의 엑셀을 열고 파일을 만들고 프로그램을 깝니다
클라우드Anthropic 서버의 빈 컴퓨터에서 실행. 내 PC 폴더는 못 봅니다
오늘car-dashboard 폴더를 써야 하니 처음부터 끝까지 로컬
실습08 · 설치 확인
Code 탭에서 로컬과 수동을 확인합니다
로컬입력창 위 맨 왼쪽. 클라우드면 눌러서 로컬로. 그래야 내 PC 폴더를 고릅니다
수동입력창 아래 왼쪽. 무언가 실행하기 전에 매번 묻는 상태
폴더설치 때 만든 claude-연습 폴더를 고릅니다
치는 말
이 폴더에 hello.txt 파일을 만들고 안에 오늘 날짜를 적어 주세요.
세 분 모두 hello.txt가 생겼는가. 업그레이드 안내가 뜨면 다른 계정으로 들어간 것입니다.
실습09 · 실습 폴더
car-dashboard를 만들고 자료는 Docs에 따로 둡니다
1탐색기 → 문서 → 새 폴더 car-dashboard
2나눠 드린 관용차-실습자료.zip을 그 안에 풉니다. Docs 폴더에 11개
3앱 왼쪽 위 + 새로 생성 → 폴더 칸 → 폴더 열기 → car-dashboard
원칙받은 것과 만든 것을 섞지 않습니다. Docs 안의 파일은 손대지 않습니다
입력창 위에 로컬과 car-dashboard가 보이는가. 폴더가 한 겹 더 생겼으면 Docs를 바로 아래로 옮깁니다.
설명10 · 허용 창이란
Claude는 무언가 실행하기 전에 허락을 받습니다
내 PC에서 명령을 실행하거나 파일을 만들기 전에 띄우는 확인 창입니다. 무엇을 하려는지 한 줄과 실제 명령이 보입니다.
거부하지 말라는 뜻
한 번만이번 한 번만 허락
항상 허용이 폴더에서 같은 종류의 일은 다시 안 묻습니다
실습10 · 첫 질문
처음에는 아무것도 만들지 않고 자료부터 읽힙니다
치는 말
Docs 폴더에 있는 자료 하나씩 열어 보고 뭐가 들어 있는지 설명해줘. 엑셀은 시트별로.
곧 왼쪽 같은 창이 뜹니다. python으로 엑셀을 읽으려는 것인데, 이 PC에는 Python이 없습니다. 그래도 한 번만 허용을 누르세요. 실패하면 Claude가 방법을 바꿉니다.
실습10 · 방법을 바꾼 Claude
Python이 없으면 PowerShell로 엑셀을 읽습니다
Claude가 남긴 말
Python·Node·Excel이 없어서 PowerShell로 엑셀 XML을
직접 파싱해 읽는 중입니다.
PowerShell윈도우에 원래 들어 있는 명령 창. 따로 설치할 것 없음
이 창항상 허용이 없습니다. 내용을 보고 한 번만 허용을 계속 누릅니다
나중에자주 뜨는 것은 4부 21절에서 자동 모드로 줄입니다
실습10 · 받은 답
스캔 영수증과 사진도 읽고, 흔적을 스스로 찾았습니다
영수증글자 복사가 안 되는 스캔 PDF에서 날짜 · 리터 · 금액을 읽었습니다
진단서사진에서 839너 재검사 기한 2026.10.28을 찾았습니다
⚠️ 표시83부·87무, 406,480원 줄을 시키지 않았는데 따로 적어 왔습니다
내 화면의 답에도 유류 374건, 재검사 10월 28일이 나왔는가. 문장은 달라도 숫자가 같으면 됩니다.
실습11 · 우리 일을 설명하게 하기
"모르는 건 모른다고 해줘"를 꼭 붙입니다
치는 말
이 자료들로 보면 관용차 업무가 어떤 순서로 돌아가는 것 같은지 정리해줘. 같은 내용을 여러 번 옮겨 적는 곳이 있으면 알려줘. 자료만 봐서는 모르는 건 모른다고 해줘.
이 말이 없으면 빈 곳을 그럴듯한 짐작으로 채웁니다. 이번 답은 [확인]과 [추정]을 나눠 적어 왔습니다.
11 · 받은 답
Claude가 찾은 "옮겨 적는 곳"과 모르는 것
같은 내용을 여러 번 옮겨 적는 곳
내용
옮겨 적는 경로
횟수
주유 내역
영수증 → 첨부서식 수기 칸 → 10-다
3번
정비 품목
견적서 → 품의 표 → 10-나
3번
차량 기본정보
ERP 원장 → 10-가
2번 이상
예산 현황
품의마다 새로 계산
매 건
옮겨 적다 생긴 오류: 검사 품의 97부/97무, 견적서 "토글스윗/공임" ↔ 품의 "토글스위치/공임비"
자료만으로는 알 수 없는 것
대금 지급: 지급명령 · 세금계산서 · 카드 대금 정산 순서
ERP 실제 사용 여부: 검사 · 사고수리 화면이 비어 있음
10-나 · 10-다의 원본: 영수증에서 바로 옮겼는지, 중간 대장이 있는지
이 빈칸은 여러분만 채울 수 있습니다. 결과가 이상하면 대부분 이런 사정을 안 알려 줘서입니다.
Lunch · 점심시간
점심 드시고 와서 2부 마지막부터 시작합니다
13:00
11시 30분부터 1시까지 점심시간입니다. 노트북은 켜 둔 채로 두세요. 오후에는 처음 쓸 때 알아 둘 것 세 가지를 보고, 무엇을 만들지 정한 뒤 첫 화면까지 만듭니다. 1부 3절 시간표에 숫자를 하나라도 적어 두시면 좋습니다.
12 · 처음 쓸 때 알아 둘 것
원리는 세 가지만 기억하세요
01
다음 대화는 기억 못 합니다
정한 것은 파일로 남깁니다. 3부의 PLAN.md · spec.md · tasks.json
02
그럴듯하게 틀릴 수 있습니다
표와 숫자로 깔끔하게 와도 원본 엑셀과 한 번 맞춰 봅니다
03
넣으면 안 되는 것이 있습니다
넣은 자료는 인터넷을 거쳐 Anthropic 컴퓨터에서 처리됩니다
12 · Warning · Claude에 넣지 마세요
실명 · 원본 자료 · 개인 계정은 넣지 않습니다
1
개인정보
실명, 주민등록번호, 전화번호, 카드번호 전체, 계좌번호. 지우거나 바꾼 다음
점검표 1
2
실제 원본 자료
실습과 개발은 가린 자료나 같은 모양의 가짜 자료로만
점검표 2
3
다른 계정 · 다른 AI
회사 일은 지급받은 Max 계정의 클로드 앱 하나로만
점검표 4
공사 성과물 보안 점검표 항목입니다. 3회차에 여섯 항목을 다 같이 확인합니다.
Part 03
무엇을 만들지 정하기
"만들어줘"라고 하면 바로 만듭니다. 그런데 틀린 것도 다 만든 뒤에야 보입니다. 그래서 계획과 기준을 먼저 정합니다.
설명13 · 계획 모드란
계획 모드에서는 Claude가 읽기만 하고 고치지 않습니다
자료를 보고 무엇을 어떻게 만들지 적어서 보여 주고, 좋다고 해야 그때부터 만듭니다. 영어 설명서에서는 Plan 모드라고 부릅니다.
켜기입력창 아래 "수동"을 눌러 네 번째 "계획"
고치기계획이 마음에 안 들면 다시 말하면 됩니다
이유아무것도 안 만들었으니 지울 것도 되돌릴 것도 없습니다
실습13 · 계획 모드 켜기
"수동"을 누르고 계획을 고른 뒤 칩니다
모드
묻는 것
언제
자동
지우기처럼 되돌리기 어려운 일만
할 일이 tasks.json에 다 적힌 실습 폴더
수동
파일 쓰기 · 명령 실행 전부
처음 쓰는 폴더. 지금 상태
편집 자동 수락
명령 실행만
파일 쓰기에 항상 허용을 누르면 바뀜
계획
아무것도 안 고치고 계획만
만들기 전에 순서를 볼 때. 지금 고를 것
권한 무시
아무것도 안 물음
쓰지 않습니다
치는 말
Docs 자료로 관용차 대시보드 만들 건데, 바로 만들지 말고 계획부터 PLAN.md에 적어줘. 아직 만들지는 마. 차량별 기름값이랑 수리비, 검사 날짜가 한눈에 보이게 할 거야. 오늘 포함 3번에 나눠서 완성할 거야.
메뉴에 다섯 개가 보이는가. 모드는 입력창 아래 왼쪽 글자를 눌러 언제든 바꿉니다.
실습13 · 질문 카드
계획을 쓰기 전에 세 가지를 물어봅니다
1/3어떤 형태로 만들까요? (Python·Node·Excel 없음)
2/3검사 날짜는 사진 2장에만 있습니다. 나머지 4대는?
3/383부·87무, 리터당 7,260원 주유는 어떻게?
셋 다 여러분만 답할 수 있습니다. 보기를 고르지 않고 기타에 직접 적어도 됩니다.
실습13 · 기타에 적은 답
추천 보기 대신 우리 사정으로 답합니다
1/3 형태
HTML 한 장 + data.js 방식으로 해줘. 변환 스크립트는 bun 설치해서 bun으로 짜줘. 3회차에 사무실 다른 PC에서 주소로 열 때도 bun 쓸 거야.
2/3 검사 날짜
검사 날짜는 우리가 채울게. 채울 엑셀 칸만 만들어줘.
3/3 이상한 값
83부랑 87무는 아직 몰라. 따로 묶어서 보여줘. 7,260원 줄은 합계엔 넣고 확인 필요로 표시해줘.
실습13 · 계획 승인 창
계획을 읽어 보면 순서가 제 생각과 다릅니다
계획 중 회차 순서
### 1회차 (오늘): 기반과 데이터
### 2회차: 대시보드 화면
### 3회차: 다른 PC에서 주소로 열기
## 범위 밖
- PDF 영수증과 이미지(견적서, 품의) 자동 읽기
화면은 2회차, 영수증 읽기는 아예 범위 밖입니다. 계획 단계라 말 한마디로 고칩니다. 아직 수락을 누르지 않습니다.
승인 창이 뜰 때까지 폴더에 새 파일이 없는가.
설명14 · md와 json 파일
앞으로 생길 파일은 메모장으로 열리는 글 파일입니다
.md와 .json은 특별한 프로그램이 필요 없는 글 파일입니다. 사람도 읽고 Claude도 읽습니다.
.md마크다운. # 은 제목, - 는 목록. 보고서 초안처럼 읽힙니다. PLAN.md · spec.md
.json"칸 이름": 값 의 묶음. 칸이 정해져 있어 상태를 바꾸기 쉽습니다. tasks.json
여는 법탐색기에서 오른쪽 클릭 → 연결 프로그램 → 메모장. 고칠 때는 Claude에게 말로 시킵니다
설명14 · spec.md란
spec.md는 우리 대시보드의 업무 처리 기준서입니다
무엇을 만드는지, 어떻게 계산하는지, 다 됐는지 무엇으로 확인하는지를 적은 문서입니다.
고칠 때무엇을 고쳐 달라고 하든 이 파일의 기준 안에서 고칩니다
다를 때기준과 다르게 해야 하면 먼저 이 파일을 고치자고 말합니다
다음 주새 대화를 열어도 이 파일을 읽고 시작합니다
실습14 · 순서 고치기
수정 버튼을 누르고 순서만 고칩니다
치는 말
순서는 바꿔줘. 오늘은 첫 화면까지 가고, 2회차는 2025년 7월 이후 영수증이랑 견적서를 네가 읽어서 이어 붙이고 감사자료 양식 엑셀까지 뽑을 거야. 3회차는 GitHub에 올려서 셋이 같이 쓰고, 사무실 다른 PC에서도 주소로 열게 하는 거야. 수락하면 PLAN.md랑 spec.md만 쓰고 멈춰. 아직 만들지는 마.
마지막 두 문장은 수락하자마자 만들기 시작하지 않게 막는 말입니다. 고친 계획이 오면 수락(수락 및 자동 모드 아님)을 누릅니다.
실습14 · 파일 쓰기 허용
파일 쓰기 창은 항상 허용을 누릅니다
미리 보기쓸 내용이 초록색으로 보입니다
항상 허용이 폴더 안에 파일을 쓰는 일은 계속 생깁니다
그 뒤입력창 아래가 편집 자동 수락으로 바뀝니다. 파일 쓰기는 안 묻고, 명령 실행만 묻습니다
실습14 · 받은 답
PLAN.md와 spec.md만 쓰고 멈췄습니다
1회차bun 설치, 엑셀 → data.js, 첫 화면까지
2회차영수증·견적서 이어 붙이기, 감사자료 엑셀
3회차GitHub 비공개 저장소, 다른 PC에서 주소로 열기
견적서839너 163,495원은 실제 지출이 아니라 합계에서 뺍니다. 시키지 않았는데 정한 것. 맞는지는 여러분이 정합니다
spec.md의 "30일 이내 주황"이 맞는가. 품의·결재·예약에 45일이 필요하면 지금 "30일을 45일로 바꿔줘".
설명15 · tasks.json이란
tasks.json은 체크리스트와 업무일지를 한 파일에 둔 것입니다
만드는 순서를 단계로 나눠 적은 파일입니다. 일이 진행되면 상태가 todo(할 일)에서 done(끝남)으로 바뀝니다.
session몇 회차에 하는지
owner담당. Claude인지 사용자인지
done끝났다고 볼 기준. 숫자로 미리 적혀 있습니다
실습15 · 순서 나누기
세 번에 나눠 22단계가 나왔습니다
치는 말
spec.md 보고 만드는 순서를 tasks.json으로 나눠줘. 3번에 나눠서 할 거니까 단계마다 몇 회차에 할 건지 적어줘. 화면 다 만든 다음 내가 확인하는 단계는 담당을 나로 해줘. 아직 만들지는 마.
1회차T01-T12 · bun 설치부터 첫 화면 확인(T11)까지
확인받기bun 설치(T01)와 GitHub 업로드(T21)는 실행 직전에 확인받도록 표시
15 · 단계 하나
끝났다고 볼 기준이 숫자로 적혀 있습니다
{
"id": "T06",
"session": 1,
"owner": "Claude",
"title": "데이터 합계 검증",
"detail": "spec §7의 기대값과 data.js를 대조한다.
유류 374건 30,695,953원, 6대 수리 87건
13,097,710원, 미확인 차량 11건, 확인 필요 1건",
"dependsOn": ["T05"],
"done": "모든 기대값이 일치함",
"status": "todo"
}
session몇 회차에 하는지
owner담당. Claude 또는 사용자
dependsOn먼저 끝나야 할 단계
done이 칸이 없으면 "다 됐습니다"만 믿게 됩니다. 있으면 30,695,953원이 나오는지만 보면 됩니다
설명16 · 데이터 구조란
칸이 정해져 있어야 영수증 백 장을 같은 모양으로 적습니다
자료를 어떤 칸에 어떤 모양으로 적을지 정한 것입니다. 엑셀로 치면 첫 줄의 열 이름과 각 칸에 무엇을 쓸지입니다.
차량번호가려진 채로 오면 비워 두고 "확인 필요"
운전자 · 카드번호개인정보라 넣지 않습니다
주유소명감사자료 10-다에는 이름과 주소 칸이 따로 있습니다. 칸을 더 만들지 정합니다
실습16 · 칸 정하기
칸 두 개를 더하자 열 순서를 10-다에 맞췄습니다
치는 말
spec.md에서 2회차 추가내역 엑셀에 주유소명, 주유소 주소 칸 따로 만들어줘. 2회차에 감사자료 10-다로 바로 옮길 거야.
A-G열차량번호 · 구입일자 · 유종 · 구입량 · 소요금액 · 주유소명 · 주소 → 10-다 B-H열 그대로
덤영수증 맨 위 상호와 가맹점명이 다르면 확인 필요에 메모를 남기겠다고 했습니다
추가내역 칸 중 빠졌거나 필요 없는 칸이 있는지 세 분이 정했는가.
17 · 완성 기준 쓰는 법
"이게 되면 성공"을 세 분이 한 줄씩 적습니다
이렇게 쓰지 않습니다
보기 좋다
편하다
빨라진다
이렇게 씁니다
화면을 열면 839너 재검사 남은 날짜가 제일 먼저 보인다
영수증 PDF를 넣고 한 마디 하면 10분 안에 유류 내역에 붙는다
감사자료 10-다를 뽑은 합계가 원본 엑셀 합계와 1원도 안 다르다
그 줄을 보고 됐는지 안 됐는지 바로 판단할 수 있어야 합니다.
실습17 · 기준 넣기
기준을 넣었더니 계획과 안 맞는 곳 셋을 찾았습니다
치는 말
spec.md 맨 끝에 "우리가 정한 완성 기준" 절 만들고 이 세 줄 넣어줘. <세 분이 적은 세 줄>
1839너가 먼저 보이려면 화면 맨 위에 "가장 급한 검사" 띠가 필요
2영수증 한 마디 10분이 PLAN.md에서 범위 밖
310-다 합계를 어떻게 판정할지
답맞으면 짧게: "세 개 다 그렇게 고쳐줘"
spec.md 맨 끝에 세 분의 문장이 그대로 들어갔는가. 여러 줄은 Shift+Enter.
Break · 쉬는 시간
15분 쉬고 4부를 시작합니다
14:15
다음은 화면 시안을 받아 각자 고치고, 첫 화면까지 만듭니다.
Part 04
첫 화면까지 만들기
원하는 모양을 말로 설명하는 것보다, 만들어 놓은 것 셋 중에서 고르는 쪽이 빠릅니다.
설명18 · /design이란
/design은 시안 여러 장을 한 도화지에 나란히 만듭니다
Code 탭에 처음부터 들어 있는 명령입니다. 내 폴더가 아니라 claude.ai에 디자인 도화지(캔버스)가 생기고, 앱 오른쪽에 열립니다.
쓰는 법입력창에 /design부터 치고 이어서 말합니다
공유처음에는 나만 열 수 있습니다
꼭"데스크탑 기준 반응형으로"를 넣어야 좁은 화면에서도 카드가 아래로 쌓입니다
실습18 · 시안 만들기
앱 오른쪽에 도화지가 열립니다
치는 말
/design spec.md 보고 관용차 대시보드 첫 화면 시안 3개 만들어줘. Docs 엑셀 숫자 그대로 쓰고. 데스크탑 기준 반응형으로.
8분쯤 걸립니다. 숫자를 다시 집계하느라 PowerShell 허용 창이 뜨면 한 번만 허용을 누릅니다.
실습18 · 시안 셋
숫자는 같고 무엇을 먼저 보여 주는가가 다릅니다
A운영 콘솔. 차량별 표 중심. 숫자를 대조할 때
B차량 카드. 차 한 대씩 훑어볼 때
C검사 일정 우선. 기한을 가장 중요하게 볼 때
섞기셋 중 하나를 그대로 고를 필요가 없습니다
세 분이 각자 어느 시안이 좋은지 하나씩 말해 봅니다.
18 · Important
"좀 더 깔끔하게"로는 화면이 안 바뀝니다
깔끔하다는 말이 사람마다 다른 것을 가리켜서, 무엇을 어떻게 바꾸라는 것인지가 그 말 안에 없습니다. "검사 일정 막대를 카드 아래에 넣어줘"처럼 무엇을 어떻게 할지 집어서 말합니다.
실습19 · 섞어서 내려받기
B에 C의 막대와 A의 버튼을 섞어서 내 폴더로
치는 말
B로 갈게. 카드 아래에 C의 검사 일정 막대를 넣고, 카드 위에는 A처럼 연도 버튼을 달아줘. 그 모양으로 내 폴더에 시안.html로 내려받아줘. 브라우저에서 바로 열리게.
열기탐색기에서 시안.html 더블클릭 → Edge
맨 위839너 재검사, 남은 날 23일 (수업 날에는 21일)
실습19 · 시안 아래쪽
시안은 모양만 있는 한 장입니다
검사 일정C에서 가져온 막대. 나머지 4대는 "날짜 미입력"
확인 필요406,480원 줄, 83부·87무
한계숫자가 파일 안에 직접 들어 있어서 엑셀이 바뀌어도 화면은 그대로
그래서 이 파일은 모양 기준으로 옆에 두고, 다음 장에서 엑셀이 바뀌면 따라 바뀌는 진짜를 만듭니다.
19 · 화면은 무엇으로 만드나
웹 화면은 HTML · CSS · JS 세 가지로 만듭니다
시안.html도 index.html도 이 셋이 한 파일에 들어 있습니다. 직접 쓰지 않아도 됩니다. 어디를 고쳐 달라고 할지 말할 때 이 이름을 씁니다.
19 · 우리 index.html 안에서는
한 파일 안에 세 가지가 위아래로 들어 있습니다
public/index.html 중에서
<!-- HTML : 어디에 무엇이 있는지 -->
<h1 id="title">차량</h1>
<div class="years" id="years"></div>
<section class="cards" id="cards"></section>
/* CSS : 어떻게 보이는지 */
.card { flex: 1 1 380px;
border-radius: 14px; padding: 20px; }
// JS : 누르면 무엇이 바뀌는지
var D = window.DATA;
b.addEventListener('click', function () {
render(y);
});
HTML제목, 연도 버튼 자리, 카드 자리를 놓습니다
CSS카드 폭 380px, 모서리 둥글기, 안쪽 여백
JSdata.js의 숫자(window.DATA)를 읽고, 연도 버튼을 누르면 그 연도로 다시 그립니다
"카드 폭을 넓혀줘"는 CSS, "버튼 누르면 표도 바뀌게 해줘"는 JS 이야기입니다.
설명20 · 각자 고치기
시안을 각자 한 군데씩 고쳐 봅니다
19절에서 받은 시안.html에서 마음에 안 드는 곳 하나를 골라 말로 고칩니다. 고친 모양이 다음 절에서 만들 진짜 화면의 기준이 됩니다.
한 번에한 가지만. 여러 개를 한 문장에 넣으면 무엇이 바뀌었는지 모릅니다
집어서무엇을 어떻게. "깔끔하게" 대신 "카드를 한 줄에 2장씩"
확인Edge에서 새로고침해서 봅니다. 마음에 안 들면 "방금 고친 거 되돌려줘"
실습20 · 해 보기 · 시안 고치기
바꾸고 싶은 곳 하나를 골라 말로 고칩니다
치는 말
시안.html에서 <바꾸고 싶은 곳>을 <이렇게> 바꿔줘.
이렇게 바꿔 볼 수 있습니다
839너 재검사 띠를 빨간색으로 (CSS)
차량 카드를 한 줄에 2장씩 크게 (CSS)
검사 일정 막대를 카드 위로 (HTML)
숫자는 바꾸지 않습니다. 엑셀에서 옵니다
세 분이 고친 화면을 서로 보여 주고 같이 쓸 모양 하나를 정합니다. 도화지에서 고쳤으면 "그 모양으로 시안.html 다시 내려받아줘".
설명21 · Bun이란
Bun은 엑셀을 읽어 계산하고 화면을 띄워 주는 작은 프로그램입니다
관리자 권한 없이 내 계정 폴더(C:\Users\내이름\.bun)에 깔립니다. 직접 쓸 일은 거의 없고 Claude가 씁니다.
오늘엑셀 → data.js 변환에 씁니다
3회차다른 PC에서 주소로 열 때 씁니다
막히면bun.sh · github.com · cdn.sheetjs.com이 막혔으면 "bun 없이 PowerShell로 해줘"
21 · 대시보드 전체 구조
엑셀에서 화면까지 파일 네 개를 거칩니다
엑셀이 바뀌면 build-data.ts만 다시 돌리면 data.js가 바뀌고 화면이 따라 바뀝니다. 아래 줄 serve.ts는 3회차에 만듭니다.
실습21 · 만들기 시작
첫 단계가 Bun 설치라 카드로 먼저 묻습니다
치는 말
좋아, 시안.html 모양으로 tasks.json에서 1회차 것만 순서대로 해줘. 단계 하나 끝날 때마다 상태 바꾸고 기록 한 줄 남겨. 내 차례 오면 멈춰.
읽을 것어디서 받는지 · 어디에 까는지 · 크기 · 관리자 권한
누를 것설치 진행 → 설치 명령 창은 한 번만 허용
실습21 · 자동 모드
PowerShell 창이 계속 뜨면 자동으로 바꿉니다
바꾸기입력창 아래 "편집 자동 수락" → 맨 위 "자동"
이 창"셸 히스토리도 스캔" 체크를 끄고 계속. "나중에"를 누르면 안 바뀝니다
그 뒤위험도 낮은 일은 묻지 않고, 지우기처럼 되돌리기 어려운 일만 묻습니다. 준비 때 1회차 끝까지 0번
주의실습 폴더에서만. 실제 업무 파일 폴더와 "권한 무시"는 쓰지 않습니다
실습21 · 첫 화면
13분 뒤, 숫자가 엑셀에서 오는 첫 화면이 생겼습니다
열기탐색기 → public → index.html 더블클릭
다른 점숫자는 옆의 data.js에서 옵니다. 엑셀을 바꾸면 "bun run build 다시 돌려줘" 한 마디
시험배지 색이 바뀌는지 보려고 검사일정을 백업하고 바꿔 본 뒤 되돌렸습니다. 앱 창이 "기한 지남"이면 새로고침
맨 위가 839너 재검사이고 기름값 30,695,953원인가. 연도 버튼을 누르면 숫자가 바뀌는가.
Break · 쉬는 시간
15분 쉬고 숫자 확인부터 합니다
15:30
쉬는 동안 첫 화면을 열어 두고, 이상해 보이는 숫자가 있으면 적어 두세요.
실습22 · 숫자 한 번 더
화면이 엑셀과 맞는지, 엑셀이 맞는지를 같이 묻습니다
치는 말
화면 숫자가 원본 엑셀이랑 맞는지 다시 확인해줘. 그리고 엑셀 안에 이상해 보이는 숫자가 있으면 알려줘.
대조한 기준도 Claude가 계산한 숫자라서, 이번에는 원본 엑셀을 다른 방법으로 다시 읽게 합니다. 5분 걸렸고 화면 숫자는 전부 맞았습니다.
22 · 엑셀 안의 이상한 숫자
사람이 374줄을 훑어서는 찾기 어려운 줄입니다
위치
내용
왜 이상한가
10-다 연번 7
97부 2022-09-15 · 56L · 406,480원
리터당 7,259원. 그달은 1,902원 안팎. 106,480원의 1을 4로 친 듯
10-다 연번 134
97부 2023-09-25 · 56L · 72,680원
리터당 1,298원. 그달보다 19% 쌈
10-다 197행
97부 2024-03-07 · 1L · 1,500원
같은 날 56L 주유가 따로 있음
10-나 100행
839너 2025-03-07 · 타이어 85,800원
같은 날 87조 기록과 금액이 똑같음
확인 필요 기준(리터당 1,000-2,500원)을 넓힐지는 세 분이 정합니다.
22 · Important
화면이 엑셀과 맞다와 엑셀이 맞다는 다른 이야기입니다
406,480원이 진짜 오타면 감사자료에 3년째 30만원이 더 들어가 있었던 것입니다. "이상해 보이는 숫자 있으면 알려줘" 한 줄을 습관처럼 붙이세요.
설명23 · 커밋이란
커밋은 지금 폴더 상태를 사진 찍어 두는 것입니다
게임의 세이브 포인트와 같습니다. 무엇을 고치다 망가져도 "아까 커밋한 상태로 되돌려줘" 한 마디면 그때로 돌아갑니다.
git이 기능을 하는 프로그램. 클로드 앱 설치 때 Git for Windows로 같이 깔렸습니다
언제크게 고치기 전, 그날 일을 마칠 때
한계커밋해 둔 곳까지만 돌아갑니다
실습23 · 저장하기
처음 커밋할 때 무엇을 기록에 넣을지 묻습니다
치는 말
지금 상태 커밋해줘. "1회차: 첫 화면"으로.
기타에 적은 답
Docs랑 data 폴더, public/data.js는 빼고 커밋해줘. 3회차에 GitHub에는 코드랑 문서만 올릴 거야.
data.js에도 엑셀에서 뽑은 금액이 다 들어 있습니다. 보기에 없어서 직접 적었습니다.
23 · Claude가 찾은 것
제가 놓친 시안.html을 Claude가 찾았습니다
치는 말
시안.html도 빼고 다시 커밋해줘
커밋 뒤 받은 답
알아 두실 점
- 시안.html에는 엑셀 숫자가 직접 들어 있습니다.
3회차에 GitHub에 "코드랑 문서만" 올리실 거라면,
이 파일은 지금 빼는 게 좋습니다. 한 번 올라간
커밋 기록에는 남기 때문입니다.
- 원격 저장소 연결과 push는 하지 않았습니다.
3회차(T21)에 확인을 받고 진행합니다.
방금 커밋을 고쳐 써서 기록 어디에도 시안.html이 남지 않습니다. 커밋 번호는 62c07de.
실습23 · 일부러 망가뜨리기
카드를 지우자 목표와 안 맞는다고 알려 줍니다
치는 말
화면 맨 위 제목을 "차량 현황"으로 바꾸고 차량 카드는 다 지워줘.
받은 답 중
정하실 것 하나: 카드를 지우면서 차량별 기름값·수리비가
화면 어디에도 나오지 않게 됐습니다.
대시보드의 목적과 spec §5-1과도 맞지 않게 됩니다.
오늘 정한 것은 전부 파일에 있습니다. 다음 주에 새 대화를 열어도 그 파일에서 다시 시작합니다.
실습24 · 새 대화에서 이어 하기
오늘 대화를 몰라도 파일을 읽고 이어 갑니다
1왼쪽 위 + 새로 생성, 폴더는 car-dashboard
치는 말
tasks.json 보고 어디까지 했는지, 다음에 뭐 할 차례인지 알려줘.
다음 차례T11 첫 화면 확인 → T12 나머지 4대 검사 날짜
팁대화가 길어지면 커밋하고 새로 엽니다. 이어 할 내용은 파일에 있습니다
새 대화에서도 "다음 차례는 T11"이라고 답하는가. 확인 끝났으면 "T11 확인했어, done으로 바꿔줘".
설명25 · CLAUDE.md란
매번 알려 줄 규칙은 CLAUDE.md에 적어 둡니다
폴더 맨 위에 CLAUDE.md라는 이름으로 두면, 새 대화를 열 때마다 Claude가 맨 먼저 읽는 파일입니다. 업무로 치면 부서에 새로 온 사람에게 주는 업무 안내문입니다.
spec.md이 대시보드를 무엇으로 어떻게 만드는지
tasks.json어디까지 했고 다음은 무엇인지
CLAUDE.md이 폴더에서 일할 때 늘 지킬 것. 말투, 금지 사항, 확인 습관
25 · 파일 네 개의 역할
다음 주 새 대화도 이 네 파일로 이어 갑니다
파일
무엇
언제 읽나
누가 고치나
CLAUDE.md
늘 지킬 규칙
새 대화마다 자동으로
사람이 정하고 Claude가 적음
PLAN.md
3회 진행 계획
계획을 바꿀 때
Claude (우리가 말로 고침)
spec.md
계산 규칙 · 완성 기준
만들거나 고칠 때
Claude (우리가 말로 고침)
tasks.json
단계 · 상태 · 기록
"이어서 해줘" 할 때
Claude가 단계마다
다음 페이지 문장으로 지금 같이 만듭니다.
실습25 · 해 보기 · CLAUDE.md 만들기
오늘 몇 번 친 당부를 한 번만 적어 둡니다
치는 말
이 폴더에 CLAUDE.md 만들어줘. Docs 원본은 절대 고치지 말 것, 숫자는 원본 엑셀과 맞춰 보고 보고할 것, 차량번호 뒷자리·이름은 화면에 쓰지 말 것, 답은 쉬운 말로 짧게. 이 네 가지 넣어줘.
넣으면 좋은 것
원본 보호: Docs는 읽기만
확인 습관: 숫자는 원본과 대조
가릴 것: 실명 · 차량번호 전체 · 카드번호
말투: 쉬운 말, 짧게
"원본은 고치지 마", "숫자 맞는지 확인해줘"처럼 오늘 대화창에 몇 번 친 말이 여기 들어갈 문장입니다.
실습25 · 해 보기 · 정말 읽히는지
새 대화를 열어 규칙을 물어봅니다
+ 새로 생성 → 치는 말
이 폴더에서 일할 때 지켜야 할 규칙 알려줘.
이렇게 나오면 됩니다
아무 말 안 했는데 방금 넣은 네 가지를 말한다
새 대화마다 CLAUDE.md를 먼저 읽는다는 뜻
확인했으면 "CLAUDE.md 추가"로 커밋
다음에 같은 당부를 또 치게 되면 "그거 CLAUDE.md에 추가해줘".
실습26 · 이번 주 숙제 예시
견적서 사진을 품의서 표로 옮깁니다
치는 말
Docs/정비견적서2.jpeg 보고 정비 품의서 집행목적에 들어갈 표로 정리해줘. 품명, 단위, 수량, 단가, 공급가액, 세액으로. 파일은 만들지 말고 화면에만 보여줘. 견적서 합계랑 맞는지도 확인해줘.
새 대화에서 칩니다. 1분 안에 사진을 띄우고 부품·공임을 다섯 줄로 나눈 표를 만듭니다.
실습26 · 합계 확인
부품 · 공임 · 부가세를 견적서와 하나씩 맞췄습니다
계148,632원 · 부가세 14,863원 · 총액 163,495원 모두 일치
세액27,272 × 10% = 2,727.2원 → 원 아래 버려 2,727원
단위견적서에 없어서 부품 "개", 공임 "식"으로 넣었다고 따로 적음
양식이 품목별 한 줄이면 "품목별로 합쳐서 3행으로 다시 보여줘".
이번 주 견적서나 영수증 하나로 해 봤는가. 사업자 대표 이름 · 연락처 · 계좌번호는 가리고 넣습니다.
실습26 · 시간이 남으면
가려 둔 내 서류로 한 번 해 봅니다
치는 말
Docs/<내 서류 파일 이름> 보고 <품의서 표 / 내역 / 요약>으로 정리해줘. 파일은 만들지 말고 화면에만 보여줘. 원본 합계랑 맞는지도 확인해줘.
넣기 전에
사업자 대표 이름 · 연락처 · 계좌번호 가리기
차량번호 뒷자리 · 카드번호 가리기
사진이면 그림판에서 검은 네모로
시간이 모자라면 이번 주에 해 보시고 2회차 첫 순서에 1분씩 이야기합니다.
27 · 2회차 전까지
다음 주 전까지 할 것
할 것
누가
2회차에 어디 쓰는지
1부 3절 시간표 재서 채우기
세 분 각자
3회차 성과 문서의 "원래 걸리던 시간"
1부 2절 질문 네 개 답 정리
세 분이 같이
2회차 첫 순서에 알려 줄 부서 사정
83부·87무, 406,480원 원본 영수증 확인
담당 한 분
"확인 필요" 정리
2025년 7월 이후 영수증·견적서·품의서 모으기 (가려서)
담당 한 분
Claude가 읽어 이어 붙일 자료
data/검사일정.xlsx 나머지 4대 날짜 (T12)
담당 한 분
검사 일정 막대에 줄이 생김
이번 주 업무에 Claude 한 번 (26절)
세 분 각자
2회차 첫 순서
"누가" 칸을 세 분 이름으로 채우고 마칩니다.
끝나면
오늘 한 것을 커밋하고 마칩니다
치는 말
오늘 한 것 전부 커밋해줘. "1회차 끝"으로.
폴더에 남는 것
Docs/ 받은 원본 11개. 손대지 않음
PLAN.md 계획과 3회 진행 순서
spec.md 계산 규칙, 우리가 정한 완성 기준
tasks.json 23단계. T01-T10 끝, T11 확인 차례
public/index.html 오늘 만든 첫 화면
public/data.js 화면 숫자 (커밋 제외)
scripts/build-data.ts bun run build
data/검사일정.xlsx 다음 주까지 4대 채우기
다음 주는 새 대화를 열고 "tasks.json 보고 다음 차례부터 이어서 해줘"로 시작합니다.