bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete wikification of War Commander batch 1&2 and final grey dot cleanup

Browse Source
This commit is contained in:
yesung
2026-04-27 18:58:22 +09:00
parent 3424166ea2
commit 6b86b0da4c
2706 changed files with 9074 additions and 7273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topics/Frontend_Mastery/웹 접근성(Web Accessibility).md
+2 -2
View File
@@ -14,8 +14,8 @@
* **디자인 시스템에서의 접근성 관리:** 디자인 시스템의 컬러 토큰을 설정할 때 WCAG 명암비(Contrast Ratio) 준수 여부를 반드시 테스트해야 하며, 접근성 고려를 잊는 것은 토큰 설계의 주요 함정 중 하나입니다 [15-17].
## 🔗 Knowledge Connections
- **Related Topics:** [[반응형 웹 디자인(Responsive Web Design)]], [[유동적 타이포그래피(Fluid Typography)]], [[애니메이션 성능 최적화 및 모션 제어]], [[디자인 시스템(Design Systems)]]
- **Projects/Contexts:** [[WCAG 1.4.4 텍스트 200% 확대 대응]], [[prefers-reduced-motion 미디어 쿼리 구현]], [[키보드 탐색 및 포커스 상태 설계]]
- **Related Topics:** 반응형 웹 디자인(Responsive Web Design), [[유동적 타이포그래피(Fluid Typography)]], 애니메이션 성능 최적화 및 모션 제어, [[디자인 시스템(Design Systems)]]
- **Projects/Contexts:** WCAG 1.4.4 텍스트 200% 확대 대응, prefers-reduced-motion 미디어 쿼리 구현, 키보드 탐색 및 포커스 상태 설계
- **Contradictions/Notes:** 화면 크기에만 반응하게 만들기 위해 뷰포트 단위(`vw`, `vh`)를 단독으로 폰트 크기에 적용하면, 브라우저가 창 크기에 따라 글씨를 조정할 수는 있어도 사용자가 브라우저 자체의 "확대(Zoom)" 기능을 사용할 때는 글씨 크기가 변하지 않아 오히려 접근성을 심각하게 해치는 결과를 초래합니다 [6, 11]. 따라서 `calc()`나 `clamp()`를 통해 기본 픽셀 혹은 `em/rem` 값과 혼합하여 줌(zoom) 기능에 반응하도록 설계해야 합니다 [18, 19].
---