반응형 규칙

반응형은 기준을 정해 일관되게 적용하는 것이 핵심입니다. SLUR은 두 가지 기본값을 둡니다 — Mobile-first를 우선 고려하고, 분기점은 최소한(기본 하나)으로 둡니다.

두 원칙 모두 근본 목적은 같습니다. 관리 요소를 줄여 유지보수 비용을 낮추는 것입니다.

---

기본 방향: Mobile-first를 우선 고려한다

프로젝트 기준(Mobile-first 또는 PC-first)을 정하고 일관되게 적용합니다. 기본값은 Mobile-first이며, 이는 절대 규칙이 아니라 먼저 검토하는 기본값입니다. 프로젝트 성격에 따라 판단합니다.

사용률 근거

전 세계 웹 트래픽의 약 60~64%가 모바일입니다(StatCounter, 2025). 다수 사용자의 환경을 기준으로 설계하는 것이 자연스럽습니다.

리소스·비용 근거

가장 제약이 큰 화면(모바일)을 기본 스타일로 두고, min-width로 큰 화면을 점진적으로 향상(progressive enhancement) 합니다.

제약된 기기가 데스크톱용 오버라이드를 처리하지 않고, 이미지·지연 로딩 전략과 결합하면 다수 사용자의 다운로드·연산이 줄어 결국 비용이 줄어듭니다.

미디어쿼리 자체가 리소스 다운로드를 막는 것은 아닙니다. 절약의 실체는 “핵심을 먼저 설계하고 점진적으로 향상하는 구조” 입니다.

예외

관리자 툴, B2B 대시보드처럼 데스크톱 사용이 우세한 프로젝트는 PC-first가 더 맞을 수 있습니다. 프로젝트 성격을 보고 정합니다.

---

분기점은 최소한으로 — 기본 하나

특수한 경우가 아니면 분기점은 하나만 둡니다. 대부분의 화면은 데스크톱 ↔ 모바일 두 상태로 충분합니다.

콘텐츠 기준

분기점은 특정 기기 폭이 아니라 레이아웃이 실제로 깨지는 지점에만 둡니다. 기기 종류마다 분기점을 늘리지 않습니다.

유지보수·비용 근거

분기점 × 상태(data-state) × 디바이스 클래스(mo_/pc_)가 곱해지며 테스트·유지보수 표면이 조합적으로 커집니다. 분기점을 줄이는 것이 곧 관리 요소와 비용을 줄이는 것입니다.

예외

태블릿 전용 레이아웃, 데이터 밀도가 크게 달라지는 대시보드처럼 콘텐츠가 실제로 요구할 때만 분기점을 추가합니다.

---

작성 예시

/* Mobile-first (기본) — 모바일이 기본 스타일, 큰 화면을 향상 */
.card_product { width: 100%; }
@media (min-width: 769px) {
  .card_product { width: 300px; }
}

/* PC-first — 데스크톱 우세 프로젝트에서만 */
.card_product { width: 300px; }
@media (max-width: 768px) {
  .card_product { width: 100%; }
}

디바이스 표시 전환은 mo_/pc_ 클래스로 처리합니다.

.mo_show { display: none; }
.pc_show { display: block; }

@media (max-width: 768px) {
  .mo_show { display: block; }
  .mo_hide { display: none; }
  .pc_show { display: none; }
  .pc_hide { display: block; }
}