feat(ads/seo/release): v1.2.0 with live Google Ads, isolated ad profile, ads.txt, and SEO/AEO/GEO optimization
This commit is contained in:
parent
a88aafa1e5
commit
0e568f1f0a
975 changed files with 130593 additions and 16783 deletions
418
docs/references/DESIGN_AUDIT_METHODOLOGIES.md
Normal file
418
docs/references/DESIGN_AUDIT_METHODOLOGIES.md
Normal file
|
|
@ -0,0 +1,418 @@
|
|||
# 고강도 디자인 감사 방법론 및 이론 체계 레퍼런스 (Phase 2)
|
||||
|
||||
> **문서 식별자**: `REF-DESIGN-AUDIT-2026`
|
||||
> **상태**: Paca 디자인 엔지니어링 공식 참고 표준 (Reference SSOT)
|
||||
> **발행일**: 2026-09-05
|
||||
> **적용 범위**: Paca 데스크톱 (`Paca.App`), 모바일 (`Paca.Mobile`), 웹 (`site/`), 크로스플랫폼 전반
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 및 목적 (Executive Summary)
|
||||
|
||||
디자인 감사는 단순한 "눈대중(Visual Eye-balling)"이나 주관적 미학 선호가 아닌, **기계적으로 검증 가능한 수학적·인체공학적·인지과학적 명세**에 기반해야 한다. 본 문서는 W3C WCAG 2.2 공식 권고안, APCA(Accessible Perceptual Contrast Algorithm) 인지 명도 모델, 요제프 뮐러-브로크만(Josef Müller-Brockmann)과 칼 게르스트너(Karl Gerstner)의 스위스 그리드 시스템, 난시/동공 확장 생리학 기반 다크모드 광륜(Halation) 방어 이론, OpenType 표 형식 숫자(`tnum`), 그리고 닐슨 노먼 그룹(NN/g) 10대 사용성 휴리스틱 및 0–4 심각도 척도를 체계적으로 집대성한 공식 레퍼런스이다.
|
||||
|
||||
---
|
||||
|
||||
## 2. WCAG 2.2 신규 접근성 성공 기준 (W3C Standard)
|
||||
|
||||
2023년 10월 공식 권고안으로 확정된 WCAG 2.2의 핵심 인터랙션 및 포커스 기준을 Paca 전 플랫폼에 기계적 게이트로 강제한다.
|
||||
|
||||
### 2.1 타깃 크기 최소 기준 (Target Size Criteria)
|
||||
- **WCAG 2.5.8 Target Size (Minimum) [Level AA]**:
|
||||
- **최소 규격**: 모든 인터랙션 타깃은 최소 **24 × 24 CSS px (DIP)** 이상이어야 한다.
|
||||
- **간격 예외 (Spacing Exception)**: 타깃 자체의 물리적 크기가 24px 미만인 경우라도, 타깃 중심을 기준으로 지름 24px 원을 그렸을 때 인접한 다른 타깃 또는 다른 미달 타깃의 원과 겹치지 않으면(Non-intersecting) 통과된다.
|
||||
- **WCAG 2.5.5 Target Size (Enhanced) [Level AAA / Apple HIG / Material 3 권장]**:
|
||||
- **권장 규격**: 최소 **44 × 44 CSS px (DIP)** (터치 스크린 및 주요 조작부). 간격 예외 없이 물리적 터치 영역 44px 엄수.
|
||||
- **Paca 디자인 게이트 규칙**:
|
||||
- 데스크톱 마우스 인터랙션: 최소 32 × 32 px 보장 (`Gate 28` / `Gate 101`).
|
||||
- 모바일 터치 및 플로팅 액션 버튼(FAB): 최소 44 × 44 px 보장.
|
||||
|
||||
### 2.2 포커스 가시성 및 외형 기준 (Focus Appearance & Non-Obscuration)
|
||||
- **WCAG 2.4.11 Focus Not Obscured (Minimum) [Level AA]**:
|
||||
- 키보드 탭 탐색으로 포커스를 받은 요소가 고정 헤더, 플로팅 툴바, 모달 오버레이 등에 의해 **완전히 가려져서는 안 됨** (최소 일부 가시성 확보).
|
||||
- **WCAG 2.4.12 Focus Not Obscured (Enhanced) [Level AAA]**:
|
||||
- 포커스를 받은 요소의 **어느 일부분도 가려져서는 안 됨** (100% 완전 가시성 보장).
|
||||
- **WCAG 2.4.13 Focus Appearance [Level AAA]**:
|
||||
- **최소 면적**: 컴포넌트 둘레를 둘러싸는 **최소 2px 두께**의 외곽선 면적 이상이어야 함.
|
||||
- **대비율**: 포커스 상태 픽셀과 비포커스 상태 픽셀 간의 명도 대비가 최소 **3.0:1** 이상이어야 함.
|
||||
- **배경 대비**: 포커스 표시선과 인접 배경 간의 대비 또한 최소 **3.0:1** 이상 유지.
|
||||
|
||||
---
|
||||
|
||||
## 3. APCA 및 인지 색각 모델 (Perceptual Contrast Theory)
|
||||
|
||||
### 3.1 WCAG 2.x 상대 휘도 공식의 한계
|
||||
WCAG 2.x의 상대 휘도 공식 \(\frac{L_1 + 0.05}{L_2 + 0.05}\)는 인간 눈의 비선형적 인지 특성을 완전히 반영하지 못한다:
|
||||
- 어두운 배경에서 밝은 텍스트(다크 모드)를 볼 때와 밝은 배경에서 어두운 텍스트(라이트 모드)를 볼 때 인간의 뇌가 인지하는 선명도가 다름(극성 효과: Polarity Effect).
|
||||
- 폰트의 굵기(Font Weight)와 크기(Spatial Frequency)에 따라 필요한 물리적 광량이 급격히 변함.
|
||||
|
||||
### 3.2 APCA (Accessible Perceptual Contrast Algorithm) 핵심 원리
|
||||
W3C Silver / WCAG 3.0 연구에서 제안된 APCA는 다음과 같은 인간 시각 인지 변수를 반영한다:
|
||||
1. **휘도 인지 비선형 압축 (Power-law Exponents)**:
|
||||
- 디스플레이 감마(\(\gamma = 2.4\)) 보정 후, 배경(\(Y_{bg}\))과 전경(\(Y_{txt}\))에 인지 비선형 지수 적용:
|
||||
\[
|
||||
Y_{perceptual} = Y^{0.56} \quad (\text{또는 극성에 따른 지수})
|
||||
\]
|
||||
2. **극성 인식 (Polarity-aware Lc Score)**:
|
||||
- 밝은 배경 위 어두운 텍스트: 양의 Lc 점수 (+Lc).
|
||||
- 어두운 배경 위 밝은 텍스트: 음의 Lc 점수 (-Lc).
|
||||
- 본문 텍스트 기준 권장 최소 점수: **|Lc 60| ~ |Lc 75|**.
|
||||
- 대형 제목/굵은 텍스트 기준 권장 최소 점수: **|Lc 45| ~ |Lc 60|**.
|
||||
|
||||
---
|
||||
|
||||
## 4. 다크 모드 광륜(Halation) 방어 및 난시 생리학
|
||||
|
||||
### 4.1 광륜 현상(Halation / Bloom)의 원인
|
||||
- 전 세계 인구의 30% ~ 50%가 경도 이상의 **난시(Astigmatism)**를 가지고 있다.
|
||||
- 다크 모드 환경에서는 주변 조도가 낮아 **동공이 크게 확장(Pupil Dilation)**된다.
|
||||
- 확장된 동공으로 인해 각막 주변부의 굴절 오차가 망막에 직접 투사되며, **순수 검정 배경(`#000000`) 위의 고주파 순수 흰색(`#FFFFFF`) 텍스트**는 글자 경계선이 번지거나 흩날리는 **광륜(Halation/Bloom)** 및 시각 피로(Eye Strain)를 유발한다.
|
||||
|
||||
### 4.2 광륜 방어 4대 안티-블룸 규칙 (Anti-Bloom Rules)
|
||||
1. **순수 흑백 극단 대비 지양**:
|
||||
- 다크 모드 표준 서피스 배경은 순수 블랙(`#000000`) 대신 다크 슬레이트/차콜 계열(`SurfaceDark = #121212` ~ `#18181B`)을 기본으로 채택한다.
|
||||
- OLED 전용 True Black 모드(`#000000`)에서는 텍스트를 순수 화이트(`#FFFFFF`) 대신 부드러운 오프화이트(`TextPrimary = #E2E8F0` 또는 `#EDEDED`)로 감쇄하여 광륜을 방어한다.
|
||||
2. **타이포그래피 굵기 조절 (Weight Reduction)**:
|
||||
- 다크 모드에서는 빛의 번짐 현상으로 인해 동일 폰트가 라이트 모드보다 약 10~15% 더 두껍게 느껴진다. 따라서 다크 모드 본문에는 과도한 `Bold` 대신 `Regular(400)` 또는 `Medium(500)`을 적용한다.
|
||||
3. **서피스 고도화(Elevation Surface Layering)**:
|
||||
- 그림자 대신 1px 정밀 보더(`BorderSubtle = #2A2A2E`) 및 서피스 밝기 단차(Base #121212 → Card #1E1E22 → Popup #26262B)로 입체감을 표현한다.
|
||||
|
||||
---
|
||||
|
||||
## 5. 스위스 타이포그래피 & 8pt / 4pt 그리드 시스템
|
||||
|
||||
### 5.1 요제프 뮐러-브로크만 & 칼 게르스트너의 수학적 그리드 철학
|
||||
스위스 인터내셔널 타이포그래픽 스타일의 핵심은 **"모든 시각 요소의 배치와 여백을 직관이 아닌 수학적 공배수 시스템에 종속시키는 것"**이다.
|
||||
|
||||
### 5.2 8pt / 4pt 수학적 불변식
|
||||
- **기본 모듈 (Base Unit)**: \(U = 8\text{px}\) (컴포넌트 단위), \(u = 4\text{px}\) (마이크로 여백 단위).
|
||||
- **공식 여백 스케일 (Spacing Tokens)**:
|
||||
- `Space-1`: \(4\text{px}\) (\(0.5U\)) — 인라인 아이콘-라벨 간격, 뱃지 컴팩트 패딩
|
||||
- `Space-2`: \(8\text{px}\) (\(1.0U\)) — 기본 컨트롤 내부 패딩, 버튼 간격
|
||||
- `Space-3`: \(12\text{px}\) (\(1.5U\)) — 폼 필드 입력창 내부 수평 여백
|
||||
- `Space-4`: \(16\text{px}\) (\(2.0U\)) — 카드 내부 본문 패딩, 리스트 항목 간격
|
||||
- `Space-6`: \(24\text{px}\) (\(3.0U\)) — 섹션 간 간격, 모달 내부 패딩
|
||||
- `Space-8`: \(32\text{px}\) (\(4.0U\)) — 주요 컨테이너 간격, 헤더 높이 여백
|
||||
- **절대 금기**: 7px, 9px, 11px, 13px 등 비대칭·홀수 픽셀 여백 금지.
|
||||
|
||||
---
|
||||
|
||||
## 6. 마이크로 타이포그래피 & OpenType 표 형식 숫자 (`tnum`)
|
||||
|
||||
### 6.1 비례 숫자(Proportional Figures)의 동적 레이아웃 왜곡 (Jitter)
|
||||
- 일반 비례 폰트에서 숫자 `1`은 숫자 `8`이나 `0`보다 가로 폭이 훨씬 좁다.
|
||||
- 다운로드 속도(`1.2 MB/s` ↔ `8.9 MB/s`), 진행 타이머(`00:01` ↔ `00:08`), FPS 및 진행률 숫자가 실시간 갱신될 때, 비례 숫자는 텍스트 전체 폭을 매 프레임 진동(Jittering/Shaking)시켜 사용자 시선을 분산시키고 인터페이스를 조잡하게 만든다.
|
||||
|
||||
### 6.2 OpenType `tnum` (Tabular Figures) 강제 규격
|
||||
- 다운로드 속도계, 타이머, 데이터 테이블 컬럼, 파일 크기 표기에는 반드시 **표 형식 숫자(Tabular Numbers)**를 적용한다.
|
||||
- **WPF 구현**:
|
||||
```xml
|
||||
<TextBlock Typography.NumeralAlignment="Tabular" Text="{Binding DownloadSpeed}" />
|
||||
```
|
||||
- **CSS / Web 구현**:
|
||||
```css
|
||||
font-variant-numeric: tabular-nums;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. 닐슨 노먼 그룹(NN/g) 10대 사용성 휴리스틱 & 0–4 심각도 매트릭스
|
||||
|
||||
### 7.1 10대 사용성 휴리스틱 (Heuristic Checklist)
|
||||
1. **시스템 상태 가시성 (Visibility of System Status)**: 진행률 바, 스피너, 상태 배지로 실시간 피드백 100ms 내 제공.
|
||||
2. **실세계와의 부합 (Match Real World)**: 전문 용어 대신 일상적 어휘(다운로드, 저장, 취소) 사용.
|
||||
3. **사용자 제어와 자유 (User Control & Freedom)**: 실행 취소, 다운로드 취소, 닫기 비상구 즉각 제공.
|
||||
4. **일관성과 표준 (Consistency & Standards)**: 플랫폼 전반 동일 아이콘, 동일 단축키, 동일 테마 토큰 적용.
|
||||
5. **오류 방지 (Error Prevention)**: 위험 동작(전체 삭제) 시 사전 확인 또는 소프트 삭제 복구 지원.
|
||||
6. **기억보다 재인식 (Recognition Over Recall)**: 최근 URL, 검색 기록, 다운로드 히스토리 즉시 노출.
|
||||
7. **유연성과 사용 효율성 (Flexibility & Efficiency)**: 단축키, 우클릭 컨텍스트 메뉴, 드래그 앤 드롭 지원.
|
||||
8. **미니멀리스트 디자인 (Aesthetic & Minimalist Design)**: 불필요한 장식 제거, 핵심 정보 위주 시각 위계.
|
||||
9. **오류 인식·진단·복구 (Error Recovery)**: 에러 코드 은폐 금지, 해결 가능한 행동 지침 명시.
|
||||
10. **도움말과 문서화 (Help & Documentation)**: 검색 가능한 가이드 및 툴팁 제공.
|
||||
|
||||
### 7.2 결함 심각도 0–4 척도 (NN/g Severity Triage Matrix)
|
||||
- **Level 0 (Not an issue)**: 사용성 결함 아님. 의도된 동작.
|
||||
- **Level 1 (Cosmetic)**: 미세한 시각 오차. 여유 시 수정.
|
||||
- **Level 2 (Minor)**: 경미한 불편. 낮은 우선순위 수정.
|
||||
- **Level 3 (Major)**: 사용자 작업에 지장을 주는 주요 결함. 릴리스 전 필수 수정.
|
||||
- **Level 4 (Catastrophe)**: 작업 중단, 데이터 유실, 크래시, 포커스 트랩. 즉각 핫픽스 필수.
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
## 8. 수학적 인터랙션 & 인지 모델링 (Mathematical Interaction Laws)
|
||||
|
||||
사용자 인터페이스의 사용성과 조작 속도는 주관적 감상이 아닌 물리학적·인지심리학적 수학 공식으로 모델링된다.
|
||||
|
||||
### 8.1 피츠의 법칙 (Fitts's Law): 이동 시간과 타깃 면적의 역학
|
||||
피츠의 법칙은 마우스 포인터나 손가락이 특정 거리 $D$에 있는 폭 $W$의 타깃에 도달하여 클릭하기까지 걸리는 평균 이동 시간($MT$)을 모델링한다:
|
||||
|
||||
$$MT = a + b \cdot \log_2\left(\frac{D}{W} + 1\right) = a + b \cdot ID$$
|
||||
|
||||
- $ID = \log_2(D/W + 1)$ : 난이도 지수 (Index of Difficulty, bits)
|
||||
- $a, b$ : 디바이스 및 인간 운동신경 상수
|
||||
- **설계 감사 시사점**:
|
||||
1. **가장자리 무한 타깃 효과 ($W \to \infty$)**: 창 최상단과 우측 끝에 붙은 창 닫기/최소화/최대화 버튼은 마우스가 화면 밖으로 벗어나지 않으므로 실질적인 $W$가 무한대가 되어 $ID \to 0$, 즉 눈을 감고도 클릭할 수 있다. 캡션 버튼에 불필요한 마진을 주어 가장자리에서 떨어뜨리는 것은 피츠의 법칙을 정면 위반하는 중대 결함이다.
|
||||
2. **핵심 CTA(다운로드 시작, 일시정지) 면적 최적화**: 사용 빈도가 높은 핵심 인터랙션 버튼은 $W$를 충분히 확장(패딩 16px+, 높이 36~44px)하여 $ID$를 대폭 낮춘다.
|
||||
|
||||
### 8.2 힉-하이먼 법칙 (Hick-Hyman Law): 선택지와 인지 판단 지연
|
||||
힉의 법칙은 사용자에게 $n$개의 상호 배타적인 선택지가 주어졌을 때 의사결정을 내리기까지 걸리는 시간($RT$)을 설명한다:
|
||||
|
||||
$$RT = b \cdot \log_2(n + 1)$$
|
||||
|
||||
- $n$ : 메뉴나 화면에 동시 노출된 선택지(버튼, 옵션)의 개수
|
||||
- **설계 감사 시사점**:
|
||||
1. **선택지 과부하(Choice Overload) 차단**: 툴바에 15개 이상의 버튼을 한 번에 평면 나열하면 인지 지연이 극대화된다. 핵심 5~7개 액션만 기본 노출하고, 부가 액션은 '세부 서랍(Drawer)' 또는 '더보기 컨텍스트 메뉴'로 위계화한다.
|
||||
2. **다운로드 포맷 선택**: 포맷 리스트가 20개 이상일 때 '권장 최고화질'을 기본 프리셋으로 선별 제공하여 $n=1$ 수준의 즉각 결정을 돕는다.
|
||||
|
||||
### 8.3 밀러의 법칙 (Miller's Law): 작업 기억 $7 \pm 2$ 청크
|
||||
인간의 단기 작업 기억은 한 번에 $7 \pm 2$개의 정보 덩어리(Chunk)만을 처리할 수 있다.
|
||||
- **다운로드 카드 정보 청크화**: 파일명, 해상도, 다운로드 속도, 남은 시간, 총 용량, 진행률, 액션 버튼 7가지 정보를 3개 시각 그룹(1. 타이틀+뱃지, 2. 진행바+수치, 3. 조작 버튼)으로 청크화하여 인지 부하를 분산한다.
|
||||
|
||||
### 8.4 야콥의 법칙 (Jakob's Law): 학습된 멘탈 모델 전이
|
||||
사용자는 대부분의 시간을 당신의 앱이 아닌 다른 앱/웹사이트에서 보낸다.
|
||||
- 브라우저 탭, 뒤로/앞으로 단추, 주소 입력창의 배치와 단축키(`Ctrl+T`, `Ctrl+W`, `Ctrl+L`, `F5`)를 업계 표준과 100% 일치시켜 재학습 비용을 제로로 만든다.
|
||||
|
||||
---
|
||||
|
||||
## 9. WCAG 2.2 상호작용 및 인지 접근성 신규 기준 (Level A/AA)
|
||||
|
||||
2023년 10월 제정된 WCAG 2.2의 신규 상호작용 기준을 데스크톱/웹 전반에 엄격 적용한다.
|
||||
|
||||
### 9.1 SC 2.5.7 Dragging Movements (Level AA): 드래그 동작 대안
|
||||
- **원칙**: 포인터 드래그 동작(아이템 순서 끌어서 바꾸기, 탭 끌기)을 통해서만 수행 가능한 작업은 운동 장애나 미세 손떨림이 있는 사용자에게 접근 장벽이 된다.
|
||||
- **감사 기준**: 드래그 앤 드롭으로 탭이나 다운로드 순서를 바꿀 수 있다면, 반드시 **단일 탭/클릭 대안**(컨텍스트 메뉴의 '위로 이동', '아래로 이동' 또는 키보드 단축키 `Ctrl+PageUp/Down`)이 병행 제공되어야 한다.
|
||||
|
||||
### 9.2 SC 3.3.7 Redundant Entry (Level A): 중복 입력 방지
|
||||
- **원칙**: 동일 프로세스 내에서 사용자가 이미 입력했던 정보를 다시 입력하게 요구해서는 안 된다.
|
||||
- **감사 기준**:
|
||||
1. 다운로드 URL 입력창: 최근 다운로드 이력, 클립보드 자동 감지 붙여넣기, 다운로드 히스토리에서 재선택 지원.
|
||||
2. 다운로드 완료 후 동일 도메인 작업 시 직전 설정값(포맷, 저장 경로, 자막 언어) 자동 완성.
|
||||
|
||||
### 9.3 SC 3.3.8 Accessible Authentication (Level AA): 인지 시험 배제
|
||||
- **원칙**: 로그인 및 인증 시 사용자의 암기력, 퍼즐 해결 능력, 계산 능력에 의존하는 인지 기능 시험(Cognitive Function Test)을 강제해서는 안 된다.
|
||||
- **감사 기준**:
|
||||
1. 비밀번호 입력란: 클립보드 붙여넣기(`Ctrl+V`) 차단 금지, 외부 패스워드 관리자 연동 허용.
|
||||
2. Paca 내부 `CredentialVault`: Windows DPAPI를 통한 안전한 세션/쿠키/자격증명 자동 저장 및 원클릭 불러오기 제공.
|
||||
|
||||
---
|
||||
|
||||
## 10. Microsoft Accessibility Insights & UIA (UI Automation) 계약
|
||||
|
||||
WPF 데스크톱 애플리케이션의 접근성 검사는 마이크로소프트의 Accessibility Insights for Windows 엔진 규칙을 기계적 감사 게이트로 구현한다.
|
||||
|
||||
### 10.1 UIA FastPass 5대 필수 속성
|
||||
1. **AutomationProperties.Name**: 모든 포커스 가능한 컨트롤(Button, TextBox, ComboBox, TabItem)은 스크린 리더가 읽을 수 있는 고유한 레이블을 제공해야 한다.
|
||||
2. **AutomationProperties.ItemType / LocalizedControlType**: 표준 컨트롤이 아닌 커스텀 렌더링 요소는 정확한 역할을 명시해야 한다.
|
||||
3. **AutomationProperties.AcceleratorKey / AccessKey**: 단축키가 있는 컨트롤은 UIA 트리에 키 바인딩 정보를 노출해야 한다.
|
||||
4. **IsContentElement / IsControlElement**: 순수 시각 장식용 요소(Separator, 배경 Border, 글리프 아이콘)는 스크린 리더 탐색에서 제외(`IsControlElement=False`)하여 청각적 소음을 차단한다.
|
||||
5. **Keyboard Focusable**: 탭 탐색 시 포커스 가능한 모든 요소는 포커스 링이 정확히 렌더링되고 건너뛰기 앵커가 없어야 한다.
|
||||
|
||||
---
|
||||
|
||||
## 11. 윈도우 고대비 모드(WHCM / Contrast Themes) 및 강제 색상 (Forced Colors Mode)
|
||||
|
||||
Windows 11 및 이전 버전의 고대비 모드(Contrast Themes: Desert, Aquatic, Night Sky, Dusk)는 저시력 및 시각 장애 사용자를 위한 OS 차원의 핵심 접근성 기능이다.
|
||||
|
||||
### 11.1 강제 색상 모드(Forced Colors Mode)의 원리
|
||||
- OS가 애플리케이션의 커스텀 배경/전경색을 시스템 표준 팔레트(`Window`, `WindowText`, `Highlight`, `HighlightText`, `ButtonFace`, `ButtonText`)로 강제 치환한다.
|
||||
- WPF에서는 `SystemParameters.HighContrast` 플래그 및 `Themes/HighContrast.xaml`을 통해 이 모드를 지원한다.
|
||||
|
||||
### 11.2 WCAG AAA 7.0:1 엄격 명도 대비 규칙
|
||||
- 고대비 모드에서는 통상적인 AA 기준(4.5:1)을 넘어 **WCAG AAA 등급의 7.0:1 초고대비**를 모든 텍스트와 핵심 기능 브러시(`AccentBrush`, `SuccessBrush`, `ErrorBrush`, `SelectionBrush`)에 적용해야 한다.
|
||||
- 반투명 알파 채널(`Opacity < 1.0`) 브러시나 배경 그라데이션을 배제하고, 순수 솔리드 컬러와 2px 이상의 선명한 테두리를 강제한다.
|
||||
|
||||
---
|
||||
|
||||
## 12. 색각이상(CVD) 및 다채널 상태 신호 (WCAG 1.4.1 Use of Color)
|
||||
|
||||
전 세계 남성의 약 8%, 여성의 약 0.5%가 제1색각이상(Protanopia/Protanomaly: 적색맹/적색약), 제2색각이상(Deuteranopia/Deuteranomaly: 녹색맹/녹색약), 또는 제3색각이상(Tritanopia/Tritanomaly: 청황색맹/청황색약)을 겪는다.
|
||||
|
||||
### 12.1 단일 채널 신호 전달 금지 헌법
|
||||
- **핵심 원칙**: 색상은 절대로 상태나 행동을 전달하는 유일한 수단이 되어서는 안 된다.
|
||||
- **다채널 삼중 인코딩(Triple-Channel Encoding)**:
|
||||
1. **채널 1 (색상/휘도)**: 성공(초록), 실패(빨강), 주의(주황), 진행(보라/파랑)
|
||||
2. **채널 2 (형태/기호)**: 완료(`✔`), 실패(`✖`), 알림(`⚠`), 대기(`⏳`)
|
||||
3. **채널 3 (텍스트 레이블/UIA)**: "완료", "실패", "다운로드 중", "일시정지"
|
||||
- **그레이스케일 감사 테스트(Grayscale Invariant Test)**: 디스플레이 채도를 0(Saturation = 0)으로 설정했을 때, 사용자가 흑백 명도차와 아이콘/텍스트만으로 모든 상태를 100% 모호함 없이 구별할 수 있어야 한다.
|
||||
|
||||
---
|
||||
|
||||
## 13. OLED 디스플레이 물리 공학 및 블랙 스미어링(Black Smear) 방어
|
||||
|
||||
OLED 및 AMOLED 패널은 완전 검정(`#000000`)을 렌더링할 때 개별 서브픽셀의 전원을 완전히 차단한다.
|
||||
|
||||
### 13.1 퍼플 스미어링(Purple Smear / Black Ghosting)의 메커니즘
|
||||
- 꺼져 있던 다이오드가 유채색이나 회색으로 다시 켜지는 과정(Turn-on Response Time)에서 수 밀리초의 물리적 턴온 딜레이가 발생한다.
|
||||
- 사용자가 스크롤할 때 `#000000` 배경과 인접 픽셀 사이에 보라색 잔상(Purple Trail)과 번짐이 발생하는 치명적 시각 결함이 야기된다.
|
||||
|
||||
### 13.2 5% 틴티드 다크 서피스 룰 (The 5% Tinted Black Rule)
|
||||
- 기본 창 배경을 순수 블랙(`#000000`) 대신 RGB 채널 각 10 이상(약 4~6% 휘도)인 `#0B0B10`, `#121212`, `#14141C`로 설정한다.
|
||||
- 픽셀을 완전히 끄지 않고 미세 사전 바이어스(Pre-biased) 전류 상태로 유지하여, 스미어링을 0ms 수준으로 소멸시키면서도 깊고 우아한 모노크롬 다크 테마 감성을 완성한다.
|
||||
|
||||
---
|
||||
|
||||
## 14. HiDPI 서브픽셀 스냅 및 레이아웃 라운딩 (WPF Display Engine)
|
||||
|
||||
현대 윈도우 환경은 96 DPI(100%) 외에도 120 DPI(125%), 144 DPI(150%), 192 DPI(200%)의 다양한 HiDPI 분수 배율 디스플레이를 사용한다.
|
||||
|
||||
### 14.1 서브픽셀 번짐(Subpixel Blurring) 차단
|
||||
- 부동소수점 좌표 연산으로 인해 보더 선(1px)이나 텍스트 베이스라인이 픽셀 경계선 사이에 걸치면 흐릿한 안티앨리어싱 안개(Blurry Ghost Border)가 발생한다.
|
||||
- **필수 공학 조치**:
|
||||
1. `Window.UseLayoutRounding="True"`: 레이아웃 엔진이 모든 레이아웃 치수를 물리적 장치 픽셀 경계로 반올림.
|
||||
2. `UIElement.SnapsToDevicePixels="True"`: 컨트롤 렌더링 펜이 서브픽셀 안티앨리어싱 없이 날카로운 1픽셀을 렌더링하도록 강제.
|
||||
|
||||
---
|
||||
|
||||
## 15. WCAG 2.2 SC 1.4.11 비텍스트 대비 (Non-Text Contrast)
|
||||
|
||||
텍스트뿐만 아니라, 사용자가 인터랙션할 수 있는 모든 UI 컴포넌트의 시각적 경계(Border)와 상태 표시기(Focus Visual, Selection)는 인접한 배경에 대해 **최소 3.0:1 이상의 명도 대비**를 확보해야 한다.
|
||||
- 버튼/입력창의 외곽선이 배경과 구별되지 않으면 저시력 사용자는 타깃의 위치와 크기를 인지할 수 없다.
|
||||
- 라이트 모드에서 흔히 발생하는 연회색 보더(`#E0E0E0`, `#AEB4C4` 등, 대비 1.5~2.2:1) 결함을 차단하고 최소 `#858B9C` 이상으로 명도를 보정하여 3.0:1을 엄수한다.
|
||||
|
||||
---
|
||||
|
||||
## 16. 전정기관 장애 보호 및 움직임 감소 (Reduced Motion WCAG 2.2 SC 2.3.3)
|
||||
|
||||
전 세계 수백만 명의 사용자가 전정 신경계 질환(Vestibular Disorders), 현기증(Vertigo), 메니에르병, 편두통을 겪고 있으며, 화면의 급격한 패닝·줌·시차(Parallax) 이동에 의해 심각한 오심과 균형 감각 상실을 느낀다.
|
||||
|
||||
### 16.1 움직임 감소 3대 불변식
|
||||
1. **OS 애니메이션 설정 존중**: Windows의 "창 애니메이션 끄기"(`SystemParameters.ClientAreaAnimation == false`) 설정 시 모든 이동 애니메이션을 즉시 비활성화하거나 `Duration="0:0:0"`으로 단축한다.
|
||||
2. **최대 시간 상한(Duration Bound)**: UI 상태 전환 애니메이션은 최대 300ms를 초과하지 않으며, 권장 표준은 150ms~250ms 감속 곡선(`CubicEase Ease="EaseOut"`)을 사용한다.
|
||||
3. **루핑 모션 배제**: 다운로드 프로그레스바의 인디터미너트 애니메이션을 제외하고는 사용자 주의를 분산시키는 무한 반복 펄스/바운스 효과를 엄격히 금지한다.
|
||||
|
||||
---
|
||||
|
||||
## 17. 포커스 비가림 (Focus Not Obscured WCAG 2.2 SC 2.4.11 / 2.4.12)
|
||||
|
||||
키보드 탐색 시 사용자가 현재 포커스를 둔 컨트롤이 고정 헤더, 하단 플로팅 바, 스낵바 또는 스크롤 뷰포트 경계에 가려지는 현상을 원천 방지한다.
|
||||
- **Level AA (SC 2.4.11)**: 포커스 요소가 다른 컴포넌트에 완전히 가려지지 않아야 함.
|
||||
- **Level AAA (SC 2.4.12)**: 포커스 요소의 1픽셀도 가려지지 않고 100% 온전히 보여야 함.
|
||||
- **WPF 구현 계약**: `ScrollViewer` 내부 항목이 포커스를 받을 때 `RequestBringIntoView()`가 정상 호출되도록 컨테이너 여백(Padding/Margin)과 가상화(Virtualization) 스크롤 오프셋을 안정적으로 확보한다.
|
||||
|
||||
---
|
||||
|
||||
## 18. 모달 다이얼로그 포커스 트랩 (Focus Trap) 및 라이트 디스미스 (Light Dismiss)
|
||||
|
||||
모달 창, 설정 다이얼로그, 팝업 메뉴가 열렸을 때 키보드 사용자의 통제권을 보장하는 표준 인터랙션 패턴이다.
|
||||
|
||||
### 18.1 포커스 트랩 (Focus Trapping)
|
||||
- 모달 대화상자 내부에서는 `Tab` / `Shift+Tab` 키 탐색이 모달 외부(부모 창의 주소창이나 백그라운드 버튼)로 빠져나가지 않고 대화상자 내부에서만 순환(`KeyboardNavigation.TabNavigation="Cycle"`)해야 한다.
|
||||
|
||||
### 18.2 라이트 디스미스 및 포커스 복원 (Light Dismiss & Restoration)
|
||||
- `Escape` 키 입력 시 열려 있는 모달, 메뉴, 팝업이 즉시 안전하게 닫혀야 한다.
|
||||
- 모달이 닫힌 직후 포커스는 모달을 호출했던 원래의 트리거 버튼(Trigger Element)으로 100% 자동 복원되어야 한다.
|
||||
|
||||
---
|
||||
|
||||
## 19. 인지 부하 이론 (Sweller's CLT) 및 게슈탈트 시각 법칙
|
||||
|
||||
존 스웰러(John Sweller)의 인지 부하 이론(Cognitive Load Theory)에 따라, 사용자의 작업 기억(Working Memory) 용량을 불필요한 시각적 잡음에 낭비하지 않도록 설계한다.
|
||||
|
||||
### 19.1 외재적 인지 부하(Extraneous Cognitive Load) 제거
|
||||
- 과도한 1px 분할선(Dividers)과 박스 안의 박스(Nested Cards)는 시각적 파편화를 유발한다.
|
||||
- **게슈탈트 근접성의 원리(Law of Proximity)**: 분할선 대신 스위스 8pt/16pt 여백의 완급 조절만으로 연관된 정보 그룹을 청킹(Chunking)한다.
|
||||
- **게슈탈트 유사성의 원리(Law of Similarity)**: 동일한 위계의 액션 버튼(재생, 폴더, 삭제)은 동일한 크기(26~32px)와 형태 언어를 유지한다.
|
||||
|
||||
---
|
||||
|
||||
## 20. 독서 인체공학 (Reading Ergonomics) 및 최적 행폭 (CPL 50~75자)
|
||||
|
||||
화면 본문 텍스트의 길이가 너무 길면 사용자의 안구가 행 끝에서 다음 행의 시작점으로 이동할 때(Saccadic Return Sweep) 길을 잃어 독서 피로가 급격히 증가한다.
|
||||
- **최적 행폭 (Characters Per Line)**: 한 줄당 영문 기준 50~75자, 한글 기준 30~45자 (최대 80자를 넘지 않도록 `MaxWidth` 제약).
|
||||
- **모듈러 타이포그래피 스케일 (Modular Scale 1.25 Major Third)**:
|
||||
- Caption: 11px
|
||||
- Body: 13px ~ 14px
|
||||
- Subtitle: 17px
|
||||
- Title: 21px
|
||||
- Display: 26px+
|
||||
- 행간(Line Height)은 글자 크기의 1.5배 이상을 유지하여 텍스트의 시각적 뭉침을 원천 차단한다.
|
||||
|
||||
---
|
||||
|
||||
## 21. 키스트로크 레벨 모델 (KLM) 및 HCI 정량 예측 공학
|
||||
|
||||
스튜어트 카드(Stuart Card), 토마스 모란(Thomas Moran), 앨런 뉴얼(Allen Newell)이 1980/1983년에 확립한 KLM(Keystroke-Level Model)은 숙련된 사용자가 인터페이스에서 작업을 완수하는 데 걸리는 물리적·인지적 실행 시간(\(T_{execute}\))을 단위 연산자(Atomic Operators)의 합으로 정량 예측한다:
|
||||
|
||||
\[
|
||||
T_{execute} = \sum T_K + \sum T_P + \sum T_H + \sum T_D + \sum T_M + \sum T_R
|
||||
\]
|
||||
|
||||
### 21.1 KLM 6대 단위 연산자 상수
|
||||
1. **\(K\) (Keystroke / Keying)**: \(0.20\text{s}\) (숙련 타자) ~ \(0.28\text{s}\) (일반인).
|
||||
2. **\(P\) (Pointing to Target)**: \(1.10\text{s}\) (피츠의 법칙 기반 마우스 커서 이동 평균 시간).
|
||||
3. **\(H\) (Homing)**: \(0.40\text{s}\) (키보드와 마우스 간 손의 물리적 이동 시간).
|
||||
4. **\(M\) (Mental Preparation)**: \(1.20\text{s} \sim 1.35\text{s}\) (다음 행동을 결정하고 시각적으로 탐색하는 뇌의 인지 준비 시간).
|
||||
5. **\(R\) (System Response)**: \(< 0.10\text{s}\) (즉각적 지각 반응 한계인 100ms 미만이어야 함).
|
||||
|
||||
### 21.2 Paca 핫키 및 단축키 최적화 공학
|
||||
- 마우스 조작(\(P + H = 1.50\text{s}\)) 대신 전역 키보드 단축키(`Ctrl+L`, `Ctrl+J`, `Ctrl+D`, `Ctrl+H`, `Esc`)를 제공함으로써 포인팅과 호밍 시간을 제거(\(1.5\text{s} \to 0.2\text{s}\))한다.
|
||||
- 50개 대량 다운로드 배치 조작 시 총 작업 시간이 약 75초 이상 단축되는 극적인 생산성 혁신을 달성한다.
|
||||
|
||||
---
|
||||
|
||||
## 22. 댄 섀퍼(Dan Saffer)의 마이크로인터랙션 4단계 피드백 루프
|
||||
|
||||
댄 섀퍼의 2013년 기념비적 저작 *Microinteractions: Designing with Details*에 기반하여, Paca의 모든 상태 전환과 미세 상호작용은 4단계 구조를 엄격히 준수한다:
|
||||
|
||||
1. **Trigger (트리거)**:
|
||||
- 사용자 트리거: 버튼 클릭, 단축키 입력, URL 드래그 앤 드롭.
|
||||
- 시스템 트리거: 미디어 스트림 스니핑 감지, 다운로드 완료, 디스크 용량 경고.
|
||||
2. **Rules (규칙)**:
|
||||
- 인터랙션 진행 조건과 상태 머신(Pending -> Downloading -> Remuxing -> Completed / Failed).
|
||||
3. **Feedback (피드백)**:
|
||||
- 시각: 프로그레스바 진행률 애니메이션 + OpenType `tnum` 고정폭 수치 갱신 + 테두리 펄스 글로우.
|
||||
- 청각/OS: Windows Toast 알림 및 완료 액션 단추.
|
||||
- 접근성: `AutomationProperties.LiveSetting="Assertive"`를 통한 화면 낭독기 실시간 발화.
|
||||
4. **Loops & Modes (루프와 모드)**:
|
||||
- 네트워크 간헐적 끊김 시 지수 백오프(Exponential Backoff) 재시도 루프.
|
||||
- 일시정지 및 이어받기 모드 전환.
|
||||
|
||||
---
|
||||
|
||||
## 23. 비웹 정보통신기술 WCAG2ICT 및 데스크톱 1차원 리플로우 (Reflow SC 1.4.10)
|
||||
|
||||
W3C의 WCAG2ICT(Guidance on Applying WCAG to Non-Web ICT)에 따라, 웹의 반응형 미디어 쿼리가 없는 WPF 네이티브 데스크톱 환경에서도 가로 스크롤 없는 **단일 세로 스크롤(1D Vertical Scroll)** 리플로우를 보증한다:
|
||||
|
||||
### 23.1 320px/400% 줌 등가 리플로우
|
||||
- 저시력 사용자가 Windows 돋보기(`Win + Plus`) 또는 OS DPI 배율을 200~300%로 확대했을 때, 가로 스크롤바가 발생하여 콘텐츠를 읽기 위해 좌우로 왕복해야 하는 인지 피로를 차단한다.
|
||||
- **WPF 구현 조치**:
|
||||
- 카드 및 패널 컨테이너에 `ScrollViewer.HorizontalScrollBarVisibility="Disabled"` 강제.
|
||||
- 모든 텍스트 블록에 `TextWrapping="Wrap"` 또는 `TextTrimming="CharacterEllipsis"` 강제.
|
||||
- 고정 절대 너비(`Width="800"`) 하드코딩을 배제하고 `Grid` 비율(`*`) 및 `DockPanel` 신축 레이아웃 적용.
|
||||
|
||||
---
|
||||
|
||||
## 24. 결론: Paca 25대 자동화 디자인/접근성 감사 게이트 매핑 (The 25 Grand Design Commandments)
|
||||
|
||||
상기 이론들은 다음 25대 게이트 체계로 종합되어 `tests/Paca.Tests/E2E/VisualDesignGateTests.cs`와 `tests/Paca.Tests/Infrastructure/TestVerificationSystemGateTests.cs`에서 100% 자동 검증된다:
|
||||
|
||||
1. **중앙 정렬 및 대칭성 무결성 (Center Alignment)**: 오차 0px 기계적 정렬
|
||||
2. **컨테이너 오버플로우 방지 (Zero Overflow)**: `CharacterEllipsis` 강제
|
||||
3. **WCAG 2.1/2.2 AA/AAA 상대 휘도 & APCA 지각 대비**: 4.5:1 / 7.0:1 / Lc 60+
|
||||
4. **인풋 필드 규격 및 내부 패딩 (Input Ergonomics)**: `Padding="8,6"`, 높이 36~44px
|
||||
5. **아이콘-텍스트 수직 정렬 정합성 (Icon-Text Alignment)**: `VerticalAlignment="Center"` 100%
|
||||
6. **타이포그래피 계층구조 (Typography Hierarchy)**: 모듈러 스케일 엄수
|
||||
7. **Flexbox / Grid 레이아웃 왜곡 방지**: 0px 찌그러짐 방지
|
||||
8. **클릭 타깃 최소 면적 (Hit Target 32~44px+)**: Fitts 인체공학 면적 확보
|
||||
9. **디자인 철학 준수 (Designpaca / Swiss / Modern Minimalist)**: 3대 토큰 준수
|
||||
10. **모달 오버레이 무결성 및 시각적 안전성 (Dim Overlay)**: 딤 알파 및 포커스 차단
|
||||
11. **WCAG 2.2 SC 2.5.8 & 2.5.5 타깃 크기 (24px/44px)**: 인접 충돌 없는 최소 면적
|
||||
12. **WCAG 2.2 SC 2.4.13 포커스 외형 2px 둘레 보증**: 2px 링 및 3:1 대비
|
||||
13. **다크모드 광륜/난시 생리학적 보호 (Halation Shield)**: #000000 위 #FFFFFF 차단
|
||||
14. **스위스 8pt/4pt 베이스라인 그리드 불변식 (Multiples of 4px)**: 홀수 픽셀 금지
|
||||
15. **마이크로 타이포그래피 및 고정폭 숫자 안티지터 (`tnum`)**: Tabular 정렬 강제
|
||||
16. **피츠의 법칙 (Fitts's Law) 가장자리 무한 타깃**: 캡션 버튼 마진 0 밀착
|
||||
17. **힉-하이먼 법칙 및 밀러의 법칙 인지 밀도 최적화**: $7 \pm 2$ 툴바 슬림화 & 3-Chunk
|
||||
18. **WCAG 2.2 SC 2.5.7 드래그 조작 단일 클릭/키보드 대안 보증**: 컨텍스트 메뉴 대안
|
||||
19. **WCAG 2.2 SC 3.3.7 중복 입력 방지 (Redundant Entry)**: 자동완성 및 히스토리
|
||||
20. **Microsoft UIA FastPass 스크린 리더 계약 (AutomationProperties)**: Accessible Name 전수 매핑
|
||||
21. **윈도우 고대비 모드(WHCM / Forced Colors) WCAG AAA 7.0:1**: 모든 시맨틱 브러시 7:1 보증
|
||||
22. **전정기관 보호 움직임 감소(Reduced Motion SC 2.3.3)**: 애니메이션 지속시간 상한(<=300ms)
|
||||
23. **포커스 비가림(Focus Not Obscured SC 2.4.11/2.4.12)**: 스크롤 및 고정 요소 가림 차단
|
||||
24. **모달 포커스 트랩 및 Esc 안전 복원**: 대화상자 포커스 순환 및 원래 위치 복원
|
||||
25. **게슈탈트 근접성 및 최적 행폭(CPL 50~75) 독서 인체공학**: 안구 피로 방지 MaxWidth 제약
|
||||
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue