Atomic Design이란

Atomic Design이란

Atomic Design이란 디자인 요소들을 나눠서 파악하고 이들의 조합을 통해 또 다른 디자인을 구성하는 방식을 말한다. 

이러한 방식은 컴포넌트 단위로 개발하는 React프로젝트와 잘 어울리는데 어떻게 구성하는 디자인 패턴인지 같이 알아보자.

 

디자인 요소들을 나눠서 파악하고 이들의 조합을 통해 또 다른 디자인을 구성한다는 말은 화학시간에 배웠던 원자 구조와 연관이 있다.

모든 물체는 원자로 구성되어 있다. 이러한 원자들이 결합하여 분자를 형성하고 차례대로 더 복잡한 유기체로 결합하여 하나의 물질을 구성하게 된다. 이 관점으로 하나의 페이지도 마찬가지로 여러가지 작은 컴포넌트들이 존재하고 컴포넌트들끼리 결합하여 하나의 페이지를 구성하게 된다는 것이 Atomic Design이 생각하는 개발 방법이다.

 

이 방법대로 Atomic Design에서는 페이지를 만드는 5가지의 단계가 있다.  

• Atoms(원자): 하나의 구성 요소. 구성요소 자신에 대한 스타일만 가지고 있어야 하며 다른  원자에 영향을 줘서는 안됨
• Molecules(분자): 원자들을 조합하여 구성된 요소
• Organisms(유기체): 분자들을 조합하여 구성된 요소
• Templates: 유기체들을 조합하여 템플릿으로 생성
• Pages: 실제 페이지

 

5단계의 대한 참고 이미지

이제 Atomic Design이 무엇인지  알았으니 각 단계에 대해서 자세히 알아보자.

 

Atoms

원자는 물질을 이루는 기본 요소이다. 페이지를 이루는 기본 요소는 HTML 태그이기 때문에 원자는 하나의 HTML 태그가 된다.

원자에는 색상 팔레트나 글꼴, 애니메이션 효과와 같은 좀 더 추상적인 요소도 포함될 수 있다. 

 

Molecules

분자는 서로 결합된 원자들의 그룹이다. 이렇게 만들어진 분자 컴포넌트는 자체 특성을 가지고 있으며 하나의 페이지에서 각각 맡은 역할을 수행한다. 예를들어 양식 설명 Text, Input 박스, 제출 Button은 각각으로썬 그렇게 유용하지 않지만 세개의 원자들이 합쳐져서 입력한 결과를 제출하는 분자가 되면 의미있는 기능을 하는 요소로 바뀌게 된다. 

분자는 상황에 따라 생각보다 복잡해 질 순 있어도 원자들의 조합을 통해 재사용 할 수 있도록 만들어지는 요소이기 때문에 원자들의 조합으로 생각하면 비교적 단순하다.

 

Organisms

유기체는 분자들이 모여서 상대적으로 더 복잡하고 뚜렷한 경계면을 형성하는 컴포넌트를 말한다.

가장 쉬운 예로 페이지 상단 헤더를 떠올릴 수 있다.

 

Templates

템플릿 단계부터는 지금까지 해왔던 화학 비유를 깨고 유저들이 보는 최종 결과물에 의미를 둬서 만든다. 이 단계에서는 각 유기체들이 자신의 영역을 차지하여 하나의 페이지 레이아웃을 구성하게 된다.

이 단계는 HTML와이어 프레임이 되야 하지만 경험상 템플릿 단계의 완성도를 높여서 바로 완성된 페이지가 되기도 한다.

 

Pages

궁극적으로 완성된 페이지이며 이 단계에서는 실제 유저들에게 제공해야하는 데이터들이 들어간다. 하지만 템플릿 단계에서 완성도를 높여 유저들이 보는 정보가 들어가 있다면 이 단계는 개인 경험상 생략되기도 했다. (템플릿 <-> 페이지의 구분이 애매했음)

 

마무리

이렇게 Atomic Design의 대해서 알아보았다. Atomic Design으로 프로젝트를 하나 만들어본 경험이 있는데 개인적으로 핵심은 원자 부분인 것 같다. 원자가 잘 만들어지면 재사용 하여 새로운 것을 만드는데 굉장히 용이한데 사람마다 생각하는 최소 단위가 다르기 때문에 가끔 재사용이 어렵게 개발하는 사람들이 있다. 처음 설계 단계부터 원자들을 잘 정의해서 개발에 들어가거나 모든 팀원들이 같은 수준? 같은 생각?을 하지 않는 이상 그냥 컴포넌트별로 쪼개서 개발하는게 더 빠르다고 생각한다.

 

각자 상황에 맞게 Atomic Design을 고려해서 사용해보는 것도 나쁘지 않다고 생각한다.

 

@JJoGeon