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

성진님 안녕하세요.

전반적인 질문은 베리어블 계층과 스코핑(Scoping)에 대한 것 같습니다.

베리어블 계층은 강의에서 Primitive, Theme, Semantic으로 정의했습니다.

스코핑은 베리어블이 포함하는 UI의 영역입니다.

Primitive는 원시값으로, 사실 UI 작업할 때는 보여지면 안 됩니다. 그래서 컬러 스코핑을 전체 해지해 주면 됩니다. Theme의 경우도 브랜드 컨트롤 역할만 하기 때문에 전체 해지해 주시면 됩니다. 그러면 오직 UI 단에서는 시맨틱만 보입니다.

마지막으로 text, bg, border, icon의 시맨틱은 컬러스코핑을 아래처럼 각각 따로 해주면 UI의 메뉴 창에서 딱 그 관련 컬러만 떠서 디자인할 때 용이합니다.

- text -> text

- bg -> Frame

- border -> Stroke

- icon -> Fill

디자인 시스템을 도입하면 팀마다 다르겠지만 미세하게 컬러를 조정하는 것은 지양하는 편입니다. 그렇게 되면 일관성이 떨어지게 됩니다. 그래서 처음에 베리어블을 계획할 때 제대로 하는 것이 중요합니다.

그리고 저도 실무에서 적용해 본 결과 디자인의 결과물이 깔끔하고 정리되 보이며, 특히 개발하는 데 시간이 훨씬 적게 듭니다. 무엇보다 여러 디자이너의 결과물이 동일하죠. 그리고 디자이너의 경우 나머지 시간 동안 기획, UX 그리고 사용자 리서치에 더 많은 시간을 투자하여 사용성과 유용성, 그리고 효율성 여러 가지 토끼를 잡을 수 있게 됩니다.

더 궁금하신 점 있으시면 알려주세요!

감사드립니다.