docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links

10_Wiki/Topics_Art/UI_UX_Assets/반응형 디자인(Responsive Design).md

@@ -1,4 +1,4 @@
-# [[반응형 디자인(Responsive Design)]]
+# [[반응형 디자인(Responsive Design)|반응형 디자인(Responsive Design)]]
 
 ## 📌 Brief Summary
 반응형 웹 디자인(Responsive Web Design)은 유동형 그리드, 유연한 이미지, CSS 미디어 쿼리 등을 사용하여 사용자의 화면 크기나 기기에 맞게 레이아웃, 타이포그래피, 미디어가 유동적으로 적응하도록 인터페이스를 구축하는 기술입니다 [1, 2]. 이를 통해 모바일, 태블릿, 데스크톱용 사이트를 별도로 구축할 필요 없이 단일 코드베이스로 관리할 수 있어 일관된 사용자 경험을 제공하며, 검색 엔진 최적화(SEO)와 성능 지표(Core Web Vitals) 개선에도 필수적인 역할을 합니다 [1-6]. 최근에는 화면 크기(뷰포트) 기준에서 벗어나 컨테이너 쿼리(Container Queries)와 `clamp()` 함수를 활용하여 컴포넌트 자체의 문맥에 맞게 반응하는 모듈식 설계로 진화하고 있습니다 [2, 3, 7, 8].
@@ -16,8 +16,8 @@
   * **성능 및 미디어 최적화:** 로딩 속도 향상과 누적 레이아웃 이동(CLS) 방지를 위해 이미지에 명시적인 `width`와 `height` 속성을 부여하거나 `aspect-ratio`를 사용합니다 [18, 35, 39]. WebP 등 최신 포맷 사용, 반응형 이미지(`srcset`, `sizes`), 지연 로딩(Lazy-loading)을 통해 Core Web Vitals 성능을 최적화합니다 [18, 24, 31, 35, 40, 41].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[레이아웃 Flexbox / Grid 완전 이해]], [[디자인 시스템 개념]]
-- **Projects/Contexts:** [[모바일 퍼스트 인덱싱(Mobile-First Indexing)]], [[Core Web Vitals]]
+- **Related Topics:** [[레이아웃 Flexbox - Grid 완전 이해|레이아웃 Flexbox / Grid 완전 이해]], [[디자인 시스템 개념|디자인 시스템 개념]]
+- **Projects/Contexts:** [[모바일 퍼스트 인덱싱(Mobile-First Indexing)|모바일 퍼스트 인덱싱(Mobile-First Indexing)]], [[Core Web Vitals|Core Web Vitals]]
 - **Contradictions/Notes:** 모바일 퍼스트(Mobile-first)와 반응형 디자인(Responsive design)은 종종 동일한 개념으로 오해받지만 서로 다릅니다. 모바일 퍼스트는 제한된 공간에서 필수적인 요소를 결정하는 '콘텐츠 우선순위 및 설계 전략'인 반면, 반응형 디자인은 레이아웃이 화면에 맞게 유동적으로 변하도록 만드는 '구현 시스템 및 기술'입니다 [42-44]. 또한 순수 뷰포트 상대 단위(vw)만으로 폰트 크기를 설정하면 사용자의 접근성 줌(zoom) 기능이나 글꼴 기본 설정을 무력화할 수 있어, `calc()`나 `clamp()`를 활용해 사용자 기본 설정(`em`, `rem`)과 혼합하는 방식이 필수적입니다 [45-49].
 
 ---