왜 필요한가

브랜드 색 하나를 바꾸기 위해 수십 개 컴포넌트를 찾아다니고 싶지는 않습니다. 하지만 색과 간격을 각각 정하면 화면이 조금씩 달라지고, 배경만 어둡게 바꿨을 때 옛 글자색이 읽히지 않기도 합니다. 요소의 역할을 유지하는 공통 결정과 실제 조합을 확인하는 절차가 필요합니다.

어떻게 해결하는가

  1. 색을 수집하기 전에 원하는 분위기와 읽는 작업을 설명합니다. 긴 참고 글과 장난스러운 조작 패널은 강조할 부분이 다릅니다. 페이지 배경, 표면, 본문, 보조 글자, 경계, 행동, 포커스 같은 역할을 정합니다. 좋아하는 색을 모든 곳에 배치하기보다 어떤 정보가 먼저 보여야 하는지 생각합니다.
  2. 그 역할에 재사용할 이름을 줍니다. 카드는 자체 색 복사본 대신 표면과 본문 값을 참조하게 합니다. 공통 값을 바꾸면 참여하는 요소가 함께 바뀝니다. 지금 색이 같아도 의미가 다른 역할은 별도로 둡니다. 나중에 한 역할만 달라질 때 우연히 같은 색이었던 다른 요소까지 바뀌지 않도록 하기 위해서입니다.
  3. 밝은 화면과 어두운 화면의 값을 의도적으로 정합니다. 반투명 패널, 선택 상태, 비활성 조작을 포함해 실제 배경 위에서 글자를 확인합니다. 색을 기계적으로 반전했다고 대비가 충분해지는 것은 아닙니다. 키보드 포커스를 남기고, 색을 구분하지 못해도 오류나 상태를 이해할 수 있게 합니다.
  4. 실제 문장으로 글자를 고릅니다. 지원 언어마다 제목·본문·숫자·혼동하기 쉬운 글자를 비교합니다. 시스템 글꼴은 기기마다 다르고, 내려받거나 직접 제공하는 글꼴에는 로딩과 라이선스 관리가 따릅니다. 원하는 글꼴이 오기 전 대체 글꼴에서도 읽히는지 시험합니다. 이름만으로 모든 문자가 같은 인상일 것이라 기대하지 않습니다.
  5. 긴 글, 카드, 오류 안내, 입력 폼에 색·간격·글자 역할을 적용합니다. 테마를 바꾸고 새로고침해 봅니다. 시스템 설정과 사용자의 명시적인 선택을 어떻게 조합할지 정하고 동작을 예측 가능하게 만듭니다. 같은 결정이 다음 화면에서도 같은 의미로 쓰이는지 확인하는 작은 표본입니다.

팔레트만 따로 보지 말고 가장 어려운 조합을 살펴봅니다. 전환 뒤에도 포커스된 조작부를 찾고 보조 글자를 읽으며 오류를 이해할 수 있나요? 확인 항목을 공통 값과 함께 남겨 다음 컴포넌트도 같은 합의를 따르게 합니다. AI는 정한 방향 안에서 토큰과 개별 스타일을 구현할 수 있습니다. 전혀 다른 시각적 정체성으로 바꾸는 일은 여전히 제품 결정입니다.

글자를 확대하고 줄바꿈도 확인합니다. 공통 색을 쓴다고 긴 이름이 조작부를 가리는 문제까지 사라지지는 않습니다.

Aa밝게
Aa어둡게

무엇이라 부르는가

테마는 시각적 결정의 묶음이고 디자인 토큰은 공통 결정에 붙인 안정적인 이름입니다. 웹에서는 CSS 사용자 지정 속성으로 표현할 수 있습니다. W3C 대비 지침은 실제 전경과 배경 조합이 중요한 이유를 설명합니다. 토큰은 일관성을 돕지만 전체 화면과 여러 상태의 검토까지 대신하지는 않습니다.