# AP Statistics 아카데미 — 메뉴별 상세 기획서 (콘텐츠 스펙)

> 목적: 이 문서 하나로 어떤 AI/개발자가 맡아도 동일한 결과물을 만들 수 있도록 각 메뉴의 목적·구조·UI 요소·데이터 흐름·톤앤매너를 고정한다.

---

## 0. 공통 규칙 (모든 페이지 공통 적용)

| 항목 | 내용 |
|---|---|
| 브랜드명(가칭) | STAT PRIME / STATMASTER 등 추후 확정 |
| 언어 | 영어 콘텐츠(문제/용어) + 한국어 UI/설명 혼용 |
| 컬러 톤 | 메가스터디식 신뢰감(네이비/블루 계열) + 포인트 컬러(성취감 강조용 골드/그린) |
| 폰트 | 제목: 굵은 산세리프 / 본문: 가독성 높은 산세리프 / 수식·통계값: monospace |
| 공통 컴포넌트 | GNB(상단 메뉴바), 사이드 진도바, D-day 위젯, 유저 아바타/닉네임, 토스트 알림(정답/오답) |
| 데이터 저장 | localStorage, 키 네이밍 규칙: `{module}:{unitId}:{itemId}` |
| 반응형 | 모바일 우선 대응 (세로 스크롤 기준 레이아웃 무너지지 않게) |

---

## 1. HOME (메인 랜딩)

**목적**: 첫인상 — "이 사이트에서 공부하면 AP Stats 5점 받는다"는 확신을 주는 페이지.

**구성 요소**
- 히어로 섹션: 캐치프레이즈 + D-day(AP 시험일까지) 카운터 + "진단테스트 시작하기" CTA 버튼
- 3단계 소개 배너: 진단 → 학습 → 실전모의고사 (아이콘형 3열)
- 실시간(가상) 통계 위젯: "이번 주 완료된 모의고사 수", "평균 점수 상승률" 등 동기부여용 지표
- 유닛 로드맵 미리보기 (9개 유닛 타임라인, 잠김/완료 표시)
- 오늘의 문제(데일리 챌린지) 미리보기 카드
- 성공사례/후기 슬라이더 (가상 학생 후기, 매거진 스타일 카드)
- 하단 CTA: 회원가입/진단테스트 재유도

**필요 데이터**: 유저 진도율(%), D-day 계산용 AP 시험일, 데일리 문제 1건

---

## 2. 커리큘럼 (강의실)

**목적**: College Board 공식 9개 유닛 기준 체계적 이론 학습.

**Unit 목록** (College Board 공식 기준)
1. Exploring One-Variable Data
2. Exploring Two-Variable Data
3. Collecting Data
4. Probability, Random Variables, and Probability Distributions
5. Sampling Distributions
6. Inference for Categorical Data: Proportions
7. Inference for Quantitative Data: Means
8. Inference for Categorical Data: Chi-Square
9. Inference for Quantitative Data: Slopes

**유닛 목록 페이지 구성**
- 카드형 그리드, 각 카드에 진도율 바 + 예상 학습시간 + 난이도 태그
- 잠금 로직: 이전 유닛 진단테스트 통과 시 다음 유닛 오픈(선택적 옵션)

**강의 상세페이지 구성** (유닛 1개당)
- 좌측: 목차 네비(챕터별 앵커 이동)
- 본문: 이론 설명 → 핵심 공식 박스(하이라이트) → 실전 예제(Step-by-step 풀이) → "직접 풀어보기" 인터랙티브 문제 2~3개
- 우측 고정: 진도 체크리스트, "이 유닛 미니테스트 보러가기" 버튼
- 하단: 다음 유닛으로 이동 버튼

**필요 데이터**: 유닛별 진도(챕터 체크 여부), 인터랙티브 문제 정답 기록

---

## 3. 문제은행

**목적**: 유닛별/난이도별로 문제를 자유롭게 골라 푸는 연습 공간 (모의고사와 달리 시간제한 없음, 반복 연습용).

**구성**
- 필터바: 유닛 선택(다중), 난이도(Easy/Medium/Hard/실전급), 문제유형(MCQ/FRQ), 미풀이/오답만 보기 토글
- 문제 리스트: 카드형, 상태 아이콘(안품/맞음/틀림)
- 문제 풀이 화면: 문제 → 선택지 → 제출 → 즉시 해설(핵심 개념 볼드, 계산 과정 시각화) → 힌트 토글
- FRQ의 경우 실제 채점기준(rubric) 포인트 표시 + 필기체 스타일 모범답안 제공

