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

10_Wiki/Topics/Frontend_Mastery/단일 코드베이스를 통한 멀티 디바이스(모바일-데스크톱) 웹 인터페이스 구축.md

@@ -1,4 +1,4 @@
-# [[단일 코드베이스를 통한 멀티 디바이스(모바일/데스크톱) 웹 인터페이스 구축]]
+# 단일 코드베이스를 통한 멀티 디바이스(모바일/데스크톱) 웹 인터페이스 구축
 
 ## 📌 Brief 시Summary
 반응형 웹 디자인(Responsive Web Design)은 모바일과 데스크톱용 사이트를 별도로 구축하는 대신, 유동적 그리드, 유연한 이미지, CSS 미디어 쿼리 등을 활용해 단일 코드베이스로 모든 기기에 유연하게 적응하는 인터페이스를 구축하는 방법론입니다 [1-3]. 이는 다양한 기기와 화면 크기에 일관된 사용자 경험을 제공하며, 모바일 우선 인덱싱(Mobile-first indexing) 및 Core Web Vitals와 같은 SEO 및 성능 최적화에 필수적인 요소로 자리 잡았습니다 [4-6].
@@ -25,8 +25,8 @@
 * 다양한 디바이스 환경, 특히 느린 모바일 네트워크에서도 빠른 경험을 제공해야 합니다 [13, 27]. 폴드 아래 이미지는 지연 로딩(lazy-loading)하고, LCP(Largest Contentful Paint)에 해당하는 핵심 이미지는 `fetchpriority="high"`로 로드하며, 사용하지 않는 뷰포트별 CSS는 분리해 렌더링 블로킹을 최소화해야 합니다 [28-31].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[반응형 웹 디자인(Responsive Web Design)]], [[모바일 우선 설계(Mobile-First Design)]], [[컨테이너 쿼리(Container Queries)]], [[CSS Grid / Flexbox]], [[유동적 타이포그래피(Fluid Typography)]]
-- **Projects/Contexts:** [[디자인 시스템 컴포넌트화]], [[Core Web Vitals 및 SEO 성능 최적화]]
+- **Related Topics:** 반응형 웹 디자인(Responsive Web Design), [[모바일 우선 설계(Mobile-First Design)]], [[컨테이너 쿼리(Container Queries)]], CSS Grid / Flexbox, [[유동적 타이포그래피(Fluid Typography)]]
+- **Projects/Contexts:** 디자인 시스템 컴포넌트화, Core Web Vitals 및 SEO 성능 최적화
 - **Contradictions/Notes:**
   - 중단점(Breakpoints) 설정과 관련하여, 특정 기기 해상도(예: 아이폰 사이즈)에 맞추어 고정된 중단점을 설정하는 것보다 "콘텐츠가 깨지기 시작하는 지점"을 기준으로 중단점을 설정하는 것이 모범 사례로 강조됩니다 [32, 33].
   - `vw`나 `cqi` 같은 뷰포트 및 컨테이너 상대 단위만을 이용해 폰트 크기를 제어하면, 시각 장애인 등 접근성 사용자가 브라우저 확대/축소 기능을 사용할 때 글씨가 커지지 않는 문제(WCAG 1.4.4 위반)가 발생할 수 있습니다. 따라서 반드시 `calc()`나 `clamp()`를 통해 `rem`, `em` 단위와 결합하여 사용자의 줌(Zoom) 기본 설정을 존중해야 합니다 [34-39].