PRD v1.0 — 화면 5종 디자인 디테일 (Figma 컴포넌트 명세)

디자인 시스템 기준

• 컬러: 메인 2563eb / 그린 10b981 / 오렌지 f59e0b / 그레이 스케일 9단계
• 폰트: Pretendard Variable (Korean), 기본 16px / 본문 14px / 제목 20~32px
• 간격: 4px 기준 8/12/16/24/32/48/64px
• 모서리: rounded-sm 4px / rounded 8px / rounded-lg 12px / rounded-full 9999px
• 그림자: sm 0 1px 2px / md 0 4px 6px / lg 0 10px 15px (rgba black 0.05~0.10)
• 반응형: 모바일 360768px / 태블릿 7681280px / 데스크톱 1280px+

---

1. 디자인 토큰 (Tailwind CSS 호환)

// design-tokens.ts
export const colors = {
  // 브랜드
  primary: { 50: "#eff6ff", 500: "#2563eb", 600: "#1d4ed8", 700: "#1e40af" },
  // 학습 진도 (정답률·성취도)
  success: { 50: "#ecfdf5", 500: "#10b981", 600: "#059669" },
  // CTA·강조 (주의·할 일)
  warning: { 50: "#fffbeb", 500: "#f59e0b", 600: "#d97706" },
  // 오답·경고
  danger: { 50: "#fef2f2", 500: "#ef4444", 600: "#dc2626" },
  // 그레이
  gray: { 50: "#f9fafb", 100: "#f3f4f6", 200: "#e5e7eb", 400: "#9ca3af", 600: "#4b5563", 800: "#1f2937", 900: "#111827" },
};
 
export const spacing = { 1: "4px", 2: "8px", 3: "12px", 4: "16px", 6: "24px", 8: "32px", 12: "48px", 16: "64px" };
 
export const fontSize = {
  xs: "12px", sm: "14px", base: "16px", lg: "18px",
  xl: "20px", "2xl": "24px", "3xl": "30px", "4xl": "36px",
};

---

2. 컴포넌트 라이브러리 (재사용 단위)

2.1 Button

Variant	용도	색상	크기
primary	주요 액션 (학습지 만들기·제출)	bg-primary-500 / text-white	h-10 px-4
secondary	보조 액션 (취소·미리보기)	bg-gray-100 / text-gray-800	h-10 px-4
ghost	텍스트 링크 형태	bg-transparent / text-primary-500	h-8 px-2
danger	삭제·해지	bg-danger-500 / text-white	h-10 px-4

상태: default / hover (-1 색조) / active (-2 색조) / disabled (opacity-50, cursor-not-allowed)

2.2 Input

- 기본 input: h-10 px-3 border border-gray-200 rounded
- focus: border-primary-500 + ring-primary-100 ring-2
- error: border-danger-500 + 하단 error 메시지 (text-xs text-danger-500)
- 라벨: 위에 text-sm text-gray-600 mb-1

2.3 Card

- bg-white border border-gray-200 rounded-lg p-6 shadow-sm
- 제목: text-lg font-semibold mb-2
- 본문: text-base text-gray-600
- 액션 영역: flex gap-2 justify-end mt-4

2.4 Tag/Badge

Variant	용도	색상
success	출결 100%·정답률 90%+	bg-success-50 text-success-600
warning	정답률 60~80%	bg-warning-50 text-warning-600
danger	정답률 60% 미만	bg-danger-50 text-danger-600
neutral	일반 태그 (단원·난이도)	bg-gray-100 text-gray-600

크기: text-xs h-6 px-2 rounded-full

2.5 ProgressBar

- 학생 학습지 진행률 (예: 7/12)
- height: 8px
- bg-gray-200 + 채워진 부분 bg-primary-500
- 라벨 (선택): "7/12 (58%)" — text-xs text-gray-600

---

3. 화면 1 — 학습지 만들기 (선생님 PC/태블릿)

3.1 레이아웃

