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 · 그룹교육 온라인 강의 플랫폼
요청사항

미리 보내 주신 요청사항

만들고 싶은 것

27년부터는 AI를 활용하는 등 교육 리뷰 영상을 종종 제작하게 될 것 같음. 이외 추후에 이러닝 콘텐츠를 만들게 되면 한 곳으로 모아 관리하는 사이트가 있으면 좋을 것 같음. 1. 교육과정별로 목록화하여 톤앤매너가 일정한 교육 영상 제작하고 업로드하고 관리 2. 비…

지금의 불편

현재 따로 제작된 것은 없음

완성되면

패스트캠퍼스, 클래스 101과 같은 유명한 온라인 강의 플랫폼과 비슷한 ux,ui

쓰는 사람 · 만약 상용화되어 쓰게 된다면 인재개발센터 직원 4~5명, 이러닝 콘텐츠를 듣고 싶어하는 전사 직원이 될 것 같음, 상시 운영될 예정  |  꼭 있어야 하는 기능 · 1. 과정명을 재생목록으로 하여 카테고리 분류 2. 이러닝 사전학습 용으로 쓰일 수도 있을 것을 고려하여 수강 여부 확인 기능 3. 이러닝 콘텐츠를 업로드하고…

HRDer AX · 그룹교육 온라인 강의 플랫폼
오늘의 문제

영상은 늘어나는데
모아 둘 곳이 없다

HRDer AX · 그룹교육 온라인 강의 플랫폼
오늘 완성할 결과물예상 화면

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

그룹교육 온라인 강의 플랫폼 예상 결과물 화면
  • 홈: 비전포럼 배너 + 이어 보기 + 과정별 재생목록 카드(카테고리 필터)
  • 강의 보기: 영상 자리(썸네일) + 재생목록 + 수강 완료 체크
  • 수강 여부 기록(90% 이상 = 완료)과 내 진도
  • 관리자: 콘텐츠 목록·상태(공개/검수중/비공개/예정) 관리 + 시청 통계
HRDer AX · 그룹교육 온라인 강의 플랫폼
두 가지 버전

한 자료, 두 가지 버전

로컬판 · 오늘 실습

내 PC 안에서만

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

웹앱·서버판 · 교육 후

모두가 같은 주소로

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

내 과제는 🔴 서버 필요 — 영상 호스팅과 수강 기록까지 필요

HRDer AX · 그룹교육 온라인 강의 플랫폼
PART 1
1
PART 1 · 설계서(PRD)

Claude Code가 읽을
설계서부터

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

설계서 ①무엇을 만드나

한 줄 정의

교육 리뷰 영상·이러닝·비전포럼 라이브 다시보기를 과정별 재생목록으로 모아 두고, 직원은 유명 온라인 강의 사이트처럼 골라 보고 수강 여부가 기록되며, 담당자는 콘텐츠를 올리고 관리하는 사내 온라인 클래스.

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

영상을 업로드해 재생→ 썸네일 자리는 CSS 그라디언트, «영상 올리기»는 목록에 한 줄 추가(제목·과정·길이) — 영상 파일은 나중에 폴더에 넣어…
비전포럼 유튜브 라이브를 모아 두기→ 회차별 다시보기 목록 + 다음 라이브 예정 카드(링크만)
전사 직원의 수강 여부 확인→ 수강 기록 CSV(watch_log.csv)를 불러와 완료율 계산, 한 PC에서 수강생/관리자 탭 전환
HRDer AX · 그룹교육 온라인 강의 플랫폼
설계서 ②데이터·완료 기준

가상 데이터와 완료 기준

실습용 가상 데이터

  • courses.csv · 과정(재생목록) 7행
  • videos.csv · 영상 목록 46행
  • watch_log.csv · 수강 기록 190행

이게 되면 완성

  • 홈에 7개 과정, 관리자에 콘텐츠 46편이 보인다
  • 시청 190건·완료율 58.9%·10월 시청 67건이 보인다
  • «신입사원 입문과정 사전학습» 완료율 73%가 1위
  • 강하은 생성형 AI 2/7강, 다 봤어요 하면 3/7강
HRDer AX · 그룹교육 온라인 강의 플랫폼
PART 2
2
PART 2 · 로컬판 만들기

Claude Code에게
말로 시킵니다

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

Claude Code 준비

Claude Code 준비 3가지

1

실습 자료 풀기

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

→
2

Code 탭 · Test

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

→
3

편집 자동수락

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

Test 안에 hrd-online-class 폴더가 생기면 준비 끝

