color variable 등록 시 naming 및 색깔 기준 문의...

24.01.06 23:47 작성 조회수 315

2

안녕하세요. 강의 몇 번이나 돌려보고, 자료 보면서 제가 진행하고 있는 개인 프로젝트에 맞춰서 수정/작성하고 있습니다. 그러던 중 color variable 등록할 때 궁금증이 생겨서 글을 작성하게 되었습니다.

 

  1. theme에서 neutral로 재정의하는 이유가 뭘까요? (primitive에 greyscale이 있음에도 불구하고)

  2. semantic color 에서 primary / secondary / tertiary가 뜻하는게 뭔가요?

  3. semantic color에서 bold와 subtle은 언제 쓰는건가요~?

  4. semantic color에서 그냥 컬러들이랑 INTERACTIVE에 넣은 컬러들이랑 사용처가 어떻게 다른지 궁금합니다 ㅠㅠㅠ

 

 

답변 1

답변을 작성해보세요.

2

Dav님 안녕하세요!

우선 정말 좋은 질문 주셔서 감사합니다.

베리어블 파트는 30분 밖에 되지 않지만 이 강좌의 90%를 대표할 만큼 가장 어렵고 까다로운 부분입니다. 그래서 지금 개인 프로젝트에 적용해보시는 것은 정말 잘하시고 계신 것 같습니다.

그리고 제가 만든 색상 베리어블은 앞에서 배운 이론을 적용해 볼 단순한 예제일 뿐이며, 프로젝트 진행하시면서 다른 디자인 시스템 구조와 비교하면서 본인만의 구조를 만들어보시는 것을 추천드립니다.

 

우선 질문 주신 부분에 대한 저의 의견을 말씀 드리도록 하겠습니다.

  1. theme에서 neutral로 재정의하는 이유가 뭘까요? (primitive에 greyscale이 있음에도 불구하고)

     

    1. Theme은 브랜드를 나타내는 콜랙션입니다. 여기에는 neutral을 두었는데요. 그 이유는 브랜드마다 다른 회색 형태를 쓰일 수 있기 때문입니다. 예를 들어, 저의 강의에서 쓰고 있는 tailwind css만 하더라도 회색 형태가 grey, stone, zinc, slate, neutral이 있습니다. 이들이 브랜드마다 달라질 수 있을 수도 있어서 나중의 확장성을 위해 두었습니다.(다른 부분은 지우긴 했지만 추후에 모르니깐)

      1. 예를 들어, A 브랜드의 neutral은 grey, B브랜드는 stone이 되겠죠.

  2. Semantic에서 primary, secondary, tertiary는 말 그대로 첫번째, 두번째, 세번째 즉 위계 질서(hierachy)를 두는 것 입니다. 텍스트 측면에서 primary는 가장 어두운 색일 것이고 배경 측면에서는 가장 밝은 하얀색이 되겠죠.

  3. 같은 색상 안에서 bold와 subtle은 강도를 나타내고 있습니다. 다른 말로 Strong, weak 등등 다양하게 쓸 수 있을 것 습니다.

  4. 마지막으로 Interactive는 말 그래도 인터랙티브한 요소에 쓰이는 것을 의미합니다. 예를 들어, 버튼이 있겠죠. 버튼 안에서 쓰이는 대부분의 요소에 넣을 수 있겠죠.

궁금하신 부분 있으면 언제든지 질문 주세요!

채널톡 아이콘