728x90
Atomic Design이란?
웹 개발 프레임워크, 라이브러리는 컴포넌트 단위로 개발을 진행한다.
이러한 컴포넌트를 가장 작은 단위로 설정하고 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화 하는 방법론이다.
아토믹 디자인은 원자, 분자, 유기체, 템플릿, 페이지로 효과적인 인터페이스 시스템을 만든다.
Atoms(원자)
- 가장 작은 단위의 컴포넌트
- 다양한 state 즉 상태, 색상, 폰트, 애니메이션과 같은 추상적인 요소가 포함될 수 있다.
- 대표적인 컴포넌트는 버튼, 텍스트, 아이콘 등이 있다.
Molecules(분자)
- 2개 이상의 Atoms로 구성
- 하나의 단위로 함께 동작하는 UI컴포넌트들의 단순한 그룹
- 입력 폼, 내비게이션, 카드가 대표적인 컴포넌트
Organism(유기체)
- Molecules들을 결합하여 Organism을 형성한다.
- 인터페이스가 어떻게 보이는지 시작하는 단계
- 입력 폼과 함께 헤더를 감싸거나, 카드를 관리하는 그리드
Templates(템플릿)
- 여러 Organism의 집합
- 디자인을 확인하고 레이아웃이 실제로 구동하는지 확인하는 단계
- 여러 카드와 그리드를 묶는 템플릿(헤더, 메인, 푸터)
Page(페이지)
- 템플릿을 이용해서 배치를 통해 컴포넌트를 그려서 디스플레이
- 완성된 하나의 페이지
장점
- 디자인 시스템 구성에 있어서 가이드라인으로 활용할 수 있다.
- 애플리케이션과 분리하여 컴포넌트를 개발하고 테스트할 수 있다.
- 컴포넌트 재사용성이 극대화된다.
단점
- 의존성과 복잡도가 까다롭다.
728x90