HRDer AX · 그룹교육 온라인 강의 플랫폼
로컬판 실습
STEP 1 · 자료 확인

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

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

보내고 나서 확인할 것

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

HRDer AX · 그룹교육 온라인 강의 플랫폼
로컬판 실습
STEP 2 · 화면 만들기

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

PRD.md 의 «3. 오늘 만들 기능»과 «7. 기술 원칙»대로 hrd-online-class 폴더 안에 앱을 만들어줘. 패스트캠퍼스·클래스101 같은 온라인 강의 사이트처럼 큰 배너, 썸네일 카드, 카테고리 버튼이 있는 홈을 만들고, 영상 썸네일은 그림 대신 색 그라디언트로 채워줘. 외부 주소(CDN·글꼴)는 쓰지 말고, 다 만들면 내 PC에서 열어 볼 수 있게 실행하고 열 주소를 알려줘.

보내고 나서 확인할 것

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

HRDer AX · 그룹교육 온라인 강의 플랫폼
로컬판 실습
STEP 3 · 재생목록·수강 기록 연결

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

data 폴더의 courses.csv, videos.csv, watch_log.csv 를 불러와서 과정마다 재생목록 카드를 만들고, 카드를 누르면 강의 보기 화면에 그 과정의 영상 목록이 순서대로 나오게 해줘. 시청률 90% 이상이면 «완료» 표시를 하고, «다 봤어요» 버튼을 누르면 완료로 바뀌어 새로고침해도 남게 해줘. 관리자 탭에는 영상 목록 표와 상태 바꾸기(공개/검수중/비공개), «영상 올리기»(제목·과정·길이 입력) 칸을 만들어줘.

보내고 나서 확인할 것

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

HRDer AX · 그룹교육 온라인 강의 플랫폼
로컬판 실습
STEP 4 · AI 일 (Claude Code)

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

hrd-online-class/data/videos.csv 에서 상태가 «검수중»인 영상 3편의 제목을 보고, 영상마다 ① 강의 설명 3줄 ② 검색 태그 5개 ③ 챕터 목차(예상) 를 써줘. 그리고 watch_log.csv 를 읽고 과정별 수강 완료율이 낮은 과정 2개와 개선 아이디어를 덧붙여줘. 결과를 hrd-online-class/meta_draft.md 로 저장하고, 관리자 탭의 «Claude Code 콘텐츠 정리» 카드에 보이게 연결해줘.

보내고 나서 확인할 것

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

HRDer AX · 그룹교육 온라인 강의 플랫폼
로컬판 실습
STEP 5 · 테스트·마무리

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

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

보내고 나서 확인할 것

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

HRDer AX · 그룹교육 온라인 강의 플랫폼
막힐 때

이럴 땐 이렇게

허락 묻는 창

내용 보고 [허용]

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

폴더에 생긴 파일

탐색기로 확인

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

화면이 이상할 때

보이는 대로 말하기

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

HRDer AX · 그룹교육 온라인 강의 플랫폼
PART 3
3
PART 3 · 웹앱·서버판

여러 사람이
함께 쓰려면

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

웹앱·서버판바뀌는 점

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

전사 직원이 각자 자리에서 강의를 보고 수강 기록을 남기려면, 같은 주소로 들어와 영상 목록과 시청 기록을 함께 쓰는 서버가 꼭 필요합니다. 로컬판은 관리자 PC 한 대에서 화면과 흐름을 미리 확인하는 용도입니다.

로컬판 (오늘)
웹앱판 (교육 후)
입력
관리자가 시청 기록 CSV를 불러오기
직원이 보면 수강 기록이 자동으로 쌓임
저장
관리자 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

지금 만든 hrd-online-class 앱을 직원들이 각자 로그인해서 강의를 보고 수강 기록이 쌓이는 웹앱으로 바꾸고 싶어. 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

지금 만든 hrd-online-class 앱을 회사에서 인재개발 담당 4~5명이 관리하고 전사 직원이 강의를 듣는 데 쓰려고 해. 사내 IT 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명 쓰는지 ③ 저장되는 데이터 종류(직원 이름·사번·부서와 시청 기록 같은 개인정보, 사내 교육 영상) ④ 필요한 것(사내 서버, 영상 저장 공간, 로그인, 백업) ⑤ 지금은 가상 데이터로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어서 써줘.

보내고 나서 확인할 것

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

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

HRDer AX · 그룹교육 온라인 강의 플랫폼
최종 점검

최종 점검

HRDer AX · 그룹교육 온라인 강의 플랫폼
마무리

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

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