지금 열어 둔 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 한 대에서 탭을 바꿔 가며 보여 주는 시연용입니다.
지금 만든 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 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명, 언제(상·하반기) 쓰는지 ③ 저장되는 데이터(이름·소속·자기소개 같은 개인정보) ④ 필요한 것(사내 서버, 사내 계정 로그인, 안내 메일 발송, 백업) ⑤ 지금은 가상 데이터로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어줘.