clamp vs Media Query

반응형 설계에서 무엇을 써야 할까?

반응형 작업을 하다 보면 한 번쯤 고민하게 된다.

“이거 clamp로 처리할까?
아니면 미디어쿼리로 끊어야 할까?”

 

특히 1920 시안 기반으로 작업하면서
모바일 360, 태블릿 768, PC 1024 이상 대응해야 하는 프로젝트에서는
이 선택이 코드 구조를 완전히 바꿔버린다.

오늘은 실무 기준으로 딱 정리해보자.

 

 

 

1, clamp()는 무엇인가?

/* CSS */

font-size: clamp(16px, 1vw, 24px);

 

구조는 단순하다.

코딩:
clamp(최소값, 선호값, 최대값)

 

뷰포트에 따라 값이 부드럽게 변화한다.

✔ 브레이크포인트 없이
✔ 단계 없이
✔ 자연스럽게 스케일링

---

2. Media Query는 무엇인가?

/* CSS */

font-size: 16px;

@media (min-width: 768px) {
  font-size: 20px;
}

@media (min-width: 1024px) {
  font-size: 24px;
}

 

화면 크기에 따라 단계적으로 값이 바뀐다.

✔ 명확한 구간 구분
✔ 레이아웃 변경에 강함
✔ 전통적인 반응형 방식

---

3. 핵심 차이점 비교

구분	clamp()	media Query
변화 방식	연속적(부드러움)	단계적(점프)
코드량	적음	많음
레이아웃 변경	❌ 부적합	✅ 적합
폰트/간격 조정	✅ 최적	가능
구조 변경	❌	✅
유지보수	토큰화하면 좋음	구간 많으면 복잡

---

4. 언제 clamp를 써야 할까?

✔ 이런 경우는 clamp

• 폰트 크기
• 카드 padding
• 버튼 내부 여백
• 아이콘 크기
• 제목 스케일

즉,

"구조는 그대로 두고 크기만 자연스럽게 조정"

 

이게 clamp의 영역이다.

---

5. 언제 Media Query가 맞을까?

✔ 이런 경우는 무조건 미디어쿼리

• 3열 → 1열 변경
• GNB 구조 변경
• 테이블 → 카드형 변환
• 사이드바 제거
• 모바일 전용 레이아웃

구조가 바뀌는 순간은 clamp로 해결 불가

 

---

6. 실무에서 가장 좋은 방식은?

정답은:

👉 같이 쓴다.

 

실전 예시

/* CSS */

/* 폰트는 clamp */
body {
  font-size: clamp(15px, 0.9vw, 18px);
}

/* 구조는 미디어쿼리 */
.layout {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 250px 1fr;
  }
}

✔ 크기는 부드럽게
✔ 구조는 명확하게

이 조합이 가장 안정적이다.

---

7. 퍼블리셔 실무 기준 선택법

🔹 clamp를 과하게 쓰면?

• 레이아웃 간격이 계속 흔들림
• 정렬감 무너짐
• 접근성 확대 시 깨짐 가능

🔹 미디어쿼리를 과하게 쓰면?

• 코드 폭증
• 유지보수 지옥
• 브레이크포인트 난립

---

8. 공공/접근성 프로젝트에서는?

특히 접근성 대응 사이트라면:

• 최소 폰트 크기 보장
• 버튼 최소 높이 보장
• 확대 시 레이아웃 깨짐 방지

이 조건 때문에

구조는 명확하게 Media Query
크기는 최소값 보장한 clamp

 

이 방식이 가장 안전하다.

---

9. 한 줄 요약

상황	선택
크기 스케일	clamp
구조 변경	media query
공공기관 고도화	둘 다
디자인 시스템 구축	clamp + 토큰화

---

정리

clamp는 미디어쿼리를 대체하는 기능이 아니다.
미디어쿼리는 구시대 방식도 아니다.

둘은 서로 다른 문제를 해결한다.

구조는 Media Query
스케일은 clamp

 

이 조합이 실무에서 가장 깔끔하다.