Eojin Han

디자인시스템 참고 자료 개요 개인적으로 느끼는 문제점 모두 동의한 부분 의견이 나뉜 부분 디자인 시스템의 목적 main side 디자인 시스템 포함 범위 기저 컴포넌트 복합 컴포넌트 / 고차 컴포넌트 고차 컴포넌트, 포함여부 공감되지 않나요?카드 Carousel 툴팁 고차 컴포넌트, 포함여부 조금 헷갈리나요?Activity Item Activity rings 이런 것들도 디자인 시스템에 있어요 레이아웃 모션 제스처 Spacial Interaction (공간 상호작용)그 밖에도..그러면, 디자인 시스템에만 코드가 쏠리지 않나요?결론 기저 요소로부터, 복합 컴포넌트까지도!컴포넌트 뿐만 아니다!한줄 요약

디자인시스템 참고 자료

Microsoft’s Fluent Design System : https://www.microsoft.com/design/fluent/#/

Google’s Material Design System : https://m3.material.io/

Apple’s Human Interface Guidelines : https://developer.apple.com/design/human-interface-guidelines/

LINE : https://engineering.linecorp.com/ko/blog/line-design-system

LDS, LDSM(모바일 메신저 앱), LDSG(글로벌 패밀리)

Carbon Design System : https://carbondesignsystem.com/

Airbnb Design System : https://airbnb.design/

개요

어떤 것까지 디자인 시스템에 포함시켜야 하는 걸까? 라는 의문에서 시작.

A : 이미 재사용된 컴포넌트, 또는 재사용될 가능성이 있는 컴포넌트는 특이 케이스라 할지라도 이미 시스템에 여러번 사용됐다면 디자인 시스템에 들어가야 한다.

B : 그런 예외적인 것들은 비록 여러번 재사용 됐다고 할 지라도 디자인 시스템 항목이 아니다.

C : 고차 컴포넌트는 디자인 시스템이 아니라고 생각한다. 이런 것까지 다 포함시킨다면 디자인 시스템 쪽에만 코드가 가득할 것이다.

개인적으로 느끼는 문제점

완벽하게 설계된 컴포넌트만이 시스템 요소가 될 수 있어! 라는 인식이 강해 디자인 시스템이 활성화되지 못하고 있어서 인식을 개선시킬 필요가 있다.

아이콘, 버튼, 타이포그래피, 페이지 레이아웃, 컬러시스템 등이 사용되고 있으며, 더 많은 요소들을 포함시키고 적극적으로 활용해야 한다.

모두 동의한 부분

버튼, 아이콘, 타이포 등의 기저 컴포넌트는 당연히 디자인시스템에 포함돼야 한다

의견이 나뉜 부분

특수한 상황이라고 생각되는 부분

프로그레스바가 차오르고 다 끝나면 활성화되는 버튼
버튼의 내용으로 아이콘과 텍스트가 아닌, 카운트 다운이 들어간 버튼

기저 컴포넌트가 아닌, 고차 컴포넌트의 경우

예시
예시

디자인 시스템의 목적

main

일관된 디자인 경험 전달

폭발적인 생산성 향상

side

개발 경험 향상

디자인 경험 향상

💡

중요 포인트 - main, side 효과 전부 디자인 시스템이 있는 것을 재사용 함으로써 오는 이점이다. - 따라서 디자인 시스템에 정의된 요소 자체를 재사용하거나, 이들을 조합하여 새로운 복합 컴포넌트들을 만들어 나가야 의미가 커진다.

디자인 시스템 포함 범위

기저 컴포넌트

버튼, 타이포, 아이콘, 슬라이더, 체크박스, …

기저 컴포넌트를 디자인 시스템에 포함시킬 지 여부는 앞서 모두가 동의했던 부분이다.

그 이유를 나름대로 해석해보면 다음과 같다.

🤔

- 디자인 시스템의 목적과 이점은 디자인 시스템 요소를 재활용하거나, 이들을 조합해서 새로운 것을 만들어 나가야 main, side 이점이 발생한다고 했다. - 기저 컴포넌트는 두 가지 모두에 해당되며, 복합 컴포넌트를 만들어 나가기 위한 초석이므로 디자인시스템에서 빠질 수 없다.

복합 컴포넌트 / 고차 컴포넌트

뉴스레터 컴포넌트, 캘린더, drawer, 레이아웃, 템플릿, …

디자인 시스템에 포함시킬 지 여부에 대해 찬반이 나뉘었던 부분이다.

각 입장별 이유를 나름대로 해석해보면 다음과 같다.

🤔

포함 반대 이유 - 디자인 시스템 요소를 통해 새로운 것들이 “만들어져 나가야 한다” 라는 생각이 더 지배적. - 따라서 어느정도 더 상위 요소를 만들기 어려운 요소들은 디자인 시스템 포함 대상이 아닌 것 같다. 포함 찬성 이유 - UI, 코드의 재사용과 일관된 UI 전달 목적이 더 지배적. - 고차 컴포넌트라고 하더라도, 여러 군데에서 쓰일 경우 사용자에게 같은 경험을 줘야 하고, 코드나 디자인도 재사용하면 되므로 고차 컴포넌트도 디자인 시스템에 들어가야 한다.