챌린지식 풀이 디자인 (Design)¶
요지¶
문제를 한 단계씩 풀어 나가는 화면과 그 상태를 다룬다. 여기로 들어오는 바깥 컨테이너는 오픈챌린지 디자인이, 막혔을 때의 AI 코치 대화는 사고력-답변구조 디자인이 맡으므로, 여기서는 풀이 화면 자체에 집중한다.
상위 PRD¶
기획(풀이 루프, 막힘 시 AI 위임, 채점 분기, 통과/포기 상태머신)은 prd, 상태머신·채점·AI 위임 계약은 frd가 기준이다.
사용자 플로우¶
챌린지 시작 → 문제 N 풀이(S2) → 답 제출 → 채점 결과
→ (막힘) 사고력-답변구조 AI 코치 트리거 → 학생이 직접 답 선택 → 재제출
→ 통과/포기 → 다음 문제 or 결과 화면(S3)
풀이 화면(S2): 좌 AI 채팅 / 우 문제 + 선택지 + 드로잉 분할.
화면 · 컴포넌트¶
- 문제 본문(Tiptap 렌더), 선택지/단답 입력, 드로잉 캔버스.
- ProblemAttempt 상태: PENDING → PASSED / FAILED / GIVEN_UP — 상태 칩·진행 바.
- Attempt 상태: IN_PROGRESS → COMPLETED / ABANDONED.
- 채점 분기 표시: 객관식·단답(즉시 채점) / open-ended(LLM 채점 대기).
- 뱃지 시스템: 혼자 해결(힌트 없이 정답)·색다른 풀이(내 풀이 추천 상위 3)·연속 도전(7일 스트릭)·첫 도전. 힌트 사용 기록(페널티 없음).
- 선생님 모니터링(ST1/ST2): ST1 학생 카드 그리드(막힘/혼자 해결/미참여 필터, 리스트/그리드 전환), ST2 힌트 단계 진행 바(막힌 지점 오렌지 표시) + AI 코칭 요약 텍스트(전체 대화 로그 미노출).
- 진행 바·상태 칩·드로잉 툴바 토큰은 design-system. 와이어프레임 원본은 미첨부.
인터랙션 · 상태¶
- 제출 → 채점 결과 → 막힘 시 'AI 코치 시작'으로 사고력-답변구조 위임.
- 답 미선택 시 제출 disabled, "답을 먼저 선택해 주세요" 안내.
- 포기(give-up) 시 GIVEN_UP, 학생당 동일 챌린지 진행 중 시도 1개(멱등) — frd.
엣지케이스
- 중도 이탈 → UNRESOLVED 처리, 재진입 시 이어하기(MVP Optional).
- open-ended 채점은 LLM 대기 로딩 표시, 실패 시 재시도 안내.
- 비로그인은 풀이는 가능하나 AI/제출 차단 → 로그인 유도(오픈챌린지 design).
접근성¶
분할 레이아웃 모바일 탭/스택 전환 — responsive. 진행 바·상태 칩 대비, 캔버스 대체 입력(텍스트) 고려.
개발 핸드오프 노트¶
dev-handoff 규약. 상태머신·채점 분기·AI 위임 계약은 frd + 코드 옆 spec(mvp-back:docs/frd/챌린지식-풀이/spec) SSOT.