**필요 데이터**: 문제 풀이 이력(`attempts:{unitId}:{questionId}`), 오답 여부

---

## 4. 모의고사센터

**목적**: 실전 감각 훈련. 시간 압박 하에서 실제 시험처럼 응시.

**하위 구성**
1. **유닛별 미니테스트**: 유닛당 10문제, 10~15분 타이머
2. **종합 모의고사**: 전 유닛 믹스 50문제, 타이머 선택 가능(기존 제작물과 동일 포맷 재사용)
3. **Full-length 실전모의고사**: 실제 AP 시험 구성(MCQ 40문제 60분 + FRQ 6문제 90분) 그대로 재현, 계산기 사용 구간 명시

**공통 UI**
- 시험 시작 전 안내 모달(문항 수, 시간, 배점 안내)
- 응시 중: 상단 고정 타이머, 문제 네비게이터(팔레트 - 풀음/안풂/표시 색상 구분)
- 제출 즉시 자동채점 → 채점&피드백 리포트 페이지로 연결

**필요 데이터**: 응시 회차 기록(날짜, 점수, 소요시간), 문항별 정오답

---

## 5. 채점 & 피드백 리포트

**목적**: 단순 점수 공개가 아니라 "무엇을 더 공부해야 하는지" 알려주는 분석 페이지.

**구성**
- 상단 요약: 이번 회차 점수(원점수 + AP 5점 환산 예측치), 순위/백분위(가상)
- 레이더 차트: 9개 유닛별 정답률
- 점수 추이 라인 차트: 회차별 점수 변화
- 오답노트 자동 생성: 틀린 문제만 모아서 재풀이 버튼 제공, 유닛별 그룹핑
- 취약 유닛 추천: "Unit 5 (Sampling Distributions) 정답률 40% → 해당 강의 복습 추천" 형태의 액션형 카드
- FRQ 채점 시 rubric 포인트별 획득/누락 표시

**필요 데이터**: 응시 기록 전체, 유닛별 정답률 집계, 오답 문제 리스트

---

## 6. 스터디 (같이 공부)

**목적**: 매거진/커뮤니티 느낌으로 매일 접속할 이유를 만드는 공간.

**구성**
- 오늘의 문제(데일리 챌린지): 매일 바뀌는 1문제, 정답 시 스트릭(연속 학습일수) 증가
- 학습 캘린더: 히트맵 형태(잔디밭 스타일)로 일별 학습량 시각화
- Q&A 게시판: 질문 카드 목록(가상 데이터로 시작 가능), 개념별 태그
- 스터디 그룹/랭킹(선택 기능): 스트릭 랭킹 리더보드

**필요 데이터**: 스트릭 카운트, 캘린더용 일별 활동 로그, 데일리 문제 응답

---

## 7. 마이페이지

**목적**: 개인 학습 현황을 한눈에 보는 대시보드.

**구성**
- 프로필 요약: 목표점수, 현재 예측점수, D-day
- 진도율 게이지(전체 커리큘럼 기준 %)
- 최근 응시 리포트 리스트 (클릭 시 4번 리포트로 이동)
- 오답노트 모음(전체 통합)
- 뱃지/성취 시스템(선택 기능): "5개 유닛 완료", "스트릭 7일" 등

**필요 데이터**: 전체 유저 상태 종합 (진도, 점수 이력, 스트릭)

---

## 8. AP 시험 정보

**목적**: 신뢰감 있는 정보 페이지 (메가스터디의 "입시정보" 코너 역할).

**구성**
- AP Statistics 시험 개요(시간, 문항 구성, 배점 방식)
- 5점(만점) 커트라인 관련 일반 정보
- D-day 카운트다운 대형 위젯
- FAQ 아코디언

---

## 다음 단계 제안

이 스펙을 기준으로:
1. 디자인시스템(색상 변수, 폰트, 공통 컴포넌트 CSS) 확정 문서 별도 제작
2. 1단계 MVP 단일 HTML — HOME + 커리큘럼(유닛1) + 미니테스트 + 리포트 축소판만 우선 구현
3. 이후 AI 분업으로 각 메뉴 풀스케일 페이지 제작