아토믹 디자인(Atomic Design)

리액트 컴포넌트 설계하는 방법 중 하나인 아토믹 디자인!

명확한 컴포넌트 설계 기준을 정하기 위해 회의 때 아토믹 디자인이 제시해주셔서 알아보기로 했다.

---

- 디자인 시스템이란? 재사용이 가능한 컴포넌트를 먼저 구성하고 이를 조립하는 방식

아토믹 디자인은 사용자 인터페이스를 작고 단순한 요소로 분리하는 개념이며, 일관된 UI를 만들고 유지보수성을 향상시켜준다.

출처:  https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole

아토믹 디자인은 화학적 관점에서 영감을 얻은 시스템이라 단어들도 화학적인 느낌이 난다. 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로 효과적인 인터페이스 시스템을 만든다.

 

원자(Atom)

- 더 이상 분해할 수 없는, 가장 작은 구성의 기본 컴포넌트

ex. label, input, button과 같은 기본 HTML 태그 혹은 글꼴, 애니메이션, 컬러 팔레트, 레이아웃과 같이 추상적인 요소

- atom은 모든 기본 스타일을 한눈에 보여주므로 디자인 시스템을 개발할 때 유용하게 사용된다.

- 단일 컴포넌트로 사용하기엔 너무 작아서, 다른 atom과 결합한 원자(molecule)나 유기체(organism) 단위에서 여러 단위와 결합하여 사용된다.

 

 

분자(Molecules)

- 분자는 2개 이상의 원자로 구성되어 있으며, 하나의 단위로 함께 동작하는 UI 컴포넌트들의 단순한 그룹.

ex. HTML 텍스트 입력 필드, 레이블, 오류 메세지 또는 HTML 텍스트 입력 필드와 버튼으로 구성된 검색 컴포넌트

- olecule의 중요한 점은 한 가지 일을 하는 것입니다. molecule의 SRP(Single Responsibility Principle) 원칙은 재사용성과 UI에서의 일관성, 테스트하기 쉬운 조건이라는 이점을 가집니다.

 

 

유기체(Organism)

header 라는 컨텍스트에 logo(atom),  navigation(molecule), search form(molecule)을 포함할 수 있다.

- 앞 단계보다 좀 더 복잡하고 서비스에서 표현될 수 있는 명확한/개별적인 영역과 특정 컨텍스트를 가집니다. 

- 이로 인해 상대적으로 재사용성이 낮아지는 특성을 가집니다.

 

 

템플릿(Template)

layout이 적용된 molecule과 organism으로 구성된 template

- 페이지를 만들 수 있도록 여러 개의 organism, molecule로 구성할 수 있습니다.- 실제 콘텐츠가 없는 페이지 수준의 스켈레톤의 정도- 데이터가 없이 조립된 디자인

 

 

페이지(Page)

- 템플릿과 달리 데이터와 디자인이 합쳐진 결과물

 

 

참고로 아토믹 디자인의 각 단계는 선형(linear) 프로세스가 아닙니다. 
button과 기타 요소를 따로따로 디자인한 다음 모든 것이 합쳐져 하나의 응집력 있는 전체를 만드는 것이 아닙니다.
즉, 1. atom, 2. molecule, 3. organism .. 이렇게 스텝 별로 나아가는 방법론이 아닙니다. 

 

장점

- 어플리케이션과 분리하여 컴포넌트를 개발하고 테스트할 수 있다

- 기존의 컴포넌트들을 재사용하고 있기 때문에 디자인을 일관성 있게 통일할 수 있다.

- 특정 컴포넌트에 CSS가 강하게 결합되어 있기 때문에 CSS를 훨씬 잘 관리할 수 있다.

  → 어플리케이션의 구조에 따라 컴포넌트에서 사용되는 CSS만 렌더링하도록 해야 한다.

 

단점

컴포넌트가 분리되어 있고 상위 컨테이너 컴포넌트의 사이즈를 결정할 수 없을 경우, 미디어쿼리를 사용하기 어렵다(= 반응형이 어려울 수 있다)

→이 문제는 크기를 조정할 수 있는 flex, grid 와 같은 CSS 속성을 구현한 레이아웃 컴포넌트를 도입하여 해결 할 수 있다.

 

 

- 아토믹 디자인 단위를 나누느 기준은 주관적이므로 팀원간 협의가 필요!

- 아토믹 컴포넌트의 원천은 디자이너가 작성한 피그마 컴포넌트

- 재사용성을 높이기 위해 마진, 패딩 등과 같은 스타일은 아토믹 컴포넌트에서 정의하지 않고 컴포넌트를 사용하면서 주입하도록 합니다. 

 

 

 

 

 

 

https://ui.toast.com/weekly-pick/ko_20200213

리액트 어플리케이션 구조 - 아토믹 디자인

https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/

아토믹 디자인을 활용한 디자인 시스템 도입기