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

작성일: 2026-06-27

목적

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

사용자 필요를 먼저 정의한다. 홈의 사용자 필요는 "오늘 이어갈 회기/리뷰/다음 연습을 결정한다"이다. 참고: 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

캡처:

문제:

생성 방식: 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로 유지했다.

검증 캡처: