Programming/React
[디자인 패턴] 아토믹 디자인(Atomic Design)
hodo-
2023. 8. 13. 17:49
프로젝트를 하면서 컴포넌트를 어떻게 나눌 것인지, 재사용을 극대화하는 방향에 대해 고민하던 중에 아토믹 디자인을 알게 되었다.
그리고 디자인 시스템인 아토믹 디자인을 알게 되면서 리액트가 컴포넌트 기반의 프로그래밍인 것은 알고 있었으나 이 개념을 충분히 활용하지 못했다는 것을 깨달았다.
아토믹 디자인이란?
컴포넌트를 가장 작은 단위부터 상위 컴포넌트까지 만들어서 코드 재사용을 최대화하는 방법론이다.
따라서 아토믹 디자인은 컴포넌트 중심 설계 패턴에서 주목받게 되었다.
원자(atom), 분자(molecule), 유기체(organism), 템플릿(template), 페이지(pages)로 효과적인 인터페이스 시스템을 만든다.
1. 원자
- 가장 작은 단위의 구성 요소 (분해 될 수 없음)
- 애니메이션, 색상 팔레트, 폰트, 상태
- 대표 : 버튼, 텍스트, 아이콘 등
2. 분자
- 2개 이상의 원자로 구성
- 한 가지 일을 하게 해야함
- 대표 : 입력 폼, 내비게이션, 카드 등
3. 유기체
- 원자, 분자의 조합으로 구성
- 모든 콘텐츠에서 재사용 가능할 수 있는 독립적
- 인터페이스의 개별적인 영역 형성
- 대표 : 입력폼 + 헤더
4. 템플릿
- 여러 유기체의 집합
- 디자인이 합쳐지고 레이아웃 실제 구동 확인 단계 > 골격 구조
- 대표 : 여러 카드, 템플릿(헤더, 메인, 푸터)
5. 페이지
- 템플렛을 이용하여 배치
- 대표 : 완성된 페이지
장점 👍🏻
- 디자인 시스템 구성에 있어서 가이드라인으로 활용 가능
- 애플리케이션과 분리하여 컴포넌트를 개발하고 테스트할 수 있음
- 컴포넌트 재사용성 극대화
단점 👎🏻
- 의존성과 복잡도가 까다롭다
(A에서 사용하는 B에 변경 사항이 있을 때
B에 props를 추가하여 변경 사항 적용한다 > 어디까지 props로 지정할지 모호
그렇다고 새로운 B를 만들기에는 재사용성 떨어짐)
아토믹 디자인, 어떻게 적용할 것인가
- 피그마로 개발할 페이지를 그리고 중복되는 기능, 디자인을 찾는다
- 스토리북을 통해 UI, UX 확인 및 테스트 한다.
참고
https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/
https://danilowoz.com/blog/atomic-design-with-react