# 페르소나 저작·대시보드 레이아웃 지침 — 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가 같은 최종 스키마로 수렴해야 한다.