┌─────────────────────────────────────────────────────┐
│ [헤더 56px]                                         │
│   로고 │ 메뉴: 학생 / 학습지 / 리포트 │ 알림 / 프로필 │
├─────────────────────────────────────────────────────┤
│ [좌측 사이드바 240px]    [메인 본문 flex-1]         │
│                                                      │
│  + 새 학습지              학습지 만들기             │
│  📋 최근 학습지            ┌────────────────────┐   │
│    - 분수의 덧셈           │ 1. 단원 선택       │   │
│    - 시계 보기             │ ┌──────────────┐   │   │
│    - 도형의 둘레           │ │ E5 ▼ │ 약수와 배수 ▼ │ │
│                            │ └──────────────┘   │   │
│  📊 통계                   │                    │   │
│    학습지 12개             │ 2. 난이도 분포     │   │
│    학생 평균 78%           │ 상 [▮▮  ] 20%      │   │
│                            │ 중 [▮▮▮▮▮] 50%     │   │
│                            │ 하 [▮▮▮ ] 30%      │   │
│                            │                    │   │
│                            │ 3. 문항 수: [12]   │   │
│                            │ 4. 자동 채점: [ON] │   │
│                            │                    │   │
│                            │ ─ 추천 12문항 ─    │   │
│                            │ ☰ 1. ...           │   │
│                            │ ☰ 2. ...           │   │
│                            │ [+ 추가] [↻ 새로고침]│  │
│                            │                    │   │
│                            │ [미리보기] [발송 ▶]│   │
│                            └────────────────────┘   │
└─────────────────────────────────────────────────────┘

3.2 컴포넌트 명세

영역	컴포넌트	상세
헤더	<Header />	56px 고정. 로고 클릭 → /home. 알림은 빨간 dot.
사이드바	<Sidebar />	240px. 모바일 시 햄버거. 통계 카드 = <StatCard /> 재사용.
단원 선택	<UnitSelector grade unit />	2단계 dropdown. 부록 A의 71단원 시드 데이터 사용.
난이도 분포	<DifficultyMix>	3개 슬라이더 합 100%. 합이 100 안 되면 inline error.
문항 수	<NumberInput min=1 max=80 />	PRD v0.1 §6 P0 max 80.
자동 채점	<Toggle />	switch UI.
추천 문항 리스트	<QuestionList draggable />	dnd-kit. 각 문항 카드 = <QuestionCard />
발송 버튼	<Button variant=primary />	클릭 → 발송 대상 모달

3.3 인터랙션

1. 단원 선택 → API GET /api/units/{grade} → 사이드 dropdown 갱신
2. 모든 필수 입력 완료 → "추천 12문항" 버튼 활성화
3. 추천 클릭 → API GET /api/questions?unit_id=...&difficulty=... → 12문항 드래그 정렬 가능
4. 문항 카드 클릭 → 모달로 미리보기 (학생이 보는 화면)
5. "다른 문제로 새로고침" → 동일 조건 재호출, 다른 문항 선택
6. "미리보기" → 새 탭에서 PDF 미리보기
7. "발송" → 학생 선택 모달 → 다중 선택 → 확정 → API POST /api/worksheets/{id}/assign

3.4 빈 상태 / 로딩 / 에러

• 빈 상태: 학생이 0명일 때, “먼저 학생을 등록해주세요” 안내 + CTA “학생 등록”
• 로딩: 추천 문항 호출 중 skeleton (12개 카드 placeholder)
• 에러: 네트워크 오류 시 toast notification “다시 시도해주세요”

---

4. 화면 2 — 학생 답안 입력 (학생 앱)

4.1 레이아웃 (모바일 360~768px)

┌─────────────────────────┐
│ [헤더 48px]             │ ← 진도 + 일시 정지
│ 분수의 덧셈 (7/12)  ⏸  │
├─────────────────────────┤
│                          │
│ 문제 7. 다음을 계산하시오│
│                          │
│ $$ \\frac{1}{2} + \\frac{1}{3} = ? $$│
│                          │
│ ┌─────────────────────┐ │
│ │ ① $\\frac{1}{5}$    │ │
│ ├─────────────────────┤ │
│ │ ② $\\frac{5}{6}$    │ │ ← 선택 시 primary-50 배경
│ ├─────────────────────┤ │
│ │ ③ $\\frac{2}{5}$    │ │
│ ├─────────────────────┤ │
│ │ ④ $\\frac{1}{6}$    │ │
│ ├─────────────────────┤ │
│ │ ⑤ $\\frac{6}{5}$    │ │
│ └─────────────────────┘ │
│                          │
│ [✏️ 풀이 메모] [다음 ▶] │
│                          │
│ ●●●●●●○░░░░░  7/12      │ ← progress bar
└─────────────────────────┘

