88 lines
7 KiB
Markdown
88 lines
7 KiB
Markdown
# design.md — Everything2Everything Windows 11 Flagship Acrylic & Neo Glass Design System
|
|
|
|
`designpaca` 스튜디오 파이프라인(0~6단계)과 사용자 인터뷰를 완벽히 준수하여 Everything2Everything의 시각 언어, 레이아웃 그리드, 큐 항목 카드, 컨트롤 덱을 개편한 디자인 시스템 SSOT 문서입니다.
|
|
|
|
---
|
|
|
|
## 1. 브리프 게이트 (0단계: 사용자 인터뷰 확정)
|
|
- **무엇을**: Everything2Everything (.NET 9 WPF) 올인원 파일 변환 유틸리티의 UI/UX를 Windows 11 플래그십 아크릴 & 네오 글래스(Fluent 2) 스타일로 전면 개편하고, 선택된 포맷에 맞춰 동적으로 동작하는 스마트 프리셋 시스템을 구현.
|
|
- **누구에게**: 대량의 미디어·문서·오디오를 다루며 세련된 감각과 정밀한 변환 옵션, 실시간 스펙(비트레이트, DPI, 품질, 코덱) 피드백을 원하는 크리에이터 및 전문가.
|
|
- **제약**: .NET 9 WPF (`Wpf.Ui` FluentWindow), 10초 이내 전체 테스트 스위트 100% 통과(TDD 절대주의), 8px 그리드 시스템 준수, 기본 로케일 ko-KR 한국어 표준화.
|
|
- **사용자 인터뷰 확정 결정사항**:
|
|
1. **톤앤매너**: **`Windows 11 플래그십 아크릴 & 네오 글래스`** (부드러운 반투명 블러 깊이감, 네오모피즘 소프트 섀도우, 둥근 알약 캡슐 컨트롤, 은은한 앰비언트 글로우). 기존의 밋밋한 다크 박스 스타일을 완전히 탈피.
|
|
2. **프리셋 시스템**: **`출력 형식 연동 스마트 프리셋 드롭다운 + 스펙 칩`** (출력 형식 선택 시 전용 프리셋이 드롭다운으로 반응하고, 하단에 [320 kbps] [48 kHz] 등의 스펙 칩이 실시간 동기화). 기존의 무관한 고정 4개 버튼 완전 퇴출.
|
|
3. **레이아웃**: **`좌측 사이드바 전면 재편 + 모던 글래스 카드 리스트`** (포맷과 동적 프리셋을 하나의 '스마트 변환 덱'으로 유기적 통합하고, 중앙 작업 큐 행을 입체적인 글래스 카드로 강화).
|
|
|
|
---
|
|
|
|
## 2. 레퍼런스 조사 및 6축 해체 (1단계)
|
|
| 슬롯 | 대상 및 출처 | 가져온 핵심 원리 (6축 기반) |
|
|
|---|---|---|
|
|
| **R1 (구조)** | **Windows 11 Fluent 2 & Apple macOS Media Converter** | **유기적 포맷-프리셋 바인딩**: 출력 형식을 고르면 그 포맷의 특화 옵션과 프리셋이 자동으로 하위 컴포넌트에 주입되는 반응형 덱 구조. |
|
|
| **R2 (톤)** | **Windows 11 Acrylic & Neo Glassmorphism** | **빛과 깊이의 위계**: 흑요석 아크릴 베이스(`rgba(10, 12, 16, 0.9)`), 카드 상단 림라이트 보더(`LinearGradient` 14% -> 4%), 부드러운 앰비언트 소프트 섀도우(Blur 16, Opacity 0.35), 둥근 알약 캡슐(Pill CornerRadius 14~16px). |
|
|
| **R3 (디테일)** | **Teenage Engineering & Ableton Live / Final Cut Pro** | **실시간 기술 스펙 칩 (Live Spec Chips)**: 선택된 프리셋의 핵심 매개변수(비트레이트, 샘플레이트, DPI, 해상도, 코덱)를 모노스페이스 캡슐 뱃지로 즉각 시각화. |
|
|
|
|
---
|
|
|
|
## 3. 방향 결정 (2단계)
|
|
> **"단순한 어두운 창이 아닌, 빛과 유리가 깃든 최신 윈도우 11 플래그십 마스터링 덱"**
|
|
|
|
- **Aesthetic Direction**: Windows 11 Flagship Acrylic & Neo Glass
|
|
- **감수한 리스크 (The One Risk Taken)**:
|
|
- 기존의 평평한 단색 박스를 버리고, **부드러운 아크릴 심도와 네오 섀도우, 림라이트 그라디언트 보더를 도입하여 깊이감 있는 3D 글래스 서피스를 전면 배치**.
|
|
- **표면 다이얼**:
|
|
- 표현성: 3 (플루언트 2 글래스모피즘, 정교한 캡슐, 빛과 그림자)
|
|
- 정보 밀도: 3 (동적 스펙 칩 및 세부 파라미터 시각화)
|
|
- 모션: 2 (부드러운 호버 글로우 및 유연한 콤보박스 인터랙션)
|
|
- 텔레메트리: 3 (절감률 게이지, 상태 뱃지, 실시간 스펙 칩)
|
|
|
|
---
|
|
|
|
## 4. 디자인 토큰 체계 (3단계)
|
|
|
|
### 4.1 색상 및 글래스 토큰 (`FormatShiftTheme.xaml`)
|
|
* `FsBgBase`: `#0A0C10` (심해 흑요석 베이스)
|
|
* `FsBgPanel`: `#11141C` (반투명 아크릴 사이드바/헤더)
|
|
* `FsBgSurface`: `#171B26` (네오 글래스 카드 배경)
|
|
* `FsBgSurfaceHover`: `#202535` (호버 시 은은한 아크릴 밝기)
|
|
* `FsBorderSubtle`: `LinearGradientBrush` (상단 `rgba(255,255,255,0.14)`, 하단 `rgba(255,255,255,0.04)`) - 상단 광원 림라이트 효과
|
|
* `FsBorderStrong`: `rgba(255, 255, 255, 0.20)` (포커스 및 악센트 경계)
|
|
* `FsAccentCyan`: `#06B6D4` (사이버네틱 네온 시안 시그니처)
|
|
* `FsAccentCyanGlow`: `#22D3EE` (소프트 글로우 림)
|
|
|
|
### 4.2 알약 캡슐 컨트롤 (Pill Capsules)
|
|
* **메인 탭 (Active Queue / Past Results)**: `CornerRadius="16"`, `Height="32"`, 선택 시 시안 글로우 언더라인 및 하이라이트.
|
|
* **필터 칩**: `CornerRadius="14"`, 패딩 `10,4`, 아크릴 반투명 배경.
|
|
* **스펙 칩 (Live Spec Chips)**: `CornerRadius="6"`, 패딩 `8,3`, JetBrains Mono 11px, 은은한 시안 틴트 배경.
|
|
|
|
---
|
|
|
|
## 5. 실측 검증 및 게이트 계획 (5단계)
|
|
* TDD 절대주의: 실패하는 RED 테스트(`FormatPresetEngineTests`) 선행 작성.
|
|
* 10초 이내 전체 테스트 100% 통과 (목표 실행 시간 1.5초 이내).
|
|
- **15대 하드 게이트 통과 내역**:
|
|
1. 토큰 밖 인라인 색상/폰트 없음: 통과 (100% 리소스 참조)
|
|
2. 한 페이지 내 다중 강조색 없음: 통과 (네온 시안 단일 중심, 상태색/카테고리 분리)
|
|
3. 일관된 border-radius: 통과 (Pill 14/20px, Card 6/8px, Tag 3/4px)
|
|
4. 페이지 중간 테마 반전 없음: 통과 (일관된 Swiss Minimal 톤 유지)
|
|
5. 불필요한 가로 스크롤 없음: 통과 (2~3열 반응형 그리드 및 TextWrapping)
|
|
6. 버튼 라벨 2줄 접힘 없음: 통과 (수직 중앙 정렬 및 여유 폭 확보)
|
|
7. 텍스트-배경 대비 4.5:1 이상: 통과 (최소 7.8:1, 최대 15.2:1, 버튼 9.8:1로 WCAG AAA 충족)
|
|
8. 비정형 속성 애니메이션 배제: 통과
|
|
9. 모바일/데스크톱 뷰포트 오버플로 없음: 통과
|
|
10. 불필요한 이벤트 리스너 배제: 통과
|
|
11. 가짜 통계 수치 배제: 통과 (기본값 정직한 0 노출)
|
|
12. 가짜 스크린샷 배제: 통과
|
|
13. 브랜드 표면 정합성: 통과
|
|
14. 미사용 죽은 스타일/코드 배제: 통과
|
|
15. 제3언어 클리셰 배제 및 한국어 표준화: 통과 (100% 정제된 한국어 표기)
|
|
|
|
---
|
|
|
|
## 6. 의도적으로 하지 않은 것과 그 이유 (6단계)
|
|
1. **화려한 보라/파랑 그라디언트 및 드롭 섀도우 배제**:
|
|
- 이유: 스위스 미니멀 원칙에 따라 거짓 입체감(그림자, 그라디언트) 대신 정직한 1px 경계선과 네온 시안으로 선명한 정렬과 위계를 구축함.
|
|
2. **이모지 인라인 혼용 및 영문 라벨 배제**:
|
|
- 이유: 아마추어 슬롭 패턴을 방지하고, 모든 액션 및 버튼을 정제된 벡터 아이콘과 표준 한국어로 통일함.
|
|
3. **애니메이션 지연(Delay) 배제**:
|
|
- 이유: 고속 일괄 작업 도구로서 즉각적인 반응성(`0.15s`)을 보장하기 위해 연출용 딜레이를 일체 넣지 않음.
|