vignette/docs/design-concepts/prompts/learner-history-archive-redesign-2026-06-28.md

학습자 기록/아카이브 화면 재설계 지침 — 2026-06-28

대상 화면: /learn/history

문제 정의

• 기존 회기 목록은 표처럼 보이지만 실제 사용자는 표 비교보다 이어하기, 리뷰, 기록 열람, 다시 연습 중 하나를 선택해야 한다.
• 진행 중 회기, 리뷰 가능한 회기, 종료 기록이 한 목록에 섞여 있어 기록 페이지가 보관함인지 분석 화면인지 불명확했다.
• 현재 세션 API에는 학습자 회기 archived_at, 숨김, 복원 endpoint가 없다. 따라서 실제 아카이브 기능을 완료된 기능처럼 표시하지 않는다.

UX 근거

• NN/g data-table 기준: 표는 검색, 비교, 행 상세 확인, 행 작업이 명확해야 한다. 이 화면은 비교보다 행 작업이 중심이므로 카드형 기록 리스트가 더 적합하다. 참고: https://www.nngroup.com/articles/data-tables/
• NN/g information scent 기준: 사용자가 클릭 후 무엇을 얻게 되는지 예측 가능해야 한다. 기록, 리뷰, 이어하기를 상태별로 분리한다. 참고: https://www.nngroup.com/articles/information-scent/
• Material Design data table/list 기준: 작은 화면에서는 행 액션과 필터를 명확히 유지해야 한다. 참고: https://m3.material.io/components/data-tables/overview
• Apple HIG tables 기준: 테이블은 탐색과 선택을 돕되, 편집/행 액션은 명확한 컨트롤로 드러내야 한다. 참고: https://developer.apple.com/design/human-interface-guidelines/tables

적용 원칙

1. 기록 페이지는 진행 중, 리뷰 필요, 보관됨 세 상태를 기본 분류로 둔다.
2. 보관됨은 현재 단계에서 종료됐고 리뷰 큐에 없는 읽기 전용 기록을 뜻한다.
3. 실제 archive 저장/복원/숨김은 API와 보존 정책이 생긴 뒤에만 노출한다.
4. 회기 행은 표 헤더 대신 카드로 보여준다. 한 행에는 상태, 내담자, 단계, 턴 수, 시작 시각, 주 행동, 보조 행동만 남긴다.
5. 검색은 내담자 코드/이름, 단계, 상태 라벨을 대상으로 한다.

화면 구조

• Header: 회기 기록을 찾고 정리합니다.
• Overview filter cards: 전체, 진행 중, 리뷰 필요, 보관됨
• Main workbench:
  • 기록 목록 제목과 현재 필터 결과 수
  • 검색 입력
  • 상태 필터 버튼
  • 카드형 회기 목록
• Side rail:
  • 아카이브 기준: 진행 중/리뷰 필요/보관됨의 의미
  • 페르소나별 진행 정도

Figma 이관 단위

Figma 파일 키가 생기면 다음 컴포넌트 단위로 옮긴다.

• HistoryTaskCard: 상태 요약 필터 카드
• HistorySearchToolbar: 검색 입력 + 상태 필터
• SessionRecordCard: 회기 기록 카드
• ArchiveRulePanel: 아카이브 기준 패널
• PersonaProgressPanel: 기존 페르소나별 진행 패널

제품 폰트는 apps/web/src/styles/tokens.css의 --font-sans 기준, 즉 Pretendard 계열을 사용한다.

이미지 생성 프롬프트

PNG 래스터 UI mockup only, no SVG, no vector wireframe. A dark clinical learning dashboard for an AI counseling simulation platform. Design the learner session history/archive page as a responsive set showing desktop, tablet, and mobile in one image. Use a calm dark teal surface, warm muted paper-tint highlights, Pretendard-like Korean UI typography, compact professional spacing, and no marketing hero. Layout: top header "회기 기록을 찾고 정리합니다.", four status filter cards "전체 / 진행 중 / 리뷰 필요 / 보관됨", a main session records workbench with search and segmented filters, card-based session rows with status dot, persona code, persona name, stage progress bar, date, primary action, and secondary retry action. Right rail shows archive rules and persona progress. Avoid table grid clutter, avoid bright white panels, avoid decorative gradient blobs, avoid fake stock imagery. The image should feel like a usable product screen, not a poster.

후속 기능

• app.sessions 또는 별도 preference 테이블에 학습자별 archive/hidden 상태 추가
• POST /sessions/{id}/archive, POST /sessions/{id}/restore 또는 PATCH endpoint 추가
• 보관/숨김이 교수자 검토, 연구/감사 보존, 공유 링크와 충돌하지 않는지 정책 확정
• 아카이브 상태를 dashboard counts와 /learn/history 필터에 반영