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 · 신입매니저 입문과정 포털
요청사항

미리 보내 주신 요청사항

만들고 싶은 것

신입매니저가 입문과정에 필요한 정보를 한곳에서 확인할 수 있는 웹페이지를 만들고 싶습니다. 환영 메시지, 과정 일정, 입소 장소와 준비물, 문의처, 설문조사, 사전학습 안내를 제공하고, 필요한 안내 메일은 자동으로 발송되면 좋겠습니다. 사전학습 메뉴에서는 이러닝 동영…

지금의 불편

지금은 그룹사에서 제작한 사이트를 활용하고 있습니다. 아무래도 구현이 완료된 사이트다 보니 필요한 기능을 새롭게 적용하기가 어렵고, 각 사별도 이용하고 있는 사이트가 별도로 있어, 입문과정 전 후 활성화가 되고 있지 않습니다.

완성되면

신입매니저가 웹페이지 한 곳에서 입문과정 일정, 입소 안내, 준비물, 문의처, 설문조사와 사전학습 정보를 쉽게 확인하면 좋겠습니다. 필요한 안내 메일은 정해진 시점에 자동 발송되고, 이러닝 학습 여부도 기록으로 남았으면 합니다. 과정 중에는 자기소개 게시판과 과제·발…

쓰는 사람 · 관리자 6~10명 / 신입 50명 미만 / 상하반기 진행  |  꼭 있어야 하는 기능 · 입문과정 안내와 자동 메일 발송 일정, 입소 장소, 준비물, 문의처를 안내하고 필요한 안내 메일을 자동으로 발송 사전학습·설문 관리 이러닝 동영상 연결, 학습…

HRDer AX · 신입매니저 입문과정 포털
오늘의 문제

입문과정 안내,
신입은 어디를 봐야 할지 모른다

HRDer AX · 신입매니저 입문과정 포털
오늘 완성할 결과물예상 화면

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

신입매니저 입문과정 포털 예상 결과물 화면
  • 신입 홈(환영·일정·입소 안내·준비물·문의처·설문·회사별 사이트 링크)
  • 사전학습 5강 목록 + 완료 체크·이수 기록
  • 자기소개 게시판 + 포인트 + 캐릭터 꾸미기(그룹 캐릭터 4종)
  • 조별 점수판
  • 운영자 화면(학습 이력·포인트 주기·메일 예약 미리보기)
HRDer AX · 신입매니저 입문과정 포털
두 가지 버전

한 자료, 두 가지 버전

로컬판 · 오늘 실습

내 PC 안에서만

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

웹앱·서버판 · 교육 후

모두가 같은 주소로

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

내 과제는 🔴 서버 필요 — 게시판·포인트·조별 점수판을 함께 씀

HRDer AX · 신입매니저 입문과정 포털
PART 1
1
PART 1 · 설계서(PRD)

Claude Code가 읽을
설계서부터

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

설계서 ①무엇을 만드나

한 줄 정의

신입매니저가 입문과정 안내(일정·입소 장소·준비물·문의처·설문)와 사전학습을 한 페이지에서 확인하고, 과정 중에는 자기소개 게시판·포인트·캐릭터 꾸미기·조별 점수판으로 즐겁게 참여하며, 운영자는 학습 이력을 보고 포인트를 주는 귀여운 그룹 캐릭터 포털.

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

안내 메일을 정해진 시점에 자동 발송→ D-7·D-3·D-2 메일 예약 목록 + 대상자·문구 미리보기 + 대상자 CSV 내보내기
이러닝 동영상 연결 후 완료 여부 자동 기록→ 강의 링크 열기 + «다 봤어요» 체크로 기록, 과거 기록은 study_log.csv 로 불러오기
신입 50명이 각자 접속해 게시판·포인트 참여→ 한 PC에서 신입/운영자 탭 전환으로 시연
HRDer AX · 신입매니저 입문과정 포털
설계서 ②데이터·완료 기준

가상 데이터와 완료 기준

실습용 가상 데이터

  • program.csv · 과정 안내 14행
  • trainees.csv · 신입 명단 44행
  • study_log.csv · 사전학습 이수 기록 168행
  • points.csv · 포인트 내역 97행
  • p10_mascot.png · 그룹 캐릭터 그림 1행

이게 되면 완성

  • 신입 44명, 이수율 76.4%, 5강 완주 19명이 보인다
  • 조별 점수판이 망토조 365 등 합계 1,230P다
  • 설문 응답 38/44명, 이력 표 맨 위에 0/5 인 2명
  • 윤지유가 강의를 다 보면 5/5, 30P, 학사모가 열린다
HRDer AX · 신입매니저 입문과정 포털
PART 2
2
PART 2 · 로컬판 만들기

Claude Code에게
말로 시킵니다

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

Claude Code 준비

Claude Code 준비 3가지

1

실습 자료 풀기

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

→
2

Code 탭 · Test

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

→
3

편집 자동수락

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

Test 안에 intro-camp 폴더가 생기면 준비 끝

HRDer AX · 신입매니저 입문과정 포털
로컬판 실습
STEP 1 · 자료 확인

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

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

보내고 나서 확인할 것

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

