Yun Chan 778e8526d4 세션 평가·라이브코치·교수자 분석 라운드 마감 + 문서 정리 + 코드품질 리팩터

- 누적 작업트리 커밋: 회기 평가 복구·durable 저장, 라이브 코치 이력/근거, 교수자 학생분석, 음성 비언어 메타, PII 마스킹, 운영 티켓/헬스 등
- 문서: 완료 기록 docs/archive/ 냉동 보관, docs/ 단일 인덱스(docs/README.md)+통합 TODO(docs/TODO.md)로 정리
- 리팩터(행위 보존): Stage enum SSOT(taxonomy 소유·state_machine re-export), store recent/masked_turns 중복 제거, speaker_ko_label 단일 헬퍼, _list_sessions N+1 제거(state/turns 배치 + 턴평가 하이드레이션 배치)
- 검증: 백엔드 pytest 352 passed, _list_sessions E2E chromium-single-run 2 passed

2026-07-02 02:50:36 +09:00

4.9 KiB

Raw Blame History

학습자 홈 대시보드 재설계 지침

작성일: 2026-06-27

목적

/learn은 내담자 선택 화면이 아니라 학습자 개인 대시보드다. 첫 화면은 사용자가 오늘 무엇을 해야 하는지 즉시 판단하게 해야 한다. 새 회기 시작은 /learn/practice, 기록 탐색은 /learn/history로 분리한다.

참고한 UX 원칙

사용자 필요를 먼저 정의한다. 홈의 사용자 필요는 "오늘 이어갈 회기/리뷰/다음 연습을 결정한다"이다. 참고: https://www.gov.uk/service-manual/user-research/start-by-learning-user-needs
세부 정보는 필요할 때 펼친다. 홈에는 모든 기록을 나열하지 않고 최근/리뷰/학습 인사이트만 요약한다. 참고: https://www.nngroup.com/articles/progressive-disclosure/
다음 행동의 정보 향을 분명히 한다. 버튼은 이어하기를 1순위로 두고, 학습 대상 보기, 기록 보기는 보조 행동으로 낮춘다. 참고: https://www.nngroup.com/articles/information-scent/
화면 크기마다 정보 구조를 바꾼다. 데스크톱은 회기 리캡 + AI 코치 2열, 태블릿/모바일은 세로 흐름으로 전환한다. 참고: https://m3.material.io/foundations/adaptive-design/overview

현재 화면 진단

캡처:

docs/design-verification/learner-home-redesign/current-desktop.png
docs/design-verification/learner-home-redesign/current-tablet.png
docs/design-verification/learner-home-redesign/current-mobile.png

문제:

홈의 핵심 행동이 이어하기, 학습 대상 보기, 회기 기록 보기, 최근 회기 행 버튼으로 분산돼 있었다.
"진행 중인 회기를 먼저 마무리"라는 메시지는 있었지만, 내담자의 마지막 반응과 학습자 마지막 발화가 시선 흐름의 중심에 오지 않았다.
오른쪽 다음 행동 카드가 숫자 묶음처럼 보이고, AI 코치와 분리돼 실제 결정을 돕지 못했다.
모바일에서는 카드가 보고서처럼 길게 쌓여 첫 화면의 과업이 약해졌다.

생성 이미지 결과

생성 방식: built-in image_gen 도구. 결과는 PNG 래스터 이미지이며 SVG/벡터가 아니다.

채택 후보 A: docs/design-concepts/generated/11-learner-dashboard-redesign-concept-b.png
채택 후보 B: docs/design-concepts/generated/12-learner-dashboard-redesign-concept-b-alt.png
폐기: docs/design-concepts/generated/10-learner-dashboard-redesign-concept-a.png 이유: 상담실 배경 이미지로 생성돼 홈 UI 레이아웃 지침으로는 부적합하다. 배경 무드 참고 이상의 의미를 주지 않는다.

적용 지침

홈 첫 블록은 오늘 이어갈 회기다.
회기 리캡에는 내담자 아바타, 페르소나명, 단계, 감정/표정 힌트, 상담 진행률, 마지막 내담자 반응, 내 마지막 반응을 배치한다.
AI 코치는 별도 카드가 아니라 홈의 결정 패널이다. 코치 문장, 짧은 체크 힌트, 진행/리뷰 카운트, 이어하기 CTA를 한 패널에 묶는다.
이어하기는 채워진 1순위 버튼으로 한 번만 강하게 보인다. 보조 행동은 학습 대상 보기, 기록 보기 텍스트 버튼 수준으로 낮춘다.
지표 카드는 회기 리캡 아래로 내린다. 지표가 홈을 지배하면 사용자가 보고서로 인식한다.
모바일은 회기 리캡 -> AI 코치 -> 2x2 지표 -> 최근 회기 -> 인사이트 순서를 유지한다.
모든 패널은 다크 테마 토큰 위에서 통일한다. 흰 섹션, 떠 있는 메모, 패턴 보드 직접 삽입은 금지한다.

구현 반영

apps/web/src/pages/LearnerHome.tsx
- /learn 대시보드 히어로를 회기 리캡 + AI 코치 구조로 재배치했다.
- 독립 다음 행동 카드를 제거하고 AI 코치 패널은 단일 이어하기 CTA 중심으로 정리했다.
- 라포/탐색/개입/정리 단계 기반 상담 진행 바를 추가했다.
- 모바일 중복 CTA를 제거하고 지표를 2x2로 유지했다.

2026-06-28 시안 정합 보정

AI 코치 패널은 시안처럼 코칭 문장 + 3개 체크 힌트 + 단일 이어하기 CTA만 남긴다.
진행/리뷰 숫자와 보조 이동은 코치 패널에서 빼고, 상단 상태 또는 메트릭/좌측 내비게이션에서 처리한다.
하단은 시안 구조에 맞춰 리뷰 대기, 다음 연습 추천, 최근 기록 3분할로 구성한다.
최근 피드백 전문은 홈에서 길게 펼치지 않는다. 홈에서는 가장 최근 피드백 1건만 요약하고, 자세한 내용은 리뷰 화면으로 넘긴다.
태블릿과 모바일은 3분할을 세로 스택으로 전환한다.

검증 캡처:

docs/design-verification/learner-home-redesign/final-desktop.png
docs/design-verification/learner-home-redesign/final-tablet.png
docs/design-verification/learner-home-redesign/final-mobile.png

4.9 KiB Raw Blame History