정적css vs 동적css

정적css

빌드 시점(컴파일 단계)에 적용되는 CSS로, 대표적으로 TailwindCSS가 있습니다.
빌드시 미리 정의된 스타일이 컴파일되어 브라우저에 바로 적용되며, JS 실행과는 무관하게 동작합니다.
렌더링 속도가 빠르고 캐시 효율이 높지만, 런타임 변화에 약해 테마 변경 등에 대응하기 어렵습니다.

디자인 토큰

디자인 토큰은 반복적으로 사용하는 색상, 폰트, 여백, 라운드 값 등을 공통 변수로 정의하여 프로젝트 전반의 일관성을 유지하기 위한 개념입니다.

예를 들어, 전역 스타일 파일(index.css)에 다음과 같이 선언합니다.

:root {
  --color-primary: #4f46e5;
  --color-bg: #f9fafb;
  --radius-base: 8px;
}

이 변수들은 어디서든 호출할 수 있으며,
색상이나 테마를 변경할 때 한 곳만 수정하면 전체에 반영됩니다.

Tailwind에서 디자인 토큰 연결

Tailwind를 사용할 때는 bg-primary 같은 유틸리티 클래스를 쓰기위해 설정 파일(tailwind.config.js)에서 이 CSS 변수를 테마값으로 등록해야 합니다.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "var(--color-primary)",
        background: "var(--color-bg)",
      },
      borderRadius: {
        base: "var(--radius-base)",
      },
    },
  },
};

이후 Tailwind 클래스 형태로 사용할 수 있습니다.

<button class="bg-primary text-background rounded-base">
	Button
</button>

동적css

런타임(실행 시점)에 적용되는 CSS로, 대표적으로 CSS-in-JS가 있습니다.
JS 코드가 실행될 때 상태나 테마 값에 따라 스타일이 실시간으로 계산되어 적용됩니다.
애니메이션, 다크 모드 등에 따른 런타임 기반 스타일 변화에 매우 유연하지만 JS 실행 의존성이 높고 성능 오버헤드가 발생할 수 있다는 단점도 있습니다.

정적css vs 동적css

두 방식 모두 장점이 뚜렷하여 프로젝트의 성격과 규모에 따라 적절히 선택해야합니다. 최근에는 정적, 동적 방식을 혼합해 사용하기도 합니다.
정적 CSS → Next.js처럼 정적 빌드 기반이거나, 유지보수가 중요한 대규모 프로젝트에 적합하고
동적 CSS → 다크모드, 사용자 커스터마이징 등 실시간 스타일 변화가 필요한 프로젝트에 적합합니다.

현재 프로젝트에서 TailwindCSS를 사용하고 있는데, 디자인 일관성을 위해 디자인 토큰 개념을 적용해보니 전역 변수를 통한 관리로 수정이 훨씬 용이해졌고, 반복적인 코드 작성 시간도 크게 줄일 수 있었습니다! :)