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 · 면접 시간표 자동 편성 앱
요청사항

미리 보내 주신 요청사항

만들고 싶은 것

- 일정 취합이 필요한 사람한테 메일 보내기 - 일정 자동으로 취합하기(병합된 결과값을 볼 수 있도록) - 회신 기한 지났을 때 응답 없으면 리마인더 보내주기 - 취합된 일정 기반으로 최적의 면접 시간표 짜주기

지금의 불편

한 번에 면접 50~150명 스케줄을 짜야하는데, 복잡합니다. 최대 가용 가능한 회의실은 2개이며 지역은 서울 1개, 인천 1개입니다. 하루에 볼 수 있는 면접 최대 인원은 15명입니다. 단, 연속해서 6명 이상을 볼 경우 면접 집중도가 많이 낮아져서 쉬는 시간을 고…

완성되면

- 중간 쉬는 시간도 감안해서 짜주기 (2시간반~3시간 지나면 면접관들의 집중력이 확연히 낮아짐) - 1차면접 or 2차면접 (면접 유형)을 선택했을 때 짜주는 결과값(시간표 모양)이 다르게 나와야합니다. (1차는 다:1 면접, 2차는 다:다 면접으로 진행됩니다.)…

쓰는 사람 · 본인 / 1년에 4회  |  꼭 있어야 하는 기능 · - 최적의 면접 시간표를 짜주는 기능 - 시간표 안에 지원자 이름 넣어주는 기능 (9:30 홍길동 10:00 김철수 등)

HRDer AX · 면접 시간표 자동 편성 앱
오늘의 문제

지원자 72명,
면접 시간표 퍼즐이 시작된다

HRDer AX · 면접 시간표 자동 편성 앱
오늘 완성할 결과물예상 화면

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

면접 시간표 자동 편성 앱 예상 결과물 화면
  • 가능 일정 합치기(지원자 × 날짜 표, 미회신 표시)
  • 규칙대로 1차(다:1) 시간표 자동 편성 — 회의실 2곳·하루 15명·6명마다 휴식·30분 간격·같은 학교 분리
  • 2차(다:다) 선택 시 3명씩 조 단위 시간표
  • 드래그로 지원자 자리 바꾸기 + 엑셀(CSV) 내보내기
  • 일정 확인·리마인더 메일 미리보기(발송 안 함)
HRDer AX · 면접 시간표 자동 편성 앱
두 가지 버전

한 자료, 두 가지 버전

로컬판 · 오늘 실습

내 PC 안에서만

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

웹앱·서버판 · 교육 후

모두가 같은 주소로

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

내 과제는 🟢 로컬로 충분 — 편성 계산은 PC 안에서 끝남. 메일 발송은 아웃룩 그대로

HRDer AX · 면접 시간표 자동 편성 앱
PART 1
1
PART 1 · 설계서(PRD)

Claude Code가 읽을
설계서부터

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

설계서 ①무엇을 만드나

한 줄 정의

지원자들이 회신한 가능 일정을 한 표로 합치고, 회의실 2곳·하루 15명·쉬는 시간·같은 학교 분리 규칙대로 30분 단위 면접 시간표를 앱이 자동으로 짜며, 드래그로 고치고 엑셀로 내보내는 앱. 편성 결과 점검과 사유 설명은 Claude Code가 맡는다.

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

일정 확인 메일·리마인더 자동 발송→ 받는 사람·제목·본문 미리보기 + reminder.csv 내보내기 → 아웃룩에 붙여넣기
회신을 자동으로 모아 합치기→ 회신 결과를 모았다고 가정한 availability.csv 를 불러와 합친 표로 보기
AI가 최적의 시간표를 짜기→ 앱이 규칙으로 계산해 편성하고, Claude Code는 편성 결과를 점검해 사유와 개선점을 check.md 로 설명
HRDer AX · 면접 시간표 자동 편성 앱
설계서 ②데이터·완료 기준

가상 데이터와 완료 기준

실습용 가상 데이터

  • applicants.csv · 지원자 목록 72행
  • availability.csv · 가능 일정 회신 72행
  • interviewers.csv · 면접관 12행

이게 되면 완성

  • 대상 72명, 회신 64명, 미회신 8명(88.9%)이다
  • 회신자 64명 전원 배정, 하루 15명을 넘지 않는다
  • 같은 시각·같은 블록에 같은 학교가 0건이다
  • 끌어서 바꾼 자리가 새로고침해도 남아 있다
HRDer AX · 면접 시간표 자동 편성 앱
PART 2
2
PART 2 · 로컬판 만들기

Claude Code에게
말로 시킵니다

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

Claude Code 준비

Claude Code 준비 3가지

1

실습 자료 풀기

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

→
2

Code 탭 · Test

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

→
3

편집 자동수락

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

Test 안에 interview-scheduler 폴더가 생기면 준비 끝

HRDer AX · 면접 시간표 자동 편성 앱
로컬판 실습
STEP 1 · 자료 확인

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

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

보내고 나서 확인할 것

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

HRDer AX · 면접 시간표 자동 편성 앱
로컬판 실습
STEP 2 · 화면 만들기

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

