수십 줄의 모바일 반응형 코드, 단 '1줄'로 끝내는 마법 (clamp)
PC에서는 예쁘게 1줄로 나오던 제목이 스마트폰으로 보면 화면을 뚫고 나가거나 3줄로 지저분하게 줄바꿈된 경험 있으신가요?
보통 이를 해결하기 위해 태블릿용, 모바일용 미디어 쿼리(@media) 코드를 수십 줄씩 추가하며 글자 크기를 강제로 줄여왔습니다. 하지만 이 방식은 코드를 무겁게 만들고 유지보수를 지옥으로 이끕니다.
💡 화면에 맞춰 고무줄처럼 늘어나는 글씨?
모던 CSS의 clamp() 함수를 사용하면, 화면 너비에 맞춰 폰트 크기가 물 흐르듯 자연스럽게 커지고 작아지는 '유동적 타이포그래피(Fluid Typography)'를 단 한 줄의 코드로 완성할 수 있습니다.
1. clamp() 함수의 완벽한 공식 3단계
clamp는 영단어 뜻 그대로 '양쪽을 꽉 잡아 고정시킨다'는 뜻입니다. 괄호 안에 최소 크기, 유동적 비율, 최대 크기 딱 3가지만 적어주면 브라우저가 알아서 모든 계산을 끝냅니다.
/* 기존의 비효율적인 방식 (미디어 쿼리 남용) */
h1 { font-size: 40px; }
@media (max-width: 1024px) { h1 { font-size: 32px; } }
@media (max-width: 768px) { h1 { font-size: 24px; } }
/* ★ 최신 clamp() 방식 (위 수십 줄을 단 1줄로 압축!) ★ */
h1 {
/* 공식: clamp(최솟값, 권장 반응형 값, 최댓값) */
font-size: clamp(24px, 5vw, 40px);
}2. clamp()가 똑똑한 진짜 이유
가운데 있는 5vw는 화면 너비의 5% 크기를 뜻합니다. 화면이 커지면 글씨도 커지지만, 와이드 모니터에서 글씨가 무한정 커지는 것을 막기 위해 최대 크기를 40px로 제한(Lock)합니다.
반대로 화면이 좁아질 때도 최소 크기 24px 밑으로는 절대 줄어들지 않게 방어하여 스마트폰에서의 가독성을 완벽하게 보장합니다.
/* 실무 꿀팁: 폰트 뿐만 아니라 여백(Padding)에도 쓸 수 있습니다! */
.section-box {
/* 모바일에서는 20px, PC에서는 80px로 여백이 부드럽게 변합니다 */
padding: clamp(20px, 8vw, 80px);
}"코드의 길이가 짧아질수록 웹사이트의 성능은 가벼워집니다."
나눔웹은 복잡한 해상도 분기점(Breakpoint)에 얽매이지 않고,
어떤 기기에서도 1px의 어색함 없이 물 흐르듯 최적화되는 유동형 레이아웃을 구축합니다.