# PRD — 그룹교육 온라인 강의 플랫폼

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

## 1. 한 줄 정의
교육 리뷰 영상·이러닝·**비전포럼 라이브 다시보기**를 **과정별 재생목록**으로 모아 두고, 직원은 유명 온라인 강의 사이트처럼 골라 보고 **수강 여부가 기록**되며, 담당자는 콘텐츠를 올리고 관리하는 사내 온라인 클래스.

## 2. 누가 쓰나
| 역할 | 하는 일 |
|---|---|
| 직원(수강생) | 홈에서 과정 고르기, 이어 보기, 강의 보기·완료 체크, 비전포럼 다시보기 |
| 인재개발 담당자(관리자, 4~5명) | 영상 등록·순서·상태(공개/검수중/비공개/예정) 관리, 과정별 수강 완료율·시청 통계 확인 |

## 3. 오늘 만들 기능 (필수)
- [ ] **홈(둘러보기)**: 비전포럼 큰 배너(다음 라이브 예정 포함) · 이어 보기(내 진도) · 카테고리 버튼 · 과정별 재생목록 썸네일 카드
- [ ] **강의 보기**: 영상 자리(썸네일·재생 버튼·진행 막대) + 오른쪽 재생목록(완료/보는 중/안 봄) + 강의 소개
- [ ] **수강 여부 기록**: 시청률 90% 이상 = 수강 완료. «다 봤어요» 버튼으로도 완료 처리, 과정 진도 % 표시
- [ ] **관리자 · 콘텐츠 관리**: 영상 목록 표(상태 바꾸기) · «영상 올리기»(제목·과정·길이·유형 입력) · KPI 4개 · 월별 시청 선그래프 · 과정별 완료율 막대 · 콘텐츠 유형 도넛 · 비전포럼 회차별 시청 막대
- [ ] **Claude Code 결과 카드**: `meta_draft.md`(검수중 영상 설명·태그·챕터 초안)를 관리자 화면에 표시

## 4. 화면 구성
1. **상단**: 로고 · 검색창 · [홈 / 강의 보기 / 관리자] 탭 · 로그인한 직원 이름
2. **홈**: 비전포럼 배너(왼쪽 크게) + 이어 보기(오른쪽) → 과정별 재생목록 제목 + 카테고리 버튼 → 썸네일 카드 줄
3. **강의 보기**: 왼쪽 큰 영상 자리 + 아래 강의 소개 / 오른쪽 재생목록 + 동료 완료율
4. **관리자**: KPI 4개 → 콘텐츠 표 + Claude Code 카드 · 시청 그래프들
5. **썸네일**: 실제 그림 대신 과정마다 다른 **CSS 그라디언트 + 이모지 + 제목**. 카드에 마우스를 올리면 살짝 떠오름
6. 그래프에 **마우스를 올리면 수치가 말풍선으로** 보임

## 5. 데이터 — 파일과 항목 (모두 가상 데이터)
| 파일 | 항목 |
|---|---|
| `data/courses.csv` | 과정ID, 카테고리(신입·온보딩/리더십/AI·디지털/직무/교육 리뷰/비전포럼), 과정명, 담당자, 사전학습용(Y/N) — 7개 |
| `data/videos.csv` | 영상ID, 과정ID, 순서, 제목, 길이(분), 업로드일, 유형(이러닝/리뷰영상/라이브 다시보기/라이브 예정), 상태(공개/검수중/비공개/예정) — 46편 |
| `data/watch_log.csv` | 사번, 이름, 부서, 영상ID, 시청률(%), 수강완료(Y/N), 시청일 — 190건(2026년 6~10월) |

- 비전포럼: 연 5회 라이브 → 2025년 5회 + 2026년 4회 다시보기, 2026년 5회차는 11/19 «라이브 예정»
- 수강 완료 = 시청률 90% 이상. 과정 완료율 = 그 과정 시청 기록 중 완료 비율
- 저장 위치: 브라우저 저장공간(localStorage) + CSV 파일. **외부 서버·데이터베이스를 쓰지 않습니다.**

