Atomic-Design

Atomic Design?

아토믹 디자인은 디자인 시스템을 만드는 데 여러 가지 방법론 중 하나이다. 이름에서 유추할 수 있듯이 Atom(원자) 단위로 디자인 및 개발을 한다.

명료하게 말해서, 원자가 결합하여 분자가 되고, 분자가 결합하여 유기체가 되는 것처럼, UI 컴포넌트 또한 가장 작은 단위로 쪼개고 합치며 UI를 마치 레고 블럭 쌓듯이 만들어나가는 방법이라는 것이다.

다음은 Atomic-Design의 단위이다.

• Atoms
  가장 작은 단위의 컴포넌트를 의미합니다. 리액트에서는 Label, Input, CheckBox, Select 같은 HTML의 태그같이 기능적으로/의미론적으로 가장 작은 단위의 컴포넌트라고 할 수 있습니다.
  앞으로 계속해서 재사용해나갈 컴포넌트이기 때문에 특정 기능을 수행하는 것이 아니라, 일반적으로 사용할 수 있도록 구현합니다. 예를 들어, input 태그의 onChange와 값이 어딘가에 종속되지 않도록 props로 전달받아 사용할 수 있도록 구현합니다.

• Label Atom, Input Atom
  Molecules
  Atom을 여러 개 조합한 컴포넌트입니다. 예를 들어, Label + (Input | CheckBox | Select) 조합하여 FormItem이라는 컴포넌트를 만들어서 Atom 컴포넌트를 재사용할 수 있습니다.

• FormInput (Label + Input)
  Oraganisms
  Molecule과 Atom들을 조합하여 컴포넌트를 만듭니다. 예를 들어, FormItem 여러 개와 버튼을 조합하여 SignUpForm을 만들 수 있습니다. Organism 또한 특정 기능을 직접적으로 수행하진 않지만, 특정한 Component들을 조합하다 보니 재사용성이 조금 떨어지게됩니다.

• SignUpForm (4 FormInputs)
  Templates
  앞서 만든 컴포넌트들을 결합하기 전에 모호할 수도 있다고 느껴지지만, 단순하게 ‘레이아웃’을 그리고 컴포넌트를 주입받기 위해 준비하는 Template를 만들어야 합니다. 비즈니스 로직이 아니라, 완전히 스타일링에 집중한 단위입니다. 컴포넌트를 주입만 하면 바로 사용할 수 있도록 레이아웃을 그립니다.

• Template
  현재 페이지 구조가 단순하여 위와 같은 레이아웃으로 구성했지만, 실제로는 보다 더 다양한 레이아웃을 짤 수 있습니다.

• Pages
  해당 Template에 알맞은 컴포넌트를 주입하게 된다면, template에서 미리 만들어 놓은 레이아웃에 맞게끔 사용할 수 있도록 합니다. 컴포넌트를 주입함으로써 실제로 사용자가 보는 화면과 동일하여지도록 합니다. 따라서 전체적인 로직이나 상태 등을 Page 레벨에서 컨트롤해야 합니다.

(출처: https://medium.com/@inthewalter/atomic-design-for-react-514660f93ba)