Vignette 디자인 시안 이미지 생성 프롬프트

작성일: 2026-06-27

목적: 주요 화면의 실제 기능을 기준으로 모바일, 태블릿, PC 반응형 디자인 시안을 만든다. 결과 이미지는 구현 확정안이 아니라 docs/dev_dashboard.html에 넣을 디자인 지침과 시각 방향 후보로 쓴다.

공통 방향:

컨셉: 불안한 사람을 다루는 사람을 위한, 차분한 임상 도구.
톤: 65% 임상 신뢰, 35% 교육적 따뜻함.
팔레트: warm off-white #FBFAF8, ink green #1C2A2A, sage teal #3E7A6E, muted terracotta #B0735C, slate blue info.
형태: 6-12px radius, hairline border, 아주 약한 그림자. 과한 글로우, 보라/블루 그라데이션, 랜딩페이지식 카드 덤프 금지.
이미지 조건: 반드시 래스터 UI 이미지. SVG, 벡터, 와이어프레임, 로고 시트, 장식용 그라데이션 오브 금지.
시트 구성: 각 화면은 한 장의 16:9 raster concept sheet 안에 PC, tablet, mobile 3개 디바이스 목업을 함께 보여준다.

화면별 기능 추출

화면	핵심 기능	시각 의도
로그인/진입	Google OAuth, 승인 도메인 안내, 로컬 테스트 역할 선택, 교육용 비치료 고지	신뢰와 보안이 먼저 보이는 조용한 진입 화면
학습자 홈	내담자 선택, 주호소/난도/접근/음성 정보, 새 회기 시작, 진행 중/리뷰 가능/누적 회기, 기존 회기 이어가기	오늘 시작할 연습이 명확한 상담 연습 작업대
상담 세션	회기 단계, 내담자 컨텍스트, 반구상 아바타, 음성 오브, 실시간 자막, 텍스트 폴백, 몰입/상태신호/코칭 모드, 안전 점검	화면 중심은 내담자, 피드백은 조용한 신호
회기 리뷰	한 문장 요약, 감정 밸런스 타임라인, 회기 흐름, 축어록, 기법 태그, 좋았던 순간, 개선점, 오디오/PDF	점수 폭격이 아니라 근거 기반 회고
교수 콘솔	리뷰 대기 큐, 담당 코호트 현황, 페르소나 검수 승인/반려, 종료 회기 목록, 최근 회기 테이블	awareness가 아니라 triage
관리자 콘솔	운영 홈: 서비스 상태, 교육 진행, 온라인 사용자, 엔진/DB/음성/리뷰 리소스, AI 비용, 헬스 샘플 이력, 운영 티켓 요약. 하위 메뉴: 사용자 관리, 접근 권한, 운영 티켓 처리 큐	시스템 건강성 관측과 관리 작업을 분리
설정	계정, 관리자 AI 운영 설정, 테마, 음성 프리셋, 말하기 속도, 알림	역할별 설정만 보이는 조용한 환경 관리
온화한 이미지 요소	종이 질감, 상담실의 책상/노트/식물/차분한 빛, 임상 교육 도구의 배경 요소	UI 뒤에서만 느껴지는 따뜻함
반구상 아바타/패턴 요소	교육용 가상 내담자 카드, 부드러운 광배, 정서 파츠 느낌, 배경 패턴	실사 오인과 유아적 일러스트를 모두 피함

생성 프롬프트

Use case: ui-mockup Asset type: responsive product UI concept sheet for Vignette login Primary request: Create a polished raster UI concept sheet showing the Vignette login entry page in three device mockups: desktop PC, tablet, and mobile, side by side on one 16:9 canvas. Screen functions: Google OAuth login, allowed school domain notice, local test role selector for learner teacher admin, secure session copy, education-only non-treatment notice. Style/medium: realistic product UI screenshot mockup, raster bitmap image, calm Korean clinical education SaaS interface, not a wireframe. Composition/framing: left desktop mockup largest, tablet middle, mobile right; each device shows the same page adapted responsively. Desktop uses a dark muted stage panel on the left and login panel on the right; tablet stacks content; mobile compresses to a single clean column. Visual elements: subtle warm paper texture, small security shield icon style, quiet school account entry, no decorative blobs. Color palette: warm off-white #FBFAF8, ink green #1C2A2A, sage teal #3E7A6E, muted terracotta #B0735C, low-saturation slate. Text hints: Korean UI labels such as "Vignette", "상담 시뮬레이션 학습", "학교 Google 계정으로 계속", "허용 도메인", "로컬 테스트". Constraints: raster image only; no SVG; no vector art; no wireframe; no logo sheet; no purple gradient; no emoji; no watermark.

