brad frost의 Atomic Design
: 화학적 관점에서 영감을 얻은 디자인 시스템
모든 것은 원자(atom)로 구성되어있고, 원자들이 서로 결합하여 분자(molecule)가 되고, 분자는 더 복잡한 유기체(organism)로 결합하여 궁극적으로 모든 물질을 생성한다.
→ 아토믹 디자인에서 이 개념을 차용해 컴포넌트를 atom, molecule, organism, template, page 의 5가지 레벨로 나눈다.
디자인 시스템, 컴포넌트, 계층, 좋은 구조 등에 대한 고민을 하다보면 마주치는 Atomic Design Pattern
🔥 Atomic Design Pattern
1. 원자 (Atom)
: 더 이상 분해할 수 없는 기본 컴포넌트 ( 디자인과 기능의 최소 단위 )
- 다양한 상태 - 색상, 폰트, 애니메이션 과 같은 추상적인 요소가 포함될 수 있다.
ex. label, input, button과 같은 기본 HTML 태그
2. 분자 (Molecule)
: 상대적으로 간단한 UI 구성 요소를 형성하는 원자 모음
- 최소 한 가지 기능 수행 ( 자신의 고유한 특성을 가짐 )
- 하나의 단위로 함께 동작하는 UI 컴포넌트들의 단순한 그룹
- SRP(Single Responsibility Principle) 원칙으로 인해 키워드 전송 기능이 필요한 곳에서 재사용 가능
ex. Input Form, Navigation, Card
3. 유기체 (Organism)
: 인터페이스의 개별 섹션을 형성하는 비교적 복잡한 구성 요소 ( 원자, 분자, 유기체로 구성 )
- 사용자에게 의미와 역할이 존재하는 단위
- 재사용성이 낮아지는 특성을 가진다.
ex. Header(Input Form을 감싸는), Grid(Card를 관리하는)
4. 템플릿 (Template)
: 레이아웃 내에 구성 요소를 배치하고 디자인의 기본 콘텐츠 구조를 보여준다. ( 여러 개의 분자, 유기체로 구성 )
- 실제 데이터는 연결되어 있지 않은 최종 레이아웃의 형태
ex. Card, Template(Grid를 묶는) - Header, Main, Footer
5. 페이지 (Page)
: 템플릿에 실제 데이터가 결합되어 사용자에게 전달이 되는 최종 디자인의 형태
- 완성된 하나의 페이지
장점
- 디자인 시스템 구성에 있어 가이드라인으로 활용 가능
- 계층별로 순서대로 예쁘게 정렬되는 폴더 이름과 구조
- atom 컴포넌트의 재사용과 독립성을 높여줌
단점
- 컴포넌트 간 의존성과 복잡도가 까다로움
