vignette/apps/web/design.md

Vignette Web 디자인 결정

전역 디자인의 권위 원본은 ../../docs/DESIGN_CONCEPT.md다. 이 문서는 apps/web에서 이번 변경이 선택한 국소 결정만 기록하며, 색·타이포·간격·radius 토큰을 재정의하지 않는다.

2026-08-27 개선관리 반영

• 관리자 프로토콜 관리는 새 독립 화면이 아니라 기존 /admin/access의 접근 관리 흐름 안에 둔다.
• 기존 관리자 카드·탭·입력·상태 표면을 재사용하고, 새 색·글꼴·장식 모션은 추가하지 않는다.
• 프로토콜 등록·활성화·퇴역 조작은 키보드로 접근할 수 있고 독립 컨트롤은 최소 44×44px을 유지한다.
• 학습자 AI 피드백이 꺼진 회기 리뷰는 AI 파생 카드를 마운트하지 않는다. 축어록, 학습자 입력, 동의·철회·삭제·원음 재생 같은 개인정보 권리 표면은 기존 위계와 위치를 유지한다.
• 320px과 모바일 프로젝트에서도 문서 가로 넘침이 없어야 하며, 오류·재시도 상태는 기존 관리자/리뷰 알림 패턴을 따른다.

국소 구현 소유자는 src/pages/Admin.tsx, src/pages/admin/admin-console.css, src/pages/SessionReview.tsx, src/pages/session-review/다. 공통 토큰과 앱 셸은 각각 src/styles/tokens.css, src/components/shell/의 소유권을 유지한다.

• 2026-08-28 · /learn 성장 지표의 라포 헤더에서 중첩 inset surface를 제거해 같은 패널의 일반 헤더 위계와 정렬했다. 토큰 변경 없음.
• 2026-08-29 · 온보딩 최상단에 현재 Google 이메일과 기존 secondary 계정 전환 동선을 표시해 잘못 선택한 계정에서 즉시 로그아웃할 수 있게 했다. 토큰 변경 없음.
• 2026-08-29 · /teach 검토 큐와 교수자 요약 카드를 --sp-3 간격으로 분리해 두 표면의 위계를 복원했다. 토큰 변경 없음.
• 2026-08-29 · 페이지 탭과 연속 목록 행은 콘텐츠 Surface를 사용하지 않는다. 공통 Tabs가 ARIA 연결·roving focus·방향키를 소유하고, 페이지 CSS는 투명 배치와 도메인별 trigger 표현만 소유한다. 토큰 변경 없음.
• 2026-08-29 · 사용자 아바타는 안전한 웹 URL을 정상 디코딩한 뒤에만 이미지를 노출한다. 빈 값·금지 scheme·404·디코딩 실패는 모든 셸·설정·온보딩에서 동일한 이니셜 fallback으로 닫힌다. first-party 페르소나 아트는 이 계약의 대상이 아니다.
• 2026-08-30 · 활성 회기의 텍스트 컴포저는 입력창·AI 코칭·전송의 하단선을 공유한다. 반응형 높이 차이는 유지하고, 토큰 변경 없이 중첩 액션 행만 하단 정렬한다.
• 2026-08-31 · /learn/practice는 같은 NPC라도 완전히 새로 시작과 선택 사례 이어서 진행을 별도 native radio로 제공한다. 이어가기에는 사례별 누적 회기·대화 턴·시간을 보이고, 복수 사례는 select로 정확한 case를 고른다. 내담자 기억은 기본 닫힌 native foldout에서만 lazy 로드하며 기존 surface·spacing token을 재사용한다.
• 2026-08-30 · /learn/session 시작 화면은 사례 맥락 → 한 가지 첫 발화 초점 → 준비·대화·리뷰·재연습 흐름으로 읽힌다. 기존 1~4개 목표 선택, 처방 재연습, 동의·음성 URL 계약과 실패 폐쇄 동작은 유지하고 새 색·글꼴·장식 모션은 추가하지 않는다.
• 2026-08-30 · 목표 선택은 핵심 1개 · 보조 0~3개를 명시하고, 보조 목표를 제거하지 않고 핵심 순서만 바꿀 수 있게 한다. 짧은 데스크톱 높이에서는 같은 선택을 native select로 압축하고 시작 행동을 안전한 sticky bar에 둬 4개 목표와 CTA가 겹치지 않게 한다. 모든 조작은 44px 이상이며 토큰·기존 payload 계약은 유지한다.
• 2026-08-30 · 모바일은 DOM과 같은 사례 → 학습 → 재연습 순서로 읽고, 시작 CTA는 bottom bar와 safe area 위에 고정한다. 키보드 단축키 도움말과 코치 근거/이력은 열 때 포커스를 받고 Tab 순환·닫은 뒤 호출자 복원을 보장한다.
• 2026-08-30 · 공통 셸의 첫 키보드 정지는 본문으로 건너뛰기다. 링크는 포커스될 때만 보이고, 어느 역할·화면에서도 식별 가능한 main으로 포커스를 옮긴다.