디자인 시스템 Component 만들 때

안녕하세요 디자인 시스템에서 버튼 컴포넌트를 예시로 등록할 때 같은 속성에 같은 디자인인데 크기만 달라지는 경우 이것도 일일히 디자인 시스템에서 높이 42짜리 버튼, 높이 30짜리 버튼 이런식으로 하나하나 등록을 하는지 궁금합니다.

아니면 디자인 시스템에 있는 버튼을 인스턴스로 불러와서 디자인 화면에서 조정해서 써도 되는걸까요?

버튼 뿐만 아니라 다른 컴포넌트도 동일하게 단순히 크기만 달라지는것도 디자인 시스템에서 크기별로 하나하나 등록해야 되는지 문의드립니다~~

두번째 질문으로는 색상에서 컬러 토큰 명칭 지정할 때 주요하게 쓴다고 판단되는 것만 따로 (예 : 버튼 프레스, 버튼 디폴트 등...) 추려서 토큰 명칭을 새로 매기는지 아니면 디자인 화면안에 들어가는 모든 색상은 무조건 토큰 명칭으로 새로 지정을 해서 관리하는지 궁금합니다. 기존에 등록되어있는 컬러에서 새롭게 토큰 명칭으로 지정하는 부분에 대한 문의입니다 (예 : grey200 = $tertiary 식으로 새로 지정)
감사합니다.

안녕하세요 OH 님 😀

버튼 컴포넌트의 크기가 다른 경우 컴포넌트의 variant를 크기에 따라 small,medium,large로 등록해 사용합니다. 다만, 크기에 대한 접근 방식이 높이 42, 높이30 이런식으로 접근을 하는게 아닌, 버튼의 안쪽 간격(padding)을 기준으로 크기를 설정합니다.

이는 디자이너들이 제일 많이 하는 실수 이기도 한데요, 버튼을 개발하는 개발자 입장에서는 버튼의 width,height값이 필요한게 아닌 폰트의 크기와 패딩값이 필요합니다.

그래서 영상 강의에서도 형태를 만들때 네모난 상자를 만든 다음 글자를 넣지 않고, 글자부터 만들고 그위에 오토레이아웃으로 패딩을 주어 만들어 가는 방식으로 진행합니다.

버튼의 크기가 다양하게 필요하다면 3가지 정도의 크기를 고려해 보시길 권장드립니다.

그렇다면 "small보다는 크고 medium보다는 작은 애매한 크기의 버튼들이 필요한 경우는 어떻게 하나요?" 라는 생각을 할 수 있을것 같은데요

이런 질문이 나온다면 시스템 설계를 잘못하고 계신겁니다.

디자인시스템은 디자이너의 개인적인 미적 기준을 바탕으로 하는 디자인이 아닌 규칙과 규율을 만들어 협업을 위해 사용하는 산업디자인입니다.

이를 위해 많이 사용되는 크기를 지정하여 쓰도록 약속하였기 때문에 애매한 크기가 필요하다면 과감히 버리고 시스템에 맞는 형태로 작업을 해주셔야 합니다.
(물론 애매하다고 말한 크기의 버튼이 굉장히 많은 곳에서 사용이 된다면 시스템화를 고려해 보셔야 합니다.)

개발자에게 "이 버튼 크기는 예외에요" 라는 말을 하지 않도록 조심해주세요.
(실제로 디자인 시스템을 가지고 개발하는 개발자들이 가장 많이 듣는 말이며 굉장히 싫어하는 말이기도합니다)
색상의 네이밍을 해야하는 경우 가장 작은 primitive value의 값을 먼저 지정 후 (#ff0000 → red.500)
해당 색상이 특정 지점에서 많이 사용 된다면 재사용을 위해 한번더 네이밍 mapping과정을 거쳐 사용해 주시면 됩니다. (red.500 → systemErrorColor)

날것의 값을 그대로 쓰기보단 맵핑의 맵핑을 거쳐 사용하는게 시스템을 보다 안전하게 유지할 수 있는 방법입니다.

감사합니다 :)

인프런 커뮤니티 질문&답변