신입 매니저 대상 승강기 설치공정 보드게임 개발되어 있지만 룰이 복잡하고 교구도 오래되어 웹앱을 통해 개선하고 싶음
지금의 불편
현재는 오프라인 보드게임
완성되면
3d 모델링을 통해 승강기 설치 공정상의 부품이 승강기의 어느 곳에 부착되는지, 더 생생하게 알 수 있으면 좋겠음
쓰는 사람 · 연 2회 신입 매니저 입문교육 (연인원 50명 정도) | 꼭 있어야 하는 기능 · 1. 승강기 설치공정 암기 2. 브루마블 스타일의 보드게임 (필요하면 룰도 수정해야 함)
HRDer AX · 승강기 설치 공정 게임
오늘의 문제
룰 설명만 30분, 공정 순서는 그대로 헷갈린다
보드게임 룰이 복잡해 설명이 길다
교구가 낡고 부품 위치가 안 보인다
누가 어디서 틀렸는지 남지 않는다
→ 게임은 했는데, 다음 기수에 무엇을 복습할지 모른다
HRDer AX · 승강기 설치 공정 게임
오늘 완성할 결과물예상 화면
완성하면 이런 화면이 됩니다
부품 탐험(그림의 번호 1~8 클릭 → 설명·퀴즈)
공정 순서 맞추기(카드 12장 끌어 놓기 → 채점)
브루마블식 보드(20칸·주사위·4개 조 점수판)
게임 기록 CSV 내보내기 + Claude Code 결과 분석 보기
HRDer AX · 승강기 설치 공정 게임
두 가지 버전
한 자료, 두 가지 버전
로컬판 · 오늘 실습
내 PC 안에서만
Claude Code가 Test 폴더에 앱을 만들고, 내 PC에서 열어 봅니다. 혼자·팀 공유 폴더로 쓰기엔 이것으로 충분합니다.
웹앱·서버판 · 교육 후
모두가 같은 주소로
여러 사람이 각자 접속해 같은 데이터를 쓰려면 서버가 필요합니다. 사내 서버를 IT에 요청하거나, 설치 프로그램으로 직접 연결합니다.
내 과제는 🔴 서버 필요 — 교육생이 각자 휴대폰으로 참여해 같은 게임 판·조별 점수를 함께 봐야 함
HRDer AX · 승강기 설치 공정 게임
PART 1
1
PART 1 · 설계서(PRD)
Claude Code가 읽을 설계서부터
PRD.md 한 장이 Claude Code에게 주는 작업 지시서입니다
설계서 ①무엇을 만드나
한 줄 정의
신입 매니저가 승강기 그림 속 부품 1~8을 눌러 배우고, 설치 공정 12단계 순서를 카드로 맞추고, 브루마블식 보드에서 조별로 주사위를 굴리며 공정 퀴즈로 점수를 겨루는 교육용 웹 게임. 게임 기록은 CSV로 내보내 Claude Code가 «많이 틀린 구간»을 분석한다.
원래 요청에서 오늘 조정한 부분
3D 모델링으로 부품 위치를 생생하게→ 승강기 단면 그림(제공 이미지)에서 번호 1~8을 누르면 부품 설명·퀴즈
복잡한 기존 보드게임 룰→ 칸 20개·주사위 1개·«다음 공정 맞히기» 한 가지 규칙으로 단순화
지금 열어 둔 Test 폴더 안에 elevator-install-game 폴더가 있고, 그 안에 PRD.md 와 data 폴더(CSV 4개)와 elevator.png 그림이 있는지 확인해줘. 없으면 무엇이 없는지 알려주고 멈춰줘. 있으면 PRD.md 를 끝까지 읽고, 무엇을 만들지 5줄로 요약해줘. 아직 코드는 만들지 마.
보내고 나서 확인할 것
5줄 요약이 내 요청과 맞는지 — 아직 앱을 만들지 않았는지
HRDer AX · 승강기 설치 공정 게임
로컬판 실습
STEP 2 · 화면 만들기
Claude Code 입력창에 붙여 넣기 Claude Code
PRD.md 의 «3. 오늘 만들 기능»과 «7. 기술 원칙»대로 elevator-install-game 폴더 안에 게임 앱을 만들어줘. 위쪽에 «보드게임 / 부품 탐험 / 공정 순서 맞추기» 탭 3개를 두고, 게임답게 색이 밝고 재미있게 꾸며줘. 인터넷에 올리거나 외부 주소(CDN·글꼴)를 불러오지 마. 다 만들면 내 PC에서 열어 볼 수 있게 실행하고 내가 열 주소를 알려줘.
보내고 나서 확인할 것
알려 준 주소를 크롬에서 열어 첫 화면이 뜨는지
HRDer AX · 승강기 설치 공정 게임
로컬판 실습
STEP 3 · 핵심 기능
Claude Code 입력창에 붙여 넣기 Claude Code
부품 탐험 탭에서 elevator.png 그림의 번호 1~8 위에 깜빡이는 동그라미를 올리고, 누르면 data/parts.csv 의 설명과 퀴즈가 옆에 나오게 해줘. 공정 순서 탭은 data/process_steps.csv 의 12개 카드를 섞어서 끌어 놓고 채점하게 해줘. 보드게임 탭은 data/board.csv 의 20칸을 네모 테두리로 그리고, 주사위를 누르면 차례인 조의 말이 움직이고 칸 규칙대로 문제를 내고 점수판이 바뀌게 해줘. 한 턴이 끝날 때마다 기록을 쌓아 game_log.csv 로 내보낼 수 있게 해줘.
보내고 나서 확인할 것
가상 데이터를 불러온 뒤 숫자가 완료 기준과 같은지
HRDer AX · 승강기 설치 공정 게임
로컬판 실습
STEP 4 · AI 분석 (Claude Code)
Claude Code 입력창에 붙여 넣기 Claude Code
elevator-install-game/data/game_log.csv 를 읽고 교육 결과를 분석해줘. ① 조별 최종 점수와 순위 ② 공정 칸별·부품별 정답률과 가장 많이 틀린 구간 3개 ③ 다음 기수 교육 전에 복습할 내용 3가지. 결과를 elevator-install-game/game_report.md 로 저장하고, 보드게임 탭의 «Claude Code 분석» 카드에 보이게 연결해줘. 많이 틀린 구간으로 새 퀴즈 5문항도 만들어 data/quiz_extra.csv 로 저장해줘.
보내고 나서 확인할 것
결과 파일이 폴더에 생기고 앱 카드에 보이는지
HRDer AX · 승강기 설치 공정 게임
로컬판 실습
STEP 5 · 테스트·마무리
Claude Code 입력창에 붙여 넣기 Claude Code
PRD.md 의 «9. 완료 기준»을 하나씩 직접 확인해서 ✅/❌ 표로 알려줘. ❌ 가 있으면 고친 뒤 다시 확인해줘. 모두 ✅ 면 elevator-install-game 폴더를 Test/zip/elevator-install-game.zip 으로 묶고 파일 탐색기에서 보여줘.
보내고 나서 확인할 것
✅/❌ 표가 모두 ✅ 인지, zip 파일이 생겼는지
HRDer AX · 승강기 설치 공정 게임
막힐 때
이럴 땐 이렇게
허락 묻는 창
내용 보고 [허용]
Test 폴더 밖을 건드리려 하면 [거부] 후 «Test 폴더 안에서만 해줘»
폴더에 생긴 파일
탐색기로 확인
«지금 폴더에 무슨 파일이 생겼는지 쉽게 설명해줘»
화면이 이상할 때
보이는 대로 말하기
«이 버튼을 눌렀는데 그래프가 그대로야. 원인 찾아 고쳐줘»
HRDer AX · 승강기 설치 공정 게임
PART 3
3
PART 3 · 웹앱·서버판
여러 사람이 함께 쓰려면
교육 후, 사내 기준을 확인한 뒤에 하는 부분입니다
웹앱·서버판바뀌는 점
로컬판 → 웹앱판, 무엇이 바뀌나
교육생이 각자 휴대폰으로 같은 게임 판에 들어와 우리 조 차례에 주사위를 굴리고, 모두가 같은 점수판을 실시간으로 보려면 서버가 필요합니다. 로컬판은 강의장 PC 한 대를 화면에 띄워 4개 조가 번갈아 하는 방식입니다.
교육생: 입장 번호로 들어와 우리 조 차례에 주사위 / 진행자: 로그인 → 게임 시작·초기화·기록 내보내기
HRDer AX · 승강기 설치 공정 게임
웹앱판 실습교육 후
W1 · 설계를 웹앱용으로
Claude Code 입력창에 붙여 넣기 Claude Code
지금 만든 elevator-install-game 게임을 교육생이 각자 휴대폰으로 들어와 같은 판에서 하는 웹앱으로 바꾸고 싶어. 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로 배포해줘. 비밀값이 저장소에 올라가지 않았는지 먼저 확인하고, 배포가 끝나면 접속 주소와 휴대폰으로 찍을 QR 그림을 만들어줘.
보내고 나서 확인할 것
접속 주소를 휴대폰으로도 열어 보기
HRDer AX · 승강기 설치 공정 게임
웹앱판 실습교육 후
W4 · 다른 사람 화면으로 확인
Claude Code 입력창에 붙여 넣기 Claude Code
배포된 주소에서 PRD.md 의 «웹앱판 완료 기준»을 하나씩 확인해서 ✅/❌ 표로 알려줘. 휴대폰 화면 크기로 교육생 4명이 각자 다른 조로 들어온 것처럼 해 보고, 한 조가 주사위를 굴리면 다른 화면도 바로 바뀌는지, 진행자 계정만 초기화되는지도 확인해줘.
보내고 나서 확인할 것
역할별로 보이는 화면이 다른지, 로그인 안 하면 안 보이는지
HRDer AX · 승강기 설치 공정 게임
웹앱·서버판사내 서버
방법 ② · 사내 서버를 IT에 요청
Claude Code 입력창에 붙여 넣기 Claude Code
지금 만든 elevator-install-game 게임을 신입 입문교육(연 2회, 한 기수 25명 안팎)에서 교육생이 각자 휴대폰으로 참여하게 하려고 해. 사내 IT 담당자에게 보낼 요청서를 한 장으로 써줘. ① 무엇을 하는 앱인지 ② 누가 몇 명 쓰는지 ③ 저장되는 데이터(조 이름·점수·정답 기록뿐, 개인정보 없음) ④ 필요한 것(교육장 와이파이에서 휴대폰 접속, 진행자 로그인, 기록 백업) ⑤ 지금은 가상 데이터로만 만들었다는 점. 기술 용어는 괄호로 쉽게 풀어줘.