Atomic Design Pattern

Atomic Design Pattern

우리가 학창시절에 배우는 화학에 영감을 얻어 만들어진 디자인 패턴이다. 고등학교 과정을 받으면 다 아는 정도에 화학 지식이면 충분하기 때문에 걱정할 필요는 없다…!

원자가 어떠한 물질을 이루는 가장 작은 단위이고, 원자가 결합해 분자를 형성한다 그리고 분자들이 모여 유기체를 만든다.

위와 같은 개념으로 컴포넌트를 구성할 수 있게 도와주는 정신적인 모델이다. 선형적으로 개발할 필요는 없으며, 단지 5단계로 이루어져 있는 각각의 인터페이스가 계층적으로 역할을 할 수 있게 개발하면 된다.

bradfrost라는 개발자가 만들었고 본인이 잘 정리한 사이트도 있다!

기본적으로 5 단계로 이루어져 있고 순서는 원자 - 분자 - 유기체 - 템플릿 - 페이지 이다.

이제 하나씩 어떤 역할을 하는지 훑어보겠다.

Atom (원자)

Atom은 더 이상 분해될 수 없는 객체로 구성하게 된다. Button, Input, Card, Label 등의 기능을 중단시키지 않는 이상 분해될 수 없는 객체, 보통은 HtmlElement을 Wrappring 해서 많이 구성한다.

디자인 패턴 맥락에서 Atom은 기본 스타일을 보여주며, 재사용이 굉장히 용이하다. Atom은 무조건 Molecules로만 결합되는 것이 아닌 Molecules과 함께 Organisms을 구성할 수도 있으며 여러 단위들과의 조합이 가능하다.

Molecules (분자)

Molecules은 Atom들이 결합된 그룹이다. 예를 들어 물 분자와, 과산화소수의 분자가 동일한 원자구조를 가지고 있지만 다른 특성을가지고 기능하는 것을 보면 알 수 있겠지만 같은 Atom으로 생성한 컴포넌트를 이용해 Molecules를 형성해도 고유한 형태로 만들어 낼 수 있다.

위에 이미지 같이 SearchForm을 만들게되면, SRP(단일 책임 원칙)을 준수해 한 가지 일을 수행하는 재사용과 테스트하기 좋은 mocules를 만들 수 있다.

Organisms (유기체)

위에 원자와 분자와는 다르게 조금 복잡한 구조이다. 각각이 다른 분자들을 조합해서 유기체를 만들 수도 있고, 반복되는 분자들을 만들어서 유기체를 구성할 수도 있다.

보통 위에 이미지처럼 하나의 섹션을 보통 담당하며, 재사용성은 매우 떨어진다.

Template

여기서부턴 화학 비유가 끝나게 된다. (bradfost의 말로는 화학 비유로 너무 멀리 나아가면 미친사람 취급을 당할 수 있다고 한다)

위에 만든 구성요소들을 레이아웃에 배치하고, 기본 콘텐츠 구조를 생성한다. 골격이 만드는 페이지라고 생각하면 편하다.

Page

Page는 가장 구체적인 데이터들을 다루는 부분이다. Template이 구성된 곳에 실제 데이터를 넣고, 기본 콘텐츠 구조와 디자인이 동적특성을 잘 반영하는지 테스트할 수 있다.

나는 보통 Organism부터는 재사용이 힘들다고 생각하고 Context를 사용해 구성하기도 한다. Organism과 Mocules에 대한 구분은 프로젝트 특성이나 사람마다 다른 것 같아서 본인이 재사용성을 높이고, 다른 단계들과 잘 융합될 수 있는 작업을하면 될 것 같다.