온라인 CSS 변수 생성기를 사용하면 반복적인 선언을 직접 작성하지 않고 색상, 스페이싱, 타이포그래피 등 디자인 토큰을 위한 커스텀 속성을 정의할 수 있습니다. CSS 커스텀 속성——흔히 “CSS 변수”라고 불림——은 모든 현대 브라우저에서 네이티브로 지원되며, 테마 가능하고 유지 보수하기 쉬운 스타일시트를 구축하는 현대적 표준이 되었습니다.

CSS 커스텀 속성 문법

문법에는 “선언”과 “사용” 두 부분이 있습니다.

선언 — 이중 하이픈 접두사로 속성 정의:

:root {
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --spacing-base: 16px;
  --font-size-lg: 1.125rem;
  --border-radius: 6px;
}

사용 — var()로 속성 참조:

.button {
  background-color: var(--color-primary);
  padding: var(--spacing-base);
  border-radius: var(--border-radius);
  font-size: var(--font-size-lg);
}

var() 함수는 선택적 폴백을 두 번째 인수로 받습니다——커스텀 속성이 정의되지 않은 경우 사용됩니다:

.button {
  color: var(--color-text, #111827);
  font-family: var(--font-sans, system-ui, sans-serif);
}

폴백은 체이닝 가능합니다(마지막 값이 정적 폴백):

.button {
  color: var(--button-color, var(--color-primary, #3b82f6));
}

:root 스코프 vs 컴포넌트 스코프

CSS 커스텀 속성은 다른 CSS 속성처럼 캐스케이드와 상속이 동작합니다. :root는 전역 변수를 위한 최고 우선순위 선택자이지만, 어떤 스코프에서도 변수를 정의할 수 있습니다.

:root의 전역 디자인 토큰

:root {
  /* 색상 팔레트 */
  --blue-50: #eff6ff;
  --blue-500: #3b82f6;
  --blue-900: #1e3a8a;

  /* 시맨틱 색상 토큰 */
  --color-primary: var(--blue-500);
  --color-background: #ffffff;
  --color-text: #111827;
  --color-text-muted: #6b7280;

  /* 스페이싱 스케일 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;

  /* 타이포그래피 */
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-xl: 1.25rem;
}

컴포넌트 스코프 변수

컴포넌트 내에서 전역을 오버라이드하거나 확장:

.card {
  --card-padding: var(--space-4);
  --card-radius: 8px;
  --card-shadow: var(--shadow-md);

  padding: var(--card-padding);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

/* 컴팩트 카드 변형 — 변경된 부분만 오버라이드 */
.card--compact {
  --card-padding: var(--space-2);
}

이 패턴 덕분에 .card--compact는 모든 속성을 다시 선언하지 않고 한 줄로 끝납니다.

CSS 변수로 다크 모드 구현

CSS 변수는 다크 모드 구현을 깔끔하고 유지 보수하기 쉽게 만듭니다. 선택자를 복제하는 대신 테마 선택자 아래에서 토큰 값만 재정의합니다.

prefers-color-scheme 사용

:root {
  --color-background: #ffffff;
  --color-surface: #f9fafb;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-primary: #3b82f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #0f172a;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-border: #334155;
    --color-primary: #60a5fa;
  }
}

var(--color-background)를 사용하는 모든 요소가 추가 CSS 없이 자동으로 전환됩니다.

data 속성 사용 (사용자 토글 테마)

:root,
[data-theme="light"] {
  --color-background: #ffffff;
  --color-text: #111827;
}

[data-theme="dark"] {
  --color-background: #0f172a;
  --color-text: #f1f5f9;
}

JavaScript로 토글:

const toggleTheme = () => {
  const current = document.documentElement.getAttribute('data-theme');
  document.documentElement.setAttribute(
    'data-theme',
    current === 'dark' ? 'light' : 'dark'
  );
};

JavaScript에서 CSS 변수 접근

CSS 커스텀 속성은 CSSOM을 통해 JavaScript에서 읽고 쓸 수 있어, 런타임에 동적 테마 적용이 가능합니다.

CSS 변수 읽기

// :root(또는 임의 요소)에서 읽기
const root = document.documentElement;
const primaryColor = getComputedStyle(root)
  .getPropertyValue('--color-primary')
  .trim();

console.log(primaryColor); // "#3b82f6"

CSS 변수 쓰기

// :root에 설정 — 이 변수를 사용하는 모든 요소에 영향
document.documentElement.style.setProperty('--color-primary', '#8b5cf6');

// 특정 요소에 설정 — 해당 요소와 자식 요소에만 영향
const card = document.querySelector('.card');
card.style.setProperty('--card-padding', '2rem');

CSS 변수 vs Sass 변수

Sass 변수($variable)와 CSS 커스텀 속성(--variable)은 서로 다른 문제를 해결하며 자주 함께 사용됩니다.

기능CSS 커스텀 속성Sass 변수
JS에서 런타임 접근가능불가 (컴파일 시 사라짐)
컴파일 후 변경 가능가능불가
DOM 통해 상속가능개념 없음
calc() 내에서 동작가능가능 (컴파일 시)
브라우저 DevTools에서 표시가능불가
빌드 단계 없이 동작가능불가

둘 다 사용: Sass 변수는 런타임에 변하지 않는 값(브레이크포인트, z-index 스케일)에 유용합니다. CSS 커스텀 속성은 테마, 컴포넌트 상태, 사용자 설정에 따라 변할 수 있는 모든 것에 사용합니다.

디자인 토큰 패턴

디자인 토큰은 색상, 스페이싱, 타이포그래피, 그림자, 보더 반경 같은 디자인 결정을 나타내는 이름 있는 값입니다. CSS 커스텀 속성은 브라우저에서 디자인 토큰의 네이티브 구현 레이어입니다.

3계층 토큰 시스템

:root {
  /* 1계층: 기본 토큰 — 원시 값 */
  --color-blue-500: #3b82f6;
  --color-blue-700: #1d4ed8;
  --color-gray-900: #111827;

  /* 2계층: 시맨틱 토큰 — 값이 아닌 의미 */
  --color-action: var(--color-blue-500);
  --color-action-hover: var(--color-blue-700);
  --color-text-primary: var(--color-gray-900);

  /* 3계층: 컴포넌트 토큰 — 가장 구체적 */
  --button-bg: var(--color-action);
  --button-bg-hover: var(--color-action-hover);
  --button-text: #ffffff;
}

이를 통해 컴포넌트 토큰을 건드리지 않고 시맨틱 레벨(--color-action 변경)에서 리테마 설정이 가능합니다.

calc() 내에서 변수 사용

CSS 변수는 calc() 내에서 동작하여 반응형 계산이 가능합니다:

:root {
  --container-padding: 1rem;
  --sidebar-width: 280px;
}

.main-content {
  /* 전체 너비에서 사이드바와 갭 빼기 */
  width: calc(100% - var(--sidebar-width) - var(--container-padding) * 2);
}

브라우저 지원

CSS 커스텀 속성은 2016년부터 모든 주요 브라우저에서 지원됩니다:

  • Chrome 49+
  • Firefox 31+
  • Safari 9.1+
  • Edge 15+

전체 지원률은 96% 이상입니다.

지금 토큰 시스템 구축하기

시맨틱 명명, 폴백 값, 다크 모드 변형을 포함하는 완전한 디자인 토큰 세트를 처음부터 정의하려면 시간이 걸립니다. 생성기를 사용하면 색상 팔레트, 스페이싱 스케일, 타이포그래피 설정을 구성하고 스타일시트에 바로 붙여 넣을 수 있는 :root {} 블록을 출력할 수 있습니다.

CSS 변수 생성기 사용해보기 →

브랜드 색상, 스페이싱 스케일, 폰트 크기를 설정하고 프로덕션 준비가 된 CSS 커스텀 속성 블록을 내보냅니다. 디자인 시스템의 기반으로, 또는 기존 프로젝트에서 하드코딩된 값 정리를 시작하는 데 활용하세요.