프로젝트 시작에 앞서 폴더 구조와 기본 파일들을 정리하며 디자인 시스템도 미리 정의해두고자 했다.

이 과정에서 디자인 시스템을 정리할 때 .css뿐만 아니라 .js로도 관리하는 방법이 있다는 것을 알게 되어 두 방식의 차이를 정리하고 어떤 상황에서 적합한지 비교해보고자 한다.

---

우선 디자인 시스템이 무엇인지 짚고 넘어가자

디자인 시스템이란

프로젝트 전반에서 일관성을 유지하기 위해 미리 정의해두는 값과 규칙들의 집합

즉,

• 색상
• 폰트
• 여백
• 컴포넌트 스타일
  이러한 요소들을 매번 새로 정의하는 것이 아닌, 한 곳에 모아두고 재사용하는 것을 말한다.

---

.css로 디자인 시스템 관리하기

가장 일반적인 방법으로 CSS 변수를 사용해서 관리하는 것이다.

:root {
  --color-primary: #99C08E;
  --color-gray-01: #f5f5f5;
  --font-size-base: 16px;
}

사용 시

.button {
  background-color: var(--color-primary);
  font-size: var(--font-size-base);
}

특징

• 스타일을 CSS 레벨에서 정의
• 전역적으로 사용 가능
• 브라우저가 직접 처리

장점

• 가장 표준적인 방식
• 스타일과 자연스럽게 연결됨
• 재사용성이 높음
• 협업에 유리 (디자이너와 공유하기 쉬움)

단점

• 동적인 처리에 한계가 있음
• 조건에 따라 값을 바꾸기 어려움

---

.js로 디자인 시스템 관리하기

디자인 값을 JavaScript 객체로 관리하는 방법도 있다.

export const colors = {
  primary: "#99C08E",
  gray01: "#f5f5f5",
};

export const fontSize = {
  base: "16px",
};

사용 시

<div style={{ color: colors.primary, fontSize: fontSize.base }} />

특징

• 디자인 값을 데이터처럼 관리
• 필요한 곳에서 import 해서 사용

장점

• 조건 처리 가능 (다크모드 등)
• JS 로직과 쉽게 결합 가능
• 자동완성, 타입 지원 가능
  단점
• 인라인 스타일이 많아질 수 있음
• CSS와 분리되어 어색할 수 있음
• 스타일 재사용성이 떨어질 수 있음

---

📃정리

기준	.css	.js
역할	스타일 정의	값(데이터) 관리
사용 방식	class / var	import
동적 처리	제한적	자유로움
협업	유리	상대적으로 제한

---

언제 무엇을 사용해야 할까

.css가 적합한 경우

• 색상, 폰트, spacing 같은 기본 디자인 토큰
• 공통 스타일 (버튼, 레이아웃 등)
• 프로젝트 전체에서 사용하는 값

👉 정적인 디자인 정의

.js가 적합한 경우

• 다크모드 같은 조건에 따라 변하는 값
• 계산이 필요한 스타일
• 컴포넌트 내부에서만 사용하는 값

👉 동적인 로직이 필요한 경우

---

정적인 디자인 처리는 .css, 동적인 처리는 .js가 어울린다고 정리할 수 있다.
상황에 따라 다르지만 .js를 컴포넌트처럼 import해서 사용하는 점에 있어 더 쉽고 다양하게 사용할 줄 알았는데 디자인 시스템을 구성하는 관점에서 .css가 프로젝트에 용이할 것 같다는 점이 의외였다.