모바일 우선 반응형 전략이란 무엇이며, 컨테이너 쿼리는 어떻게 들어맞나요?

Question

Accepted Answer

**모바일 우선**은 데스크톱에서 시작해 요소를 덜어내는 대신, **가장 작은 화면**을 위한 기본 스타일을 작성한 뒤 `min-width` 미디어 쿼리로 큰 화면을 위한 복잡성을 *추가*하는 것을 의미합니다.

## 실무에서의 모바일 우선

```css
/* 기본: 모바일 — 단일 열, 단순 */
.layout { display: grid; gap: 1rem; }

/* 태블릿 이상을 위해 개선 */
@media (min-width: 768px) {
  .layout { grid-template-columns: 1fr 2fr; }
}
/* 데스크톱을 위해 더 개선 */
@media (min-width: 1200px) {
  .layout { grid-template-columns: 1fr 2fr 1fr; }
}
```

**모바일 우선이 이기는 이유:** 기본 CSS가 최소한으로 유지되고(모바일은 필요한 것만 받음 — 약한 디바이스의 성능에 좋음), 복잡성을 *쌓아 올리는데*, 이는 덮어쓰거나 제거하는 것보다 추론하기 쉽습니다. 또한 콘텐츠가 한 열에서 여러 열로 자연스럽게 재배치되는 방식과 일치합니다.

## 미디어 쿼리의 한계

미디어 쿼리는 **뷰포트** — 창 전체 — 에 반응합니다. 하지만 재사용 가능한 컴포넌트(예: 카드)는 같은 페이지에서 넓은 main 영역 *또는* 좁은 사이드바에 나타날 수 있습니다. 뷰포트 너비는 *컴포넌트*가 실제로 얼마나 공간을 갖는지 알려줄 수 없습니다.

## 컨테이너 쿼리가 이를 해결한다

```css
.card-wrapper {
  container-type: inline-size;  /* 쿼리 컨테이너로 선언 */
}

/* 뷰포트가 아니라 컨테이너의 너비를 기준으로 카드를 스타일링 */
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: auto 1fr; }
}
```

이제 같은 카드가 *자신의 컨테이너*가 400px 이상일 때마다 — 화면이 크든 넓은 열에 있든 — 자동으로 수평 레이아웃으로 전환됩니다. 컴포넌트가 진정으로 **컨텍스트 독립적이고 재사용 가능**해집니다.

## 둘은 서로 보완한다

- **미디어 쿼리** — 페이지 레벨 레이아웃, 전역 breakpoint, 사용자 선호(다크 모드, 모션 감소).
- **컨테이너 쿼리** — 재사용 가능한 컴포넌트를 위한 컴포넌트 레벨 반응성.

## 왜 중요한가

모바일 우선은 반응형 CSS를 가볍고 유지보수하기 좋게 유지합니다.

컨테이너 쿼리는 큰 진보입니다: 컴포넌트가 *자신의* 가용 공간에 반응하게 해주는데, 이는 같은 컴포넌트가 여러 컨텍스트에 놓이는 컴포넌트 기반 아키텍처(디자인 시스템, 재사용 가능한 카드/위젯)에서 정확히 필요한 것입니다.