베리어블 활용에 질문이 있습니다 :)

Question

안녕하세요, 선생님! 본격적으로 베리어블을 활용/운영하다보니 궁금한점이 있어 글 남겼습니다. 1.semantic으로 지정되지않은 컬러 활용? Primitive의 color-100/200/300 이런 베리어블들은 사용을 지양해야하나요~? Primitive는 시멘틱처럼 용도가 따로 지정되어잇지않아 다른 디자이너들이 보면 어떤 때 200,300을 써야하는지 헷갈릴것같은데 어떻게 해야할까요?  예를들어 미세하게 컬러를 조정할떄가 생기는데 그때마다 시멘틱의 text,bg,border,icon을 각각 1컬러당 4세트씩 작업해줘야하는 점이 번거로울것 같기도한데, 그러자니 primitive를 바로쓰면 용도에 대해 적혀있지않은 네이밍이라 헷갈릴 것 같습니다. 조언 주실 부분 있으실까요?   2.텍스트나 도형을 생성하고 컬러칩 라이브러리를 열면 라이브러리 상단에 semntic이  우선으로 뜨지 않고 primitive가 먼저 뜨게 되는데 상단에 우선으로 뜨게 하는 방법이있을까요?

볼드 UX · Answer

성진님 안녕하세요. 전반적인 질문은 베리어블 계층과 스코핑(Scoping)에 대한 것 같습니다. 베리어블 계층은 강의에서 Primitive, Theme, Semantic으로 정의했습니다. 스코핑은 베리어블이 포함하는 UI의 영역입니다.   Primitive는 원시값으로, 사실 UI 작업할 때는 보여지면 안 됩니다. 그래서 컬러 스코핑을 전체 해지해 주면 됩니다. Theme의 경우도 브랜드 컨트롤 역할만 하기 때문에 전체 해지해 주시면 됩니다. 그러면 오직 UI 단에서는 시맨틱만 보입니다.   마지막으로 text, bg, border, icon의 시맨틱은 컬러스코핑을 아래처럼 각각 따로 해주면 UI의 메뉴 창에서 딱 그 관련 컬러만 떠서 디자인할 때 용이합니다. - text -> text - bg -> Frame - border -> Stroke - icon -> Fill   디자인 시스템을 도입하면 팀마다 다르겠지만 미세하게 컬러를 조정하는 것은 지양하는 편입니다. 그렇게 되면 일관성이 떨어지게 됩니다. 그래서 처음에 베리어블을 계획할 때 제대로 하는 것이 중요합니다. 그리고 저도 실무에서 적용해 본 결과 디자인의 결과물이 깔끔하고 정리되 보이며, 특히 개발하는 데 시간이 훨씬 적게 듭니다. 무엇보다 여러 디자이너의 결과물이 동일하죠. 그리고 디자이너의 경우 나머지 시간 동안 기획, UX 그리고 사용자 리서치에 더 많은 시간을 투자하여 사용성과 유용성, 그리고 효율성 여러 가지 토끼를 잡을 수 있게 됩니다.   더 궁금하신 점 있으시면 알려주세요! 감사드립니다.