CSS clamp() 생성기

두 화면의 크기만 정하면 되는 clamp() 생성기

CSS clamp() 생성기는 작은 화면과 큰 화면에서 쓸 크기 두 개를 받아, 그 사이를 끊김 없이 잇는 clamp() 식을 만듭니다. 예를 들어 화면 폭 360px에서 16px, 1280px에서 20px인 본문이라면 font-size: clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem);가 나옵니다. 360px보다 좁은 화면에서는 16px에 머물고, 1280px보다 넓은 화면에서는 20px에 머물며, 그 사이에서는 화면 폭에 비례해 커집니다.

위의 크기 경사로 그래프에서 두 점을 끌면 식이 바로 바뀌고, 세로 커서를 옮기면 그 화면 폭에서 실제로 몇 px가 되는지 보입니다. 오른쪽 미리 보기는 그 폭의 화면을 줄여 보여 주고, 브라우저가 직접 계산한 값을 실제 크기 견본으로 그립니다. 출력 단위는 rem과 px, 기준은 화면 폭(vw)과 컨테이너 폭(cqi) 중에서 고릅니다. 글자 크기로 쓸 때 확대해도 2배까지 커지는지 확인하는 확대 점검과, 같은 비율로 제목 단계를 만드는 타입 스케일도 함께 계산합니다.

왜 clamp()로 크기를 이어 붙이나

미디어 쿼리로 크기를 바꾸면 정해 둔 폭에서 값이 한 번에 뛰어오릅니다. 767px에서 16px이던 제목이 768px에서 갑자기 28px이 되는 식입니다. 그 경계 바로 위아래의 기기에서는 화면에 비해 글자가 너무 크거나 작아 보이기 쉽고, 경계를 늘릴수록 관리할 규칙도 늘어납니다. clamp()는 최솟값과 최댓값 사이를 직선으로 이어 규칙 하나로 모든 폭을 다룹니다.

• 휴대폰에서는 작게, 데스크톱에서는 크게 보여야 하는 제목: 첫 화면 제목처럼 크기 차이가 큰 글자에 씁니다. 다만 최대가 최소의 2.5배를 넘으면 확대 점검을 꼭 보세요(아래 '확대와 접근성').
• 화면에 따라 숨을 쉬는 간격: 카드 사이 gap, 구역 사이 여백처럼 좁은 화면에서는 줄이고 넓은 화면에서는 넉넉하게 둘 값에 씁니다.
• 본문 폭과 안쪽 여백: 글 상자의 width나 padding이 화면을 따라 자라다가 정해 둔 크기에서 멈추게 할 때 씁니다.
• 디자인 시안이 두 장뿐일 때: 모바일 시안과 데스크톱 시안의 값만 있고 그 사이 화면이 비어 있다면, 두 값을 그대로 넣어 사이를 채웁니다.
• 컴포넌트가 놓이는 자리마다 크기가 다를 때: 같은 카드가 사이드바와 본문에 함께 쓰이면 화면 폭보다 카드 폭을 기준으로 삼는 편이 맞습니다. 이때는 기준을 컨테이너(cqi)로 바꿉니다.

쓰는 법

1. 위의 예시 띠에서 가까운 용도를 누르거나, 작은 화면과 큰 화면의 화면 폭·크기를 입력합니다. 그래프의 두 점을 끌어도 같은 칸이 바뀝니다.
2. 속성(font-size·gap·padding·width), 출력 단위(rem·px), 기준(화면 vw·컨테이너 cqi)을 고릅니다. 글자 크기라면 rem 출력을 권합니다.
3. 그래프의 세로 커서를 끌거나 화면 폭별 값 칸을 눌러 휴대폰·태블릿·노트북·모니터에서의 크기를 확인합니다. '화면 폭 움직여 보기'를 누르면 창을 늘였다 줄인 것처럼 견본이 움직입니다.
4. 글자 크기라면 확대 점검에서 500% 확대 안에 2배에 닿는지 봅니다. 기준을 넘지 못하면 안내된 최대·최소 값으로 고칩니다.
5. 선언 복사로 CSS 한 줄을, 식만 복사로 clamp() 부분만, 변수 복사로 타입 스케일 전체를 가져갑니다. 링크 복사는 지금 설정을 주소에 담습니다.

계산 방법: 기울기, 절편, vw 계수

