이번 달 교육 운영 현황, 신청자·참석자·수료자, 평균 만족도, 교육별 진행 상황을 한 화면에서 확인.
지금의 불편
현재 교육별로 엑셀, 메일, 설문 결과 등 여러 자료를 활용하여 운영 현황을 관리하고 있습니다. 교육별 신청자, 참석자, 수료자 현황을 개별 취합해야 합니다. 교육별 수료기준이 달라 출석률, 과제, 시험 결과를 별도로 확인해야 합니다.
완성되면
웹앱에 접속하면 현재 운영 중인 교육들이 대시보드 형태로 나타나고, 교육별 상세 현황을 확인할 수 있으면 좋겠습니다. 기존 엑셀 자료를 업로드하면 교육생 현황이 자동 반영되고, 수료기준에 따라 수료 여부가 자동으로 계산되었으면 합니다.
쓰는 사람 · 교육 담당자: 교육 운영 및 현황 관리를 위해 주 2~3회 이상 사용 인재문화팀 팀원: 교육별 운영 현황 및 실적 확인 팀장 및 관리자: 월별… | 꼭 있어야 하는 기능 · ① 교육 운영 통합 대시보드 교육 일정, 신청·참석·수료 인원 통합 관리 교육별 진행 현황과 주요 KPI 자동 시각화 ② 교육생 및 수료 자동 관리 엑셀 업로드…
HRDer AX · 교육 운영 대시보드
오늘의 문제
교육이 끝날 때마다 수료 여부를 따로 맞춘다
신청·참석 명단을 따로 취합한다
교육마다 수료 기준이 다르다
출석·과제·시험을 각각 확인한다
→ 숫자 맞추다 끝나고, 개선점은 못 본다
HRDer AX · 교육 운영 대시보드
오늘 완성할 결과물예상 화면
완성하면 이런 화면이 됩니다
통합 현황(KPI 4개·교육별 진행 표·일정 막대·신청→참석→수료 흐름)
교육생 CSV 불러오기로 일괄 등록
교육별 수료 기준(출석률·과제·시험)으로 수료 여부 자동 판정 + 미수료 사유
월간 실적(월별 추이·수료율) + Claude Code 팀장 보고 요약
HRDer AX · 교육 운영 대시보드
두 가지 버전
한 자료, 두 가지 버전
로컬판 · 오늘 실습
내 PC 안에서만
Claude Code가 Test 폴더에 앱을 만들고, 내 PC에서 열어 봅니다. 혼자·팀 공유 폴더로 쓰기엔 이것으로 충분합니다.
웹앱·서버판 · 교육 후
모두가 같은 주소로
여러 사람이 각자 접속해 같은 데이터를 쓰려면 서버가 필요합니다. 사내 서버를 IT에 요청하거나, 설치 프로그램으로 직접 연결합니다.
내 과제는 🟡 혼합 — 담당자는 로컬로 사용하고 팀장에게는 보고서로 공유. 팀장이 직접 보려면 서버 필요
HRDer AX · 교육 운영 대시보드
PART 1
1
PART 1 · 설계서(PRD)
Claude Code가 읽을 설계서부터
PRD.md 한 장이 Claude Code에게 주는 작업 지시서입니다
설계서 ①무엇을 만드나
한 줄 정의
교육별로 흩어진 신청·참석·수료·만족도 자료를 한 화면의 대시보드로 모으고, 교육마다 다른 수료 기준(출석률·과제·시험)으로 수료 여부를 자동 판정하며, 월간 실적을 팀장 보고용으로 정리하는 앱.
원래 요청에서 오늘 조정한 부분
기존 엑셀 자료를 업로드하면 자동 반영→ 엑셀에서 «CSV UTF-8»로 저장한 learners.csv 를 불러오기
메일·Teams·설문 자료를 자동 취합→ 각 시스템에서 내보냈다고 가정한 CSV 3개(교육생·만족도·월별 실적)를 불러오기
팀장 보고용 결과보고서 자동 생성→ Claude Code가 CSV를 읽고 report-2026-10.md 작성 → 앱 «월간 실적» 탭에 표시
지금 열어 둔 Test 폴더 안에 training-ops-dashboard 폴더가 있고, 그 안에 PRD.md 와 data 폴더(CSV 4개)가 있는지 확인해줘. 없으면 무엇이 없는지 알려주고 멈춰줘. 있으면 PRD.md 를 끝까지 읽고, 무엇을 만들지 5줄로 요약해줘. 아직 코드는 만들지 마.
보내고 나서 확인할 것
5줄 요약이 내 요청과 맞는지 — 아직 앱을 만들지 않았는지
HRDer AX · 교육 운영 대시보드
로컬판 실습
STEP 2 · 화면 만들기
Claude Code 입력창에 붙여 넣기 Claude Code
PRD.md 의 «3. 오늘 만들 기능»과 «7. 기술 원칙»대로 training-ops-dashboard 폴더 안에 대시보드를 만들어줘. 위쪽에 «통합 현황 / 교육별 상세·수료 판정 / 월간 실적 보고» 탭 세 개를 두고, 인터넷에 올리거나 외부 주소(CDN·글꼴)는 쓰지 마. 다 만들면 training-ops-dashboard 폴더에서 내 PC에서 열어 볼 수 있게 실행하고, 내가 열 주소를 알려줘.
보내고 나서 확인할 것
알려 준 주소를 크롬에서 열어 첫 화면이 뜨는지
HRDer AX · 교육 운영 대시보드
로컬판 실습
STEP 3 · 수료 자동 판정
Claude Code 입력창에 붙여 넣기 Claude Code
data/learners.csv 를 불러오면 교육생이 교육별로 등록되고, programs.csv 의 수료 기준(출석률·과제·시험)으로 한 명씩 «수료 / 미수료(사유) / 불참»을 자동으로 판정해줘. 통합 현황의 신청·참석·수료 숫자와 수료율, 미수료 사유 도넛도 그 결과로 바뀌게 하고, 상세 화면에서 기준 점수를 바꾸면 바로 다시 계산되게 해줘.
보내고 나서 확인할 것
가상 데이터를 불러온 뒤 숫자가 완료 기준과 같은지
HRDer AX · 교육 운영 대시보드
로컬판 실습
STEP 4 · 팀장 보고 요약 (Claude Code)
Claude Code 입력창에 붙여 넣기 Claude Code
training-ops-dashboard/data 폴더의 CSV 4개를 읽고 팀장 보고용 10월 교육 실적 요약을 써줘. ① 이번 달 신청·참석·수료 인원과 수료율, 1~9월과 비교 ② 미수료 사유별 인원과 가장 큰 원인 ③ 만족도가 가장 높은 교육과 낮은 교육 ④ 다음 달 개선 제안 2가지. 결과를 training-ops-dashboard/report-2026-10.md 로 저장하고, 앱의 «월간 실적 보고» 탭 아래 카드에 보이게 연결해줘.
보내고 나서 확인할 것
결과 파일이 폴더에 생기고 앱 카드에 보이는지
HRDer AX · 교육 운영 대시보드
로컬판 실습
STEP 5 · 테스트·마무리
Claude Code 입력창에 붙여 넣기 Claude Code
PRD.md 의 «9. 완료 기준»을 하나씩 직접 확인해서 ✅/❌ 표로 알려줘. ❌ 가 있으면 고친 뒤 다시 확인해줘. 모두 ✅ 면 training-ops-dashboard 폴더를 Test/zip/training-ops-dashboard.zip 으로 묶고 파일 탐색기에서 보여줘.
보내고 나서 확인할 것
✅/❌ 표가 모두 ✅ 인지, zip 파일이 생겼는지
HRDer AX · 교육 운영 대시보드
막힐 때
이럴 땐 이렇게
허락 묻는 창
내용 보고 [허용]
Test 폴더 밖을 건드리려 하면 [거부] 후 «Test 폴더 안에서만 해줘»
폴더에 생긴 파일
탐색기로 확인
«지금 폴더에 무슨 파일이 생겼는지 쉽게 설명해줘»
화면이 이상할 때
보이는 대로 말하기
«이 버튼을 눌렀는데 그래프가 그대로야. 원인 찾아 고쳐줘»
HRDer AX · 교육 운영 대시보드
PART 3
3
PART 3 · 웹앱·서버판
여러 사람이 함께 쓰려면
교육 후, 사내 기준을 확인한 뒤에 하는 부분입니다
웹앱·서버판바뀌는 점
로컬판 → 웹앱판, 무엇이 바뀌나
담당자 혼자 쓰고 팀장에게 보고서로 공유하는 데는 로컬판으로 충분합니다. 팀장·팀원이 각자 자리에서 같은 현황을 직접 보려면 그때 웹앱이 필요합니다.
지금 만든 training-ops-dashboard 앱을 팀장·팀원도 각자 로그인해서 보는 웹앱으로 바꾸고 싶어. 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
지금 만든 training-ops-dashboard 앱을 회사에서 교육 담당자와 팀장·팀원 몇 명이 함께 보려고 해. 사내 IT 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명 쓰는지 ③ 저장되는 데이터 종류(교육생 이름·사번·부서·시험 점수 같은 개인정보가 있다는 점) ④ 필요한 것(사내 서버, 로그인, 백업) ⑤ 지금은 가상 데이터로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어서 써줘.