JJ AI+ · HRDer AX 바이브코딩
HRD 실전
Claude Code(데스크톱 앱)에서 실습

바인더 대신
1년 온보딩을
한 화면에

입사 안내부터 OJT, 인터뷰, 소통까지 신입의 1년을 한곳에서 챙깁니다

신입 매니저 1년 온보딩·OJT 관리로컬판웹앱·서버판
JJ Creative 교육연구소
구성약 23분

이 자료는 이렇게 갑니다

0분5분10분15분20분25분오프닝·요청사항PART 1 설계서(PRD)PART 2 로컬판 만들기PART 3 웹앱·서버판점검·마무리 ← 오늘 실습의 중심: 로컬판
HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
요청사항

미리 보내 주신 요청사항

만들고 싶은 것

- 1년간의 신입 매니저 온보딩 전반(입사 안내부터 입문 과정, OJT 등)을 관리할 수 있는 프로그램 구축 - 신입 매니저의 OJT 체계화

지금의 불편

현재 바인더를 활용하고 있으나, 입문 과정마다 사용 툴이 상이하고 OJT 과정을 디테일하게 관리하기 어려움

완성되면

신입 매니저 온보딩 담당자, 신입 매니저, 버디, 신입 매니저 현업 팀장이 자유롭게 이야기를 공유할 수 있는 공간이 되었으면 좋겠습니다.

쓰는 사람 · 신입 매니저 온보딩 담당자, 신입 매니저, 신입 매니저 버디, 신입 매니저 배치 팀 팀장 (70여 명 정도가 1년간 사용)  |  꼭 있어야 하는 기능 · - 신입 매니저 입사 안내 - 신입 매니저 OJT 관리 - 신입 매니저 인터뷰 관리

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
오늘의 문제

신입 한 명의 1년이
바인더 속에 흩어져 있다

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
오늘 완성할 결과물예상 화면

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

신입 매니저 1년 온보딩·OJT 관리 예상 결과물 화면
  • 담당자 대시보드(신입 18명 OJT 진척·인터뷰 현황)
  • 신입 매니저 화면(1년 로드맵·OJT 체크리스트·입사 안내)
  • 인터뷰 관리(1·3·6·12개월 일정·적응도·메모)
  • 소통 공간(역할별 글·댓글, 역할 전환 탭)
  • Claude Code 인터뷰 메모 분석 보기
HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
두 가지 버전

한 자료, 두 가지 버전

로컬판 · 오늘 실습

내 PC 안에서만

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

웹앱·서버판 · 교육 후

모두가 같은 주소로

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

내 과제는 🔴 서버 필요 — 신입·버디·팀장이 함께 쓰는 소통 공간

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
PART 1
1
PART 1 · 설계서(PRD)

Claude Code가 읽을
설계서부터

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

설계서 ①무엇을 만드나

한 줄 정의

지금은 바인더로 관리하는 신입 매니저의 1년 온보딩(입사 안내 → OJT → 1·3·6·12개월 인터뷰)을 한 화면에서 관리하고, 온보딩 담당자·신입 매니저·버디·팀장이 소통 공간에서 이야기를 나누는 앱.

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

담당자·신입·버디·팀장 70여 명이 각자 접속해 이야기 공유→ 한 PC에서 역할 전환 탭으로 글쓰기·댓글 시연 + 게시판 CSV
입문 과정마다 다른 툴을 하나로→ 입사 안내·과정 자료는 링크 목록으로만 모아 보여 주기
인터뷰 내용을 정리·분석→ Claude Code가 interviews.csv 메모를 읽고 interview_insight.md 작성
HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
설계서 ②데이터·완료 기준

가상 데이터와 완료 기준

실습용 가상 데이터

  • managers.csv · 신입 매니저 명단 18행
  • ojt_records.csv · OJT 과제 기록 171행
  • interviews.csv · 인터뷰 기록 52행
  • board.csv · 소통 공간 글 30행

