반응형 웹 디자인이란?
반응형 웹 디자인(Responsive Web Design)은 하나의 HTML로 모든 화면 크기에 최적화된 레이아웃을 제공하는 기법입니다. 스마트폰, 태블릿, 노트북, 대형 모니터까지 — 하나의 사이트가 모든 기기에서 자연스럽게 보이도록 만듭니다.
2016년 모바일 트래픽이 데스크톱을 추월했고, 2026년 현재는 전체 웹 트래픽의 약 60%가 모바일입니다. 반응형은 선택이 아니라 필수입니다.
viewport 메타 태그
반응형의 첫 단계는 HTML <head>에 viewport 메타 태그를 넣는 것입니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">이 태그가 없으면 모바일 브라우저가 페이지를 데스크톱 크기(보통 980px)로 렌더링한 뒤 축소해서 보여줍니다. 글씨가 아주 작게 보이는 모바일 사이트를 본 적 있다면, 이 태그가 빠진 것입니다.
미디어 쿼리 (Media Queries)
화면 크기에 따라 다른 CSS를 적용하는 핵심 도구입니다.
/* 기본 스타일 (모바일) */
.container {
padding: 16px;
}
/* 768px 이상일 때 (태블릿) */
@media (min-width: 768px) {
.container {
padding: 24px;
max-width: 720px;
margin: 0 auto;
}
}
/* 1024px 이상일 때 (데스크톱) */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}자주 쓰는 브레이크포인트
| 이름 | 크기 | 기기 |
|---|---|---|
| sm | 640px | 큰 스마트폰 |
| md | 768px | 태블릿 |
| lg | 1024px | 작은 노트북 |
| xl | 1280px | 데스크톱 |
| 2xl | 1536px | 대형 모니터 |
모바일 퍼스트 vs 데스크톱 퍼스트
모바일 퍼스트 (추천)
기본 스타일을 모바일용으로 작성하고, min-width로 점점 키워갑니다.
/* 기본 = 모바일 */
.nav { flex-direction: column; }
/* 태블릿 이상 */
@media (min-width: 768px) {
.nav { flex-direction: row; }
}데스크톱 퍼스트
기본 스타일을 데스크톱용으로 작성하고, max-width로 줄여갑니다.
/* 기본 = 데스크톱 */
.nav { flex-direction: row; }
/* 태블릿 이하 */
@media (max-width: 767px) {
.nav { flex-direction: column; }
}모바일 퍼스트가 권장되는 이유: 모바일은 공간이 제한적이라 핵심만 보여줍니다. 여기서 시작하면 불필요한 요소를 줄이고, 화면이 커질 때 추가하는 방식이라 더 깔끔합니다.
유동 단위 (Fluid Units)
고정 단위(px)만 쓰면 반응형이 어렵습니다. 유동 단위를 활용하세요.
rem과 em
html { font-size: 16px; } /* 기본값 */
h1 { font-size: 2rem; } /* 32px — html 기준 */
p { font-size: 1rem; } /* 16px */
.card { padding: 1.5em; } /* 부모 font-size의 1.5배 */rem: 항상<html>의 font-size 기준 → 일관성 있음em: 부모 요소 기준 → 중첩 시 계산이 복잡해질 수 있음
팁: font-size에는 rem, padding/margin에도 rem을 쓰면 사이트 전체 크기를 html font-size 하나로 조절할 수 있습니다.
vw, vh, vmin, vmax
.hero {
height: 100vh; /* 화면 높이의 100% */
font-size: clamp(1.5rem, 4vw, 3rem); /* 반응형 폰트 */
}clamp() 함수
min, preferred, max를 한 번에 지정합니다. 미디어 쿼리 없이 부드럽게 반응하는 값을 만들 수 있습니다.
.title {
font-size: clamp(1.25rem, 3vw, 2.5rem);
/* 최소 1.25rem, 화면의 3vw, 최대 2.5rem */
}
.container {
width: clamp(320px, 90%, 1200px);
/* 최소 320px, 기본 90%, 최대 1200px */
}유동 이미지
이미지가 컨테이너 밖으로 삐져나오지 않게 하는 필수 설정:
img {
max-width: 100%;
height: auto;
}반응형 네비게이션 패턴
모바일에서 햄버거 메뉴로 변환:
.nav-links {
display: none; /* 모바일: 숨김 */
}
.hamburger {
display: block; /* 모바일: 보임 */
}
@media (min-width: 768px) {
.nav-links {
display: flex; /* 데스크톱: 보임 */
gap: 24px;
}
.hamburger {
display: none; /* 데스크톱: 숨김 */
}
}반응형 카드 그리드
미디어 쿼리 없이 CSS Grid로 자동 반응형:
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}테스트하기
- 브라우저 개발자 도구 — F12 → 반응형 모드 (Ctrl + Shift + M)
- 다양한 화면 크기에서 확인 (320px, 768px, 1024px, 1440px)
- 실제 모바일 기기에서도 반드시 테스트
정리
반응형 웹 디자인의 핵심 원칙:
- viewport 메타 태그 필수
- 모바일 퍼스트 접근
- 미디어 쿼리로 브레이크포인트 설정
- 유동 단위 (rem, vw, clamp) 활용
- 유동 이미지 (max-width: 100%)
- Flexbox/Grid로 유연한 레이아웃
이 원칙들을 익히면 어떤 기기에서든 잘 보이는 사이트를 만들 수 있습니다.