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 · 주간 업무보고 자동 취합
요청사항

미리 보내 주신 요청사항

만들고 싶은 것

현재 엑셀로 관리하고 있는 인사교육팀의 주간 업무보고를 웹 기반으로 전환하고 싶습니다. 팀원들이 담당 업무의 진행 상황, 주요 성과, 이슈 및 차주 계획을 간편하게 입력하면 주간보고서가 자동으로 취합·생성되는 시스템을 만들고 싶습니다. 특히 전주에 진행 중이던 업무와…

지금의 불편

현재 매주 엑셀 파일을 활용하여 담당자별 업무 진행 현황과 차주 계획을 취합하고 있습니다. 기존 업무의 진행 상황을 매주 다시 입력하거나 복사해야 하고, 지난주 대비 변경 사항과 미완료 업무를 확인하는 데 시간이 소요됩니다. 또한 팀원들의 보고 내용을 취합하고 형식과…

완성되면

기존 엑셀 주간보고 양식을 기반으로, 누구나 쉽게 사용할 수 있는 직관적인 웹앱을 만들고 싶습니다. 팀원들이 각자의 업무 진행 상황과 차주 계획을 입력하면 자동으로 취합되고, 전주 미완료 업무와 차주 계획은 다음 주 보고서로 자동 이월되면 좋겠습니다. 또한 업무별 진…

쓰는 사람 · 매주/우리팀 5명  |  꼭 있어야 하는 기능 · 엑셀로 다운로드

HRDer AX · 주간 업무보고 자동 취합
오늘의 문제

금요일 오후 4시,
주간보고 취합이 시작된다

HRDer AX · 주간 업무보고 자동 취합
오늘 완성할 결과물예상 화면

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

주간 업무보고 자동 취합 예상 결과물 화면
  • 팀원 입력 화면(전주 업무 자동 이월·바뀐 칸 표시)
  • 팀장 취합 대시보드(진행률·상태·지연 업무)
  • 기존 엑셀 양식 열 순서로 내려받기(CSV)
  • Claude Code 보고 문장 정리(summary.md) 보기
HRDer AX · 주간 업무보고 자동 취합
두 가지 버전

한 자료, 두 가지 버전

로컬판 · 오늘 실습

내 PC 안에서만

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

웹앱·서버판 · 교육 후

모두가 같은 주소로

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

내 과제는 🟡 혼합 — 팀원은 엑셀로 제출하고 취합만 로컬. 5명이 직접 입력하려면 서버 필요

HRDer AX · 주간 업무보고 자동 취합
PART 1
1
PART 1 · 설계서(PRD)

Claude Code가 읽을
설계서부터

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

설계서 ①무엇을 만드나

한 줄 정의

팀원이 업무별 진행률·금주 실적·차주 계획·이슈를 입력하면 주간보고가 자동 취합되고, 끝나지 않은 업무는 다음 주로 자동 이월되며, 최종 보고서는 기존 엑셀 양식 열 순서로 내려받는 앱.

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

팀원 5명이 각자 입력하면 자동 취합→ 한 PC에서 [팀장/팀원] 탭을 바꿔 가며 시연 + 가상 보고 70건 CSV 불러오기
AI가 간결한 보고 문장으로 정리→ Claude Code가 CSV를 읽고 summary.md 로 문장 정리
기존 엑셀 양식으로 다운로드→ 같은 열 순서의 CSV(엑셀에서 바로 열림)로 내려받기
HRDer AX · 주간 업무보고 자동 취합
설계서 ②데이터·완료 기준

가상 데이터와 완료 기준

실습용 가상 데이터

  • members.csv · 팀원 명단 5행
  • tasks.csv · 업무 목록 20행
  • weekly_reports.csv · 주간보고 원자료 70행
  • report_format.csv · 기존 엑셀 양식 1행

이게 되면 완성

  • 팀장 대시보드에 44주차 업무 13건과 평균 진행률이 보인다
  • 45주차 입력 화면에 44주차 미완료 업무가 미리 채워진다
  • 엑셀 양식으로 내려받으면 기존 열 순서와 같다
  • summary.md 의 보고 문장이 대시보드에 보인다
HRDer AX · 주간 업무보고 자동 취합
PART 2
2
PART 2 · 로컬판 만들기

Claude Code에게
말로 시킵니다

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

Claude Code 준비

Claude Code 준비 3가지

1

실습 자료 풀기

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

→
2

Code 탭 · Test

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

→
3

편집 자동수락

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

Test 안에 weekly-report 폴더가 생기면 준비 끝

HRDer AX · 주간 업무보고 자동 취합
로컬판 실습
STEP 1 · 자료 확인

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

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

보내고 나서 확인할 것

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

