yunchan/Everything2Everything
1
0
Fork 0
Code Releases 5 Activity
Everything2Everything/design.md

7 KiB
Raw Blame History

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)을 보장하기 위해 연출용 딜레이를 일체 넣지 않음.