Atomic Pattern

Atomic Design Pattern은 바로 "디자인 시스템을 위한 것"이라는 점입니다. 즉 애초에 "재사용 가능한 컴포넌트들의 집합"인 디자인 시스템에서 컴포넌트들을 효율적으로 구성하는 방식을 의미

Atomic Pattern은 프론트엔드 시스템을 구성하는 컴포넌트들을 논리 구조 단위로 나누어 효율적으로 재사용하도록 만들어서, 불필요한 "코드 중복"을 제거하고 "클린"한 아키텍쳐를 유지할 수 있도록한 디자인 시스템이다.

장점

어플리케이션과 분리하여 컴포넌트를 개발하고 테스트할 수 있으며, 스타일 가이드와 같은 도구에서 볼 수 있다. 또 통합 개발시에 백엔드 어플리케이션의 로직에 의존하지 않는다는 장점이 있다. 일련의 패턴이 확립되면 설계 변경이 필요한 경우에 대비하여 더 빠르고 유연성있는 프로세스를 가질 수 있다. 또한 만들어져있는 컴포넌트를 최대한으로 재사용하기 때문에 디자인을 일관성있게 통일할 수 있다.

단점

컴포넌트가 분리되고 상위 컨테이너 컴포넌트의 사이즈를 결정하지 못한다면 미디어쿼리 사용이 어렵다. 컴포넌트는 너비에 대해 알 수 없기 때문에 실제 페이지의 사이즈가 조절될 때 크기가 조정된다.

Atomic Design Pattern을 적용할때 디자인 시스템이 아닌 일반 웹 프로젝트에 적용할때 atoms, molecules, organisms등의 요소들을 "뷰를 이루는 단위"가 아닌 "기능의 단위"로 나누는 것을 권장한다.