두 점 (작은 화면 폭 w₁, 크기 s₁)과 (큰 화면 폭 w₂, 크기 s₂)를 잇는 직선을 구한 뒤, 그 직선을 CSS가 이해하는 단위로 바꿉니다.

• 기울기 = (s₂ − s₁) ÷ (w₂ − w₁). 화면 폭 1px마다 크기가 얼마나 바뀌는지입니다.
• vw 계수 = 기울기 × 100. 1vw는 화면 폭의 1%라서 100을 곱해야 vw 단위가 됩니다.
• 절편 = s₁ − 기울기 × w₁. 화면 폭이 0일 때의 값으로, 식의 고정된 부분입니다. rem으로 낼 때는 루트 글자 크기(보통 16px)로 나눕니다.

360px에서 16px, 1280px에서 20px이면 기울기는 4 ÷ 920 = 0.004348, vw 계수는 0.4348vw, 절편은 16 − 0.004348 × 360 = 14.4348px = 0.9022rem입니다. 최솟값과 최댓값을 양쪽에 두면 clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem)이 됩니다. 이 식이 화면 폭마다 내는 값은 다음과 같습니다.

명세는 clamp(MIN, VAL, MAX)를 max(MIN, min(VAL, MAX))와 같다고 정합니다. 그래서 가운데 식이 범위를 벗어나는 순간 바깥 값이 그 자리를 대신합니다. 그래프의 점선이 바로 잘리기 전의 가운데 식이고, 굵은 선이 실제로 쓰이는 값입니다. 큰 화면 크기를 작은 화면보다 작게 넣으면 화면이 넓을수록 작아지는 식이 되며, 이 도구는 경계를 작은 값·큰 값 순서로 바꿔 씁니다.

자주 쓰는 값

예시 띠의 값을 화면 폭 360px → 1280px, 루트 글자 크기 16px로 계산한 식입니다. 시작점으로 쓰고 실제 디자인에 맞게 고치세요.

px와 rem, 무엇으로 출력하나

브라우저에서 글자를 키우는 방법은 두 가지입니다. 페이지 확대(Ctrl·⌘ 와 +)는 모든 것을 키우는 대신 CSS가 보는 화면 폭을 줄이고, 설정의 글꼴 크기는 rem의 기준인 루트 글자 크기만 바꿉니다. px로 쓴 경계는 글꼴 크기 설정을 따르지 않고, vw 몫은 두 방법 모두에서 그대로입니다. 본문 예시(16 → 20px, 360 → 1280px)로 계산하면 다음과 같습니다.

rem으로 출력하면 글꼴 크기 설정이 페이지 확대와 똑같은 비율로 글자를 키웁니다. 경계와 절편이 함께 2배가 되고 vw 몫만 그대로이기 때문입니다. px로 출력하면 설정을 바꿔도 글자가 그대로라서, 큰 글꼴을 쓰는 사용자에게는 아무 변화가 없습니다. 글자 크기에는 rem을, 테두리처럼 설정을 따라가면 안 되는 값에는 px를 쓰는 편이 무난합니다. 사이트가 html { font-size: 62.5%; }로 루트를 10px로 바꿨다면 루트 글자 크기 칸에 10을 넣어야 rem 값이 맞습니다.

화면 폭(vw)과 컨테이너 폭(cqi)

vw는 브라우저 화면 폭을 기준으로 하므로, 같은 화면 안에서 카드가 좁은 사이드바로 옮겨 가도 값이 그대로입니다. 컨테이너 단위 cqi는 가장 가까운 컨테이너의 안쪽 폭(가로쓰기에서는 너비)의 1%입니다. 부모에 container-type: inline-size;를 주고 이 도구의 기준을 컨테이너로 바꾸면, 그래프의 가로축이 컨테이너 폭이 되고 식의 vw 자리에 cqi가 들어갑니다.

• CSS Containment 3은 알맞은 컨테이너를 찾지 못하면 cqi를 작은 뷰포트 크기 기준으로 계산한다고 정합니다. 부모에 container-type을 빠뜨리면 화면 폭 기준과 비슷하게 동작해 실수를 알아차리기 어렵습니다.
• CSS Values 4에 따르면 뷰포트 단위는 스크롤바가 없다고 보고 계산합니다(overflow: scroll처럼 스크롤바가 항상 생기는 경우는 예외). 스크롤바가 자리를 차지하는 환경에서는 100vw가 실제 본문 폭보다 넓어 가로 넘침이 생길 수 있습니다. 폭을 정할 때는 cqi나 %가 더 안전합니다.
• 컨테이너 단위는 Chrome 105, Firefox 110, Safari 16부터 지원합니다(아래 브라우저 지원 표).

