반응형 디자인과 미디어 쿼리

요약: 좁은 화면을 기본으로 두고, 레이아웃이 깨지는 폭에서만 미디어 쿼리와 clamp로 넓은 화면에 맞춘다.

---

언제 반응형을 처음부터 넣는가

화면 폭이 달라져도 같은 HTML을 쓰는 페이지면 반응형이 필요하다. 폰, 태블릿, 데스크톱을 따로 만들지 않는다.

좁은 화면 스타일을 기본으로 둔다. 넓어질 때만 규칙을 추가한다. 이를 모바일 우선이라고 한다. 데스크톱을 먼저 짜고 max-width로 깎으면 예외가 쌓인다.

---

모바일 우선 미디어 쿼리

@media는 조건이 맞을 때만 그 안의 CSS가 적용된다. min-width는 “이 폭 이상이면”이다.

.nav {
  display: none;
}

.nav-toggle {
  display: block;
}

@media (min-width: 768px) {
  .nav {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }
}

768px 미만에서는 햄버거만 보인다. 그 이상에서는 가로 내비가 보인다. 기본 상태가 좁은 화면이다.

---

브레이크포인트는 기기가 아니라 레이아웃이다

기기 목록(아이폰, 아이패드)을 쫓지 않는다. 실제 레이아웃이 답답해지거나 한 줄이 깨지는 폭에 끊는다.

팀에서 쓰는 지점은 소수면 된다.

이름	예	이 폭에서 하는 일
sm	640px	카드가 2열로 서기 시작
md	768px	가로 내비, 사이드바
lg	1024px	넓은 본문, 다열 대시보드

값은 프로젝트마다 달라도 된다. 중요한 것은 이름과 값을 한곳에 모아 두는 일이다. 컴포넌트마다 737px, 769px처럼 비슷한 숫자를 흩뿌리지 않는다.

---

폭에 따라 커지는 단위

미디어 쿼리 없이도 폭에 맞춰지는 값이 있다. 컨테이너 너비와 제목 크기가 대표이다.

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.title {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

min(100% - 2rem, 72rem)은 양쪽 1rem 여백을 남기되, 72rem을 넘지 않는다. 가운데 정렬은 margin-inline: auto이다.

clamp(최소, 선호, 최대)는 글자 크기를 화면 폭에 따라 움직이되 한계를 넘지 않는다. 2vw만 쓰면 큰 모니터에서 제목이 과하게 커진다.

단위	기준
%	부모 너비
vw	뷰포트 가로의 1%
rem	루트 글자 크기. 사용자 확대에 따라 변한다
clamp()	최소·선호·최대를 한 값으로

고정 px를 남발하면 확대와 좁은 화면에서 깨진다. 한계가 있는 유동 값이 더 안전하다.

---

이미지와 터치

큰 히어로를 모든 기기에 같은 파일로 주지 않는다. srcset과 sizes로 폭에 맞는 파일을 고른다.

<img
  src="/hero-800.webp"
  srcset="/hero-800.webp 800w, /hero-1600.webp 1600w"
  sizes="(min-width: 72rem) 72rem, 100vw"
  alt="작업 공간 전경"
  width="1600"
  height="900"
/>

터치 대상은 대략 44px 전후가 필요하다. 작은 아이콘만 있는 버튼은 padding을 늘린다.

호버로만 열리는 정보는 터치에서 도달할 수 없다. 호버 효과는 마우스가 있는 환경에만 둔다.

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-2px);
  }
}

---

흔한 실수

• 데스크톱 레이아웃을 기본으로 두고 max-width로 모바일만 예외 처리한다. 기본을 좁은 화면으로 뒤집는다.
• 브레이크포인트를 기기 이름에 맞춘다. 레이아웃이 깨지는 폭에 둔다.
• font-size: 3vw처럼 상한 없이 키운다. clamp로 최대를 둔다.
• 컨테이너를 width: 100%만 주고 좌우 여백이 없다. min(100% - gutter, max)를 쓴다.
• 호버 툴팁만으로 설명을 제공한다. 클릭이나 항상 보이는 텍스트를 남긴다.

---

정리

반응형은 미디어 쿼리 개수가 아니다. 좁은 화면을 기본으로 두고, 레이아웃이 실제로 바뀌는 지점만 확장하면 된다. 컨테이너와 글자 크기는 min·clamp로 한계를 정한 뒤, 쿼리로는 내비·열 수처럼 구조가 바뀌는 것만 다룬다.

---

연습

1. 좁은 화면에서 세로로 쌓인 카드를 min-width: 640px에서 2열 Grid로 바꾸되, 기본 CSS에는 1열만 둔다.
2. .container를 min(100% - 2rem, 72rem)으로 두고 창을 넓혀 72rem에서 멈추는지 확인한다.
3. 제목에 clamp를 적용하고, 브라우저 최소·최대 폭에서 글자 크기가 한계를 넘지 않는지 본다.