DevRoutine — 매일 기술 면접 질문

CSS Custom Properties는 --color-primary처럼 선언하고 var()로 읽는 CSS의 런타임 변수입니다. Sass 변수와 달리 브라우저가 cascade, 상속, 미디어 쿼리, 사용자 상태에 따라 값을 계산하기 때문에 테마, 디자인 토큰, 컴포넌트 커스터마이징에 특히 강합니다.

핵심 개념

런타임에 값이 결정되므로 JavaScript나 상태 클래스 변경만으로 테마를 바꿀 수 있습니다.
일반 CSS 속성과 동일하게 cascade와 상속을 따르므로 가까운 스코프의 값이 우선합니다.
var(--name, fallback) 형태로 fallback을 지정할 수 있어 점진적 적용이 쉽습니다.

동작 방식 또는 판단 기준

이 주제를 이해할 때는 다음 순서로 보면 실무 적용이 쉬워집니다.

무엇을 해결하려는가: 성능, 표현력, 안정성, 접근성 중 어떤 문제를 줄이려는지 확인합니다.
전제 조건은 무엇인가: 정렬 여부, 브라우저 지원, 네트워크 특성, 동시성 조건처럼 성립해야 하는 조건을 점검합니다.
비용은 어디서 발생하는가: 시간 복잡도, 메모리, 캐시, 재시도, 렌더링 비용처럼 병목 지점을 나눠 봅니다.
실패 시 어떤 문제가 생기는가: 잘못 적용했을 때의 버그나 운영 리스크를 함께 고려합니다.

실제 예시

CSS

:root {
  --color-bg: #ffffff;
  --color-text: #1f2937;
  --space-card: 16px;
}

[data-theme='dark'] {
  --color-bg: #111827;
  --color-text: #f9fafb;
}

.card {
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--space-card, 1rem);
  border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
}

JavaScript

// 값 자체를 다시 빌드하지 않고 런타임에 교체
button.addEventListener('click', () => {
  document.documentElement.dataset.theme = 'dark';
});

실무에서 주의할 점

Custom Property는 선언만으로는 유효성 검사가 거의 되지 않습니다. --gap: red처럼 잘못된 값도 저장되고, 실제 속성에 대입될 때 invalid 처리됩니다.
상속 범위를 넓게 잡으면 어떤 값이 최종 적용됐는지 추적하기 어려워집니다. 전역 토큰과 컴포넌트 전용 토큰을 구분하세요.
모든 값을 변수화하면 오히려 가독성이 떨어집니다. 자주 바뀌거나 의미가 있는 값부터 토큰화하는 것이 좋습니다.

실무 적용 가이드

전역 토큰은 --color-primary, 컴포넌트 토큰은 --button-bg처럼 계층을 나눕니다.
필수 토큰에는 fallback을 두고, 디자인 시스템에서는 문서와 예시를 함께 제공합니다.
색상 토큰은 접근성 대비까지 검증하고 다크 모드에서만 따로 덮어씁니다.

함께 연결해서 보면 좋은 키워드

CSS, Custom Properties, Design Token, Theme, Cascade

정리

CSS Custom Properties는 --color-primary처럼 선언하고 var()로 읽는 CSS의 런타임 변수입니다. 다만 개념 자체보다 중요한 것은 적용 조건과 한계를 함께 이해하는 것입니다. 작은 예제에서는 단순해 보여도 실제 서비스에서는 성능, 보안, 유지보수성, 접근성 요구사항이 함께 얽히므로, 문제의 성격을 먼저 파악한 뒤 적절한 도구로 선택하는 것이 좋습니다.

CSS Custom Properties의 장점과 주의점을 설명해주세요.

답변 포인트

정답 및 해설