Atomic Pattern

Atomic Design Pattern

• 아토믹 패턴은 개발에만 적용되는 개념이 아니라 디자인에도 적용되는 설계 패턴이다.
• 작은 단위의 컴포넌트를 재사용성이 강하고, 단단하게 잘 설계함으로서 점진적으로 지속적으로 개발하기 용이하게 하는 방식이다.
• ATOMS -> MOLECULES -> ORGANISMS -> TEMPLATES -> PAGES

Atom (원자)

• 말 그대로 가장 작은 단위의 컴포넌트이다.
• 어떠한 contents 가 주어지든지 이에 해당하는 컴포넌트가 생성될 수 있어야 한다.
• 다양한 state 를 가지고 있어야 하며 추상적이지만 최대한 포용할 수 있게 설계 되어야 한다.
• 원자는 마진이나 위치값을 가지고 있지 않는다.

Molecule (분자)

• 원자를 엮어 조금 복잡한 단위의 분자가 생성된다.
• 분자는 분자만의 프로퍼티를 가지고 있을 수 있고, 이를 활용해 원자에 기능을 만들어 줄 수 있다.
• 분자가 원자의 위치값을 지정하기도 한다.

Organism (유기체)

• 유기체는 분자를 엮어 만들어서 생성되고, 때로는 분자가 되지 않은 원자가 엮이기도 한다.
• 컴포넌트의 최종 모습.
• 여전히 contents 에 따라 최대한 재사용성을 높이는 것이 중요하다.

Template

• 템플릿은 만들어진 유기체와 컴포넌트의 positions, placements 를 정해주는 역할을 한다.
• 템플릿의 역할은 페이지의 그리드를 정해주는 역할 뿐이다.

Page

• 페이지는 템플릿을 이용해서 각 그리드에 컴포넌트를 그려서 디스플레이한다.

Plus

• 개발 초기에 작은 단위의 컴포넌트들을 잘 설계해 놓으면 중장기적으로 개발 기간을 단축할 수 있다.