아토믹 디자인(Atomic Design) 공부 및 사용

프로젝트를 진행하면서 아토믹 디자인을 컴포넌트에 완벽하게 구상해 놓은 것은 아니지만 팀원들과 논의 하여
아토믹 디자인 구조를 설계 했습니다.

 

Atomic Design 구조란?

 

Atomic Design은 React를 이용하여 UI 컴포넌트 개발할 때 떠오르는 디자인 기법 중 하나로 각 컴포넌트를
가장 작은 단위로 쪼개서 원자(Atoms)로 만들어 코드의 재사용률을 늘려 효율 적인 인터페이스 디자인 시스템을 만들기
위해 사용됩니다.

 

Atomic Design의 구성 요소

원자(Atoms) : 컴포넌트의 가장 작은 단위로 본인 자체로 스타일만을 가지고 있으면서 공통적으로 사용된다.

분자(Molecules) : 2개 이상의 원자를 이루어져 있다.

유기체(Organisms) : 분자들이 결합하거나 분자가 되지 못한 원자들과 분자들이 결합하여 유기체를 만든다.

템플릿(Templates) : 여러 유기체, 분자, 원자 요소들을 조합하여 만들어낸 단위를 의미한다.

페이지(Pages) : atomic design의 모든 구성 요소들을 조합하여 만들어낸 단위를 의미한다.

 

Atmoic Design의 예시

Atoms

• Atoms에는 대표적으로 button, icon, text, image등을 사용한다.
• 현재 프로젝트에서 사용중인 Atoms는 button, icon, image, text, pagination, option등 이다.

 

 

Molecules

• Molecules에 대표적으로 Navigation, Buttons등이 있다.
• 현재 프로젝트에서 사용중인 Molecules은 buttons, banner, tag등이 있다.

 

 

Organisms

 

 

아토믹 디자인을 설계 해보면서 느낀 장점 및 단점

장점

• 중복되는 컴포넌트를 줄일 수 있고, 결과적으로 개발소요시간을 단축할 수 있다라고 생각 했다.
• UI의 복잡성을 효과적으로 억제할 수 있다고 생각하게 되었다.

단점

• Learning 커브가 너무 높다고 생각한다.. (컴포넌트 개념에 대한 이해도가 높아야 된다)
• 각 컴포넌트들을 어떻게 분류할지가 꽤나 모호하고 논의할 여지가 많다고 느껴졌다..
• 비슷하지만 조금씩 다른 컴포넌트가 많고 그래서 사람에 따라 다른 부류 방법 또한 나와서 협업을 할 때에는 많은 회의와 기초적인 설계가 필요하다고 느껴졌다.

 

참고

출처 : Atomic Design Methodology

Atomic Design Methodology | Atomic Design by Brad Frost