아토믹 디자인 패턴이란

선요약

styled-components에서 span, div, button 컴포넌트를 만들고, 이들을 조립하는 것과 동일한 방식으로 보인다.

 

사실상 css라이브러리를 잘 쓰는 것과 별반 차이가 없어보이지만 차별점을 꼽는다 하면

• Atom, Molecule, Organism, Template, Page 이라는 명확한 기준으로 분류한다는 점
• 디자인 단계에서 컴포넌트의 재사용성과 확장성을 미리 고려한다는 점

이 아닐까?

---

아토믹 디자인 패턴(Atomic Design Pattern)

디자인 시스템을 구축하는 방법론 중 하나로, 웹 UI를 구성하는 모든 구성 요소들을 구체적인 기준에 따라 구분하고 조합하여 일관성 있는 디자인 시스템을 만들어 내는 방법론입니다.

이 패턴은 다섯 가지 구성 요소로 구성됩니다.

• Atoms(원자) : UI를 구성하는 가장 작은 단위의 구성 요소로, 버튼, 텍스트, 아이콘 등이 포함됩니다.
• Molecules(분자) : 두 개 이상의 원자가 결합하여 형성되는 구성 요소로, 검색 폼, 로그인 폼, 카드 등이 포함됩니다.
• Organisms(유기체) : 분자와 다른 유기체를 조합하여 형성되는 구성 요소로, 헤더, 푸터, 네비게이션 바 등이 포함됩니다.
• Templates(템플릿) : 실제 콘텐츠를 담기 위한 디자인을 결정하는 구성 요소로, 유기체들을 배치하고 조합하여 만들어집니다.
• Pages(페이지) : 실제로 사용자에게 제공되는 UI 요소로, 템플릿을 기반으로 구성되지만 실제 데이터와 콘텐츠가 포함됩니다.

리액트에서 아토믹 디자인 패턴을 구현하는 방법은 각 구성 요소들을 컴포넌트(Component)로 정의하고, 이를 필요에 따라 조합하여 페이지를 만들어 내는 것입니다. 이렇게 구현된 리액트 컴포넌트들은 재사용성이 높아지고, 일관성 있는 디자인 시스템을 구축할 수 있습니다.

---

폴더구조

아토믹 디자인 패턴을 리액트 프로젝트에 적용할 때는 컴포넌트(Component)들을 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)의 5가지 카테고리로 분류하여 폴더 구조를 설계할 수 있습니다.

/src 

|-- /atoms | 

|   |-- Button.js | 

|   |-- Icon.js | 

|   |-- Text.js |

|   /molecules | 

|   |-- SearchForm.js | 

|   |-- LoginForm.js | 

|   |-- Card.js 

|-- /organisms | 

|   |-- Header.js | 

|   |-- NavigationBar.js | 

|   |-- Footer.js 

|-- /templates | 

|   |-- DefaultTemplate.js | 

|   |-- DashboardTemplate.js 

|-- /pages | 

|   |-- HomePage.js | 

|   |-- LoginPage.js | 

|   |-- DashboardPage.js

 

이 구조에서는 원자, 분자, 유기체, 템플릿, 페이지의 각 카테고리별로 폴더를 만들고, 그 안에 해당하는 컴포넌트 파일을 저장합니다. 이렇게 구성하면 관리하기 쉬우며, 유지보수가 용이해집니다.

또한, 이 구조를 적용할 때는 각 컴포넌트의 이름을 작명할 때도 아토믹 디자인의 원칙을 따라야 합니다. 예를 들어, 원자는 버튼(Button), 텍스트(Text), 아이콘(Icon)과 같이 간단하고 기본적인 요소들로, 분자는 두 개 이상의 원자가 결합하여 형성되는 요소들로, 유기체는 다양한 분자와 다른 유기체가 결합하여 형성되는 요소들로 작명해야 합니다. 이렇게 하면 어떤 컴포넌트가 어떤 역할을 하는지 쉽게 파악할 수 있습니다.

---

templates과 pages의 차이?

Templates와 Pages는 아토믹 디자인 패턴에서 UI를 구성하는 두 가지 핵심 요소입니다. 이 둘은 다음과 같이 구분됩니다.

Templates : 실제 콘텐츠를 담기 위한 디자인을 결정하는 구성 요소입니다. 즉, UI를 구성하는 다양한 컴포넌트들을 조합하여 실제 화면을 구성하는 레이아웃을 결정하는 역할을 합니다. 예를 들어, 대시보드 페이지를 만들기 위해 헤더, 사이드바, 푸터 등을 배치하는 것이 Template의 역할입니다. 이를 통해 다양한 페이지에서 동일한 레이아웃을 재사용할 수 있습니다.
Pages : Templates를 기반으로 구체적인 데이터와 콘텐츠를 포함하여 최종적으로 사용자에게 제공되는 UI 요소입니다. 예를 들어, 블로그 포스트를 보여주는 페이지, 로그인 페이지, 대시보드 페이지 등이 모두 Pages에 해당합니다. Pages는 Templates와 함께 사용하여 일관성 있는 UI를 제공하며, 템플릿에서 정의한 레이아웃을 따르면서도 다양한 데이터와 콘텐츠를 제공합니다.
즉, Templates는 UI를 구성하는 레이아웃을 결정하고, Pages는 그 레이아웃을 기반으로 구체적인 데이터와 콘텐츠를 제공하여 최종적인 UI를 제공하는 역할을 합니다.

---

조립방식

아토믹 디자인 패턴에서는 원자(Atoms)를 만들어 분자(Molecules)를 조립하고, 유기체(Organisms)를 만드는 방식으로 UI 컴포넌트를 구성합니다. 따라서 하위 컨텐츠(Atoms)를 먼저 만들고 이를 조합하여 분자(Molecules)를 만들어 나가는 것이 일반적입니다.

예를 들어, UI 디자인에서 버튼(Button)은 원자(Atoms)로 분류됩니다. 따라서 버튼 디자인을 먼저 작업하여 원자(Atoms)를 만든 다음, 이 버튼 원자(Atoms)을 다양한 방법으로 조합하여 검색 폼(Search Form) 분자(Molecules)를 만들 수 있습니다. 이러한 분자(Molecules)를 또 다른 유기체(Organisms)의 구성 요소로 사용할 수 있습니다.

이러한 방식으로 하위 컨텐츠(Atoms)를 먼저 만들고, 이를 조합하여 분자(Molecules)를 만들어 나가는 것은 아토믹 디자인 패턴의 핵심 원칙 중 하나입니다.

---

작은 프로젝트에도 아토믹디자인패턴을 사용합니까?

작은 프로젝트에도 아토믹 디자인 패턴을 사용하는 것은 권장됩니다. 
작은 프로젝트에서도 아토믹 디자인 패턴을 사용하면 이점이 있습니다. 예를 들어, 작은 프로젝트에서는 원자(Atoms) 수준의 컴포넌트만 구성할 수도 있습니다. 하지만 원자(Atoms)를 구성하는 방식과 디자인 원칙은 작은 프로젝트에서도 중요합니다. 또한, 작은 프로젝트에서도 아토믹 디자인 패턴을 사용하면, 프로젝트 규모가 커져도 일관성 있는 UI 디자인을 유지하면서 유지보수와 확장성이 높아져 나중에 프로젝트 규모가 커져도 쉽게 대응할 수 있습니다.