clamp() 함수와 **CSS 변수(Variables)**

1. 반응형 폰트의 마법, clamp() 함수

clamp()는 미디어 쿼리 없이도 폰트 크기가 화면 너비에 따라 유동적으로 변하게 만드는 함수입니다.

• 구조: font-size: clamp(최솟값, 권장값, 최대값);
• 작동 원리: 브라우저 너비에 따라 '권장값'을 유지하다가, 너무 작아지면 '최솟값'에서 멈추고, 너무 커지면 '최대값'에서 멈춥니다.

🛠️ 실무 적용 예시

과거에는 PC와 모바일 폰트 크기를 각각 따로 지정했지만, 이제는 한 줄로 해결합니다.

CSS

 

h2 {
    /* 최소 1.5rem, 화면 너비의 5%만큼 가변, 최대 3rem */
    font-size: clamp(1.5rem, 5vw, 3rem);
    line-height: 1.2;
}

• 모바일: 화면이 작아져도 1.5rem 이하로는 줄어들지 않아 가독성을 지킵니다.
• 태블릿: 5vw(화면 너비의 5%)가 적용되어 부드럽게 크기가 변합니다.
• PC: 아무리 모니터가 커도 3rem 이상으로는 커지지 않아 레이아웃을 유지합니다.

---

2. CSS 변수(--variable)를 활용한 디자인 시스템

디자인 시스템의 핵심은 **'일관성'**과 **'유지보수'**입니다. 색상이나 간격을 변수로 관리하면, 코드 한 줄만 바꿔서 전체 사이트의 테마를 바꿀 수 있습니다.

🛠️ 디자인 시스템 설계 예시

게시판의 메인 컬러와 간격을 정의해 보겠습니다.

CSS

 

:root {
    /* 컬러 시스템 */
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --bg-soft: #f1f5f9;
    --text-main: #1e293b;
    --text-muted: #64748b;

    /* 간격 및 곡률 */
    --spacing-base: 1rem;
    --radius-lg: 12px;
    --radius-sm: 6px;

    /* 폰트 크기 시스템 (clamp 활용) */
    --font-size-h: clamp(1.5rem, 4vw, 2.25rem);
    --font-size-base: 1rem;
}

/* 변수 사용하기 */
.container {
    background-color: var(--bg-soft);
    padding: var(--spacing-base);
}

.btn-primary {
    background-color: var(--primary-color);
    border-radius: var(--radius-sm);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

---

3. 다크 모드(Dark Mode) 구현의 핵심

변수와 디자인 시스템을 구축해두면 다크 모드 구현이 놀라울 정도로 쉬워집니다. :root의 변수값만 뒤집어주면 되기 때문입니다.

CSS

 

/* 다크 모드 설정 */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #60a5fa; /* 좀 더 밝은 파란색 */
        --bg-soft: #0f172a;       /* 어두운 배경 */
        --text-main: #f8fafc;     /* 밝은 텍스트 */
        --text-muted: #94a3b8;
    }
}

---

💡 정리: 왜 이 방식이 좋은가요?

1. 압도적인 효율성: 수백 개의 미디어 쿼리(@media)를 작성할 필요가 없습니다.
2. 브랜드 일관성: 메인 컬러가 변경되어도 코드 한 곳만 수정하면 전체 게시판에 즉시 반영됩니다.
3. 가독성: clamp()를 통해 어떤 기기에서 접속해도 텍스트가 너무 작거나 커서 읽기 불편한 상황을 원천 봉쇄합니다.

지금까지 구축한 게시판 소스의 상단에 이 :root 변수들을 정의하고, 스타일 값을 var()로 교체해보세요. 코드의 질이 한 단계 업그레이드될 것입니다.

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.