지금 열어 둔 Test 폴더 안에 hotel-booking 폴더가 있고, 그 안에 PRD.md 와 data 폴더(CSV 3개)가 있는지 확인해줘. 없으면 무엇이 없는지 알려주고 멈춰줘. 있으면 PRD.md 를 끝까지 읽고, 무엇을 만들지 5줄로 요약해줘. 아직 코드는 만들지 마.
보내고 나서 확인할 것
5줄 요약이 내 요청과 맞는지 — 아직 앱을 만들지 않았는지
HRDer AX · 계열사↔호텔 원스톱 예약 앱
로컬판 실습
STEP 2 · 화면 만들기
Claude Code 입력창에 붙여 넣기 Claude Code
PRD.md 의 «3. 오늘 만들 기능»과 «7. 기술 원칙»대로 hotel-booking 폴더 안에 앱을 만들어줘. 위쪽에 [고객 · 계열사 교육담당자] [영업 담당] [가동률 달력] 탭 3개를 두고, 처음 쓰는 사람도 헷갈리지 않게 큼직한 버튼과 단계 표시로 만들어줘. 인터넷에 올리거나 외부 서버를 쓰지 말고, 외부 인터넷 주소(CDN·글꼴)도 불러오지 마. 다 만들면 hotel-booking 폴더에서 내 PC에서 열어 볼 수 있게 실행하고, 내가 열 주소를 알려줘.
보내고 나서 확인할 것
알려 준 주소를 크롬에서 열어 첫 화면이 뜨는지
HRDer AX · 계열사↔호텔 원스톱 예약 앱
로컬판 실습
STEP 3 · 예약 흐름 연결
Claude Code 입력창에 붙여 넣기 Claude Code
data/requests.csv 와 data/venues.csv 를 불러와서, 고객 탭에서 예약을 요청하면 영업 담당 탭 «요청» 칸에 바로 나타나게 해줘. 영업 담당이 [견적 보내기]를 누르면 연회장 단가×일수 + 객실 수×박수×165,000원 + 인원×식사 횟수×45,000원으로 견적 금액이 계산되고, 고객 탭에서 [확정 요청] → 영업 담당 [확정]까지 상태가 넘어가게 해줘. 새로고침해도 남도록 브라우저 저장공간에 저장하고, 예약 목록을 CSV로 내보내는 버튼도 만들어줘.
보내고 나서 확인할 것
가상 데이터를 불러온 뒤 숫자가 완료 기준과 같은지
HRDer AX · 계열사↔호텔 원스톱 예약 앱
로컬판 실습
STEP 4 · AI 일 (Claude Code)
Claude Code 입력창에 붙여 넣기 Claude Code
hotel-booking/data 의 requests.csv 와 occupancy.csv 를 읽고 이번 주 점검표를 만들어줘. ① 객실 가동률 99% 이상인 날짜 ② 아직 견적을 안 보낸 «요청» 건과 그 날짜에 연회장·객실이 남는지 ③ «견적발송» 건마다 고객에게 보낼 견적 안내 메일 초안(받는 사람·제목·본문 3줄). 결과를 hotel-booking/weekly.md 로 저장하고, 앱의 «Claude Code 주간 점검» 카드와 메일 미리보기에 보이게 연결해줘. 메일은 실제로 보내지 마.
보내고 나서 확인할 것
결과 파일이 폴더에 생기고 앱 카드에 보이는지
HRDer AX · 계열사↔호텔 원스톱 예약 앱
로컬판 실습
STEP 5 · 테스트·마무리
Claude Code 입력창에 붙여 넣기 Claude Code
PRD.md 의 «9. 완료 기준»을 하나씩 직접 확인해서 ✅/❌ 표로 알려줘. ❌ 가 있으면 고친 뒤 다시 확인해줘. 모두 ✅ 면 hotel-booking 폴더를 Test/zip/hotel-booking.zip 으로 묶고 파일 탐색기에서 보여줘.
보내고 나서 확인할 것
✅/❌ 표가 모두 ✅ 인지, zip 파일이 생겼는지
HRDer AX · 계열사↔호텔 원스톱 예약 앱
막힐 때
이럴 땐 이렇게
허락 묻는 창
내용 보고 [허용]
Test 폴더 밖을 건드리려 하면 [거부] 후 «Test 폴더 안에서만 해줘»
폴더에 생긴 파일
탐색기로 확인
«지금 폴더에 무슨 파일이 생겼는지 쉽게 설명해줘»
화면이 이상할 때
보이는 대로 말하기
«이 버튼을 눌렀는데 그래프가 그대로야. 원인 찾아 고쳐줘»
HRDer AX · 계열사↔호텔 원스톱 예약 앱
PART 3
3
PART 3 · 웹앱·서버판
여러 사람이 함께 쓰려면
교육 후, 사내 기준을 확인한 뒤에 하는 부분입니다
웹앱·서버판바뀌는 점
로컬판 → 웹앱판, 무엇이 바뀌나
요청하는 교육담당자와 받는 호텔 영업 담당은 서로 다른 회사·다른 PC에 있어서, 같은 예약 상태를 함께 보려면 모두가 같은 주소로 들어오는 서버가 필요합니다. 로컬판은 한 PC에서 역할 탭을 바꿔 가며 시연하는 방식입니다.
고객: 로그인 → 우리 회사 요청·견적 보고 확정 요청 / 영업 담당: 전체 칸반·견적 보내기·확정·가동률
HRDer AX · 계열사↔호텔 원스톱 예약 앱
웹앱판 실습교육 후
W1 · 설계를 웹앱용으로
Claude Code 입력창에 붙여 넣기 Claude Code
지금 만든 hotel-booking 앱을 교육담당자와 호텔 영업 담당이 각자 로그인해서 같은 예약 상태를 보는 웹앱으로 바꾸고 싶어. 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 의 «웹앱판 완료 기준»을 하나씩 확인해서 ✅/❌ 표로 알려줘. 서로 다른 회사의 고객 계정 2개와 영업 담당 계정 1개를 가상으로 만들어서, 각자 보이는 요청이 다른지와 새 요청이 영업 화면에 바로 뜨는지도 확인해줘.
보내고 나서 확인할 것
역할별로 보이는 화면이 다른지, 로그인 안 하면 안 보이는지
HRDer AX · 계열사↔호텔 원스톱 예약 앱
웹앱·서버판사내 서버
방법 ② · 사내 서버를 IT에 요청
Claude Code 입력창에 붙여 넣기 Claude Code
지금 만든 hotel-booking 앱을 여러 회사 교육담당자와 호텔 영업 담당이 함께 쓰려고 해. 사내 IT 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명 쓰는지(교육담당자 회사당 1~2명, 영업 담당 몇 명) ③ 저장되는 데이터(담당자 이름·이메일 — 개인정보 있음, 행사·견적 금액) ④ 필요한 것(외부 회사도 접속할 서버, 로그인, 백업, 호텔 예약 시스템 연동 가능 여부) ⑤ 지금은 가상 데이터로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어줘.