지금 열어 둔 Test 폴더 안에 attendance-daily 폴더가 있고, 그 안에 PRD.md 와 data 폴더(CSV 2개)가 있는지 확인해줘. 없으면 무엇이 없는지 알려주고 멈춰줘. 있으면 PRD.md 를 끝까지 읽고, 무엇을 만들지 5줄로 요약해줘. 아직 코드는 만들지 마.
보내고 나서 확인할 것
5줄 요약이 내 요청과 맞는지 — 아직 앱을 만들지 않았는지
HRDer AX · 근태 일일 확인 화면
로컬판 실습
STEP 2 · 화면 만들기
Claude Code 입력창에 붙여 넣기 Claude Code
PRD.md 의 «3. 오늘 만들 기능»과 «7. 기술 원칙»대로 attendance-daily 폴더 안에 앱을 만들어줘. 화면은 «아침 화면»과 «11월 달력·팔로업» 두 탭이야. 외부 인터넷 주소(CDN·글꼴)는 쓰지 마. 다 만들면 attendance-daily 폴더에서 내 PC에서 열어 볼 수 있게 실행하고, 내가 열 주소를 알려줘.
보내고 나서 확인할 것
알려 준 주소를 크롬에서 열어 첫 화면이 뜨는지
HRDer AX · 근태 일일 확인 화면
로컬판 실습
STEP 3 · 데이터 연결
Claude Code 입력창에 붙여 넣기 Claude Code
앱에서 data/leave_requests.csv 와 data/employees.csv 를 불러오면, 오늘 날짜를 2026-11-05 로 보고 최종승인된 연차·반차·대체휴무자를 유형별로 보여줘. 결재중이거나 반려된 오늘 건은 따로 노란색·빨간색으로 표시해줘. 달력에는 날짜마다 휴가자 수를 색 진하기로, 팔로업 목록에는 3일 이상 결재 대기 중인 건을 오래된 순으로 보여줘. 새로고침해도 남도록 브라우저 저장공간에 저장해줘.
보내고 나서 확인할 것
가상 데이터를 불러온 뒤 숫자가 완료 기준과 같은지
HRDer AX · 근태 일일 확인 화면
로컬판 실습
STEP 4 · AI 일 (Claude Code)
Claude Code 입력창에 붙여 넣기 Claude Code
attendance-daily/data/leave_requests.csv 를 읽고 2026-11-05 기준으로 정리해줘. ① 오늘 휴가자와 같은 부서에 겹치는 곳 ② 3일 이상 미결재 건을 결재자별로 묶은 확인 요청 문구 ③ 반려 건 본인에게 보낼 재상신 안내 문구. 결과를 attendance-daily/followup.md 로 저장하고, 앱의 «Claude Code 팔로업 문구» 카드에 보이게 연결해줘.
보내고 나서 확인할 것
결과 파일이 폴더에 생기고 앱 카드에 보이는지
HRDer AX · 근태 일일 확인 화면
로컬판 실습
STEP 5 · 테스트·마무리
Claude Code 입력창에 붙여 넣기 Claude Code
PRD.md 의 «9. 완료 기준»을 하나씩 직접 확인해서 ✅/❌ 표로 알려줘. ❌ 가 있으면 고친 뒤 다시 확인해줘. 모두 ✅ 면 attendance-daily 폴더를 Test/zip/attendance-daily.zip 으로 묶고 파일 탐색기에서 보여줘.
보내고 나서 확인할 것
✅/❌ 표가 모두 ✅ 인지, zip 파일이 생겼는지
HRDer AX · 근태 일일 확인 화면
막힐 때
이럴 땐 이렇게
허락 묻는 창
내용 보고 [허용]
Test 폴더 밖을 건드리려 하면 [거부] 후 «Test 폴더 안에서만 해줘»
폴더에 생긴 파일
탐색기로 확인
«지금 폴더에 무슨 파일이 생겼는지 쉽게 설명해줘»
화면이 이상할 때
보이는 대로 말하기
«이 버튼을 눌렀는데 그래프가 그대로야. 원인 찾아 고쳐줘»
HRDer AX · 근태 일일 확인 화면
PART 3
3
PART 3 · 웹앱·서버판
여러 사람이 함께 쓰려면
교육 후, 사내 기준을 확인한 뒤에 하는 부분입니다
웹앱·서버판바뀌는 점
로컬판 → 웹앱판, 무엇이 바뀌나
취합한 결과는 담당자 혼자 보면 되므로 로컬판으로 충분합니다. 출근길에 휴대폰으로 확인하거나 부서장들과 오늘 휴가자를 함께 보려면 그때 웹앱이 필요하고, 근태는 개인정보라 사내 서버가 기본입니다.
근태 담당자: CSV 올리기·전체 휴가자·팔로업 관리 / 부서장: 로그인 → 우리 부서 오늘 휴가자만 보기
HRDer AX · 근태 일일 확인 화면
웹앱판 실습교육 후
W1 · 설계를 웹앱용으로
Claude Code 입력창에 붙여 넣기 Claude Code
지금 만든 attendance-daily 앱을 휴대폰에서도 보고 부서장도 로그인해서 우리 부서 휴가자를 보는 웹앱으로 바꾸고 싶어. 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
지금 만든 attendance-daily 앱을 회사에서 쓰려고 해. 사내 IT 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명 쓰는지(근태 담당 1명, 필요하면 부서장 8명, 데이터 대상 직원 55명) ③ 저장되는 데이터 종류(이름·부서·휴가 일정 같은 개인정보 포함) ④ 필요한 것(사내 서버, 로그인, 백업, 가능하면 그룹웨어 자료 받기) ⑤ 지금은 가상 데이터로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어줘.