Yun Chan 0e568f1f0a feat(ads/seo/release): v1.2.0 with live Google Ads, isolated ad profile, ads.txt, and SEO/AEO/GEO optimization

2026-09-14 00:39:44 +09:00

32 KiB

Raw Blame History

고강도 디자인 감사 방법론 및 이론 체계 레퍼런스 (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는 다음과 같은 인간 시각 인지 변수를 반영한다:

휘도 인지 비선형 압축 (Power-law Exponents):
- 디스플레이 감마(\gamma = 2.4) 보정 후, 배경(Y_{bg})과 전경(Y_{txt})에 인지 비선형 지수 적용: [ Y_{perceptual} = Y^{0.56} \quad (\text{또는 극성에 따른 지수}) ]
극성 인식 (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)

순수 흑백 극단 대비 지양:
- 다크 모드 표준 서피스 배경은 순수 블랙(#000000) 대신 다크 슬레이트/차콜 계열(SurfaceDark = #121212 ~ #18181B)을 기본으로 채택한다.
- OLED 전용 True Black 모드(#000000)에서는 텍스트를 순수 화이트(#FFFFFF) 대신 부드러운 오프화이트(TextPrimary = #E2E8F0 또는 #EDEDED)로 감쇄하여 광륜을 방어한다.
타이포그래피 굵기 조절 (Weight Reduction):
- 다크 모드에서는 빛의 번짐 현상으로 인해 동일 폰트가 라이트 모드보다 약 10~15% 더 두껍게 느껴진다. 따라서 다크 모드 본문에는 과도한 Bold 대신 Regular(400) 또는 Medium(500)을 적용한다.
서피스 고도화(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 구현:

<TextBlock Typography.NumeralAlignment="Tabular" Text="{Binding DownloadSpeed}" />

CSS / Web 구현:
```
font-variant-numeric: tabular-nums;
```

7. 닐슨 노먼 그룹(NN/g) 10대 사용성 휴리스틱 & 0–4 심각도 매트릭스

7.1 10대 사용성 휴리스틱 (Heuristic Checklist)

시스템 상태 가시성 (Visibility of System Status): 진행률 바, 스피너, 상태 배지로 실시간 피드백 100ms 내 제공.
실세계와의 부합 (Match Real World): 전문 용어 대신 일상적 어휘(다운로드, 저장, 취소) 사용.
사용자 제어와 자유 (User Control & Freedom): 실행 취소, 다운로드 취소, 닫기 비상구 즉각 제공.
일관성과 표준 (Consistency & Standards): 플랫폼 전반 동일 아이콘, 동일 단축키, 동일 테마 토큰 적용.
오류 방지 (Error Prevention): 위험 동작(전체 삭제) 시 사전 확인 또는 소프트 삭제 복구 지원.
기억보다 재인식 (Recognition Over Recall): 최근 URL, 검색 기록, 다운로드 히스토리 즉시 노출.
유연성과 사용 효율성 (Flexibility & Efficiency): 단축키, 우클릭 컨텍스트 메뉴, 드래그 앤 드롭 지원.
미니멀리스트 디자인 (Aesthetic & Minimalist Design): 불필요한 장식 제거, 핵심 정보 위주 시각 위계.
오류 인식·진단·복구 (Error Recovery): 에러 코드 은폐 금지, 해결 가능한 행동 지침 명시.
도움말과 문서화 (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대 필수 속성

AutomationProperties.Name: 모든 포커스 가능한 컨트롤(Button, TextBox, ComboBox, TabItem)은 스크린 리더가 읽을 수 있는 고유한 레이블을 제공해야 한다.
AutomationProperties.ItemType / LocalizedControlType: 표준 컨트롤이 아닌 커스텀 렌더링 요소는 정확한 역할을 명시해야 한다.
AutomationProperties.AcceleratorKey / AccessKey: 단축키가 있는 컨트롤은 UIA 트리에 키 바인딩 정보를 노출해야 한다.
IsContentElement / IsControlElement: 순수 시각 장식용 요소(Separator, 배경 Border, 글리프 아이콘)는 스크린 리더 탐색에서 제외(IsControlElement=False)하여 청각적 소음을 차단한다.
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대 불변식

OS 애니메이션 설정 존중: Windows의 "창 애니메이션 끄기"(SystemParameters.ClientAreaAnimation == false) 설정 시 모든 이동 애니메이션을 즉시 비활성화하거나 Duration="0:0:0"으로 단축한다.
최대 시간 상한(Duration Bound): UI 상태 전환 애니메이션은 최대 300ms를 초과하지 않으며, 권장 표준은 150ms~250ms 감속 곡선(CubicEase Ease="EaseOut")을 사용한다.
루핑 모션 배제: 다운로드 프로그레스바의 인디터미너트 애니메이션을 제외하고는 사용자 주의를 분산시키는 무한 반복 펄스/바운스 효과를 엄격히 금지한다.

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대 단위 연산자 상수

K (Keystroke / Keying): 0.20\text{s} (숙련 타자) ~ 0.28\text{s} (일반인).
P (Pointing to Target): 1.10\text{s} (피츠의 법칙 기반 마우스 커서 이동 평균 시간).
H (Homing): 0.40\text{s} (키보드와 마우스 간 손의 물리적 이동 시간).
M (Mental Preparation): 1.20\text{s} \sim 1.35\text{s} (다음 행동을 결정하고 시각적으로 탐색하는 뇌의 인지 준비 시간).
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단계 구조를 엄격히 준수한다:

Trigger (트리거):
- 사용자 트리거: 버튼 클릭, 단축키 입력, URL 드래그 앤 드롭.
- 시스템 트리거: 미디어 스트림 스니핑 감지, 다운로드 완료, 디스크 용량 경고.
Rules (규칙):
- 인터랙션 진행 조건과 상태 머신(Pending -> Downloading -> Remuxing -> Completed / Failed).
Feedback (피드백):
- 시각: 프로그레스바 진행률 애니메이션 + OpenType tnum 고정폭 수치 갱신 + 테두리 펄스 글로우.
- 청각/OS: Windows Toast 알림 및 완료 액션 단추.
- 접근성: AutomationProperties.LiveSetting="Assertive"를 통한 화면 낭독기 실시간 발화.
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% 자동 검증된다:

중앙 정렬 및 대칭성 무결성 (Center Alignment): 오차 0px 기계적 정렬
컨테이너 오버플로우 방지 (Zero Overflow): CharacterEllipsis 강제
WCAG 2.1/2.2 AA/AAA 상대 휘도 & APCA 지각 대비: 4.5:1 / 7.0:1 / Lc 60+
인풋 필드 규격 및 내부 패딩 (Input Ergonomics): Padding="8,6", 높이 36~44px
아이콘-텍스트 수직 정렬 정합성 (Icon-Text Alignment): VerticalAlignment="Center" 100%
타이포그래피 계층구조 (Typography Hierarchy): 모듈러 스케일 엄수
Flexbox / Grid 레이아웃 왜곡 방지: 0px 찌그러짐 방지
클릭 타깃 최소 면적 (Hit Target 32~44px+): Fitts 인체공학 면적 확보
디자인 철학 준수 (Designpaca / Swiss / Modern Minimalist): 3대 토큰 준수
모달 오버레이 무결성 및 시각적 안전성 (Dim Overlay): 딤 알파 및 포커스 차단
WCAG 2.2 SC 2.5.8 & 2.5.5 타깃 크기 (24px/44px): 인접 충돌 없는 최소 면적
WCAG 2.2 SC 2.4.13 포커스 외형 2px 둘레 보증: 2px 링 및 3:1 대비
다크모드 광륜/난시 생리학적 보호 (Halation Shield): #000000 위 #FFFFFF 차단
스위스 8pt/4pt 베이스라인 그리드 불변식 (Multiples of 4px): 홀수 픽셀 금지
마이크로 타이포그래피 및 고정폭 숫자 안티지터 (tnum): Tabular 정렬 강제
피츠의 법칙 (Fitts's Law) 가장자리 무한 타깃: 캡션 버튼 마진 0 밀착
힉-하이먼 법칙 및 밀러의 법칙 인지 밀도 최적화: 7 \pm 2 툴바 슬림화 & 3-Chunk
WCAG 2.2 SC 2.5.7 드래그 조작 단일 클릭/키보드 대안 보증: 컨텍스트 메뉴 대안
WCAG 2.2 SC 3.3.7 중복 입력 방지 (Redundant Entry): 자동완성 및 히스토리
Microsoft UIA FastPass 스크린 리더 계약 (AutomationProperties): Accessible Name 전수 매핑
윈도우 고대비 모드(WHCM / Forced Colors) WCAG AAA 7.0:1: 모든 시맨틱 브러시 7:1 보증
전정기관 보호 움직임 감소(Reduced Motion SC 2.3.3): 애니메이션 지속시간 상한(<=300ms)
포커스 비가림(Focus Not Obscured SC 2.4.11/2.4.12): 스크롤 및 고정 요소 가림 차단
모달 포커스 트랩 및 Esc 안전 복원: 대화상자 포커스 순환 및 원래 위치 복원
게슈탈트 근접성 및 최적 행폭(CPL 50~75) 독서 인체공학: 안구 피로 방지 MaxWidth 제약

32 KiB Raw Blame History Unescape Escape