27 lines
5.1 KiB
Markdown
27 lines
5.1 KiB
Markdown
# Vignette Web 디자인 결정
|
||
|
||
전역 디자인의 권위 원본은 [`../../docs/DESIGN_CONCEPT.md`](../../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으로 포커스를 옮긴다.
|
||
- 2026-09-12 · 공통 셸은 역할별로 가장 자주 쓰는 3개 목적지를 모바일 하단 내비에 먼저 두고, 나머지 허용 목적지는 명시적 `전체 메뉴` native dialog로 제공한다. 721–1024px에서는 168px 레일로 메뉴 텍스트를 보존하며, 모바일 역할 전환은 현재 역할명이 보이는 native select(접근성 이름: `공간 선택`)로 한다. `Ctrl+W`·`Ctrl+N`·`Ctrl+T`의 브라우저 예약 단축키 가로채기를 제거하고, 기존 Alt 단축키는 보존하며 `Alt+H`는 역할 홈으로 이동한다. 로그인 카피는 계정·저장소 설명 대신 상담 연습과 회고라는 역할 목적을 먼저 말한다. 기존 토큰·권한별 메뉴 필터·라우트 계약은 유지한다.
|