PRD.md 의 «3. 오늘 만들 기능»과 «7. 기술 원칙»대로 interview-scheduler 폴더 안에 앱을 만들어줘. 위쪽에 [1차 시간표] [2차 시간표] [일정 취합] 탭을 두고, 시간표는 왼쪽에 30분 간격 시각, 오른쪽에 서울 회의실·인천 회의실 두 칸으로 만들어줘. 인터넷에 올리거나 외부 서버를 쓰지 말고, 외부 인터넷 주소(CDN·글꼴)도 불러오지 마. 다 만들면 interview-scheduler 폴더에서 내 PC에서 열어 볼 수 있게 실행하고, 내가 열 주소를 알려줘.

보내고 나서 확인할 것

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

HRDer AX · 면접 시간표 자동 편성 앱
로컬판 실습
STEP 3 · 자동 편성 연결

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

data/applicants.csv 와 data/availability.csv 를 불러와서 PRD.md «5. 데이터»에 적힌 편성 규칙대로 시간표를 자동으로 짜줘. 지원자는 자기 면접지역 회의실에, 가능한 날에만 넣고, 하루 15칸(오전 6 · 점심 · 오후 6 · 쉬는 시간 · 늦은 오후 3)을 지키고, 같은 시각 두 회의실에 같은 학교가 겹치지 않게, 같은 학교·같은 학과는 한 회의실의 같은 블록에 넣지 않게 해줘. 칸 안에는 «09:30 홍길동»처럼 이름이 보이게 하고, 이름을 끌어 다른 칸에 놓으면 자리가 바뀌게 해줘. [2차] 탭을 누르면 3명씩 한 조로 묶인 다:다 시간표로 바뀌게 하고, 결과를 엑셀에서 열 수 있는 CSV로 내보내는 버튼도 만들어줘.

보내고 나서 확인할 것

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

HRDer AX · 면접 시간표 자동 편성 앱
로컬판 실습
STEP 4 · AI 일 (Claude Code)

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

interview-scheduler 앱에서 내보낸 시간표 CSV와 data/applicants.csv 를 읽고 편성 결과를 점검해줘. ① 규칙 위반(같은 시각 같은 학교, 한 회의실 같은 블록에 같은 학교·학과, 하루 15명 초과)이 있는지 ② 인원이 너무 적은 날이 있으면 옮겨서 면접일을 줄일 방법 ③ 미회신 8명에게 보낼 리마인더 문구(이름별). 점검 결과는 check.md 로, 리마인더는 reminder.csv(이름·이메일·제목·본문)로 저장하고, 앱의 «Claude Code 편성 점검» 카드와 리마인더 미리보기에 보이게 연결해줘. 메일은 실제로 보내지 마.

보내고 나서 확인할 것

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

HRDer AX · 면접 시간표 자동 편성 앱
로컬판 실습
STEP 5 · 테스트·마무리

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

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

보내고 나서 확인할 것

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

HRDer AX · 면접 시간표 자동 편성 앱
막힐 때

이럴 땐 이렇게

허락 묻는 창

내용 보고 [허용]

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

폴더에 생긴 파일

탐색기로 확인

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

화면이 이상할 때

보이는 대로 말하기

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

HRDer AX · 면접 시간표 자동 편성 앱
PART 3
3
PART 3 · 웹앱·서버판

여러 사람이
함께 쓰려면

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

웹앱·서버판바뀌는 점

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

편성 계산은 담당자 PC 안에서 끝나니 혼자 쓰기에는 로컬판으로 충분합니다. 면접관들이 같은 주소로 최신 시간표를 보거나, 지원자가 가능 일정을 직접 입력하게 하려면 그때 웹앱이 필요합니다.

로컬판 (오늘)
웹앱판 (교육 후)
입력
회신을 모은 CSV를 담당자가 불러오기
지원자가 링크로 가능 일정을 직접 체크
저장
담당자 PC 브라우저 + CSV 파일
Supabase에 지원자·일정·시간표 저장
보기
CSV로 내보내 면접관에게 전달
면접관이 같은 주소로 최신 시간표 확인
권한
필요 없음(혼자 사용)
담당자만 편성·수정, 면접관은 보기만
HRDer AX · 면접 시간표 자동 편성 앱
웹앱·서버판준비

방법 ① 직접 연결 — 준비물

설치 프로그램 하나로

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

Supabase에 만들 표

  • 지원자 · 이름·학교·학과·지원직무·면접지역·이메일
  • 가능 일정 · 지원자·날짜별 가능/불가·회신일
  • 면접관 · 이름·부서·면접 차수·면접지역
  • 시간표 · 날짜·회의실·시각·지원자(조)·차수

채용 담당자: 자동 편성·끌어서 수정 / 면접관: 내 지역·날짜 시간표 보기

HRDer AX · 면접 시간표 자동 편성 앱
웹앱판 실습교육 후
W1 · 설계를 웹앱용으로

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

지금 만든 interview-scheduler 앱을 면접관들도 같은 주소로 시간표를 보는 웹앱으로 바꾸고 싶어. 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

지금 만든 interview-scheduler 앱을 채용 때(연 4회) 담당자 1명과 면접관 12명이 함께 보려고 해. 사내 IT 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명, 언제 쓰는지 ③ 저장되는 데이터(지원자 이름·학교·이메일 같은 개인정보) ④ 필요한 것(사내 서버, 로그인, 메일 연동, 채용 끝난 뒤 삭제) ⑤ 지금은 가상 데이터로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어줘.

보내고 나서 확인할 것

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

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

HRDer AX · 면접 시간표 자동 편성 앱
최종 점검

최종 점검

HRDer AX · 면접 시간표 자동 편성 앱
마무리

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

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