리액트 아토믹 디자인(Atomic Design)에 대해 알아보자

 

 

 

안녕하세요 오늘은 리액트 아토믹 디자인에 대해서 알아보겠습니다.

 

아토믹 디자인(Atomic Design)은 Brad Frost가 제안한 디자인 시스템입니다. 이 방법론은 웹 페이지를 여러 개의 독립적인 컴포넌트로 분리하고, 이들을 조합하여 복잡한 UI를 구축하는 데 초점을 맞춥니다.

 

아토믹 디자인은 이름에서 알 수 있듯이 화학의 원소와 분자에 착안한 아이디어로, 다음과 같은 5단계 계층 구조를 가집니다:

Atoms (원자): 이는 가장 기본적인 빌딩 블록으로서 버튼, 인풋 필드, 텍스트 등과 같이 독립적으로 사용할 수 없는 가장 작은 UI 요소들을 의미합니다.

Molecules (분자): 여러 개의 Atom을 결합하여 만든 비교적 간단한 UI 구성 요소입니다. 예를 들어 검색 폼(Molecule)은 텍스트 입력 필드(Atom)와 검색 버튼(Atom)으로 구성됩니다.

Organisms (유기체): 여러 Molecule 및 Atom이 결합된 복잡한 UI 구성 요소입니다. 예를 들어 헤더(Organism)는 로고(Atom), 네비게이션(Molecule), 검색 폼(Molecule) 등으로 구성됩니다.

Templates (템플릿): Organism과 Molecule, Atom을 배치하여 전체 페이지의 레이아웃을 형성합니다. 실제 콘텐츠는 포함하지 않거나 placeholder로 대체되며 주로 페이지의 구조와 흐름을 보여줍니다.

Pages (페이지): Template에 실제 콘텐츠와 데이터가 채워진 상태입니다. 최종 사용자에게 보여지는 완성된 인터페이스입니다.

React에서 아토믹 디자인 원칙을 적용하면 컴포넌트 기반 아키텍처의 장점과 함께 유지보수 및 확장성 면에서 큰 이점을 얻을 수 있습니다.

 

 

 

아토믹 디자인을 활용할때 주의할 점 및 어려운 점은 분자 또는 유기체를 만들때 발생합니다.

 

이부분에서 화학식을 예로 들면 수소원자 2개와 산소원자 1개를 이용해 물 분자를 만들어야 하는데 

 

갑자기 키메라가 나오면 안되겠죠??

 

하지만 프로젝트를 진행하다보면 이 부분에서 분명히 문제가 생깁니다.

 

아토믹 디자인은 이것을 대비하여 팀원들간의 소통이 매우 중요하다고 생각합니다.

 

 

또한 대규모 프로젝트가 아니라면 꽤나 구조가 복잡하다고 느꼈기 때문에 

간단한 프로젝트일 경우 컨테이너 - 프레젠테이션 구조를 사용하는 것이 좋다고 생각합니다.

 

감사합니다.