아토믹 디자인이란?
아토믹 디자인은 쉽게 말하면 디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식을 의미한다. (즉, 컴포넌트 중심의 디자인 패턴인 것)
Atoms: 하나의 구성 요소. 본인 자체의 스타일만 가지고 있으며 다른 곳에 영향을 미치는 스타일은 적용되지 않아야 함.
Molecules: 원자들의 모음
Organisms: 분자들의 모음
Templates: 유기체들을 모아 템플릿으로 생성
Pages: 실제 페이지를 구성
왜 아토믹 디자인인가?
리액트는 컴포넌트를 중심으로 만들어지는 프레임워크로, 컴포넌트의 재사용성이 매우 중요하다. 중복이 되는 컴포넌트를 공통으로 사용할 수 있도록 빼는 것이 관건인데, 이것은 개발을 진행하다보면 일일히 생각하며 진행하는 것이 어렵다. 결국에는 중복되는 코드가 많아지고, 이를 관리하는 것이 어려워지게 되는 것이다
그렇기에 개발 단계 처음부터 재사용성이 용이하며, 여러 개의 컴포넌트들을 모아 또 다른 컴포넌트를 만들 수 있도록(조립) 고민하며 개발하는 것이 중요해졌다. 컴포넌트 중심의 아토믹 디자인 패턴은 이러한 리액트의 특성과 잘 맞아 떨어졌다.
어느 프로젝트에서든 버튼과 폼(Input) 등은 있기 마련인데, 이에 대한 디자인만 바뀔 뿐이라면 애초에 모든 프로젝트에서 사용할 수 있는 버튼과 폼 컴포넌트를 만들어 놓으면 효율성이 높아질 것이다.
그래서 다른 부트스트랩, Ant, Material UI랑 다른게 뭔데?
(개인적으로) 다른 점이라면 실제로 우리가 사용할 컴포넌트들만 생성하여 위의 라이브러리들에 비해 가벼울 수 있다는 점과, 회사의 디자인적인 요소(회사 색깔, 테마 등)를 담아서 컴포넌트들을 개발하게 되면 전사 프로젝트에서 사용할 수 있다는 점이 있을 수 있다.
