59 lines
6.1 KiB
Markdown
59 lines
6.1 KiB
Markdown
# 페르소나 저작·대시보드 레이아웃 지침 — 2026-06-27
|
|
|
|
## 산출물
|
|
|
|
- 기존 화면 캡처: `docs/ops/layout-research-2026-06-27/persona-studio-before-1440x980.png`
|
|
- 기존 교수 대시보드 캡처: `docs/ops/layout-research-2026-06-27/teacher-dashboard-before-1440x980.png`
|
|
- 기존 학습자 홈 캡처: `docs/ops/layout-research-2026-06-27/learner-home-before-1440x980.png`
|
|
- 생성 시안: `docs/ops/layout-research-2026-06-27/persona-studio-generated-layout.png`
|
|
|
|
## 판단
|
|
|
|
페르소나 영역은 교수 콘솔 안의 보조 카드가 아니라 별도 운영·저작 작업면이어야 한다. 이 기능의 본질은 JSON 입력이 아니라, 운영 중인 페르소나의 학습·검수 상태를 파악하고 실제 기록·교재·가이드 자료를 SSOT로 등록한 뒤, RAG가 추출한 근거를 따라 AI 초안을 만들고 교수자가 임상·회기·말투·안전·프롬프트 계약을 검수하는 전체 생명주기다.
|
|
|
|
현재 캡처에서 문제였던 지점:
|
|
|
|
- 파일 선택이 네이티브 input으로 노출되고 중복 렌더링되어 자료 등록 단계가 조잡해 보인다.
|
|
- 좌측 레일이 목록만 들고 있어 빈 공간이 커지고, 사용자가 현재 저작 단계가 어디인지 알기 어렵다.
|
|
- 3열 구조 자체는 맞지만 각 열의 역할이 약하다. 좌측은 자료·작업흐름, 중앙은 편집 캔버스, 우측은 근거·검증이어야 한다.
|
|
- 검증 카드의 상태 dot과 텍스트가 top-align으로 붙어 단문 검증 행에서 불릿이 어긋나 보인다.
|
|
- 임상·회기 입력 탭에 작성 가이드가 없어 교수자가 어떤 수준의 정보를 넣어야 하는지 UI가 설명하지 못한다.
|
|
|
|
## UX 근거
|
|
|
|
- 대시보드는 정보를 많이 보여주는 화면이 아니라 사용자가 다음 행동을 빠르게 결정하는 작업면이어야 한다. 참고: [NN/g Dashboard Design](https://www.nngroup.com/articles/dashboards-preattentive/).
|
|
- 복잡한 교육·운영 앱은 기능 목록보다 핵심 워크플로와 사용자 역할별 작업 큐를 우선해야 한다. 참고: [NN/g Complex Application Design](https://www.nngroup.com/articles/complex-application-design/).
|
|
- 비교·검토·상태 판단이 필요한 데이터는 카드 묶음보다 표, 큐, 필터, 행 액션이 낫다. 참고: [NN/g Data Tables](https://www.nngroup.com/articles/data-tables/), [Carbon Data Table](https://carbondesignsystem.com/components/data-table/usage/).
|
|
- 빈 상태는 장식이 아니라 다음 입력을 유도해야 한다. 참고: [NN/g Empty States](https://www.nngroup.com/articles/empty-state-interface-design/), [Carbon Empty States](https://carbondesignsystem.com/patterns/empty-states-pattern/).
|
|
- 임상 의사결정형 UI는 적절한 정보, 사람, 채널, 시점, 형식을 맞춰야 한다. 참고: [AHRQ CDS Five Rights](https://digital.ahrq.gov/program-overview/research-stories/scaling-and-dissemination-effective-clinical-decision-support).
|
|
- 클릭 대상은 최소 24px 이상을 지켜야 한다. 참고: [WCAG 2.2 Target Size](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
|
|
|
|
## Vignette 레이아웃 원칙
|
|
|
|
1. 홈/대시보드는 역할별 작업대다. 학습자는 "다음 연습", 교수자는 "검토할 회기와 위험 신호", 관리자는 "운영 이상과 접근 권한"을 첫 화면에서 바로 처리해야 한다.
|
|
2. 한 화면에는 하나의 1차 CTA만 둔다. 나머지는 행 액션, 세컨더리 버튼, 필터로 낮춘다.
|
|
3. 카드 남발을 피한다. 반복 비교가 필요한 정보는 큐/테이블로, 개별 상세만 카드로 둔다.
|
|
4. PersonaStudio의 현행 정보구조는 상단 horizontal tab을 단일 진입점으로 삼는다.
|
|
- 대시보드: 공개/활성 페르소나, 학습 인원·세션, 실제 평가·라포 진척, 검수 요약
|
|
- 카탈로그: 카탈로그 정의, 승인본 공개 규칙, 이론 분포, 버전·출처
|
|
- 페르소나: 전체 table, 시스템/사용자 생성 구분, 공개/검수/숨김 상태, 상세·수정 drilldown
|
|
- 검수 현황: 페르소나 탭 내부 2차 horizontal tab으로 두고 승인/반려/수정 작업을 모은다.
|
|
- 신규/수정: 자료→초안→설정→검토 4단계 독립 작업면. 중앙 편집과 우측 검증/근거의 2열을 사용한다.
|
|
5. RAG 첨부 파일은 SSOT다. 원문 파일, 마스킹 결과, source/document/chunk hash, 초안 생성 evidence를 한 작업면에서 추적해야 한다.
|
|
6. 임상·회기·안전 탭은 빈 입력란만 두지 않는다. 각 탭 상단에 작성 목적, 포함할 정보, 피해야 할 입력을 짧게 제시한다.
|
|
|
|
## 컴포넌트 규칙
|
|
|
|
- 파일 입력은 네이티브 input을 직접 노출하지 않는다. 숨김 input + 드롭존 + 명시 버튼으로 구성한다.
|
|
- 스테퍼는 숫자 칩만 나열하지 않는다. 단계명, 목적, 현재/완료 상태가 함께 보여야 한다.
|
|
- 검증 리스트의 단문 행은 dot과 텍스트를 세로 중앙 정렬한다. 근거 문서처럼 두 줄 이상인 행만 dot을 상단 정렬한다.
|
|
- 탭은 데이터 섹션 이동이다. 선택 상태가 약하면 사용자는 버튼 묶음으로 오해한다.
|
|
- 페이지 섹션을 카드 안에 다시 카드로 감싸지 않는다. 반복 아이템, 모달, 프레임이 필요한 도구에만 카드를 쓴다.
|
|
- 모바일에서는 좌측 레일 → 중앙 편집 → 우측 검증 순서로 내려가며, 파일 업로드와 가이드는 1열로 접는다.
|
|
|
|
## 데이터·버전 전략
|
|
|
|
- 페르소나에는 `persona_schema_version`, `prompt_bundle_version`, `source_bundle_version`을 분리해 저장해야 한다.
|
|
- 생성 초안은 어떤 source id, document hash, chunk id, 마스킹 정책으로 생성됐는지 evidence를 남긴다.
|
|
- 서비스 프롬프트가 바뀌면 기존 페르소나를 즉시 덮어쓰지 않는다. 호환성 검사 → 재생성 후보 표시 → 교수자 승인 후 새 버전 발행 순서로 처리한다.
|
|
- Docker DB 마이그레이션은 init SQL과 별도로 idempotent migration runner를 둔다. 신규 설치는 init SQL, 기존 배포는 migration runner가 같은 최종 스키마로 수렴해야 한다.
|