왜 디자인 시스템이 필요할까?
디자이너가 바뀌거나 하면서 디자인 파편화가 일어나므로 이를 방지하기위함이다. (각기다른 디자인과 색상등)
1.타겟설정
회사, 사용자, 만드는사람(개발자,디자이너)
2.타겟이 겪는 문제발굴
3.액션 아이템 설정
4.각 타겟에 맞는 목표설정
규모가 커짐에 따라 유연한 디자인시스템이 요구됨.
1. 최소한의 기능과 형태 정의
기능 정의
W3C의 ARIA Authoring Practices Guide (APG)를 기준으로 기능을 정의한다.
형태 정의
디자인토큰으로 표시할 수 있는 형태(색상,폰트사이즈,굵기 등)와 애니메이션을 형태로 최소한으로 둔다.
현재 유명한 디자인시스템
- 완성형 UI : Material UI, Antd
- 커스터마이징 UI : shadcn/ui , daisyUI
- 필수 기능만 정의 : Radix, React Aria (형태는 정의하지않아 유연하게 적용할수있음)
현재 구름에서는 필수기능만 정의하고 최소한의 형태만 정의한 디자인시스템을 구축하고있다.
2. 속성 통일
디자이너와 개발자가 컴포넌트의 동일한 속성을 정의해 불일치 없앤다.
디자인 피그마에서는 variants, 개발에서는 props로 사용하는데 단어가 다르므로, 이를 공통의 용어 Component Property로 통일하여 100%일치하도록 한다.
예를들면 피그마에서 showIcon 으로했으면 개발에서 props로 ShowIcon으로 하지말고 동일하네 showIcon으로 통일해야한다.
3. 조합형 컴포넌트 설계
Antd 등의 환성된 컴포넌트의 한계가 있다. 모두이해/복잡성증가/높은진입장벽에 어렵고, property로 미리정의된 형태만 가능하므로 자유롭게 변경하기 힘들다.
-
프로퍼티의 분산과 단순화
DatePicker의 컴포넌트가있다고치면 DatePicker.Header DatePickerBody DatePickerSideBar 등으로 하나의 컴포넌트를 따로따로 나눈다. -
일관성있는관리
DatePicker.Header DatePickerBody 등등 각각 서브컴포넌트별로 disabled등으로 일관성있게 관리가 가능하다. -
유연한 조합
=> 이는 Compound Pattern 이라고 한다.
이렇게 조합형컴포넌트를 사용하다보니, UI의 일관성이 깨지고 , 자주쓰이는데도 매번 직접 정의해야하는 문제점이 생겼다고한다.
그래서 무조건 필수기능만 정의한 조합형 컴포넌트만 사용하는게 아니라, 자주 사용하는것은 완성형 컴포넌트 등으로 유도리있게 만들며 조율하고있다.