4.2 컴포넌트

영역	컴포넌트	상세
헤더	<WorksheetHeader />	학습지 제목 + 진도. 일시정지 = pause + save
문제 본문	<QuestionBody />	LaTeX 렌더 (KaTeX). 본문 줄바꿈 자동
보기	<ChoiceList />	5개 카드. 1탭 입력. 키보드 1~5 키로도
풀이 메모	<HandwritingPad />	캔버스. 스타일러스 + 손가락 + 사진 업로드
다음 버튼	<Button primary disabled={!selected} />	선택 안 하면 disabled
진행 막대	<ProgressBar value={7/12} />

4.3 인터랙션

1. 보기 탭 → 선택 표시 (배경 primary-50)
2. "다음" 탭 → 답안 임시 저장 (localStorage) + 다음 문항
3. 마지막 문항 "제출" → 모달 "정말 제출할까요?" → 확인 → API POST /api/assignments/{id}/submit
4. 일시정지 → 현재 답안 저장 + 홈 복귀
5. 풀이 메모 → 캔버스 모달 → 그리기 → 저장 후 닫기

4.4 학생용 UX 특수 사항

• 글자 크기: 학생 모바일 가독성 위해 본문 18px (성인 16px 대비 +2)
• 터치 영역: 보기 카드 최소 56px 높이 (Apple HIG 권장)
• 선택 후 즉시 다음: 옵션으로 자동 진행 가능 (속도 학습)
• 시각 피드백: 보기 선택 시 0.1s 미세 애니메이션 (scale 1.02)

---

5. 화면 3 — 오답노트 (학생 앱)

5.1 레이아웃

┌─────────────────────────┐
│ [탭 바]                 │
│ 학습지 │ 오답노트 │ 기록 │ MY│
├─────────────────────────┤
│ 오답노트                │
│ [최근 7일 ▼]            │
│                          │
│ ┌─────────────────────┐ │
│ │ 📝 분수의 덧셈      │ │
│ │   오답 4문제        │ │
│ │   [ 다시 풀기 ▶ ]    │ │
│ └─────────────────────┘ │
│                          │
│ ┌─────────────────────┐ │
│ │ 📝 도형의 둘레      │ │
│ │   오답 2문제        │ │
│ │   [ 다시 풀기 ▶ ]    │ │
│ └─────────────────────┘ │
│                          │
│ ┌─────────────────────┐ │
│ │ 📝 시험대비         │ │
│ │   오답 8문제        │ │
│ │   [ 다시 풀기 ▶ ]    │ │
│ └─────────────────────┘ │
└─────────────────────────┘

5.2 컴포넌트

영역	컴포넌트
탭 바	<BottomTabBar items={['학습지','오답노트','기록','MY']} />
기간 필터	<Select options={['최근 7일','최근 30일','전체']} />
오답 카드	<WrongAnswerCard unit count /> (단원·오답 수·CTA)

5.3 인터랙션

1. 카드 클릭 → 해당 단원 오답 모음 → 새 학습지로 즉시 풀이 시작
2. 풀이 완료 → 정답률 표시 + 메인 학습지 정답률 갱신

---

6. 화면 4 — 월간 리포트 검수 (선생님)

6.1 레이아웃

┌─────────────────────────────────────┐
│ [학생: 김초희] 2026년 4월 리포트  │
├─────────────────────────────────────┤
│ ┌── 정량 (자동) ────────────────┐  │
│ │ 학습지 출제: 8건              │  │
│ │ 평균 정답률: 78%              │  │
│ │ 출결: 16/16 (100%)            │  │
│ │                                │  │
│ │ 단원별:                        │  │
│ │ ─ 분수 ●●●● 65% 🟡            │  │
│ │ ─ 도형 ●●●●● 92% 🟢           │  │
│ │ ─ 측정 ●●● 60% 🔴             │  │
│ └────────────────────────────────┘  │
│                                      │
│ ┌── AI 코멘트 (Claude) ─────────┐  │
│ │ 초희가 이번 달은 도형 단원에서 │  │
│ │ 강한 모습을 보였습니다.        │  │
│ │ ...                            │  │
│ │                                │  │
│ │ [✏️ 수정]                       │  │
│ └────────────────────────────────┘  │
│                                      │
│  [발송 취소]  [✓ 검수 완료 → 발송]  │
└─────────────────────────────────────┘

