5.6 KiB
5.6 KiB
페르소나 저작·대시보드 레이아웃 지침 — 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.
- 복잡한 교육·운영 앱은 기능 목록보다 핵심 워크플로와 사용자 역할별 작업 큐를 우선해야 한다. 참고: NN/g Complex Application Design.
- 비교·검토·상태 판단이 필요한 데이터는 카드 묶음보다 표, 큐, 필터, 행 액션이 낫다. 참고: NN/g Data Tables, Carbon Data Table.
- 빈 상태는 장식이 아니라 다음 입력을 유도해야 한다. 참고: NN/g Empty States, Carbon Empty States.
- 임상 의사결정형 UI는 적절한 정보, 사람, 채널, 시점, 형식을 맞춰야 한다. 참고: AHRQ CDS Five Rights.
- 클릭 대상은 최소 24px 이상을 지켜야 한다. 참고: WCAG 2.2 Target Size.
Vignette 레이아웃 원칙
- 홈/대시보드는 역할별 작업대다. 학습자는 "다음 연습", 교수자는 "검토할 회기와 위험 신호", 관리자는 "운영 이상과 접근 권한"을 첫 화면에서 바로 처리해야 한다.
- 한 화면에는 하나의 1차 CTA만 둔다. 나머지는 행 액션, 세컨더리 버튼, 필터로 낮춘다.
- 카드 남발을 피한다. 반복 비교가 필요한 정보는 큐/테이블로, 개별 상세만 카드로 둔다.
- PersonaStudio는 3열을 유지하되 의미를 고정한다.
- 좌측: 자료 큐, 저작 단계, 검수/공개 카탈로그
- 중앙: RAG 자료 등록, 탭별 구조화 편집, 저장/검수 요청
- 우측: 검증, 생성 근거, 마스킹, 승인/반려
- RAG 첨부 파일은 SSOT다. 원문 파일, 마스킹 결과, source/document/chunk hash, 초안 생성 evidence를 한 작업면에서 추적해야 한다.
- 임상·회기·안전 탭은 빈 입력란만 두지 않는다. 각 탭 상단에 작성 목적, 포함할 정보, 피해야 할 입력을 짧게 제시한다.
컴포넌트 규칙
- 파일 입력은 네이티브 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가 같은 최종 스키마로 수렴해야 한다.