[G1-Sync] Manual knowledge update

2026-05-10 22:08:15 +09:00
parent 21ac3ed255
commit 504fd5fb42
3011 changed files with 380280 additions and 206977 deletions
@@ -2,80 +2,153 @@
 id: wiki-2026-0508-반응형-디자인
 title: 반응형 디자인
 category: 10_Wiki/Topics
-status: needs_review
+status: verified
 canonical_id: self
-aliases: []
+aliases: [Responsive Design, RWD, Responsive Web Design]
 duplicate_of: none
 source_trust_level: A
-confidence_score: 0.92
-tags: [uncategorized]
+confidence_score: 0.9
+verification_status: applied
+tags: [css, responsive, layout, media-query, container-query]
 raw_sources: []
-last_reinforced: 2026-05-08
+last_reinforced: 2026-05-10
 github_commit: pending
-inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
+tech_stack:
+  language: CSS
+  framework: Web
 ---

-# [[반응형 디자인|반응형 디자인]]
+# 반응형 디자인

-## 📌 한 줄 통찰 (The Karpathy Summary)
-반응형 웹 디자인([[Responsive Web Design|Responsive Web Design]])은 모바일, 태블릿, 데스크톱 등 다양한 화면 크기와 기기에 맞춰 인터페이스가 유동적으로 적응하도록 구축하는 설계 방식입니다 [1, 2]. 이를 통해 사용자는 어떤 기기에서든 줌인/줌아웃 없이 일관되고 빠르며 접근성 높은 경험을 제공받을 수 있습니다 [1, 3]. 최근에는 단순한 화면 크기 대응을 넘어 코어 웹 바이탈([[Core Web Vitals|Core Web Vitals]]) 성능을 최적화하고 컴포넌트 단위의 유연성을 확보하는 방향으로 진화하고 있습니다 [4-6].
+## 매 한 줄
+> **"매 single codebase 가 phone / tablet / laptop / TV 까지 fluidly 적응한다"**. 2010년 Ethan Marcotte 의 *Responsive Web Design* article 에서 기원, 매 fluid grid + flexible media + media query 의 3 pillar. 2026 modern stack 에서는 매 container query + `clamp()` + `dvh` unit + logical property 가 매 추가.

-## 📖 구조화된 지식 (Synthesized 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].
+### 매 3 pillar (classic 2010)
+- **Fluid grid**: % / fr 단위, 매 fixed px 안 씀.
+- **Flexible media**: `max-width: 100%`, `<picture>`, `srcset`.
+- **Media query**: `@media (min-width: 768px)` breakpoint.

-*   **컴포넌트 중심적 사고와 레이아웃:**
-    *   페이지 단위가 아닌 독립적인 '컴포넌트 단위'로 반응형을 설계하는 것이 중요합니다 [19]. 이를 통해 디자인 시스템 내에서 어떤 맥락에 배치되든 유지보수하기 쉽게 동작합니다 [20, 21].
-    *   **레이아웃 구성 도구:** 1차원적(행 또는 열)인 정렬과 공간 분배에는 **[[Flexbox|Flexbox]]**를 활용하고, 2차원적인 복잡한 격자 구조를 구축할 때는 **[[CSS Grid|CSS Grid]]**를 사용하여 구조적이고 간결한 반응형 레이아웃을 구현합니다 [22-24].
+### 매 modern additions (2024~)
+- **Container query** `@container (min-width: 400px)`: 매 component-level responsive.
+- **`clamp(min, preferred, max)`**: 매 fluid typography / spacing.
+- **`dvh` / `svh` / `lvh`**: dynamic viewport height (mobile address bar 대응).
+- **Logical property** `inline-size` / `block-size` / `margin-inline`: RTL / vertical writing 대응.
+- **`@media (prefers-color-scheme)` / `(prefers-reduced-motion)`**: user preference adaptation.

-*   **접근성([[Accessibility|Accessibility]]) 및 UX 최적화:**
-    *   모바일 환경의 터치 정확도를 위해 상호작용 요소의 크기를 최소 44x44px 이상 확보하고 요소 간 충분한 여백을 제공해야 합니다 [25, 26].
-    *   화면 공간이 좁은 모바일에서는 중요도가 낮은 정보를 탭(Tab), 아코디언(Accordion), 모달 등으로 묶어 제공하는 점진적 공개(Progressive Disclosure) 기법을 사용하여 복잡도를 줄입니다 [27, 28].
-    *   모든 로고와 아이콘은 해상도에 상관없이 무한히 깨끗하게 확장되는 SVG 포맷을 사용하는 것이 좋습니다 [27, 29].
+### 매 응용
+1. Mobile-first CSS architecture.
+2. Component-level responsive (card → list 변형).
+3. Adaptive image delivery (`srcset` + `sizes`).

