디자인시스템의 디자인토큰의 문제점을 해결하는 방법을 찾아 적용해보았어요. 기존에는 스타일링에 필요한 디자인토큰 값을 별도로 css variable에 저장하고 해당 css variable을 객체에 알맞은 키와 함께 저장하였습니다. 예를 들어 static css 파일에 --whitr-color: #ffffff; 와 같이 직접 작성해두고, 객체에는 아래와 같이 저장해두었죠 'red-color': 'var(--white-color)' 그리고 토큰을 사용하여 스타일링 할 땐 token['red-color'] 이렇게 참조하였었습니다. css variable을 이용하여 스타일링을 하는 방식 자체는 유저의 커스텀도 가능한 부분이 있어 유연하게 스타일을 바꿀 수 있는 장점이 있어 좋았었습니다. 그러나 첫째로 사이즈나 컬러의 투명도를 기존 값을 기준으로 계산하여 적용할 필요가 있을 때는 css variable로는 계산이 불가하다는 점이 있었습니다. 다음으로는 js에서 들고 있는 토큰객체와 static css를 각각 작성해주어야해서 토큰의 추가 및 변경이 있을 때 휴먼에러의 발생 가능성으로 누락이 있을 수 있으며, 실제 스타일링 하는 코드에서 같은 것을 참조한다는 보장을 받지 못하게 됩니다. 그래서 현재의 해결책으로는 다음의 아이디어로 진행했습니다. 디자인토큰의 인터페이스를 다시 설계하였습니다. 기존에는 하나의 키에 css var을 하나의 값을 가졌다면, 현재는 raw value와 css var을 모두 포함하는 객체를 토큰으로 두도록 변경하였습니다. 디자인토큰 객체를 단일진실공급원으로 두고 해당 객체를 통해 static css로 적용되도록 변경하였습니다. 이제 토큰의 수정사항이 발생하면 토큰 객체만 수정하면 됩니다. 만약 더 좋은 해결책이 있거나 토큰관리에 대한 지식을 공유해주실 분은 댓글로 남겨주세요!

콘텐츠를 더 읽고 싶다면?
원티드에 가입해 주세요.
로그인 후 모든 글을 볼 수 있습니다.
댓글 1