74 lines
4.9 KiB
Markdown
74 lines
4.9 KiB
Markdown
# 학습자 홈 대시보드 재설계 지침
|
|
|
|
작성일: 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`
|