02-learner-home-responsive

Use case: ui-mockup Asset type: responsive product UI concept sheet for learner home Primary request: Create a polished raster UI concept sheet showing the learner home page in desktop PC, tablet, and mobile device mockups on one 16:9 canvas. Screen functions: persona list, selected client preview, presenting problem summary, difficulty, counseling approach, voice preset, start new session button, active/review/total session stats, previous sessions with continue/review actions. Style/medium: realistic product UI screenshot mockup, raster bitmap, quiet clinical training workspace. Composition/framing: desktop shows a left persona list and wide selected-client workspace; tablet turns persona list into a two-column selector; mobile uses horizontal persona chips and compact practice card. Visual elements: semi-figurative client initial card, warm paper surface, subtle counseling notebook image area, restrained data chips. Color palette: warm off-white, sage teal accent, terracotta warmth, slate text, hairline dividers. Text hints: Korean labels such as "오늘의 회기를 준비합니다", "연습 대상", "새 회기 시작", "기존 회기", "리뷰 가능". Constraints: raster image only; no SVG; no vector art; no generic landing hero; no oversized decorative illustration; no emoji; no watermark.

03-session-responsive

Use case: ui-mockup Asset type: responsive product UI concept sheet for live counseling session Primary request: Create a polished raster UI concept sheet showing the live counseling session screen in desktop PC, tablet, and mobile mockups on one 16:9 canvas. Screen functions: vertical phase tracker, client context, dark client stage, semi-figurative avatar bust, voice orb, real-time transcript, text fallback composer, live signal rail, client state meters, safety check, bottom control bar with mic pause feedback mode and slide-to-end. Style/medium: realistic product UI screenshot mockup, raster bitmap, immersive clinical training tool. Composition/framing: desktop has 3-column counseling room layout; tablet collapses side panels into top context and bottom controls; mobile shows avatar stage, transcript, compact signal strip, and large thumb-friendly input. Visual elements: soft raster avatar bust with 35-45 percent realism, gentle breathing light aura, dark muted charcoal-green stage, warm notebook texture in panels. Color palette: dark stage #1E2724, sage teal, terracotta for learner voice, off-white panels, muted slate blue info. Text hints: Korean labels such as "회기 진행", "실시간 자막", "라이브 신호", "관찰 신호", "몰입", "상태 신호", "코칭". Constraints: raster image only; no SVG; no vector art; no sci-fi dashboard; no red warning decoration except small safety state; no emoji; no watermark.

04-session-review-responsive

Use case: ui-mockup Asset type: responsive product UI concept sheet for session review Primary request: Create a polished raster UI concept sheet showing the session review page in desktop PC, tablet, and mobile mockups on one 16:9 canvas. Screen functions: review headline summary, session metadata, audio replay, PDF export, emotion valence timeline, phase flow, annotated transcript, technique labels, supervisor callouts, good moments, growth points, next utterance suggestion. Style/medium: realistic product UI screenshot mockup, raster bitmap, reflective clinical education review surface. Composition/framing: desktop has wide transcript column and right insight rail; tablet stacks charts above transcript; mobile uses tabs/sections and compact annotated turns. Visual elements: line chart with minimal grid, transcript timeline nodes, calm supervisor note cards, subtle paper texture. Color palette: off-white, sage teal for progress, slate blue for AI notes, amber for watch items, very restrained terracotta. Text hints: Korean labels such as "회기 리뷰", "감정 밸런스 타임라인", "세션 트랜스크립트", "좋았던 순간", "다음 회기 개선점". Constraints: raster image only; no SVG; no vector art; no radar chart; no score fireworks; no emoji; no watermark.

05-professor-responsive

