오늘도 디자인시스템의 디자인토큰 시스템 개편 작업을 했어요.
디자인토큰은 크게 세가지 분류로 나누었습니다.
- ColorToken
- SizeToken
- FontToken
각 토큰은 분류에서는 실제 값을 가지고 있는 Base 토큰이 있고, 컴포넌트에 적용할 Semantic 토큰으로 다시 나뉘어집니다. 그리고 Semantic 토큰의 값은 Base 토큰으로 구성했습니다.
그리고 여러 토큰들을 조합하여 만들어질 스타일들을 ComposedStyles라고 명명하고 Font 스타일(크기, 굵기 등)의 조합, Color의 조합 (배경색, 글자색) 등을 미리 정의해두었습니다.
현재 개편이 완료된 토큰시스템에서는, 기존과 다르게 컴포넌트의 사용자가 토큰을 직접사용 하는 것이 아니라 일정하게 정해진 규칙에 의한 키를 props로 받도록 개선되었습니다.
이에 따라 컴포넌트 인터페이스의 변화가 있지 않는 이상 컴포넌트 사용의 Breaking Change를 최소화하면서도 컴포넌트의 수정 및 시스템의 보완이 가능한 구조가 되었습니다.
추가로 맞닥뜨린 문제는 타입이였는데요. 사용자 정의 테마에 대해서 열어두도록 타입시스템을 잘 구축해야하는데 머리가 복잡해서 잘 되지 않네요!
우선은 일정상의 이유와 내부시스템이라는 차원에서 사용자정의 영역은 크게 열어두지 않기로 하여서 고민을 조금 미뤄두기로 했습니다.