확대와 접근성: 2배까지 커지나

WCAG 2.2의 성공 기준 1.4.4(글자 크기 조정)는 보조 기술 없이 글자를 200%까지 키워도 내용과 기능을 잃지 않아야 한다고 정합니다. W3C는 뷰포트 단위만으로 글자 크기를 정해 확대해도 커지지 않는 경우를 실패 사례 F94로 따로 듭니다. 확대하면 CSS 화면 폭이 줄어 vw 몫이 작아지므로, clamp()로 만든 글자는 확대 배율보다 덜 커집니다.

Maxwell Barvian(Smashing Magazine, 2023)은 최신 브라우저의 최대 확대가 500%라는 점을 들어, 최대 크기가 최소 크기의 2.5배 이하이면 어느 창 폭에서든 500% 안에서 2배에 닿는다고 정리했습니다. 이 도구는 그 규칙과 함께 창 폭 320~3840px을 실제로 계산해 가장 불리한 창 폭을 찾습니다. 작은 화면 360px·16px, 큰 화면 1280px로 두고 최대 크기만 바꾸면 다음과 같습니다.

200% 확대만 놓고 보면 최대 ÷ 최소가 1.25인 본문 예시도 1280px 창에서 1.72배에 그칩니다. 그 창 폭에서 2배가 되려면 239%까지 확대해야 합니다. 200% 확대에서 정확히 2배를 요구하는 점검을 통과해야 한다면 vw 몫을 더 줄이거나, 글자 크기는 rem만으로 두고 간격·여백에만 clamp()를 쓰는 방법을 검토하세요. 64px 행처럼 기울기가 크면 200% 확대에서 오히려 글자가 작아지는 창 폭도 생깁니다.

타입 스케일: 같은 비율로 제목 단계 만들기

타입 스케일은 본문 크기에 일정한 비율을 거듭 곱해 제목 단계를 만드는 방법입니다. Utopia(James Gilyead·Trys Mudford, 2020)는 작은 화면과 큰 화면에 서로 다른 비율을 두고 단계마다 clamp()로 잇는 방식을 소개했습니다. 큰 화면 비율을 더 크게 두면 넓은 화면에서 제목 단계 차이가 커지고, 좁은 화면에서는 단계가 촘촘해집니다. 이 도구는 위에서 만든 값을 0단계로 삼아 --step-1, --step--1 같은 CSS 변수를 만듭니다.

작은 화면 비율과 큰 화면 비율의 차이가 클수록 위 단계의 '최대 ÷ 최소'가 빠르게 커집니다. 본문 16 → 20px에 1.2와 1.25를 쓰면 5단계는 39.81 → 61.04px로 1.53배라 확대 기준 안에 있지만, 1.2와 1.5를 쓰면 5단계가 39.81 → 151.88px로 3.8배가 되어 기준을 넘습니다. 단계 목록 오른쪽의 표시는 단계마다 확대 점검을 다시 계산한 결과입니다.

브라우저 지원

MDN은 clamp()를 2020년 7월부터 주요 브라우저에서 두루 쓸 수 있는 기능(Baseline Widely available)으로 분류합니다. CSS Values 4 초안은 최솟값이나 최댓값 자리에 none을 쓰는 문법도 정의하지만, MDN 호환성 자료에는 이 문법의 지원 항목이 아직 없어 이 도구는 쓰지 않습니다.

자주 틀리는 경우

