Fix: Restore unified Topics folder and reorganize specialized category folders

10_Wiki/Topics/반응형 디자인.md

@@ -0,0 +1,33 @@
+# [[반응형 디자인|반응형 디자인]]
+
+## 📌 Brief Summary
+반응형 웹 디자인([[Responsive Web Design|Responsive Web Design]])은 모바일, 태블릿, 데스크톱 등 다양한 화면 크기와 기기에 맞춰 인터페이스가 유동적으로 적응하도록 구축하는 설계 방식입니다 [1, 2]. 이를 통해 사용자는 어떤 기기에서든 줌인/줌아웃 없이 일관되고 빠르며 접근성 높은 경험을 제공받을 수 있습니다 [1, 3]. 최근에는 단순한 화면 크기 대응을 넘어 코어 웹 바이탈([[Core Web Vitals|Core Web Vitals]]) 성능을 최적화하고 컴포넌트 단위의 유연성을 확보하는 방향으로 진화하고 있습니다 [4-6].
+
+## 📖 Core Content
+*   **5대 핵심 원칙 (2025~2026 기준):** 
+    1.  **유동적 그리드(Fluid Grids):** 고정된 픽셀이 아닌 퍼센트(%)나 `fr`과 같은 상대적인 단위를 사용하여 화면 크기에 맞춰 자연스럽게 크기가 변하도록 설계합니다 [7, 8].
+    2.  **컨테이너 쿼리([[Container Queries|Container Queries]]):** 전체 뷰포트(브라우저 창)가 아닌, 컴포넌트를 감싸는 부모 컨테이너의 크기에 따라 스타일이 반응하도록 만들어 컴포넌트의 완벽한 재사용성을 보장합니다 [5, 6, 9].
+    3.  **유동적 타이포그래피([[Fluid Typography|Fluid Typography]]):** `clamp()` 함수를 사용하여 텍스트 크기가 최소값과 최대값 사이에서 화면 크기에 비례해 부드럽게 조정되도록 합니다 [10-12].
+    4.  **유연한 미디어(Flexible Media):** 이미지와 비디오가 부모 요소를 벗어나지 않도록 `max-width: 100%` 및 `height: auto`를 적용하며, 해상도에 맞게 적절한 크기의 이미지를 제공(`srcset` 사용)합니다 [10, 13].
+    5.  **콘텐츠 기반의 중단점(Breakpoints):** 특정 기기(아이폰, 아이패드 등)의 크기를 기준으로 삼는 것이 아니라, 디자인과 콘텐츠가 깨지기 시작하는 지점을 기준으로 중단점을 설정합니다 [14, 15].
+
+*   **모바일 퍼스트(Mobile-First) 전략:**
+    *   가장 작은 화면의 모바일 레이아웃과 핵심 기능을 먼저 설계한 뒤, 미디어 쿼리(`min-width`)를 사용하여 더 큰 화면에 맞춰 레이아웃을 점진적으로 확장해 나가는 방식입니다 [16, 17].
+    *   이는 구글의 모바일 우선 색인(Mobile-First Indexing) 정책에 최적화되어 검색 엔진 최적화(SEO) 순위를 높이며, 불필요한 코드 및 리소스 로드를 막아 웹 성능을 향상시킵니다 [4, 18].
+
+*   **컴포넌트 중심적 사고와 레이아웃:**
+    *   페이지 단위가 아닌 독립적인 '컴포넌트 단위'로 반응형을 설계하는 것이 중요합니다 [19]. 이를 통해 디자인 시스템 내에서 어떤 맥락에 배치되든 유지보수하기 쉽게 동작합니다 [20, 21].
+    *   **레이아웃 구성 도구:** 1차원적(행 또는 열)인 정렬과 공간 분배에는 **[[Flexbox|Flexbox]]**를 활용하고, 2차원적인 복잡한 격자 구조를 구축할 때는 **[[CSS Grid|CSS Grid]]**를 사용하여 구조적이고 간결한 반응형 레이아웃을 구현합니다 [22-24].
+
+*   **접근성([[Accessibility|Accessibility]]) 및 UX 최적화:**
+    *   모바일 환경의 터치 정확도를 위해 상호작용 요소의 크기를 최소 44x44px 이상 확보하고 요소 간 충분한 여백을 제공해야 합니다 [25, 26].
+    *   화면 공간이 좁은 모바일에서는 중요도가 낮은 정보를 탭(Tab), 아코디언(Accordion), 모달 등으로 묶어 제공하는 점진적 공개(Progressive Disclosure) 기법을 사용하여 복잡도를 줄입니다 [27, 28].
+    *   모든 로고와 아이콘은 해상도에 상관없이 무한히 깨끗하게 확장되는 SVG 포맷을 사용하는 것이 좋습니다 [27, 29].
+
+## 🔗 Knowledge Connections
+- **Related Topics:** [[CSS Grid|CSS Grid]], Flexbox, Container Queries, [[모바일 퍼스트(Mobile-First)|모바일 퍼스트(Mobile-First]], [[Fluid Typography|Fluid Typography]]
+- **Projects/Contexts:** [[디자인 시스템 개념|디자인 시스템 개념]], [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]]
+- **Contradictions/Notes:** 과거 반응형 디자인은 전체 뷰포트 크기에 의존하는 미디어 쿼리(Media Queries)를 주축으로 하였으나, 최근의 모던 웹 설계에서는 이를 넘어서 컴포넌트가 자신이 속한 부모 요소의 공간에 맞춰 스스로 레이아웃을 변경하는 컨테이너 쿼리(Container Queries) 방식이 진정한 재사용성을 위한 표준으로 강조되고 있습니다 [5, 6, 9].
+
+---
+*Last updated: 2026-04-26*