e24bb8378c
- CLAUDE.md: 프로젝트 규칙, 기술 스택, 코딩 규칙, 페이즈 로드맵 - .claude/settings.json: 권한, 강제 훅 (매 프롬프트 설계서 규칙 주입) - .claude/skills/: implement-phase, review-phase, scaffold, test-commit, debug - .claude/agents/: electron-architect, voice-pipeline-expert, ui-specialist - docs/design/00-09: 마스터 아키텍처, 서비스 명세(16개), IPC(113채널), DB스키마, UI컴포넌트, 검증리포트, 외부엔진연동, 갭분석, VoiceMode패턴, 디자인시스템, 히스토리팝업 - docs/phases/1-7+3.5: 전체 구현 페이즈 문서 - docs/re-findings/: Speakly RE 노하우 5개 문서
26 lines
1.2 KiB
Markdown
26 lines
1.2 KiB
Markdown
# D3RO-VOICE 디자인 레퍼런스
|
|
|
|
## 시안 A: Meteorological Instrument (레트로 인스트루먼트)
|
|
파일: `instrument-panel.html`
|
|
- CRT 디스플레이 (WebGL 셰이더, 스캔라인, 비네팅, 글리치)
|
|
- 앰버 인광색 (#f25b29), 다크 섀시 (#242528)
|
|
- 물리 다이얼 (드래그 회전), LED 상태등
|
|
- 메탈 텍스처 (반복 방사형 그라디언트)
|
|
- 각인 텍스트 (METEOROLOGICAL SYS.)
|
|
|
|
## 시안 B: VoiceOps Dashboard (모던 다크 대시보드)
|
|
파일: `voiceops-dashboard.html`
|
|
- 다크 카드 레이아웃 (#242427, border-radius: 22px)
|
|
- 태그 시스템 (STT, TTS, LIVE, COMPLETE, PROCESSING)
|
|
- 실시간 웨이브폼 바 (CSS 애니메이션)
|
|
- 라이브 전사 텍스트 (faded 부분 결과)
|
|
- 서비스 상태 패널
|
|
- 블러 처리 + 스피너 (처리 중)
|
|
|
|
## D3RO-VOICE 디자인 방향
|
|
두 시안을 융합:
|
|
- **전체 레이아웃**: 시안 B의 카드 그리드 + 다크 테마
|
|
- **녹음 상태 UI**: 시안 A의 CRT 느낌 + 시안 B의 웨이브폼 바
|
|
- **색상**: 시안 A의 앰버(#f25b29) + 시안 B의 다크(#19191b, #242427)
|
|
- **인터랙션**: 시안 A의 다이얼(설정), 시안 B의 카드 hover/태그
|
|
- **타이포그래피**: 모노스페이스(상태 표시) + 시스템 폰트(본문)
|