---
id: wiki-2026-0508-반응형-디자인
title: 반응형 디자인
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Responsive Design, RWD, Responsive Web Design]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [css, responsive, layout, media-query, container-query]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: CSS
  framework: Web
---

# 반응형 디자인

## 매 한 줄
> **"매 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 가 매 추가.

## 매 핵심

### 매 3 pillar (classic 2010)
- **Fluid grid**: % / fr 단위, 매 fixed px 안 씀.
- **Flexible media**: `max-width: 100%`, `<picture>`, `srcset`.
- **Media query**: `@media (min-width: 768px)` breakpoint.

### 매 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.

### 매 응용
1. Mobile-first CSS architecture.
2. Component-level responsive (card → list 변형).
3. Adaptive image delivery (`srcset` + `sizes`).

## 💻 패턴

### Mobile-first media query
```css
/* 매 base = mobile */
.card { padding: 12px; font-size: 14px; }

/* 매 tablet+ */
@media (min-width: 768px) {
  .card { padding: 24px; font-size: 16px; }
}

/* 매 desktop+ */
@media (min-width: 1280px) {
  .card { padding: 32px; font-size: 18px; }
}
```

### 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); }
```

### Container query (component-level)
```css
.card-container { container-type: inline-size; }

.card { display: block; }

@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
}
```

### 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>
```

### 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 */
```

### 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); }
```

## 매 결정 기준
| 상황 | 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 |