이게 되면 완성

  • 신입 18명, OJT 이행률 81.3%(139/171)가 보인다
  • 인터뷰 완료 33·예정 18·지연 1, 적응도 4.1점이 보인다
  • 진척 표 맨 위에 33%(2/6)인 9월 입사 신입이 온다
  • 글을 1개 쓰면 30 → 31, «신입» 필터가 작동한다
HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
PART 2
2
PART 2 · 로컬판 만들기

Claude Code에게
말로 시킵니다

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

Claude Code 준비

Claude Code 준비 3가지

1

실습 자료 풀기

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

→
2

Code 탭 · Test

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

→
3

편집 자동수락

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

Test 안에 onboarding-ojt 폴더가 생기면 준비 끝

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
로컬판 실습
STEP 1 · 자료 확인

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

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

보내고 나서 확인할 것

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

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
로컬판 실습
STEP 2 · 화면 만들기

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

PRD.md 의 «3. 오늘 만들 기능»과 «7. 기술 원칙»대로 onboarding-ojt 폴더 안에 앱을 만들어줘. 위쪽에 «온보딩 담당자 / 신입 매니저 / 소통 공간» 탭을 두고, 왼쪽에는 메뉴(입사 안내·OJT 관리·인터뷰 관리·소통 공간)를 둬. 인터넷에 올리거나 외부 주소(CDN·글꼴)를 쓰지 말고, 다 만들면 onboarding-ojt 폴더에서 내 PC에서 열어 볼 수 있게 실행하고 열 주소를 알려줘.

보내고 나서 확인할 것

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

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
로컬판 실습
STEP 3 · OJT·인터뷰 연결

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

data 폴더의 managers.csv, ojt_records.csv, interviews.csv 를 불러와서 담당자 화면에 신입 18명의 OJT 진척 막대와 다음 인터뷰 날짜를 보여줘. 진척이 낮거나 인터뷰가 지연된 사람이 위로 오게 정렬해줘. 신입 매니저 화면에서는 이름을 고르면 1년 로드맵(12칸)과 OJT 체크리스트가 보이고, 체크하면 상태가 «완료»로 바뀌어 새로고침해도 남게 해줘.

보내고 나서 확인할 것

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

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
로컬판 실습
STEP 4 · AI 분석 (Claude Code)

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

onboarding-ojt/data/interviews.csv 의 적응도와 메모, ojt_records.csv 의 지연 과제를 함께 읽고 분석해줘. ① 관심이 필요한 신입 매니저 3명과 이유 ② 자주 나오는 고민 주제 3가지 ③ 담당자·버디·팀장이 이번 달 할 일 제안. 결과를 onboarding-ojt/interview_insight.md 로 저장하고, 담당자 화면의 «Claude Code 인터뷰 메모 분석» 카드에 보이게 연결해줘.

보내고 나서 확인할 것

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

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
로컬판 실습
STEP 5 · 테스트·마무리

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

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

보내고 나서 확인할 것

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

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
막힐 때

이럴 땐 이렇게

허락 묻는 창

내용 보고 [허용]

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

폴더에 생긴 파일

탐색기로 확인

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

화면이 이상할 때

보이는 대로 말하기

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

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
PART 3
3
PART 3 · 웹앱·서버판

여러 사람이
함께 쓰려면

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

웹앱·서버판바뀌는 점

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

신입·버디·팀장·담당자 70여 명이 1년 동안 각자 PC나 휴대폰에서 체크하고 소통 공간에 글을 쓰려면, 모두가 같은 주소로 들어와 같은 데이터를 함께 쓰는 서버가 필요합니다. 로컬판은 담당자 PC 한 대에서 역할을 바꿔 보는 시연까지입니다.

로컬판 (오늘)
웹앱판 (교육 후)
입력
담당자 PC에서 역할을 바꿔 가며 입력
신입·버디·팀장이 각자 로그인해 직접 입력
저장
담당자 PC 브라우저 + CSV 파일
Supabase에 OJT·인터뷰·글을 한 곳에
보기
담당자 PC에서만
70여 명이 PC·휴대폰으로 같은 주소 접속
권한
필요 없음(혼자 시연)
인터뷰 메모는 담당자만, 신입은 내 것만
HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
웹앱·서버판준비