• vw 계수에 100을 곱하지 않음: 기울기 0.004348을 그대로 0.004348vw로 쓰면 변화가 100분의 1로 줄어 거의 고정값이 됩니다.
• clamp() 안에 calc()가 꼭 있어야 한다고 생각함: clamp()의 세 자리에는 이미 덧셈·뺄셈 식을 쓸 수 있어서 clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem)으로 충분합니다. calc()로 감싸도 결과는 같습니다.
• 루트 글자 크기가 다른 사이트에 rem 식을 그대로 붙임: 루트가 10px인 사이트에서 1rem은 10px입니다. 루트 글자 크기 칸을 그 사이트 값으로 바꿔 다시 만드세요.
• 최솟값과 최댓값의 순서를 바꿔 씀: clamp()는 최솟값이 최댓값보다 크면 최솟값을 씁니다. 손으로 고치다 두 값을 바꾸면 화면 폭과 관계없이 한 값에 고정됩니다.
• 글자 크기를 vw만으로 정함: font-size: 5vw는 확대해도 커지지 않아 WCAG 실패 사례 F94에 해당합니다. rem 절편이 있는 clamp()로 바꾸고 확대 점검을 보세요.
• 폭에 100vw를 씀: 스크롤바가 자리를 차지하는 환경에서는 가로 스크롤이 생깁니다. width의 최댓값이나 가운데 식에는 %나 cqi를 검토하세요.
• 줄 간격을 px로 고정함: 글자 크기만 커지고 줄 간격은 그대로라 줄이 겹칩니다. line-height: 1.5처럼 단위 없는 값을 쓰세요.

한계와 주의

• 두 점을 잇는 직선 하나만 만듭니다. 구간마다 기울기를 바꾸려면 clamp()를 미디어 쿼리나 컨테이너 쿼리와 함께 여러 개 써야 합니다.
• 확대 점검은 Chrome·Firefox처럼 확대하면 CSS 화면 폭이 배율만큼 줄어드는 방식을 계산한 것입니다. Smashing Magazine 글도 Safari는 확대 방식이 다를 수 있다고 적었습니다. 최종 판단은 실제 페이지를 확대해 확인하세요.
• 글꼴 크기 설정 계산은 html의 글자 크기를 %나 rem으로 두었거나 지정하지 않았다고 가정합니다. html에 px로 글자 크기를 고정한 사이트에서는 rem도 설정을 따르지 않습니다.
• 컨테이너 기준을 고르면 미리 보기 화면 전체를 컨테이너로 보고 계산합니다. 실제 컨테이너의 안쪽 여백·테두리에 따라 값이 달라집니다.
• 식의 숫자는 소수 넷째 자리까지 남깁니다(다섯째 자리에서 반올림). 1920px 화면에서도 차이는 0.01px보다 작습니다.
• 미리 보기의 글꼴은 이 기기의 기본 글꼴입니다. 브라우저의 최소 글자 크기 설정이 켜져 있으면 작은 값이 그 크기까지 올라갈 수 있습니다.

기준일 W3C CSS Values and Units Level 4(Working Draft 2024-03-12), CSS Containment Level 3(Working Draft 2022-08-18), WCAG 2.2 Understanding 1.4.4와 F94, MDN 호환성 자료(browser-compat-data 8.1.6, 2026-10-15)는 2026-10-21에 원문으로 확인했습니다. 표의 숫자는 이 도구의 계산 코어로 구했습니다.

출처

• 01W3C: CSS Values and Units Module Level 4Working Draft 2024-03-12. clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX)), 최솟값이 최댓값과 부딪히면 최솟값 우선, 뷰포트 단위는 스크롤바가 없다고 보고 계산
• 02MDN: clamp()Baseline Widely available(2020년 7월), 접근성 주의, 브라우저 호환성 Chrome 79·Firefox 75·Safari 13.1
• 03W3C: CSS Containment Module Level 3Working Draft 2022-08-18. §6 컨테이너 단위 cqw·cqh·cqi·cqb, 알맞은 컨테이너가 없으면 작은 뷰포트 크기 기준
• 04MDN: Using container size and style queriescontainer-type과 컨테이너 단위 사용법, 호환성 자료의 컨테이너 단위 Chrome 105·Firefox 110·Safari 16
• 05W3C WAI: Understanding Success Criterion 1.4.4 Resize Text보조 기술 없이 글자를 200%까지 키울 수 있어야 함(AA)
• 06W3C WAI: F94 Failure due to incorrect use of viewport units to resize text뷰포트 단위만으로 정한 글자는 확대·글꼴 설정으로 커지지 않음
• 07Smashing Magazine: Addressing Accessibility Concerns With Using Fluid TypeMaxwell Barvian, 2023-11-07. 500% 확대 기준, 최대 크기 ≤ 최소 크기 × 2.5이면 통과
• 08Utopia: Designing with fluid type scalesJames Gilyead, 2020-02-01. 작은 화면·큰 화면에 다른 비율을 둔 유동 타입 스케일

자주 묻는 질문

함께 쓰는 도구