6.2 컴포넌트

영역	컴포넌트
학생 선택	<StudentTabs /> (학생 N명 탭 또는 dropdown)
정량 카드	<MetricsCard student month />
단원별 막대	<UnitProgressBar value color /> (색상 자동 매핑)
AI 코멘트	<EditableTextArea content /> (인라인 수정)
발송 버튼	<Button danger="발송 취소" primary="검수 완료" />

6.3 인터랙션

1. 페이지 진입 → API GET /api/students/{id}/report/monthly → 데이터 + AI 코멘트 표시
2. AI 코멘트 "수정" → textarea 편집 모드 → 저장
3. "검수 완료" → 모달 "${부모} 학부모님께 발송할까요?" → 확정 → API POST /api/reports/monthly/{id}/send
4. 발송 후 toast "${학생명} 리포트 발송 완료"

6.4 검수 게이트의 시각적 강조

• AI 코멘트 영역에 노란 좌측 보더 (반드시 검수 후 발송 시그널)
• “검수 완료” 버튼은 primary + 큰 크기 (h-12 px-6)
• 발송 취소는 danger (빨간 텍스트만, 보더 없음)

---

7. 화면 5 — 학부모 알림톡 수신 (외부)

알림톡 자체는 카카오톡 앱이 렌더. 우리 디자인 통제 X. 단 발신프로필 이미지·채널 프로필이 핵심.

7.1 발신프로필 이미지 권장

• 320×320px / 원형 / 단순 아이콘
• 아이콘 후보: 책 + 그래프 / 아이콘 + 학원명 일부
• 컬러: primary-500 + 흰색

7.2 채널 프로필 페이지

학부모가 발신자명 클릭 시 도달:

• 학원명: “A+ Tracker by 미경”
• 소개문: “초·중등 공부방을 위한 학습 관리 도구”
• 운영 시간: “평일 09:00~21:00”
• 문의: 전화·메시지 링크
• 홈페이지: aplustracker.com

---

8. 반응형 가이드

화면	모바일 (~768)	태블릿 (768~1280)	데스크톱 (1280+)
1. 학습지 만들기	사이드바 햄버거	사이드바 고정	사이드바 + 미리보기 패널
2. 학생 답안	모바일 우선	동일 (큰 폰트)	미지원 (앱 only)
3. 오답노트	모바일 우선	동일	미지원 (앱 only)
4. 리포트 검수	1열 스택	1열 스택 + 학생 탭	2열 (정량 + AI 코멘트)

---

9. 접근성 (WCAG AA)

• 모든 텍스트 명도 대비 4.5:1 이상
• 모든 인터랙티브 요소 키보드 navigable
• 폼 라벨 명시 (<label htmlFor>)
• 학생 앱 — 스타일러스 + 터치 + 키보드 모두 지원
• 시력 약자 — prefers-reduced-motion 시 애니메이션 비활성

---

10. Figma 작업 리스트

디자이너 인계 시:

• 디자인 토큰 (Variables) 등록 — §1
• 컴포넌트 라이브러리 (Library) 작성 — §2
• 화면 5종 high-fidelity Frame — §3~§7
• 모바일·태블릿·데스크톱 반응형 variants — §8
• 인터랙션 prototype (Figma Smart Animate) — 화면 1·2 위주
• 빈 상태·로딩·에러 화면 — 각 화면당 3개
• 다크 모드 (선택) — Tailwind dark: 변형

---

11. 다음 단계 (PRD v1.0 → v1.1)

• 학생 앱 onboarding 흐름 (5단계)
• 원장 onboarding 흐름 (10분 안에 첫 학습지)
• 결제 흐름 (P1) 와이어프레임
• 출결 키오스크 모드 (P1) 디자인
• 어드민 페이지 (발주처 운영자용) 디자인

본 문서는 v1.0-design 단계까지 다룸. 코드 구현은 별도 진행.