TIL #20 Atomic design pattern

이제는 화면을 디자인하는 것이 아닌 컴포넌트의 시스템을 디자인해야 합니다.
-Stephen Hay

 

위코드에서 두 번의 프로젝트를 진행하면서, 항상 프로젝트가 끝나면 내가 나눠놓은 컴포넌트들이 맘에 들지 않았다.

좀 더 간단하고 깔끔하게, '누가 봐도 이해하고 납득할 수 있도록 컴포넌트를 나누고 설계하고 싶다.'라고 생각했다.

 

이번 주부터 기업협업을 진행하면서 atomic design 패턴에 대해 알게 되었다.

---

⚛️  Atomic design pattern  ⚛️

아토믹 디자인 패턴은 웹디자이너 Brad frost에 의해 소개되었다.

 

계속해서 더 많은 기능과 더 많은 서비스를 제공하게 되는 웹서비스에 있어서 다양한 사람들이 각자 필요한 화면이 많아졌고, 

그에 따른 컴포넌트와 데이터의 양도 많아졌다.

 

이러한 디자인 패턴이 중요한 이유는

컴포넌트들을 설계 단계에서부터 어느 정도 추상화를 시킴으로써 일정한 패턴을 통해,

내가 필요한 컴포넌트의 위치를 유추하기 쉬워지기 때문이다.

 

 아토믹디자인은 총 5개의 구분된 단계가 있다. (사실 단계라기보다는 모델이라고 하는 편이 맞는 듯하다.)

• Atoms (원자)
• Molecules (분자)
• Organisms (유기체)
• Templates
• Pages

 

 

 

---

🥬  Atoms

Atoms는 뜻 그대로 더 이상 쪼갤 수 없는 가장 작은 단위를 뜻한다. 🥑 

HTML5의 기본 태그들을 생각하면 이해하기 쉽다.

 

 

 

Label, Button, Input 하나하나가 각각의 재사용 가능한 Atoms 단위의 component이다.

---

🍡  Molecules

원자 component들이 모인 가장 작은 단위로, 자체적인 로직을 통해 한 가지의 기능 구현이 가능한 단위이다.

 

 

 

---

🍱  Organisms

유기체는 우리가 화면을 보았을 때 직관적으로 나눠지는 부분을 생각하면 편하다. (ex. 내비게이션 바, footer 등)

 

 

 

---

📜  Templates

레이아웃만으로 이루어져 있는 페이지의 틀 

 

 

 

---

🧾  Page

실제로 사용자가 보게 되는 하나의 페이지 

 

 

 

---

참고

* 아토믹 디자인 패턴은 선형 프로세스가 아니다. 

꼭 원자부터 시작해서 모든 페이지를 조합해야 하는 절차가 아닌,

우리가 component를 좀 더 체계적으로 구분할 수 있도록 도와주는 추상화 모델에 가깝다.

 

---