102 lines
8.8 KiB
Markdown
102 lines
8.8 KiB
Markdown
# Vignette dark UI refresh prompts — 2026-06-28
|
|
|
|
목적: 기존 `03-session-responsive.png`가 다크 스테이지와 라이트 패널을 섞어 보여서, 현재 구현된 dark active UI와 맞는 디자인 컨셉 이미지를 다시 생성했다. 추가로 회기 리뷰와 학습자 홈도 같은 제품 언어로 보정했다.
|
|
|
|
## 근거
|
|
|
|
- 실제 구현 기준: `apps/web/src/pages/Session.tsx`, `apps/web/src/pages/session/session.css`, `apps/web/src/styles/tokens.css`
|
|
- 최신 검증 캡처: `docs/design-verification/full-pages/03-session-active-desktop.png`, `03-session-active-tablet.png`, `03-session-active-mobile.png`
|
|
- 디자인 SSOT: `docs/DESIGN_CONCEPT.md`, `docs/dev_dashboard.html`
|
|
- UX 원칙: 상태 가시성, progressive disclosure, 한 화면 한 의도, 대비 기준
|
|
- Nielsen Norman Group, 10 Usability Heuristics: https://www.nngroup.com/articles/ten-usability-heuristics/
|
|
- Nielsen Norman Group, Progressive Disclosure: https://www.nngroup.com/articles/progressive-disclosure/
|
|
- Material Design dark theme guidance: https://m2.material.io/design/color/dark-theme.html
|
|
- WCAG contrast guidance: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
|
|
|
|
## 산출물
|
|
|
|
- `docs/design-concepts/generated/03-session-responsive-v2-dark-unified.png`
|
|
- `docs/design-concepts/generated/04-session-review-responsive-v2-dark-unified.png`
|
|
- `docs/design-concepts/generated/02-learner-home-responsive-v2-dark-unified.png`
|
|
|
|
## 공통 프롬프트 규칙
|
|
|
|
- 운영 기본은 dark 화면이다. active UI에 off-white, beige, light card를 섞지 않는다.
|
|
- 기본 팔레트: app `#0E1714`, panel `#17231F`, input `#22302C`, stage `#0E1614`, hairline `#2A363C`, accent `#6FB3A4`, clay `#CC8F77`.
|
|
- 진짜 기능명만 쓴다. 장식용 hero, marketing copy, 가짜 과장 차트는 금지한다.
|
|
- 학습자는 지금 해야 할 한 가지 행동을 즉시 알아야 한다.
|
|
- 실시간 피드백은 중앙 과업을 가로막지 않는 주변 신호로 둔다.
|
|
- 주요 한글 라벨은 읽히게 하고, 작은 본문은 UI 질감 수준이면 된다.
|
|
|
|
## 03-session-responsive v2 prompt
|
|
|
|
```text
|
|
Use case: ui-mockup
|
|
Asset type: responsive product UI concept sheet for Vignette live counseling session, 16:9 wide raster image.
|
|
Primary request: Create a polished product UI concept sheet showing the live counseling session screen in desktop, tablet, and mobile mockups on one wide canvas. This is not a landing page. It must feel like a real immersive clinical training application currently in use.
|
|
|
|
Reference behavior from the current app: live counseling session has a left client-context column, a phase tracker, a central dark client stage with a semi-realistic client avatar bust and a breathing voice orb, a real-time transcript, a text fallback composer, a live-signal rail, client observation meters, safety status, and a bottom control bar with mic state, pause, screen mode segmented control, and session end.
|
|
|
|
Required layout:
|
|
- Desktop mockup: three-region layout. Left narrow rail contains “내담자 컨텍스트” and “회기 진행”. Center has dark client stage on top, “실시간 자막” transcript below, and “학습자 발화를 입력하세요.” composer. Right rail has “라이브 신호”, “관찰 신호”, and “안전 점검”. Bottom control bar shows “마이크 꺼짐”, segmented control “몰입 / 상태 신호 / 코칭”, “일시정지”, and “회기 종료”.
|
|
- Tablet mockup: top compact context strip, stage and transcript stacked, controls at bottom.
|
|
- Mobile mockup: compact vertical flow with context chips, avatar stage, transcript, input, and thumb-friendly controls.
|
|
|
|
Visual style:
|
|
- Unified dark theme only. Use #0E1714 app background, #17231F panels, #22302C inputs, #0E1614 stage, #2A363C hairlines.
|
|
- Sage teal accent #6FB3A4 for active state and focus, terracotta #CC8F77 only for learner/client voice warmth, muted amber only for safety attention.
|
|
- No off-white or beige panels anywhere in the active session UI. No light theme mixed into the image.
|
|
- Quiet clinical training room, not a sci-fi dashboard. Subtle paper/noise texture may exist inside dark surfaces only.
|
|
- Typography feels like Pretendard: Korean UI, strong weight hierarchy, compact labels, tabular timer.
|
|
- Corners are modest: 6-12 px, not bubbly. Hairline borders, very soft shadows.
|
|
|
|
UX principles to embody:
|
|
- One screen, one intent: listening and responding to the client.
|
|
- Visibility of system status: phase, mic state, live signal, safety state are readable at a glance.
|
|
- Progressive disclosure: real-time feedback is quiet and peripheral, not intrusive.
|
|
- Strong contrast for important text; no low-contrast tiny labels for primary controls.
|
|
|
|
Text hints: “라이브 상담 세션”, “내담자 컨텍스트”, “회기 진행”, “라포”, “실시간 자막”, “라이브 신호”, “관찰 신호”, “안전 점검”, “학습자 발화를 입력하세요.”, “마이크 꺼짐”, “상태 신호”, “코칭”, “회기 종료”.
|
|
|
|
Avoid: mixed light/dark theme, white cards, beige side panels, bright dashboards, neon glow, sci-fi HUD, giant decorative hero, stock photo background, marketing copy, emoji, red-heavy warnings, score fireworks, radar charts, nested cards, cartoon icons, watermark, browser chrome.
|
|
```
|
|
|
|
## 04-session-review v2 prompt
|
|
|
|
```text
|
|
Use case: ui-mockup
|
|
Asset type: responsive product UI concept sheet for Vignette session review, 16:9 wide raster image.
|
|
Primary request: Create a polished product UI concept sheet showing the completed session review screen in desktop, tablet, and mobile mockups on one wide canvas. This is a reflective clinical education workbench, not a score dashboard and not a marketing page.
|
|
|
|
Reference behavior from the current app and source: session review includes session headline metadata, audio replay, PDF export, emotion balance timeline, phase flow, annotated transcript, technique labels, supervisor comments, good moments, growth points, next utterance suggestion, and case conceptualization worksheet.
|
|
|
|
Visual style:
|
|
- Unified dark theme only. Use #0E1714 app background, #17231F panels, #22302C nested surfaces, #2A363C dividers, #6FB3A4 sage teal accents.
|
|
- Use muted slate-blue for AI/supervisor notes, muted amber only for watch items, terracotta sparingly for client-side warmth.
|
|
- No off-white or beige panels anywhere. No bright white review cards.
|
|
- Calm, dense but readable clinical training record.
|
|
|
|
Text hints: “회기 리뷰”, “감정 밸런스 타임라인”, “회기 흐름”, “세션 트랜스크립트”, “좋았던 순간”, “다음 회기 개선점”, “슈퍼바이저 코멘트”, “오디오 다시 듣기”, “PDF 내보내기”, “사례개념화 워크시트”, “근거 보기”, “다음 발화 제안”.
|
|
|
|
Avoid: mixed light/dark theme, white cards, beige paper background, score fireworks, gamified badges, radar charts, dense red warnings, decorative hero illustration, stock-photo desk, emoji, cartoon icons, browser chrome, watermark.
|
|
```
|
|
|
|
## 02-learner-home v2 prompt
|
|
|
|
```text
|
|
Use case: ui-mockup
|
|
Asset type: responsive product UI concept sheet for Vignette learner home / practice dashboard, 16:9 wide raster image.
|
|
Primary request: Create a polished product UI concept sheet showing the learner home screen in desktop, tablet, and mobile mockups on one wide canvas. This is the first working screen after login: the learner chooses or continues a counseling practice session. It must be a real app workbench, not a landing page.
|
|
|
|
Reference behavior from the current app and source: learner home has persona selection, selected client preview, presenting problem, difficulty, counseling approach, voice/session info, start new session or continue action, active/review/total session stats, recent sessions, review-ready items, and AI coach recommendations.
|
|
|
|
Visual style:
|
|
- Unified dark theme only. Use #0E1714 app background, #17231F panels, #22302C cards/inputs, #2A363C hairlines, #6FB3A4 sage teal CTA and active states.
|
|
- Terracotta #CC8F77 only for client warmth or small persona initial. Amber only for “권장 액션”/review wait state.
|
|
- No light theme surfaces, no white cards, no beige sections.
|
|
- Dense but calm SaaS/education workbench. Prioritize scanning, comparison, and repeated action.
|
|
|
|
Text hints: “오늘의 회기를 준비합니다.”, “연습 대상”, “내담자 목록”, “서연(가명)”, “고2”, “우울/자살사고”, “주호소”, “난도”, “접근”, “음성”, “새 회기 시작”, “이어하기”, “기존 회기”, “리뷰 대기”, “다음 연습 추천”, “최근 기록”, “AI 코치”, “권장 액션”.
|
|
|
|
Avoid: mixed light/dark theme, bright white panels, beige cards, marketing hero, oversized illustration, empty decorative graph, gamified leaderboard, emoji, cartoon mascots, red-heavy alerts, browser chrome, watermark.
|
|
```
|