당신의 디자인 시스템에 결합 문제가 있습니다

I’m happy to help translate the article, but I’ll need the text you’d like translated. Could you please paste the content you want converted to Korean? Once I have the full text, I’ll keep the source line exactly as you provided and translate the rest while preserving the original formatting and markdown.

소개

나는 직설적으로 씁니다. 여러분의 시간을 소중히 여기죠—불필요한 말은 줄이고, 가치를 높입니다.

인기 있는 컴포넌트 라이브러리를 선택하고 Button 컴포넌트를 찾아보세요. 다음을 확인할 수 있습니다:

• Structure – ARIA 속성이 포함된 시맨틱 HTML(접근성 계약).
• Interaction – 포커스, 키보드 이벤트, 공개 상태, 스크롤 잠금 등을 처리하는 JavaScript.
• Aesthetics – 색상 값, 간격, 폰트 크기, 테두리 반경, 호버 전환, 그리고 변형(xl, lg, md, primary, secondary, …).

하나의 컴포넌트가 세 가지 역할을 수행하고 있습니다.

세 가지 기둥

이러한 기둥은 어떤 제품에서도 지속적으로 변합니다. 색상 팔레트(미학)를 업데이트하거나, 새로운 폼 필드(구조)를 추가하거나, 키보드 단축키(상호작용)를 도입하는 것만으로도 UI/UX가 얽히게 되는 온상이 될 수 있습니다.

Tokens

Tokens은 시각적 결정을 저장하는 명명된 변수입니다. #2563eb를 컴포넌트에 직접 하드코딩하는 대신 --color-primary를 참조하고, 16px 대신 --space-md를 참조합니다. 값은 한 곳에만 존재하고, 나머지 모든 요소가 그 값을 가리킵니다.

/* Example token definitions */
:root {
  --color-primary: #2563eb;
  --space-md: 1rem;
  --radius-sm: 4px;
}

My Argument

Decouple. That’s it.
분리하라. 그게 전부다.

Components vs. Tokens

• Components own structure and interaction.
  컴포넌트는 구조와 상호작용을 담당한다.
• Tokens own aesthetics.
  토큰은 미학을 담당한다.

Concrete example

// Button component (structure & interaction only)
function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

/* Token system – aesthetics */
:root {
  --color-primary: #2563eb;
  --button-bg: var(--color-primary);
  --button-padding: var(--space-md);
  --button-radius: var(--radius-sm);
}

/* Component hook */
.button {
  background: var(--button-bg);
  padding: var(--button-padding);
  border-radius: var(--button-radius);
}

Three layers (raw HTML, :root vars, CSS mapping) → zero entanglement.
세 개의 레이어(순수 HTML, :root 변수, CSS 매핑) → 얽힘 제로.

이것이 해결하는 내용

테마 변경

하나의 토큰을 편집합니다:

/* Before */
--color-primary: #2563eb;

/* After */
--color-primary: #dc2626;

--color-action-primary를 사용하는 모든 컴포넌트가 자동으로 업데이트됩니다—컴포넌트 파일을 수정할 필요 없으며, JavaScript를 재배포하지 않아도 됩니다.

브랜드 리프레시

토큰 파일의 키/값 쌍 하나만 변경하면 전체 UI가 즉시 새로운 브랜드를 반영합니다.

So, Why Not CSS‑in‑JS?

CSS‑in‑JS는 특이성 전쟁, 네이밍 충돌, 그리고 사용되지 않는 코드를 해결했지만, 새로운 결합을 도입했습니다: 시각적 처리가 컴포넌트 트리의 일부가 되었습니다. 이를 오버라이드하려면 래퍼를 이해해야 하고, 테마링을 하려면 테마 구조를 알아야 하며, 테스트를 위해서는 런타임 값을 모킹해야 합니다. 우리는 전역 CSS 문제를 컴포넌트 결합으로 바꿨습니다—여전히 엉망이지만, 다른 파일에 있습니다.

Tailwind?

Tailwind는 JavaScript 결합을 제거했으며, 이는 진보입니다. 그러나 다음과 같은 유틸리티 문자열은:

<button class="bg-primary text-white py-2 px-4 rounded">
  Click me
</button>

여전히 미학과 구조를 얽히게 합니다. 테마링은 모든 컴포넌트에서 찾기‑및‑바꾸기를 의미하고, 다크 모드는 모든 클래스에 dark:를 추가해야 하며, 브랜드 리프레시는 모든 파일을 건드립니다.

Tailwind는 유틸리티‑우선입니다. 여기서 설명하는 접근 방식은 토큰‑우선: 시각적 결정은 마크업이 아니라 별도의 토큰 레이어에 존재합니다.

분리

겹치는 부분이 없습니다—한 열을 변경하면 다른 열은 영향을 받지 않습니다.

결론

이것은 이론적인 것이 아니라 UI 시스템을 구축하는 실용적인 방법입니다. 별개의 레이어에 속하는 관심사를 얽히게 하지 마세요.

• 제가 만든 것
• 토큰 생성을 위한 도우미