## 6. AI 일은 Claude Code가 합니다
앱 안에서 AI를 부르지 않습니다(사내 기준: 별도 API 키 없음). 대신:
1. 관리자 화면의 **[요청문 복사]** → Claude Code 입력창에 붙여넣기
2. Claude Code가 `data/videos.csv` 의 «검수중» 영상 제목으로 **설명 3줄·태그 5개·챕터 목차** 초안을 쓰고, `data/watch_log.csv` 로 완료율 낮은 과정과 개선 아이디어를 정리해 `meta_draft.md` 로 저장
3. 앱이 `meta_draft.md` 를 읽어 «Claude Code 콘텐츠 정리» 카드에 표시 → 담당자가 확인 후 «공개»로 바꿈

## 7. 기술 원칙 (로컬 실행)
- 폴더 하나: `Test/hrd-online-class/` 안에 `index.html`, `style.css`, `app.js`, `data/`
- 순수 HTML·CSS·JavaScript. 외부 인터넷 주소(CDN·글꼴·유튜브)를 불러오지 않음 — 썸네일은 CSS 그라디언트, 그래프는 직접 그림
- 영상 파일은 오늘 넣지 않음(나중에 `videos/` 폴더에 mp4를 넣으면 재생되게 자리만 마련)
- 실행: `python -m http.server 8765` → 브라우저에서 `http://localhost:8765`
- 결과물은 폴더째 zip으로 묶어 가져감. 인터넷에 올리지(배포하지) 않음

## 8. 원래 요청에서 조정한 부분
| 원래 요청 | 오늘은 이렇게 | 이유 |
|---|---|---|
| 교육 영상을 업로드해 재생 | 썸네일 자리는 CSS 그라디언트, «영상 올리기»는 목록에 한 줄 추가 — 영상 파일은 나중에 폴더에 넣어 연결 | 대용량 영상 저장·재생 서버는 4시간 실습 범위 밖, 외부 호스팅 금지 |
| 비전포럼 유튜브 라이브를 모아 두기 | 회차별 다시보기 목록 + 다음 라이브 예정 카드 | 유튜브 연동은 외부 서비스 연결 |
| 전사 직원 수강 여부 확인 | `watch_log.csv` 를 불러와 완료율 계산, 한 PC에서 수강생/관리자 탭 전환 | 여러 사람의 실제 시청 기록을 모으려면 서버가 필요 |

## 9. 완료 기준 (테스트)
- [ ] CSV를 불러오면 홈에 **7개 과정** 재생목록이 보이고, 관리자 화면에 등록 콘텐츠 **46편**(공개 39 · 검수중 3 · 비공개 3 · 예정 1)이 표시된다
- [ ] 시청 기록 **190건**, 수강 완료율 **58.9%**(112건), 10월 시청 **67건**이 보인다
- [ ] 과정별 완료율에서 «신입사원 입문과정 사전학습»이 **73%**로 가장 높다
- [ ] 강하은(전략기획팀)으로 «업무에 바로 쓰는 생성형 AI»를 열면 진도가 **2 / 7강(29%)**이고, 한 강을 «다 봤어요» 하면 **3 / 7강**이 되며 새로고침(F5)해도 남아 있다
- [ ] 관리자 화면에서 «영상 올리기»로 1편을 추가하면 등록 콘텐츠가 **47편**이 되고 해당 재생목록에 나타난다
- [ ] Claude Code가 만든 `meta_draft.md` 가 관리자 화면 카드에 보인다
- [ ] 폴더를 zip으로 묶어 다른 폴더에 풀어도 똑같이 실행된다

## 10. 다음 단계 (집에서 더 키울 것)
- 실제 영상 파일 재생과 시청 시간 자동 측정
- 리뷰 영상 톤앤매너 템플릿(인트로·자막·색상 규칙) 페이지
- 사내 계정 로그인·부서별 필수 과정 지정은 사내 IT 검토 후