Atomic Design은 Vue.js, React 등 SPA 로 개발시 최근 떠오르고 있는 디자인 기법 중 하나이다.
Atomic Design은 아래와 같이 크게 5가지로 구성되어 있다.

• Atom (원자)
• Molecule (분자)
• Organism (유기체)
• Template (템플릿)
• Page (페이지)

Atom (원자)

Atom은 디자인 할 수 있는 요소 중 가장 작은 구성 단위이다. input, button, Container icon, text, font style 등이 해당 된다.

Moldecule (분자)

Moldecule은 여러 가지의 Atom 요소들을 조합한 구성 단위로 input forms, navigation, card 등을 예로 들 수 있다. 보통 F.E 개발자들이 컴포넌트를 만들때 구성하는 단위로 생각하면 이해하기 쉽다. 넷플릭스를 에를 들면 각 컨텐츠 카드에 해당하며, 텍스트, 이미지 등 같은 원자의 조합이라 할 수 있다.

Organisms(유기체)

여러 분자의 조합으로 유기체부터는 명확하게 컴포넌트를 설명하기가 어렵다. form과 header를 감싼 형태이거나, 여러 카드들을 관리하는 그리드 등을 예로 들 수 있다. 프로젝트 별로 유기체에 해당하는 컴포넌트 단위가 다르며 개발 환경에 따라 다르게 구성될 수 있다.

Template(템플릿)

여러 유기체의 조합으로 유기체 보다 높고 페이지보다 낮은 단위이다. 넷플릭스를 예를 들면 ‘최근 뜨는 콘텐츠’ 안의 각 장르별로 카드 그리드의 조합으로 생각하면 쉽다. 여러 카드 그리드 등을 묶어 하나의 템플릿을 만들 수 있다.

Page(페이지)

최상위 컴포넌트로써 모든 요소들의 조합이라고 할 수 있다. 브라우저 하나의 페이지를 생각하면 이해하기 쉽다.

Atomic Design Pattern 특징

각 컴포넌트를 Atomic구조화 하여 계층 구조를 판단하기에 용이하다. 영어 순서에 맞게 직관적으로 아래 디렉토리로 갈수록 상위 컴포넌트가 되어 개발할때 한 눈에 알아보기가 쉽다. 하지만 컴포넌트간의 의존성과 복잡도가 높아짐에 따라 원자 단위로 컴포넌트화 했을 시에 수 많은 원자 컴포넌트가 각각 어떤 기능을 하는지 명확히 구분하기 어려워진다는 단점이 있다.

아토믹 디자인 패턴은 작은 변화에는 최적화된 패턴이지만 수정사항과 많은 변화가 누적되었을 시 각각을 구성하는 하위 컴포넌트에 문제가 발생했을 시, 상위 컴포넌트에도 영향을 크게 주므로 원자 단위로 컴포넌트를 할 때에는 보수적, 방어적으로 개발을 하는 것이 적절하다.