Design System #4 - UI 라이브러리 만들기

 

벌써 마지막 포스팅이라니!

신난다(?)

 

오늘은 UI Library를 만드는 방법에 대해

알아보고 디자인시스템을 마무리해보려고 한다.

 

---

 

 

✅ Creating a user interface library

그런데 UI Library는 뭘까? 저번 포스팅에서는 Visual Language를 구축하는 법에 대해 배웠다. 그것에는 컬러, 간격, 마진 등의 와아아안전 기초적인 요소가 포함된다. 하지만 UI Library에는 카드, 버튼, 리스트 등의 한 묶음을 다룬다. Visual Language의 다음 단계라고 볼 수 있다. 

 

그런데 UI Library에도 단계가 있다.

 

👉 Atomic Design

아톰 디자인은 디자인시스템을 만들 때 가장 보편적으로 사용하는 모델이라고 생각하면 된다. 원자에서부터 세포, 조직의 과학적 순서를 디자인시스템에 접목시킨 모델이다. 여기에 UI Library 단계가 포함되어 있다.

 

1. Elements (atoms = basic)

ex) Button, Icon

2. Components (Modules)

ex) Search bar (Input form + button)

3. Regions (Organisms)

ex) Area of UI

4. Layouts (Regions의 배치)

ex) Header, sidebar, main content

 

아토믹 디자인 모델을 이용하면 불필요한 것을 삭제할 수 있고, 각 컴포넌트가 무엇을 뜻하는지, 어디에 사용되는지, 언제 쓰이는지 Documentation 할 수 있다. Dcumentation은 디자인시스템에서 가장 중요한 부분 중 하나라고 이전 시리즈에 언급한 적 있다.

 

---

 

👀 NOW, Create your Design System!

지금까지 총 4편에 이어 디자인시스템에 대한 방법론적인 설명을 했다. 이제 실전으로 가보려고 한다. 마침 내가 참여하고 있는 사이드프로젝트에서도 디자인시스템이 필요하다. 주기적으로 올리면서 디자인시스템을 발전시켜보려고 한다. 마지막으로 디자인시스템을 구축할 때 가장 중요한 부분 총 5가지를 다시 언급하고 마무리하겠다.

 

1. Design System is consistent

컴포넌트가 다뤄지고 만들어지는 것은 예측가능한 패턴을 통해서여만 한다.

 

2. Design System is self-contained

그 자체로 독립적으로 쓰일 수 있어야 한다.

 

3.  Design System is reusable

많은 맥락 속에서 재사용되어야 한다.

 

4.Design System is accessible

많은 사람들이 쓸 수 있어야 한다.

 

5. Design System is robust

최소의 버그, 단단해야 한다.

 

---

 

+ ) 🤔 Design System Elements

조금 더 추가할 내용이 있어서 더 적어본다. (3/18) 만약 뭐부터 만들어야 할 지 고민이라면, 모든 디자인시스템 요소들을 가져왔으니 이를 참고해서 만들면 된다! 기본적인 Cards, Spacing, Colors 등을 동시에 진행하면서 서로 맞춰가는 작업이 필요하다. 순서가 없으니 자신의 서비스에 맞게 시작하면 된다.

 

• Foundation
  • Color
    • Primary color
    • Secondary Color
    • Accent Color
    • Background Color
    • Text Color
  • Grid + Spacing
  • Iconography
    • 24px Icon
    • 16px Icon
    • Filled Version
    • Empty Version (General)
  • Typography
    • Heading
    • Text
    • Interactions (텍스트를 클릭하면 반응하는 버전)
• Components
  • Avatars
  • Buttons
    • Default(기본)
    • Active(클릭했을 때 반응)
    • Disable(클릭이 안 되는 버튼)
  • Cards
  • Checkbox
  • Input
  • Navigation
  • Overlays
  • 기타 개별 서비스에 맞는 Components!

 

 

---

 

디자인시스템 시리즈는 이제 끝!

앞으로 또 다른 정보들을 가져와서

나의 디자인시스템을 구축하는 연습을

주기적으로 올리려고 한다.

 

많관부 🤟