07 — Mobile-first & RWD 역사

답하는 질문: 왜 모바일을 먼저 작성해야 하는가? RWD는 어디서 와서 어디로 가는가?

한 줄 답

모바일 퍼스트는 제약을 기본값으로 쓰는 전략이다 — 좁은 화면·느린 네트워크·터치 입력을 기본으로 두고, 더 넓은 화면에서 무엇을 더할지를 min-width로 누적한다. 데스크탑 퍼스트(=max-width 사슬)는 되돌리기이고, 모바일 퍼스트(=min-width 누적)는 덧붙이기다. CSS의 Cascade 본성에 맞는 방향은 후자.

Why — 모바일 퍼스트가 필요한 이유

1) 2010년의 모바일 인구

iPhone(2007) → 2010년에는 모바일 트래픽이 데스크탑을 추월할 것이라는 예측이 우세. 실제로 2016년에 그 일이 일어났다(StatCounter). 2024년 현재 모바일 트래픽 비중 약 60%.

2) Luke Wroblewski의 Mobile First (2011)

A Book Apart에서 출간된 짧은 책. 핵심 주장 3가지:

1. Mobile is exploding — 데이터로 증명.
2. Mobile forces focus — 좁은 공간이 불필요한 것을 제거하게 함.
3. Mobile extends capabilities — GPS, 카메라, 가속도계 등 데스크탑이 못 하는 것을 줌.

3) CSS Cascade 측면의 정당성

/* 데스크탑 퍼스트 — max-width 사슬 */
.card { font-size: 18px; padding: 2rem; }
@media (max-width: 1023px) { .card { padding: 1.5rem; } }
@media (max-width: 767px)  { .card { font-size: 16px; padding: 1rem; } }
@media (max-width: 480px)  { .card { font-size: 14px; padding: 0.5rem; } }

→ 가장 흔한 모바일이 최대로 덮어쓰기를 받음 — 캐스케이드가 무거움.

/* 모바일 퍼스트 — min-width 누적 */
.card { font-size: 14px; padding: 0.5rem; }    /* 기본 = 모바일 */
@media (min-width: 481px)  { .card { font-size: 16px; padding: 1rem; } }
@media (min-width: 768px)  { .card { padding: 1.5rem; } }
@media (min-width: 1024px) { .card { font-size: 18px; padding: 2rem; } }

→ 기본은 모바일, 데스크탑에서 점진적으로 향상. 모바일이 덮어쓰기 없이 빠르게 렌더링.

4) 성능 측면

모바일 디바이스가 CPU·네트워크가 약한 경우가 많음. 데스크탑 퍼스트는 큰 CSS·이미지를 먼저 받고 작은 것으로 줄임 — 모바일에서 낭비.

How — 전략 비교

1) 브레이크포인트 전략

디바이스 폭이 아니라 콘텐츠 깨지는 지점을 브레이크포인트로 — Marcotte 본인의 권장.

/* 디바이스 기반 (안티) */
@media (min-width: 768px) { ... }   /* "iPad" — 의미가 흐림 */
 
/* 콘텐츠 기반 (권장) */
@media (min-width: 45ch) { ... }    /* "한 줄에 45자가 들어가면" */
@media (min-width: 60em) { ... }    /* "타이포그래피 기준 60em" */

ch/em 단위는 콘텐츠가 의미 있게 변하는 지점을 표현 — 디바이스가 아닌 읽기 경험에 반응.

2) 단계적 향상 (Progressive Enhancement)

• Layer 1 — HTML이 의미 있게 동작. CSS·JS 없이도 사용 가능.
• Layer 2 — CSS로 모바일 기본 스타일 적용.
• Layer 3 — min-width 미디어 쿼리로 데스크탑 향상.
• Layer 4 — :has·@container·@scope로 컴포넌트 단위 향상.

3) 모바일 퍼스트의 예외 — Print

/* 인쇄는 모바일 퍼스트의 예외 — 큰 화면 가정 */
@media print { ... }

4) prefers-reduced-data (실험적)

@media (prefers-reduced-data: reduce) {
  img { display: none; }   /* 데이터 절약 모드면 이미지 숨김 */
}

→ 모바일 사용자의 네트워크 제약에 직접 반응. 2026-05 기준 Chrome만 지원.

What — RWD의 14년 연표

What-if — 잘못 쓰면

Case 1: 데스크탑 퍼스트 + 잘못된 브레이크포인트

.menu { display: flex; }
@media (max-width: 768px) { .menu { display: none; } }  /* 햄버거 메뉴 */

→ 모바일이 기본인 사이트에서 데스크탑 퍼스트로 작성. 모바일은 flex를 잠시 받았다가 none으로 덮어씀 — 한 단계 낭비.

Case 2: 디바이스 폭에 종속

@media (min-width: 768px) { ... }   /* "iPad 가로?" 가정 */

→ Galaxy Tab은 800px, Surface는 다양 — 디바이스를 맞추는 게 불가능. 콘텐츠 폭(ch/em)으로 전환.

Case 3: 미디어 쿼리 남발

@media (min-width: 320px) { ... }
@media (min-width: 360px) { ... }
@media (min-width: 400px) { ... }
@media (min-width: 480px) { ... }
@media (min-width: 600px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 1024px) { ... }

→ 7개 브레이크포인트는 유지 불가. 3~4개로 줄이고, 나머지는 clamp로 연속 적응(06-fluid-design).

Case 4: 모바일 퍼스트 + 누락

.card { font-size: 14px; }
@media (min-width: 768px) { .card { font-size: 16px; } }
/* 1024px 이상에서? — 누락 */

→ 1024px 사용자는 768px 스타일이 그대로. min-width 사슬은 상위 호환이 자동이지만, 의도 누락은 의도와 다른 결과.

Case 5: prefers-reduced-motion 미적용

모바일 퍼스트라고 좋은 게 아님. 접근성 선호는 모든 미디어 쿼리와 직교해야 함.

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

Insight — RWD의 다음은?

Marcotte 본인이 2020년 10주년 회고에서 말했다:

“내가 2010년에 RWD를 제안했을 때, ‘이것이 모바일을 풀 것’이라고 생각했다. 실제로는 모바일이 RWD를 진화시켰다.”

2010년의 RWD는 디바이스 적응 도구였다. 2024년의 RWD는 컨텍스트 적응 패러다임이다.

각 시대는 이전을 부정하지 않고 확장한다. 우리는 여전히 미디어 쿼리를 쓰고, min-width 누적을 쓴다 — 그러나 그 위에 intrinsic, contextual 도구가 쌓였다.

반응형의 미래는 “더 적은 미디어 쿼리, 더 많은 협상”.

clamp + grid + container + has + scope — 이 5개 도구가 대부분의 반응형 요구를 미디어 쿼리 0~3개로 해결할 수 있는 시대가 왔다. 2010년 Marcotte의 약속(“하나의 사이트, 모든 디바이스”) 이 14년 만에 진짜 가능해졌다.

요약 + Mermaid

• 모바일 퍼스트 = min-width 누적 — CSS Cascade와 일치.
• 데스크탑 퍼스트(max-width 사슬)는 덮어쓰기 낭비.
• 브레이크포인트는 디바이스가 아니라 콘텐츠 기반(ch/em).
• RWD는 4세대 진화 — Responsive → Adaptive → Intrinsic → Contextual.
• 모던 도구로 미디어 쿼리 최소화가 가능.

이로써 07-responsive 챕터 완료. 다음 도메인은 08-architecture — 토큰·BEM·Tailwind·CSS-in-JS.