인프런 커뮤니티 질문&답변
작성한 질문수
베리어블 활용에 질문이 있습니다 :)
해결된 질문
작성
·
223
·
수정됨
0
안녕하세요, 선생님!
본격적으로 베리어블을 활용/운영하다보니 궁금한점이 있어 글 남겼습니다.
1.semantic으로 지정되지않은 컬러 활용?
Primitive의 color-100/200/300 이런 베리어블들은 사용을 지양해야하나요~?
Primitive는 시멘틱처럼 용도가 따로 지정되어잇지않아 다른 디자이너들이 보면 어떤 때 200,300을 써야하는지 헷갈릴것같은데 어떻게 해야할까요?
예를들어 미세하게 컬러를 조정할떄가 생기는데 그때마다 시멘틱의 text,bg,border,icon을 각각 1컬러당 4세트씩 작업해줘야하는 점이 번거로울것 같기도한데, 그러자니 primitive를 바로쓰면 용도에 대해 적혀있지않은 네이밍이라 헷갈릴 것 같습니다.
조언 주실 부분 있으실까요?
2.텍스트나 도형을 생성하고 컬러칩 라이브러리를 열면
라이브러리 상단에 semntic이 우선으로 뜨지 않고 primitive가 먼저 뜨게 되는데 상단에 우선으로 뜨게 하는 방법이있을까요?
답변 1
1
성진님 안녕하세요.
전반적인 질문은 베리어블 계층과 스코핑(Scoping)에 대한 것 같습니다.
베리어블 계층은 강의에서 Primitive, Theme, Semantic으로 정의했습니다.
스코핑은 베리어블이 포함하는 UI의 영역입니다.
Primitive는 원시값으로, 사실 UI 작업할 때는 보여지면 안 됩니다. 그래서 컬러 스코핑을 전체 해지해 주면 됩니다. Theme의 경우도 브랜드 컨트롤 역할만 하기 때문에 전체 해지해 주시면 됩니다. 그러면 오직 UI 단에서는 시맨틱만 보입니다.
마지막으로 text, bg, border, icon의 시맨틱은 컬러스코핑을 아래처럼 각각 따로 해주면 UI의 메뉴 창에서 딱 그 관련 컬러만 떠서 디자인할 때 용이합니다.
- text -> text
- bg -> Frame
- border -> Stroke
- icon -> Fill
디자인 시스템을 도입하면 팀마다 다르겠지만 미세하게 컬러를 조정하는 것은 지양하는 편입니다. 그렇게 되면 일관성이 떨어지게 됩니다. 그래서 처음에 베리어블을 계획할 때 제대로 하는 것이 중요합니다.
그리고 저도 실무에서 적용해 본 결과 디자인의 결과물이 깔끔하고 정리되 보이며, 특히 개발하는 데 시간이 훨씬 적게 듭니다. 무엇보다 여러 디자이너의 결과물이 동일하죠. 그리고 디자이너의 경우 나머지 시간 동안 기획, UX 그리고 사용자 리서치에 더 많은 시간을 투자하여 사용성과 유용성, 그리고 효율성 여러 가지 토끼를 잡을 수 있게 됩니다.
더 궁금하신 점 있으시면 알려주세요!
감사드립니다.
mina님 질문 주셔서 감사합니다.
우선 디자인 토큰, 즉 베리어블 중 시맨틱의 경우는 디자인 구성요소(텍스트, 아이콘, 배경) 마다 역할을 부여한다고 보시면 됩니다. 예를 들어, primary 역할의 경우에 색깔의 톤 관점에서는 텍스트, 아이콘은 어두운 색인 반면 배경은 밝은 흰색 계열 그리고 테두리는 중간 정도 되겠죠.
그리고 접근성 관점에서도 텍스트와 아이콘은 서로 다른 기준을 갖습니다. 텍스트의 경우 더 가독성 때문에 대비가 높은 반면, 아이콘은 이미지이기 때문에 낮습니다.
이러한 역할, 접근성 측면에서 네개를 나누어서 작업하는 것을 추천드립니다. 사실 텍스트, 아이콘 그리고 테두리, 배경은 비슷하게 가는 편이긴 합니다만 나중에 접근성 체크를 하거나 할 때 서로 다르게 미묘하게 바꿀 경우가 있습니다.
하지만 머티리얼 디자인을 만약 하실 경우라면 디자인 요소 보다는 심플하게 대비되는 것만 하셔도 됩니다. 감사합니다.
안녕하세요.
시멘틱 컬러에서도 텍스트, 아이콘 등 구분해서 컬러를 지정해야 하는 이유는 어떤건가요?