사고력 답변구조 디자인 (Design)¶

요지¶

AI 코치와 학생이 주고받는 대화 화면을 다룬다. 레이아웃의 핵심은 좌우 분할이다 — 왼쪽에 AI 채팅, 오른쪽에 문제·선택지·드로잉을 두어, 대화하면서 동시에 문제를 보고 풀 수 있게 했다. 풀이 화면 전체 흐름은 챌린지식-풀이 디자인이, 어디서 진입하는지는 오픈챌린지가 맡는다.

상위 PRD¶

기획(대화형 multi-turn, 4단계 progression+회귀, 학생 직접 답 선택, 맞춤 설정)은 prd, 데이터·API 계약은 frd가 기준이다.

사용자 플로우¶

전체 UX 흐름은 이렇다.

문제 상세 → [AI 힌트 받기] CTA
→ [최초 1회] 맞춤 설정 모달 (Skip 가능)
→ AI 코칭 시작 (첫 질문 자동 전송)
→ 학생 답변(빠른 칩 or 직접 입력)
→ AI progression (4단계, 회귀 가능)
→ 학생 직접 답 선택 유도 → 문제 복귀 → 답 제출
→ (종료 후) 만족도 5점 + 자유 의견

multi-turn 대화형(v0.2). AI는 마지막 답을 대신 고르지 않고 후보·질문만 제시.

맞춤 설정 모달 (최초 1회, Skip 가능) — 입력값을 시스템 프롬프트에 반영해 개인화 힌트 생성. Skip 시 일반 힌트. 'AI 힌트 받기' 근처에서 언제든 수정 가능(문제마다 어려운 부분이 다름).

항목	옵션
과목	MVP 수학 고정
학습 단계	중등(개념 강화) / 고등(풀이 접근 중심)
학습 목적	수능 중심(낯선 문제 접근·응용) / 내신 중심(정확성·풀이 패턴·반복 유형)
어려운 부분(복수)	개념 이해 / 문제 해석 / 응용 문제 / 계산 — 힌트 방식 변경
자유 입력	선택

화면 · 컴포넌트¶

AI 말풍선 + 상단 태그 칩(많이 헷갈리는 부분이에요 / 잘 찾았어요 / 정답에 가까워요!).
빠른 답변 칩 3개 고정(잘 모르겠어요 / 더 깊게요 / 다음 힌트) + 직접 입력(최대 1,000자).
드로잉 툴바(펜·지우개·선택 + 색상 검정/빨강/파랑 + 전체 지우기) — 드로잉 MVP 포함 여부는 prd 오픈이슈.
만족도 입력(5점 + 자유 의견, Skip 가능, v0.2 신규).
상태: AI 응답 대기(첫 토큰 < 3초 목표), 스트리밍(2차).
칩·말풍선·드로잉 툴바·캐릭터 코멘트 토큰은 design-system을 따른다. 와이어프레임 원본은 Notion 화면 흐름 설계안에 있다.

인터랙션 · 상태¶

대화는 내부적으로 다음 상태를 오간다.

AI 상태 머신

READY → COACHING ↔ WAITING_ANSWER → GUIDE_TO_PROBLEM → FINISHED
                                                       (+ ABANDONED: 중도 이탈/세션 만료)
이해도 부족 시: COACHING → 개념 단계 회귀 → COACHING

AI 말투: 구어체, 부정 표현 금지, 정답(번호/값) 직접 언급 금지.
4단계 progression + 회귀: ①개념 이해 → ②접근 방향 → ③풀이 힌트 → ④거의 답 직전. 고정 아님 — 상황 따라 3→1, 4→2 회귀하며 동일 설명 반복 X.
"모르겠어요"/"답 알려주세요" 반복: 단계 유지 X → 개념 단계 회귀 + 사고 흐름 재구성. 무한 루프 방지로 일정 횟수 후 문제 복귀 유도. 정답은 끝까지 미제공.
종료 유도: 답 직전까지 도움 후 "이제 답을 직접 골라볼까요?".
힌트 사용 페널티 없음, 힌트 없이 정답 시 '혼자 해결' 뱃지.
컨텍스트 수집: 화면흐름 설계안 기준 3회까지 자동(과목·힌트 사용·막힌 단계), 4회차 재방문 시 맞춤 설정 유도(스킵 가능).

접근성¶

좌우 분할은 모바일에서 탭/스택 전환 — responsive. 채팅 스크롤 포커스·칩 키보드 접근·말풍선 대비 준수.

개발 핸드오프 노트¶

전달 규약은 dev-handoff를 따른다. 대화 API·만족도·토큰 기록 계약은 frd가 기준이고, 프롬프트 정책은 구조만 그쪽에 적되 실제 문구는 시크릿으로 분리한다.