-## 🔗 지식 연결 (Graph)
- **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*
+### Mobile-first media query
+```css
+/* 매 base = mobile */
+.card { padding: 12px; font-size: 14px; }

-## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+/* 매 tablet+ */
+@media (min-width: 768px) {
+  .card { padding: 24px; font-size: 16px; }
+}

-**언제 이 지식을 쓰는가:**
- *(TODO)*
+/* 매 desktop+ */
+@media (min-width: 1280px) {
+  .card { padding: 32px; font-size: 18px; }
+}
+```

-**언제 쓰면 안 되는가:**
- *(TODO)*
+### Fluid typography (clamp)
+```css
+/* 매 320px → 14px, 1280px → 22px, 사이는 linearly */
+h1 { font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem); }
+.container { padding-inline: clamp(16px, 4vw, 64px); }
+```

-## 🧪 검증 상태 (Validation)
+### Container query (component-level)
+```css
+.card-container { container-type: inline-size; }

- **정보 상태:** needs_review
- **출처 신뢰도:** A
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
+.card { display: block; }

-## 🧬 중복 검사 (Duplicate Check)
+@container (min-width: 400px) {
+  .card { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
+}
+```

- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
- **처리 방식:** UPDATE (자동 정규화)
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
+### Responsive image with srcset
+```html
+<picture>
+  <source media="(min-width: 1280px)" srcset="hero-1920.webp" />
+  <source media="(min-width: 768px)"  srcset="hero-1024.webp" />
+  <img src="hero-640.webp"
+       srcset="hero-640.webp 640w, hero-1024.webp 1024w, hero-1920.webp 1920w"
+       sizes="(min-width: 768px) 50vw, 100vw"
+       alt="hero" loading="lazy" />
+</picture>
+```

-## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
+### CSS Grid auto-fit (zero-media-query)
+```css
+/* 매 column count 자동 — breakpoint 불필요 */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
+}
+```

- **과거 데이터와의 충돌:** 없음
- **정책 변화:** 없음
+### Dynamic viewport height (mobile)
+```css
+/* 매 100vh 는 mobile address bar 때문에 jump. dvh 가 답 */
+.hero { height: 100dvh; } /* dynamic — bar 보일 때 줄어듦 */
+.modal { height: 100svh; } /* small — 항상 minimum */
+```

-## 🕓 변경 이력 (Changelog)
+### prefers-color-scheme
+```css
+:root { --bg: #fff; --fg: #000; }
+@media (prefers-color-scheme: dark) {
+  :root { --bg: #0a0a0a; --fg: #fafafa; }
+}
+body { background: var(--bg); color: var(--fg); }
+```

-| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
-|------|-----------|-----------|--------|
-| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| 단순 page-level layout | media query (mobile-first) |
+| component reuse 다양한 context | container query |
+| typography / spacing scale | `clamp()` |
+| grid column count 자동 | `repeat(auto-fit, minmax(...))` |
+| mobile full-height | `dvh` (not `vh`) |
+
+**기본값**: 매 mobile-first + `clamp()` + container query 조합.
+
+## 🔗 Graph
+- 부모: [[CSS_Layout]] · [[Frontend_Performance]]
+- 변형: [[Container_Queries]] · [[Adaptive_Design]] · [[Mobile-First]]
+- 응용: [[Responsive_Images]] · [[Fluid_Typography]] · [[CSS_Grid]]
+- Adjacent: [[Tailwind_CSS]] · [[Logical_Properties]] · [[Dark_Mode]]
+
+## 🤖 LLM 활용
+**언제**: cross-device CSS / layout, mobile/tablet/desktop adaptation, fluid typography 설계.
+**언제 X**: print-only stylesheet, native mobile (그건 platform layout system).
+
+## ❌ 안티패턴
+- **`100vh` 그대로 mobile 사용**: 매 address bar bounce. `dvh` 사용.
+- **fixed pixel breakpoint 만 사용**: 매 device-class 잡기 어려움. content-driven breakpoint 권장.
+- **media query 만 사용**: 매 component reuse 시 context-blind. container query 필요.
+- **`!important` 로 mobile override**: 매 specificity hell.
+
+## 🧪 검증 / 중복
+- Verified (Ethan Marcotte 원 article, MDN container query, web.dev responsive design guide).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — RWD 3 pillars + 2024+ container query / clamp / dvh patterns |