반응형 디자인 — 모든 화면에 맞추기

이 토픽을 마치면

미디어 쿼리, 모바일 퍼스트 전략, 그리고 반응형 레이아웃의 핵심 패턴을 이해하게 됩니다.

하나의 코드, 모든 화면

웹사이트는 데스크톱, 태블릿, 스마트폰에서 모두 보입니다. 화면 크기가 다릅니다. **반응형 디자인(Responsive Design)**은 하나의 HTML/CSS로 모든 화면 크기에 맞게 레이아웃을 변경하는 것입니다.

viewport 메타 태그

반응형의 첫 번째 단계:

html

<meta name="viewport" content="width=device-width, initial-scale=1" />

이 태그가 없으면 모바일 브라우저가 데스크톱 크기로 페이지를 렌더링한 다음 축소해서 보여줍니다. 글씨가 아주 작아집니다.

미디어 쿼리

css

/* 기본 스타일 (모바일) */
.container {
  display: flex;
  flex-direction: column;
}

/* 768px 이상일 때 (태블릿) */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

/* 1024px 이상일 때 (데스크톱) */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

미디어 쿼리는 화면 크기에 따라 다른 CSS를 적용합니다. min-width는 "이 너비 이상일 때"라는 뜻입니다.

모바일 퍼스트

위 코드처럼 기본 스타일을 모바일용으로 작성하고, 화면이 커질수록 스타일을 추가하는 방식을 **모바일 퍼스트(Mobile First)**라고 합니다.

반대로 데스크톱부터 만들고 작은 화면에 맞추는 건 "데스크톱 퍼스트"입니다. 모바일 퍼스트가 권장됩니다. 이유:

모바일 사용자가 더 많습니다
좁은 화면에 핵심만 넣으면, 넓은 화면에서 확장하기 쉽습니다
반대로 넓은 화면의 복잡한 레이아웃을 좁은 화면에 욱여넣기는 어렵습니다

상대 단위 활용

고정 단위(px)보다 상대 단위가 반응형에 유리합니다:

css

/* 고정 — 화면 넘칠 수 있음 */
.box { width: 800px; }

/* 상대 — 화면에 맞춤 */
.box { width: 90%; max-width: 800px; }

/* rem — 사용자 글꼴 크기에 비례 */
.title { font-size: 2rem; }

이미지도 고정 크기 대신:

css

img {
  max-width: 100%;
  height: auto;
}

컨테이너보다 크면 자동으로 줄어들고, 비율은 유지됩니다.

흔한 브레이크포인트

text

320px  — 작은 모바일
375px  — 일반 모바일 (iPhone)
768px  — 태블릿
1024px — 작은 데스크톱
1280px — 데스크톱

이 숫자에 집착할 필요는 없습니다. 콘텐츠가 깨지는 지점에서 브레이크포인트를 잡는 게 가장 좋습니다.

핵심

반응형 디자인은 미디어 쿼리로 화면 크기에 따라 다른 CSS를 적용합니다. 모바일 퍼스트로 작성하고 큰 화면으로 확장하는 게 권장됩니다. 고정 단위(px)보다 **상대 단위(%,rem)**와 max-width를 함께 쓰세요.