디자인 시스템 리서치

🔍 Design System Research

---

 

각 회사마다 디자인 시스템 문서를 어떻게 구성하였는지 알아보기 위해 작성한 글입니다. 회사 선별은 굳이 정하자면 많이 알려진 기준입니다.

 

AUI

• 아틀라시안의 패턴 라이브러리
• 컴포넌트를 세 단위로 분류했습니다.
  • Generaul UI components
  • Forms and form components
  • Page and conent structure
• 지속적으로 관리함을 보여주는 change log 내용이 있습니다.
• 바로가기

 

BLK

• 부트스트랩4에 기반한 UI 라이브러리
• 스타일 가이드에 관한 내용을 Foundation 안에 넣었습니다.
  • Colors
  • Grid
  • Typography
  • Icons
• 파일 구조를 소개하는 내용이 있습니다.
• 바로가기

 

Carbon

• IBM 사의 디자인 시스템
• 디자이너와 개발자 별도로 안내해주는 내용이 있습니다.
• 접근성 등 더 디테일한 내용을 알려주는 가이드라인
• 컴포넌트 별 히스토리 관리하는 메뉴 (Component Status)
• 바로가기

 

Material UI

• 구글의 UI 라이브러리로 내용이 다른 시스템에 비해 많습니다.
• 컴포넌트를 아래와 같이 나눴습니다.
  • Layout
  • Inputs
  • Navigation
  • Surfaces
  • Feedback
  • Data Display
  • Uitls
  • Lab
• 컴포넌트 API에 관한 별도 내용
• 바로가기

 

Mozilla

• 파이어폭스의 패턴 라이브러리
• SCSS variables 내용 (Tokens)
• 컴포넌트를 아토믹 구조로 분류
• CSS 코딩 가이드와 네이밍 컨벤션 (Other stuff)
• 바로가기