HRDer AX · 신입매니저 입문과정 포털
로컬판 실습
STEP 2 · 화면 만들기

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

PRD.md 의 «3. 오늘 만들 기능»과 «7. 기술 원칙»대로 intro-camp 폴더 안에 앱을 만들어줘. 위쪽에 «신입 홈 / 우리 조·포인트 / 운영자» 탭을 두고, 전체 분위기는 파스텔 색과 둥근 모서리로 귀엽게 해줘. data/images/p10_mascot.png 에는 캐릭터 4마리가 가로로 나란히 있으니 한 마리씩 잘라 조 캐릭터로 써줘. 외부 주소(CDN·글꼴)는 쓰지 말고, 다 만들면 내 PC에서 열어 볼 수 있게 실행하고 열 주소를 알려줘.

보내고 나서 확인할 것

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

HRDer AX · 신입매니저 입문과정 포털
로컬판 실습
STEP 3 · 사전학습·포인트 연결

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

data 폴더의 trainees.csv, study_log.csv, points.csv 를 불러와줘. 신입 홈에서 이름을 고르면 사전학습 5강의 완료 체크가 보이고, «다 봤어요»를 누르면 완료로 바뀌어 새로고침해도 남게 해줘. 우리 조·포인트 탭에는 조별 점수판 막대와 내 캐릭터 꾸미기(20P 학사모, 35P 헤드셋, 50P 망토가 열림)를, 운영자 탭에는 사전학습 적은 순 학습 이력 표와 «포인트 주기» 입력칸을 만들어줘.

보내고 나서 확인할 것

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

HRDer AX · 신입매니저 입문과정 포털
로컬판 실습
STEP 4 · AI 일 (Claude Code)

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

intro-camp/data/trainees.csv 의 한줄소개를 읽고 ① 동기들의 공통 취미 3가지와 인원 ② 조마다 아이스브레이킹 질문 3개 ③ 사전학습을 다 못 본 사람에게 보낼 독려 메일 문구(3~4문장)를 만들어줘. 결과를 intro-camp/icebreak.md 로 저장하고, 운영자 탭의 «Claude Code 자기소개 분석» 카드에 보이게 연결해줘.

보내고 나서 확인할 것

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

HRDer AX · 신입매니저 입문과정 포털
로컬판 실습
STEP 5 · 테스트·마무리

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

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

보내고 나서 확인할 것

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

HRDer AX · 신입매니저 입문과정 포털
막힐 때

이럴 땐 이렇게

허락 묻는 창

내용 보고 [허용]

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

폴더에 생긴 파일

탐색기로 확인

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

화면이 이상할 때

보이는 대로 말하기

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

HRDer AX · 신입매니저 입문과정 포털
PART 3
3
PART 3 · 웹앱·서버판

여러 사람이
함께 쓰려면

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

웹앱·서버판바뀌는 점

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

신입 44명이 각자 휴대폰으로 들어와 자기소개를 쓰고 포인트를 쌓으려면, 모두가 같은 주소로 들어와 같은 점수판을 보는 서버가 필요합니다. 로컬판은 운영자 PC 한 대에서 탭을 바꿔 가며 보여 주는 시연용입니다.

로컬판 (오늘)
웹앱판 (교육 후)
입력
한 PC에서 신입·운영자 탭 바꿔 입력
신입 44명이 각자 휴대폰으로 직접 입력
저장
운영자 PC 브라우저 + CSV 파일
Supabase에 이수·포인트·게시판 저장
보기
운영자 PC 한 대에서만
모두 같은 주소로 점수판을 실시간 확인
권한
필요 없음(시연용)
신입은 내 기록만, 운영자는 포인트 주기
HRDer AX · 신입매니저 입문과정 포털
웹앱·서버판준비

방법 ① 직접 연결 — 준비물

설치 프로그램 하나로

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

Supabase에 만들 표

  • 교육생 · 이름·소속사·조·한줄소개·캐릭터 아이템
  • 사전학습 이수 · 교육생·강의(5강)·완료 일시
  • 포인트 · 일시·교육생·조·사유·점수·준 사람
  • 자기소개 게시판 · 교육생·조·글 내용·작성 일시

신입: 로그인 → 내 학습·자기소개·캐릭터 / 운영자: 학습 이력 보기·포인트 주기

HRDer AX · 신입매니저 입문과정 포털
웹앱판 실습교육 후
W1 · 설계를 웹앱용으로

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

지금 만든 intro-camp 앱을 신입 44명이 각자 휴대폰으로 들어와 쓰는 웹앱으로 바꾸고 싶어. 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

지금 만든 intro-camp 앱을 입문과정 때 신입 50명 안팎과 운영자 6~10명이 함께 쓰려고 해. 사내 IT 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명, 언제(상·하반기) 쓰는지 ③ 저장되는 데이터(이름·소속·자기소개 같은 개인정보) ④ 필요한 것(사내 서버, 사내 계정 로그인, 안내 메일 발송, 백업) ⑤ 지금은 가상 데이터로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어줘.

보내고 나서 확인할 것

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

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

HRDer AX · 신입매니저 입문과정 포털
최종 점검

최종 점검

HRDer AX · 신입매니저 입문과정 포털
마무리

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

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