[CSS] CSS 변수(Custom Properties)로 모듈화하기

이번 포스팅에서는 [CSS 아키텍처] 파트의 세부 주제인 CSS 변수를 활용한 디자인 시스템 구축에 대하여 상세히 알아보겠습니다.

1. 글로벌 변수 선언과 스코프(Scope) 체인

Sass 변수와 달리 CSS 네이티브 변수는 런타임에 브라우저가 직접 계산하며, DOM 상속을 받습니다. 최상단에 선언하여 전역 테마를 관리하는 것이 정석입니다.

/* 글로벌 범위(:root)에 선언하여 문서 전체에서 참조 가능하게 만듭니다. */
:root {
  --primary-color: #3b82f6;
  --spacing-md: 16px;
  --shadow-base: 0 4px 6px rgba(0,0,0,0.1);
}

.card {
  padding: var(--spacing-md);
  box-shadow: var(--shadow-base);
}

2. Fallback(기본값) 제공과 Javascript 연동 노하우

변수가 선언되지 않았을 때를 대비한 폴백 기능과, 스크립트를 통한 실시간 변수 수정 기법은 동적 웹앱의 핵심입니다.

/* --title-color가 정의되지 않았다면 #333을 사용합니다 */
h1 {
  color: var(--title-color, #333);
}

Javascript에서 CSS 변수를 제어하면 복잡한 인라인 스타일 변경 없이 단 한 줄로 전체 컴포넌트의 테마를 뒤바꿀 수 있습니다: document.documentElement.style.setProperty('--primary-color', '#ff5722');

---

지금까지 CSS 변수의 선언과 스코프, 동적 연동 기법에 대해 살펴보았습니다. 디자인 토큰(Design Token)을 변수화하여 체계적인 CSS 구조를 만들어보세요.