Atomic design Pattern

Atomic Design Pattern

: 복잡한 화면을 분해 가능한 가장 작은 단위인 원자 단위까지 나누어서, 각 요소간 컴포넌트의 재활용성을 높이고 복잡한 화면 구성을 쉽게 제작하는 접근 방식

• 원자 : 더 이상 쪼갤 수 없는 최소 단위
• 인터페이스를 작고 단순한 요소로 분리하는 개념

Atomic 디자인 패턴의 구성요소들

1. Atoms(원자)

   • 원자는 버튼, 제목, 텍스트 입력 필드와 같은 가장 작은 구성 컴포넌트

2. Molecules(분자)

   • 분자는 2개 이상의 원자로 구성되어 있음

3. Organisms(유기체)

   • 분자들의 모음

4. Templates(템플릿)

   • 유기체들을 모아서 템플릿으로 생성한 것

5. Pages

   • 실제 페이지를 구성하는 단위

참고 문헌

Atomic Design Pattern에 대해서