# PRD — 승강기 설치 공정 게임

> **실습 방식**: 내 PC 안(로컬) · Claude 데스크톱 앱 **Code** 탭 · 다운로드 › **Test** 폴더 · 가상 데이터만 사용
> 이 문서를 Claude Code가 그대로 읽고 앱을 만듭니다. 고치고 싶은 곳은 직접 고쳐도 됩니다.

## 1. 한 줄 정의
신입 매니저가 **승강기 그림 속 부품 1~8을 눌러 배우고**, **설치 공정 12단계 순서를 카드로 맞추고**, **브루마블식 보드에서 조별로 주사위를 굴리며 공정 퀴즈로 점수를 겨루는** 교육용 웹 게임. 게임 기록은 CSV로 내보내 Claude Code가 «많이 틀린 구간»을 분석한다.

## 2. 누가 쓰나
| 역할 | 하는 일 |
|---|---|
| 신입 매니저(교육생, 4개 조) | 부품 탐험·공정 순서 맞추기로 개인 학습 → 보드게임에서 조별 대결 |
| 교육 담당자(진행자) | 강의장 PC를 화면에 띄워 게임 진행, 점수판 확인, 게임 기록 내보내기, Claude Code 분석 결과 보기 |

## 3. 오늘 만들 기능 (필수)
- [ ] **부품 탐험**: 승강기 단면 그림(`elevator.png`)의 번호 1~8 위에 깜빡이는 동그라미 → 누르면 부품 이름·위치·역할·몇 번째 공정인지 + 3지선다 퀴즈
- [ ] **공정 순서 맞추기**: 공정 카드 12장을 섞어 보여 주고, 끌어 놓아 순서를 맞춘 뒤 [채점] → 맞은 카드 ✅·틀린 카드 ❌, 점수 게이지
- [ ] **브루마블식 보드게임**: 네모 테두리 20칸, 주사위 1개, 4개 조 말·점수판. 공정 칸에서는 «이 공정의 다음 공정은?» 문제(맞히면 +20), 부품 퀴즈 칸 +10, 돌발 칸 +15/−10, 휴식 칸 한 턴 쉬기, 출발 칸을 지나면 «1대 설치 완료» +30
- [ ] **게임 기록 내보내기 + 분석 보기**: 턴마다 기록을 쌓아 `game_log.csv` 로 저장, Claude Code가 만든 `game_report.md` 를 카드로 보여 주기

## 4. 화면 구성
1. **상단**: 게임 이름 · [보드게임 / 부품 탐험 / 공정 순서 맞추기] 탭 · 교육 기수 표시
2. **보드게임 탭**: 왼쪽 정사각형 보드(가운데에 주사위·현재 차례·문제 카드), 오른쪽 팀 점수 막대 · 정답/오답 도넛 · 턴별 누적 점수 선 · Claude Code 분석 카드
3. **부품 탐험 탭**: 왼쪽 큰 그림 + 번호 동그라미, 오른쪽 부품 카드 · 퀴즈 · 학습 진행 막대(본 부품 n/8)
4. **공정 순서 탭**: 카드 12장(4×3), 각 카드에 공정명·설명·관련 부품·안전 포인트·표준 소요일, 오른쪽 채점 게이지와 오답 노트
5. 그래프에 **마우스를 올리면 수치가 말풍선으로** 보이고, 게임답게 밝은 색·애니메이션(주사위 굴림, 말 이동)

## 5. 데이터 — 파일과 항목 (모두 가상 데이터)
| 파일 | 항목 |
|---|---|
| `data/parts.csv` (8행) | 부품번호(그림 번호 1~8), 부품명, 위치, 역할, 설치공정순서, 퀴즈, 정답, 오답1, 오답2 |
| `data/process_steps.csv` (12행) | 순서, 공정명, 설명, 관련부품번호, 표준소요일, 안전포인트 |
| `data/board.csv` (20행) | 칸번호(0=출발, 시계 방향), 칸종류(출발/공정/부품퀴즈/돌발/휴식), 칸이름, 기본점수, 규칙 |
| `data/game_log.csv` (96행) | 기수, 턴, 팀, 주사위, 도착칸, 칸이름, 칸종류, 문제, 결과, 획득점수, 누적점수 |
| `elevator.png` | 승강기 단면 그림. 번호 1 가이드레일 · 2 카 · 3 균형추 · 4 승강장 문 · 5 와이어로프 · 6 권상기 · 7 완충기 · 8 제어반 |

