yunchan/d3ro-voice
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions
d3ro-voice/docs/design-refs/README.md
Yun Chan e24bb8378c 초기 프로젝트 설정: 하네스 시스템 + 설계서 + RE 노하우 
- 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개 문서
2026-04-05 01:03:03 +09:00

1.2 KiB
Raw Blame History

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/태그
  • 타이포그래피: 모노스페이스(상태 표시) + 시스템 폰트(본문)