디자인 시스템/디자인 토큰(Style Dictionary)

디자인 시스템은 조직이나 프로젝트에서 일관된 디자인과 사용자 경험을 유지하기 위해 만들어진 일련의 지침, 규칙, 구성 요소, 디자인 패턴 및 리소스의 집합입니다. 이는 디자인 프로세스를 효율적으로 관리하고 디자인 일관성을 유지하며, 디자이너들이 효율적으로 협업할 수 있도록 돕기 위한 도구입니다. 디자인 시스템은 다양한 디자인 요소를 포함할 수 있으며, 이는 로고, 색상 팔레트, 글꼴, 아이콘, 버튼, 입력 양식 등과 같은 시각적인 구성 요소 뿐만 아니라 디자인 원칙, 가이드라인, 사용자 경험 (UX) 패턴, 애니메이션 규칙 등을 포함할 수 있습니다.

 

디자인 토큰(Design Token)은 디자인 시스템에서 사용되는 기본적인 디자인 요소를 나타내는 추상화된 개념입니다. 이는 색상, 글꼴, 간격, 그림자 등과 같은 시각적인 속성들을 의미합니다. 디자인 토큰은 이러한 디자인 속성들을 하나의 이름 또는 기호로 정의하고, 이를 디자인 시스템에서 일관성 있게 사용할 수 있게 만드는 역할을 합니다. 디자인 토큰은 주로 변수처럼 작동하여, 디자인 요소들을 관리하고 쉽게 변경할 수 있도록 합니다. 이것은 디자인 시스템의 일관성을 유지하고, 디자인 업무의 효율성을 높이며, 협업을 용이하게 하는 데 도움이 됩니다.

 

예를 들어, 색상에 대한 디자인 토큰을 정의한다면, 해당 색상을 나타내는 이름(예: "primary-color")과 이에 대한 실제 값(예: #3498db)을 매핑할 수 있습니다. 디자이너나 개발자는 이러한 디자인 토큰을 사용하여 여러 디자인 요소에 일관된 색상을 적용할 수 있습니다.

디자인 토큰은 디자인 시스템의 유지보수 및 확장성을 향상시키며, 변화에 대응하기 쉬운 유연한 디자인 시스템을 구축하는 데 도움을 줍니다.

 

사용되는 모든 요소를 정의한 조각들을 Reference Token이라 하고 용도에 따라 사용된 토큰들을 System Token, Component 요소에 맞게 정의한 토큰을 Component Token으로 정의했습니다.

 

•  Reference Token
  Global Token으로 표현할 수 있으며 인터페이스에서 사용된 모든 Color, Typography, Spacing 등과 같은 기본이 되는 값을 정의하여 Reference Token으로 지정합니다. 콘텍스트에 구애받지 않는 이름으로 값은 #CAE72D와 같은 16진수 기본값 등을 가집니다.
  Reference Token은 다른 모든 토큰 유형에서 상속되며 필요시 직접 사용할 수 있습니다.
  
  
• System Token
  System Token은 정의한 Reference Token을 시스템 내에서 사용하는 테마나 컨텍스트에 맞는 토큰 이름으로 지정하며 Reference Token을 System Token으로 재정의하여 의도된 목적에 맞게 사용될 수 있도록 참조시켜줍니다.
  모든 System Token은 Reference Token에서 가져옵니다.
  
  
• Component Token
  System Token에서 정의한 값 또는 Reference Token을 참조하며 Component에 해당하는 값으로 정의한 요소를 나타냅니다.

 

참고링크

https://www.youtube.com/watch?v=RcxP0RePlVU

https://aeunhi99.tistory.com/330

https://brunch.co.kr/@somgs34/20 (rem 적용)