- 공정 12단계와 퀴즈는 **교육용 가상 예시**입니다. 실제 사내 표준 공정·용어로 바꿔 쓰세요.
- 저장 위치: 브라우저 저장공간(localStorage) + CSV 파일. **외부 서버·데이터베이스를 쓰지 않습니다.**

## 6. AI 분석은 Claude Code가 합니다
앱 안에서 AI를 부르지 않습니다(사내 기준: 별도 API 키 없음). 대신:
1. 게임이 끝나면 [게임 기록 내보내기] → `data/game_log.csv`
2. Claude Code가 이 파일을 읽어 **조별 순위·공정 칸별 정답률·많이 틀린 구간·복습 제안**을 `game_report.md` 로, 틀린 구간 보충 퀴즈를 `data/quiz_extra.csv` 로 저장
3. 앱이 `game_report.md` 를 읽어 보드게임 탭의 «Claude Code 분석» 카드에 표시

## 7. 기술 원칙 (로컬 실행)
- 폴더 하나: `Test/elevator-install-game/` 안에 `index.html`, `style.css`, `app.js`, `elevator.png`, `data/`
- 순수 HTML·CSS·JavaScript. 외부 인터넷 주소(CDN·글꼴)를 불러오지 않음 — 그래프·보드·주사위는 직접 그림
- 그림 위 번호 동그라미는 **그림 크기에 대한 % 위치**로 올려 창 크기가 바뀌어도 어긋나지 않게
- 실행: `python -m http.server 8765` → 브라우저에서 `http://localhost:8765`
- 결과물은 폴더째 zip으로 묶어 가져감. 인터넷에 올리지(배포하지) 않음

## 8. 원래 요청에서 조정한 부분
| 원래 요청 | 오늘은 이렇게 | 이유 |
|---|---|---|
| 3D 모델링으로 부품이 어디에 붙는지 생생하게 | 승강기 단면 그림에서 번호 1~8을 누르면 부품 설명·퀴즈 | 3D 모델 제작은 4시간 실습 범위를 넘음 |
| 기존 보드게임의 복잡한 룰 | 20칸·주사위 1개·«다음 공정 맞히기» 중심으로 단순화 | 설명 없이 바로 할 수 있게(룰 수정 요청 반영) |
| 조별로 각자 기기에서 참여 | 강의장 PC 한 대를 화면에 띄워 4개 조가 번갈아 진행 | 외부 배포 금지 — 여러 기기 접속은 인터넷 공개가 필요 |

## 9. 완료 기준 (테스트)
- [ ] 부품 탐험에서 그림의 동그라미 **8개**가 각 번호 위에 정확히 놓이고, 3번을 누르면 «균형추 · 설치 공정 7번째»가 보인다
- [ ] 공정 순서 탭에서 카드 **12장**을 정답 순서로 놓고 채점하면 **100점**, 8·9번만 바꾸면 **83점(10/12)** 이 나온다
- [ ] 보드가 **20칸**이고, 주사위로 출발 칸을 지나면 그 조 점수가 **+30** 된다
- [ ] `data/game_log.csv` 를 불러오면 2026-2기 최종 점수가 **1조 180 · 2조 120 · 3조 170 · 4조 230** 으로 점수판에 표시된다
- [ ] Claude Code가 만든 `game_report.md` 에 «와이어로프 걸기 다음 공정 정답률 40%(2/5)»가 들어 있고 앱 카드에 보인다
- [ ] 새로고침(F5)해도 진행 중인 게임 점수가 남아 있고, 폴더를 zip으로 묶어 다른 곳에 풀어도 똑같이 실행된다

## 10. 다음 단계 (집에서 더 키울 것)
- 실제 사내 표준 공정·현장 사진으로 카드와 퀴즈 교체
- 돌발 카드(안전 사고 사례) 늘리기, 조별 아이템 카드 같은 룰 추가
- 교육생 개인별 복습 퀴즈 화면과 오답 노트 인쇄