Use case: ui-mockup Asset type: responsive product UI concept sheet for professor console Primary request: Create a polished raster UI concept sheet showing the professor console in desktop PC, tablet, and mobile mockups on one 16:9 canvas. Screen functions: review queue, cohort session counts, persona review approval/rejection queue, ended sessions awaiting review, recent session table. Style/medium: realistic product UI screenshot mockup, raster bitmap, calm instructor triage dashboard. Composition/framing: desktop uses full-width triage strip plus left approval queue and right recent sessions table; tablet stacks queue then table; mobile shows prioritized cards and compact rows. Visual elements: small risk dots, low-noise tables, persona approval cards, no alarmist styling. Color palette: off-white, sage teal, muted slate blue, small controlled amber/red only for actual intervention. Text hints: Korean labels such as "교수 콘솔", "검토 큐", "페르소나 검수", "검토 대기", "최근 세션". Constraints: raster image only; no SVG; no vector art; no gamified leaderboard; no red-heavy dashboard; no emoji; no watermark.

06-admin-responsive

Use case: ui-mockup Asset type: responsive product UI concept sheet for admin operations console Primary request: Create a polished raster UI concept sheet showing the admin console in desktop PC, tablet, and mobile mockups on one 16:9 canvas. Screen functions: service health summary, engine mode status, service resource rows, progress meters, user creation form, user search, user role/cohort editing, save/deactivate actions. Style/medium: realistic product UI screenshot mockup, raster bitmap, restrained operations console for a clinical education platform. Composition/framing: desktop uses status strip, service resource table, sidecar user creation, editable user list; tablet stacks sections; mobile uses collapsible service rows and full-width user cards. Visual elements: health dots, quiet progress bars, compact forms, audit-friendly user rows. Color palette: warm neutral surfaces, slate admin tone, sage teal focus, amber/deep red only for degraded/down states. Text hints: Korean labels such as "운영 콘솔", "서비스 상태", "서비스 리소스", "사용자 관리", "사용자 등록". Constraints: raster image only; no SVG; no vector art; no neon ops dashboard; no excessive charts; no emoji; no watermark.

07-settings-responsive

Use case: ui-mockup Asset type: responsive product UI concept sheet for settings Primary request: Create a polished raster UI concept sheet showing the settings page in desktop PC, tablet, and mobile mockups on one 16:9 canvas. Screen functions: account profile, role badge, admin AI engine operation settings, theme toggle, voice preset selection, speech rate slider, notification toggles. Style/medium: realistic product UI screenshot mockup, raster bitmap, calm settings workspace. Composition/framing: desktop shows a left settings rail and right forms; tablet keeps rail compact; mobile turns sections into stacked panels with sticky section labels. Visual elements: account avatar initial, segmented engine mode control, voice preset cards, sliders and toggles. Color palette: off-white, sage teal, terracotta accent sparingly, slate text, hairline dividers. Text hints: Korean labels such as "설정", "계정", "AI 운영", "테마", "음성", "알림". Constraints: raster image only; no SVG; no vector art; no decorative app-store settings page; no emoji; no watermark.

08-warm-visual-elements

Use case: stylized-concept Asset type: raster visual element direction board for Vignette UI backgrounds Primary request: Create a warm raster image element board for the Vignette platform: subtle paper texture backgrounds, quiet counseling desk objects, notebook pages, soft plant shadow, warm indirect light, small non-distracting educational motifs. Style/medium: soft bitmap editorial illustration mixed with realistic material texture, not vector, not SVG. Composition/framing: 16:9 board with several rectangular crops showing background treatments and UI-safe negative space. No full UI screens, just visual materials. Lighting/mood: quiet morning light, clinical but warm, non-decorative. Color palette: warm paper, sage teal, muted terracotta, slate ink, low contrast. Constraints: raster image only; no SVG; no vector art; no obvious stock-photo look; no people; no readable text; no watermark; no gradient blobs.

09-avatar-pattern-elements

Use case: stylized-concept Asset type: raster visual direction board for semi-figurative client avatar and gentle pattern elements Primary request: Create a raster visual direction board for educational virtual client avatars and supporting patterns for Vignette. Show semi-figurative bust cards with low realism, soft breathing aura backgrounds, expression part hints for eyes and mouth, and subtle paper patterns suitable for UI panels. Style/medium: painterly raster UI illustration, warm clinical education tone, not vector, not SVG. Composition/framing: 16:9 board with three avatar-card variations and several small pattern crops; generous margins; no actual production assets. Lighting/mood: calm, empathetic, restrained. Color palette: sage teal, terracotta, warm off-white, muted slate, natural skin tones with low saturation. Constraints: raster image only; no SVG; no vector art; no photorealistic patient; no cute cartoon style; no mascot; no text except tiny UI-like labels; no watermark.

14 KiB Raw Blame History