CSS clamp() 완벽 활용법｜반응형 글자 크기 실무 팁

글쓴이 /

반응형 웹 디자인에서 글자 크기는 사용자 경험에 큰 영향을 미칩니다.
clamp() 함수는 최소, 이상적, 최대 값을 지정해 화면 크기에 따라 글자 크기가 자동으로 조정되도록 합니다.
이 글에서는 clamp()의 문법, 활용 예시, 그리고 실무에서 꼭 알아야 할 팁을 설명합니다.

clamp() 함수란?

CSS clamp()는 세 가지 값을 인자로 받아 최소, 유연한 값, 최대값을 동시에 지정하는 함수입니다.
뷰포트 크기에 맞춰 자동으로 계산되어 반응형 글자 크기에 최적화되어 있습니다.

* {
  font-size: clamp(최소값, 이상적인 값, 최대값);
}
CSS
값설명
최소값글자 크기가 이 값보다 작아지지 않음
이상적인 값보통 vw와 같은 뷰포트 단위 사용
최대값글자 크기가 이 값보다 커지지 않음

기본 예시 – 반응형 제목 글자 크기

다음 예시는 글자 크기를 16px에서 32px 사이로 자동 조정하도록 설정합니다.

h1 {
  font-size: clamp(16px, 2.5vw, 32px);
}
CSS
  • 최소값 (16px): 너무 작은 화면에서도 최소한의 가독성 유지
  • 이상적인 값 (2.5vw): 화면 너비의 2.5%를 기준으로 유동적인 크기
  • 최대값 (32px): 큰 화면에서도 너무 커지지 않도록 제한

💡 실무 팁

  • 작은 모바일 화면에서 글자가 너무 작아지는 문제를 방지
  • 데스크톱에서 과도하게 커지지 않도록 제어 가능

뷰포트 단위와 조합하기

뷰포트 단위 vw와 vh는 반응형 글자 크기 조정에 자주 사용됩니다.
하지만 뷰포트만 사용하면 지나치게 작거나 커질 수 있으므로 clamp()로 감싸는 것이 안정적입니다.

p {
  font-size: clamp(14px, 1.5vw, 20px);
}
CSS
상황글자 크기 결과
작은 모바일 화면 (375px)14px 유지
일반 태블릿 (768px)약 11.5px → clamp로 14px 고정
데스크톱 (1920px)20px 유지

📌 TIP: vw 단위를 사용할 때는 최소값을 반드시 지정하세요.
그렇지 않으면 초소형 기기에서 글자가 너무 작아져 UX가 나빠집니다.

clamp()와 rem 단위 조합

rem 단위를 사용하면 글자 크기 전역 제어가 가능해 유지보수가 편리합니다.
예를 들어, 기본 폰트 사이즈를 16px로 설정한 경우:

html {
  font-size: 16px;
}

body {
  font-size: clamp(1rem, 2vw, 1.5rem);
}
CSS
값실제 px
1rem16px
1.5rem24px

RAO TIP:

  • 팀 작업 시 rem 단위 사용을 권장합니다.
  • 다크 모드나 접근성 관련 설정 변경 시 매우 유리합니다.

다양한 실무 활용 예시

버튼 텍스트

button {
  font-size: clamp(0.875rem, 2vw, 1.125rem);
  padding: clamp(0.5rem, 1vw, 1rem);
}
CSS
  • 작은 버튼에서 텍스트가 너무 작아지지 않도록 보호
  • 패딩도 함께 반응형으로 설정 가능

Hero 섹션 메인 타이틀

.hero-title {
  font-size: clamp(2rem, 5vw, 4rem);
}
CSS
  • 모바일: 32px → 큰 화면: 64px
  • 반응형 랜딩 페이지에서 자주 사용되는 패턴

반응형 카드 UI

.card-title {
  font-size: clamp(1rem, 2vw, 1.5rem);
}
.card-text {
  font-size: clamp(0.875rem, 1.5vw, 1.25rem);
}
CSS
  • 카드 디자인에 글자 크기 자동 조정
  • 레이아웃 변경 시에도 안정적인 가독성 유지

clamp()와 미디어쿼리 비교

전통적으로 반응형 글자 크기를 위해 미디어쿼리를 사용했지만,
clamp()는 코드 양을 줄이고 유지보수를 단순화할 수 있습니다.

미디어쿼리 방식

h1 {
  font-size: 16px;
}
@media (min-width: 768px) {
  h1 {
    font-size: 24px;
  }
}
@media (min-width: 1200px) {
  h1 {
    font-size: 32px;
  }
}
CSS

clamp() 방식

h1 {
  font-size: clamp(16px, 2.5vw, 32px);
}
CSS

장점: 코드가 간결해지고, 추가 브레이크포인트 설정 불필요.

마무리

clamp()는 반응형 글자 크기 설정에서 미디어쿼리를 대체할 수 있는 현대적인 접근법입니다.
최소-최대-이상적인 값을 한 줄에 정의해 유지보수가 쉽고, UX 개선에도 큰 도움이 됩니다.
실무에서는 vw와 rem을 적절히 조합해 유연하면서 안정적인 반응형 글자 크기를 구현해 보세요.

Summary in English

Learn how to use the CSS clamp() function to set fully responsive font sizes.
Define minimum, preferred, and maximum values in one line of code to maintain readability across all devices without complex media queries.

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”

대표 사진: Unsplash의Emile Perron

위로 스크롤