방법 ① 직접 연결 — 준비물

설치 프로그램 하나로

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

Supabase에 만들 표

  • 사람 · 이름·역할·입사일·배치팀·담당 버디·팀장
  • OJT 과제 · 신입·월차·영역·과제명·상태·완료일·확인자
  • 인터뷰 · 신입·회차·예정일·상태·면담자·적응도·메모
  • 소통 글 · 작성일·작성자·역할·관련 신입·내용·댓글

신입·버디·팀장: 로그인 → 담당 신입 OJT 체크·글쓰기 / 담당자: 전체 현황·인터뷰 메모·공지 관리

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
웹앱판 실습교육 후
W1 · 설계를 웹앱용으로

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

지금 만든 onboarding-ojt 앱을 신입·버디·팀장·담당자가 각자 로그인해서 쓰는 웹앱으로 바꾸고 싶어. PRD.md 의 «11. 웹앱·서버 버전»을 읽고, 무엇이 바뀌는지와 Supabase에 만들 표 4개를 쉬운 말로 먼저 정리해줘. 내가 OK 하기 전에는 아무것도 바꾸지 마.

보내고 나서 확인할 것

바뀌는 점과 표 3~4개 설명이 내 생각과 맞는지 — OK 전에는 아무것도 바뀌지 않았는지

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
웹앱판 실습교육 후
W2 · Supabase 연결

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

좋아, 진행해줘. Supabase에 새 프로젝트를 만들고 사람·OJT 과제·인터뷰·소통 글 표 4개를 만들어줘. data 폴더의 가상 데이터를 채우고, 로그인한 사람만 보고 인터뷰 메모는 담당자만 보게 잠금 설정까지 해줘. 비밀번호나 열쇠 같은 비밀값은 화면에 보여 주지 말고, 내가 직접 넣을 게 있으면 어디에 넣는지만 알려줘.

보내고 나서 확인할 것

로그인 화면이 뜨고, 가상 데이터가 들어갔는지 — 비밀값이 화면에 안 보였는지

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
웹앱판 실습교육 후
W3 · GitHub에 올리고 Vercel로 배포

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

이제 GitHub에 비공개 저장소로 올리고 Vercel로 배포해줘. 비밀값이 저장소에 올라가지 않았는지 먼저 확인하고, 배포가 끝나면 휴대폰으로도 열 수 있는 접속 주소를 알려줘.

보내고 나서 확인할 것

접속 주소를 휴대폰으로도 열어 보기

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
웹앱판 실습교육 후
W4 · 다른 사람 화면으로 확인

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

배포된 주소에서 PRD.md 의 «웹앱판 완료 기준»을 하나씩 확인해서 ✅/❌ 표로 알려줘. 담당자·신입·버디 계정을 하나씩 가상으로 만들어서, 각각 로그인했을 때 보이는 게 다른지도 확인해줘.

보내고 나서 확인할 것

역할별로 보이는 화면이 다른지, 로그인 안 하면 안 보이는지

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
웹앱·서버판사내 서버
방법 ② · 사내 서버를 IT에 요청

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

지금 만든 onboarding-ojt 앱을 신입 매니저 온보딩에 1년 동안 쓰려고 해. 사내 IT 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명 쓰는지(담당자·신입·버디·팀장 70여 명) ③ 저장되는 데이터 종류(이름·배치팀·인터뷰 메모 같은 개인정보 포함) ④ 필요한 것(사내 서버, 사내 계정 로그인, 백업) ⑤ 지금은 가상 데이터로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어서 써줘.

보내고 나서 확인할 것

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

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

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
최종 점검

최종 점검

HRDer AX · 신입 매니저 1년 온보딩·OJT 관리
마무리

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

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