아토믹 디자인(atomic design)
출처: https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/
이 페이지를 기반으로 작성하였습니다.
1. 사용하는 이유
2. 아토믹 디자인이란?
컴포넌트를 총 5가지 단계 원자, 분자, 유기체, 템플릿, 페이지로 나누어서 관리한다.
=> 단계별로 추상적인 것에서 구체화하는 단계를 가집니다. 이 과정을 통해 일관성을 가지고 확장하면서 최종 콘텐츠를 보여줄 수 있습니다.
2-1. Atoms(원자)
더 이상 분해할 수 없는 기본 컴포넌트가 속한다.
예시: label, input, button
=> 글꼴, 애니메이션, 컬러 팔레트, 레이아웃과 같이 추상적인 요소도 포함될 수 있습니다
2-2. Molecule(분자)
molecule은 여러 개의 atom을 결합하여 자신의 고유한 특성을 가집니다.
오직 한 가지의 기능만을 한다! => SRP(Single Responsibility Principle) 원칙
예시: button atom을 클릭하여 form을 전송하는 molecule로 정의
2-3. Organism(유기체)
organism은 앞 단계보다 좀 더 복잡하고 서비스에서 표현될 수 있는 명확한 영역과 특정 컨텍스트를 가집니다.
예시: 헤더(로고 => atom, 검색 기능 => molecule 포함)
2-4. Template
템플릿은 page를 만들 수 있도록 여러 개의 organism, molecule로 구성할 수 있습니다.
예시: 실제 컴포넌트를 레이아웃에 배치하고 구조를 잡는 와이어 프레임
=> 실제 컨텐츠가 없는 페이지
2-5. Pages
page는 유저가 볼 수 있는 실제 콘텐츠를 담고 있습니다.
template의 인스턴스라고 할 수 있습니다. 예를 들어 장바구니 페이지에 유저가 담은 상품이 없거나 10개를 담는 다양한 template의 인스턴스를 볼 수 있습니다.
