세션 화면 디자인 개편
This commit is contained in:
Yun Chan
parent
04a5f485ed
commit
12bdc59497
13 changed files with 1430 additions and 386 deletions
|
|
@ -514,27 +514,32 @@ function useAvatarMotion(state, affect, analyser) {
|
|||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────────────┐
|
||||
│ 상단 바 (56px) 좌:세션 제목/시나리오 중앙:회기 단계 우:경과시간·종료 │
|
||||
│ 상단 바 (80px) 좌:기록 중앙:회기 상태·단계·시간 우:학습 홈 │
|
||||
├──────────────────┬──────────────────────────────────┬──────────────────────┤
|
||||
│ LEFT (320px) │ CENTER (flexible) │ RIGHT (300px) │
|
||||
│ LEFT (326px) │ CENTER (flexible) │ RIGHT (357px) │
|
||||
│ ───────────── │ ───────────────── │ ───────────── │
|
||||
│ 회기 단계 트랙커 │ 내담자 아바타 / 음성 STAGE │ 피드백 신호 패널 │
|
||||
│ (라포→탐색→ │ (어두운 배경, 중앙 집중) │ (은은한, 평시 접힘) │
|
||||
│ 개입→정리) │ │ │
|
||||
│ 내담자 컨텍스트 │ [ 아바타 + 음성 오브 ] │ ── 내담자 상태 ── │
|
||||
│ 카드 │ │ ── 라이브 신호 ── │
|
||||
│ │ 실시간 자막 (아래→위 흐름) │ (최대 1개, 페이드) │
|
||||
│ │ │ ── 셀프 노트 ── │
|
||||
│ 내담자 컨텍스트 │ [ 아바타 + 이름·사례 요약 ] │ AI 코치·코칭 기회 │
|
||||
│ 회기 단계 트랙커 │ [ 현재 표정·발화 상태 ] │ 코칭 포인트 │
|
||||
│ (라포→탐색→ │ │ 음성·AI 응답 상태 │
|
||||
│ 개입→정리) │ 실시간 자막 (아래→위 흐름) │ ── 관찰 신호 ── │
|
||||
│ 세션 진행 │ │ 방어·개방·라포 게이지 │
|
||||
│ 시간·남은시간·턴 │ │ ── 안전 점검 ── │
|
||||
├──────────────────┴──────────────────────────────────┴──────────────────────┤
|
||||
│ 하단 컨트롤 바 (80px) 마이크 · 일시정지 · [몰입│은은│코칭] · 회기 종료 확인 │
|
||||
│ 하단 컨트롤 바 (116px) 마이크 · [몰입│상태 신호│코칭] · 일시정지 · 회기 종료 │
|
||||
└──────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**비율 의도: 시각적 무게 = 주의 배분.** 내담자 stage 60%, 평가 패널 15%(평시 대부분 접힘). 화면은 대시보드가 아니라 상담실이다.
|
||||
|
||||
활성 세션도 전역 `data-theme`와 `tokens.css` 의미 토큰을 그대로 따른다. 세션 전용 로컬 팔레트로 `--bg-surface`·`--text-*`·`--accent`를 다시 정의하지 않으며, 패널과 AI 코치 인셋은 공통 `Surface`가 소유한다. 라이트에서는 종이·글래스 무대, 다크에서는 차콜·세이지 무대로 함께 전환한다.
|
||||
|
||||
라이트 데스크톱의 시각 기준은 1536×1024 보태니컬 워크스페이스다. 좌·우 레일은 작은 카드를 쌓지 않고 각각 하나의 연속 표면으로 보이며, 중앙만 인물 무대와 자막으로 분리한다. 장식은 `apps/web/public/session-botanical/leaf-1.webp`~`leaf-5.webp`의 투명 수채화 자산을 좌우 캔버스와 아바타 뒤에 배치한다. 자산은 상호작용과 정보보다 뒤에 놓고 `pointer-events:none`을 유지하며, 다크 테마에서는 밝기·채도를 낮춘다.
|
||||
|
||||
**반응형:**
|
||||
- 태블릿(768~1279px): RIGHT 패널이 오버레이 drawer(평시 숨김, 우상단 신호 도트만). LEFT 280px.
|
||||
- 모바일/RN(<768px): 단일 컬럼. stage 상단 고정(40vh), 자막 스크롤, 단계는 상단 가는 진행선, 평가는 하단 시트(bottom sheet). 컨트롤 바 하단 고정.
|
||||
- 중간 폭(881~1180px): 단계·현재 신호는 상단 회기 요약으로 압축한다. 평시 RIGHT 진단 레일은 숨기되 코칭 모드에서는 AI 코치 카드만 하단 전폭으로 보존한다.
|
||||
- 모바일(≤880px): 단일 컬럼. stage·자막을 우선하고 단계·상태는 상단 요약으로 압축한다. 코칭 모드에서는 진단·장식을 제외한 AI 코치 카드만 본문 아래에 유지한다.
|
||||
- 넓지만 짧은 화면(≥1280px, 높이 ≤820px): 스테이지를 약 182px까지 압축해 자막을 주 작업영역으로 보존하고, 발화 예시·보조 흐름 설명을 먼저 접는다.
|
||||
- 그 외 짧은 높이(≤700px): AI 코치의 판단·본문·근거/이력 액션을 먼저 보존하고 발화 예시와 보조 흐름 설명을 접는다.
|
||||
|
||||
### 5.2 중앙 STAGE — 음성 오브 (Voice Orb, 4상태)
|
||||
|
||||
|
|
@ -634,6 +639,9 @@ LEFT 패널 세로 트랙커 + 상단 바 가로 미니. **현재 단계만 또
|
|||
[ 알겠어요 ] ← 가볍게 dismiss
|
||||
```
|
||||
- `--accent-tint` 배경 틴트 블록(border 없음), 13~14px. 예시 문장 `--ink-2` 이탤릭. 한 번에 1개, 새 힌트 오면 이전 것 교체(stack 안 함).
|
||||
- 우측 레일의 순서는 **AI 코치 → 현재 신호 → 연결 상태**다. 코치가 장식성 신호나 운영 상태 아래로 밀려 뷰포트 밖에서 잘리면 안 된다.
|
||||
- 연결 상태는 `음성`·`AI 응답` 두 값만 짧게 표시한다. 화면 모드는 하단 토글이 이미 소유하므로 우측에서 중복하지 않는다.
|
||||
- 라이브 신호 영역에는 의미 없는 equalizer/막대 파형을 두지 않는다. 최근 흐름 도트는 보조 정보이며 코치 가시성을 침범하면 먼저 접는다.
|
||||
- **위험 신호만 예외적 즉시 표시(모드 무관):** 자해·위기 언급을 학습자가 놓치면 모드 무관하게 우측에 차분한(빨강 아닌 `--warn-solid`) 알림 — "안전 점검: 방금 위기 신호가 있었어요." 교육적으로 놓치면 안 되는 지점이라 항상 노출.
|
||||
|
||||
#### 내담자 상태 미터 (우측 상단) — "반응 읽기 연습"의 거울
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue