CSS 변수(Custom Properties) 완벽 가이드: 효율적인 웹 디자인과 유지보수를 위한 필수 기술

 

웹 프로젝트의 규모가 커질수록 색상, 간격, 폰트 크기 등을 일일이 관리하는 것은 매우 고된 작업입니다. 수정 사항이 발생했을 때 수백 개의 라인을 찾아다니며 값을 바꾸고 있지는 않으신가요?

이러한 문제를 해결해 주는 것이 바로 **CSS 변수(Custom Properties)**입니다. 이번 포스팅에서는 CSS 변수의 기본 개념부터 실무에서 유용하게 쓰이는 고급 활용법까지 상세히 알아보겠습니다.

1. CSS 변수란 무엇인가요?

CSS 변수는 CSS 작성 시 반복적으로 사용되는 특정 값을 이름을 붙여 저장해 두고, 필요할 때 호출해서 사용할 수 있는 기능입니다.

기본 문법

• 선언: --로 시작하는 이름을 사용합니다.
• 사용: var() 함수를 이용해 불러옵니다.

/* 변수 선언 */
:root {
  --main-color: #3498db;
  --base-padding: 15px;
}

/* 변수 사용 */
.button {
  background-color: var(--main-color);
  padding: var(--base-padding);
  color: white;
}

2. 왜 CSS 변수를 써야 할까? (유지보수의 강점)

한 곳에서 관리하는 효율성

예를 들어 브랜딩 컬러가 변경되었다면, 예전에는 모든 CSS 파일을 뒤져서 색상 코드를 찾아야 했습니다. 하지만 변수를 사용하면 :root에 정의된 값 하나만 바꾸면 사이트 전체에 반영됩니다.

코드의 의미 부여

#2ecc71이라는 색상 코드보다는 --success-color라는 변수명이 훨씬 직관적입니다. 동료 개발자나 미래의 나 자신이 코드를 이해하는 데 큰 도움이 됩니다.

3. 실무 활용 예제

예제 1: 다크 모드와 라이트 모드 전환

CSS 변수의 가장 강력한 기능 중 하나는 테마 전환입니다.

/* 기본 라이트 모드 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --accent-color: #e74c3c;
}

/* 다크 모드 설정 */
[data-theme='dark'] {
  --bg-color: #2c3e50;
  --text-color: #ecf0f1;
  --accent-color: #f1c40f;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease;
}

.highlight {
  color: var(--accent-color);
}

예제 2: 일관된 레이아웃 시스템 구성

공백(Margin, Padding)과 그림자(Shadow)를 변수화하면 디자인 시스템의 일관성을 유지하기 쉽습니다.

:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --border-radius: 8px;
}

.card {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  box-shadow: var(--card-shadow);
  border-radius: var(--border-radius);
}

예제 3: calc() 함수와의 결합

변수는 숫자뿐만 아니라 계산식과 결합하여 유연한 레이아웃을 만들 수 있습니다.

:root {
  --base-size: 1rem;
  --scale-factor: 1.5;
}

h1 {
  /* 기본 크기의 1.5배 * 1.5배로 설정 */
  font-size: calc(var(--base-size) * var(--scale-factor) * var(--scale-factor));
}

p {
  font-size: var(--base-size);
  line-height: calc(var(--base-size) * 1.6);
}

4. 유용한 팁: Fallback 값 설정

변수가 정의되지 않았거나 로드에 실패했을 경우를 대비해 기본값을 설정할 수 있습니다.

.alert {
  /* --alert-color가 없으면 red를 사용함 */
  background-color: var(--alert-color, red);
}

5. JavaScript와의 상호작용

CSS 변수는 런타임에 수정이 가능합니다. 자바스크립트를 이용해 실시간으로 스타일을 변경해 보세요.

// 특정 변수 값 변경하기
const root = document.querySelector(':root');

function changeMainColor(newColor) {
  root.style.setProperty('--main-color', newColor);
}

// 예: 사용자 클릭 시 테마 색상 변경
// changeMainColor('#9b59b6');

마치며

CSS 변수는 단순한 편의 기능을 넘어, 현대적인 웹 개발에서 **'디자인 시스템'**을 구축하는 핵심 도구입니다. 처음에는 변수를 정의하는 과정이 번거롭게 느껴질 수 있지만, 프로젝트가 커질수록 그 가치는 빛을 발하게 됩니다.

오늘부터 여러분의 프로젝트에 CSS 변수를 도입하여, 더 깔끔하고 관리하기 쉬운 코드를 작성해 보시는 건 어떨까요?