HRDer AX · 주간 업무보고 자동 취합
로컬판 실습
STEP 2 · 화면 만들기

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

PRD.md 의 «3. 오늘 만들 기능»과 «7. 기술 원칙»대로 weekly-report 폴더 안에 앱을 만들어줘. 위쪽에 [팀장 대시보드 / 팀원 입력] 탭을 두고, 외부 인터넷 주소(CDN·글꼴)는 쓰지 마. 다 만들면 weekly-report 폴더에서 내 PC에서 열어 볼 수 있게 실행하고, 내가 열 주소를 알려줘.

보내고 나서 확인할 것

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

HRDer AX · 주간 업무보고 자동 취합
로컬판 실습
STEP 3 · 이월·엑셀 내려받기

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

data/weekly_reports.csv 를 불러오면 44주차 업무 13건과 평균 진행률이 대시보드에 보이게 해줘. 팀원 입력 화면에서 45주차를 고르면 44주차에 완료되지 않은 업무가 금주 실적·차주 계획까지 미리 채워진 채로 나오고, 내가 고친 칸은 색으로 표시해줘. [엑셀 양식으로 내려받기]를 누르면 data/report_format.csv 와 같은 열 순서로 주간보고_44주차.csv 가 저장되게 해줘.

보내고 나서 확인할 것

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

HRDer AX · 주간 업무보고 자동 취합
로컬판 실습
STEP 4 · AI 일 (Claude Code)

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

weekly-report/data/weekly_reports.csv 에서 44주차 보고를 읽고 정리해줘. ① 업무마다 금주 실적·차주 계획을 «~함/~예정» 보고체 한 문장씩 ② 지연 업무와 원인 ③ 다음 주 완료 예상 업무. 결과를 weekly-report/summary.md 로 저장하고, 앱의 «Claude Code 보고 문장 정리» 카드에 보이게 연결해줘.

보내고 나서 확인할 것

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

HRDer AX · 주간 업무보고 자동 취합
로컬판 실습
STEP 5 · 테스트·마무리

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

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

보내고 나서 확인할 것

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

HRDer AX · 주간 업무보고 자동 취합
막힐 때

이럴 땐 이렇게

허락 묻는 창

내용 보고 [허용]

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

폴더에 생긴 파일

탐색기로 확인

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

화면이 이상할 때

보이는 대로 말하기

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

HRDer AX · 주간 업무보고 자동 취합
PART 3
3
PART 3 · 웹앱·서버판

여러 사람이
함께 쓰려면

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

웹앱·서버판바뀌는 점

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

팀원 5명이 각자 자기 PC나 휴대폰에서 직접 입력하려면, 모두가 같은 주소로 들어와 같은 보고 데이터를 함께 쓰는 서버가 필요합니다. 로컬판은 취합 담당자 한 명의 PC에서만 돌아갑니다.

로컬판 (오늘)
웹앱판 (교육 후)
입력
팀원이 엑셀로 보내면 담당자가 불러오기
팀원 5명이 각자 로그인해 직접 입력
저장
담당자 PC 브라우저 + CSV 파일
Supabase에 보고 데이터를 한 곳에 저장
보기
담당자 PC에서만
팀장이 언제 어디서나 같은 주소로 확인
권한
필요 없음(혼자 사용)
팀원은 내 업무만 수정, 팀장은 전체 보기
HRDer AX · 주간 업무보고 자동 취합
웹앱·서버판준비

방법 ① 직접 연결 — 준비물

설치 프로그램 하나로

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

Supabase에 만들 표

  • 팀원 · 이름·직급·담당 분야·로그인 이메일
  • 업무 · 구분·업무명·담당자·시작/목표 주차
  • 주간 보고 · 주차·업무·진행률·상태·금주 실적·차주 계획·이슈

팀원: 로그인 → 내 업무만 보고 고침 / 팀장: 전체 대시보드·엑셀 내려받기

HRDer AX · 주간 업무보고 자동 취합
웹앱판 실습교육 후
W1 · 설계를 웹앱용으로

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

지금 만든 weekly-report 앱을 팀원 5명이 각자 로그인해서 입력하는 웹앱으로 바꾸고 싶어. 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

지금 만든 weekly-report 앱을 회사에서 팀원 5명이 함께 쓰려고 해. 사내 IT 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명 쓰는지 ③ 저장되는 데이터 종류(개인정보가 있는지) ④ 필요한 것(사내 서버, 로그인, 백업) ⑤ 지금은 가상 데이터로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어서 써줘.

보내고 나서 확인할 것

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

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

HRDer AX · 주간 업무보고 자동 취합
최종 점검

최종 점검

HRDer AX · 주간 업무보고 자동 취합
마무리

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

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