[React] 리액트에서의 아토믹 디자인(Atomic Design)이란

[React] 리액트에서의 아토믹 디자인(Atomic Design)이란

Medium

본 게시글은 위의 글을 읽고 번역하여 정리한 내용입니다.

 

---

 

📌 아토믹 디자인(Atomic Design)

효율적이고 확장 가능한 웹 애플리케이션을 만드는 방법중의 하나는 아토믹 디자인 시스템을 사용하는 것이다.

아토믹 디자인은 하나의 방법론인데, UI elements 를 작은 단위로 쪼개는 방법으로 일관적이고 모듈화된 디자인 시스템을 만드는데 도움을 준다.

아토믹 디자인에는 가장 작은 단위 순으로 atoms, molecules, organisms, templates, pages 로 구성되어 있다.

 

📌 아톰(Atoms)

아토믹 디자인의 핵심 요소중의 하나는 바로 atom 컴포넌트이다.

아토믹 컴포넌트(atomic components)란 디자인 시스템의 가장 작고 기본적인 구성 요소이다.

atom 컴포넌트는 더이상 분해할 수 없는 가장 단순하고 독립적인 컴포넌트이다. 예를 들면 button, form, input, label과 같은 작은 단위의 요소들이 있다.

 

atom 컴포넌트를 만드는 방법

리액트에서 atom 컴포넌트를 만드는 것은 간단하다.

함수나 클래스 컴포넌트를 만들고 그것에 간단한 로직이나 의도한 기능을 수행하는데 필요한 상태를 포함하시키는 것이다. 예를 들면 버튼 컴포넌트는 클릭이벤트나, 스타일링만 포함하는 것이다.

atom 컴포넌트는 가능한 재사용 가능해야하며, 애플리케이션의 어떤 맥락이나 상황에서도 사용할 수 있어야 하는 것을 의미한다.

 

📌 분자(Molecules)

Molecules 는 두 개 이상의 아톰 컴포넌트로 구성된다. 아톰 컴포넌트보다 더 복잡한 UI 를 만드는데 사용된다.

예를 들면 form 영역, cards 컴포넌트와 같은 단순한 UI 요소들이다. ― 카드 컴포넌트는 이미지, 타이틀, 설명으로 구성되어있다. 이 각각의 구성요소들은 아톰 컴포넌트이다.

 

molecular 컴포넌트를 만드는 방법

리액트에서 molecular 컴포넌트를 만드는건 atom 컴포넌트를 만드는 것보다는 약~간 복잡하다. 왜냐하면 여러 atom 컴포넌트를 필요로 하기 때문이다.

하지만! 아톰 컴포넌트와 마찬가지로 함수나 클래스 컴포넌트를 만들어서 최소한의 논리와 의도한 기능을 수행하기 위한 상태를 포함해야 한다는 것은 동일하다. 또한 재사용 가능해야하며, 특정 부분에서만 사용되는 것이 아닌 어떤 문맥이나 상황에서도 사용 가능할 수 있어야 한다.

 

📌 유기체(Organisms)

아토믹 디자인에서 organisms 은 molecules 와 다른 점이 있다.

복잡성 정도와 전반적인 사용자 인터페이스를 만드는데 사용된다는 점이다.

organisms 은 하나 그 이상의 molecules 컴포넌트 또는 atomic 컴포넌트로 구성하지만 주로 molecules 로 구성된다. 또한 molecules 보다 더 복잡한 UI 를 구성하는데 사용된다.

organisms 은 범위가 더 넓고, UI 를 구조적인 느낌을 주는 경향이 있다. 주로 UI 구성요소나 레이아웃을 구성하는데, 예를 들면 header, footer, side bar가 있다.

 

📌 템플릿(Templates) 과 페이지(Pages)

templates 와 pages 는 최종적인 레이아웃을 만들고, 페이지의 구조를 정의한다.

templates 은 고차 컴포넌트(HOC)를 사용하여 재사용 및 유지보수 가능한 템플릿을 만들 수 있다. 또한 여러 페이지에 걸쳐 공통된 기능이나 props 를 재사용할 수 있다. 이렇게 더 유연하고 유지보수하기 쉽게 만들어준다.

이것은 전반적인 사용자 경험을 향상시키기도 한다.

 

header 나 footer 는 여러 페이지에서 사용되는 요소이다. 따라서 페이지들을 감싸고 여기에 header 와 footer 를 추가하는 방식으로 하면, 여러 페이지에 걸쳐서 header 와 footer 를 업데이트할 필요 없이 한번에 업데이트 할 수 있는 것이다.

<Wrapper>
    <Header />  ➡️ 공통 헤더
        <Main>
            {children}  ➡️ 페이지
        </Main>
    <Footer />  ➡️ 공통 푸터
</Wrapper>

 

📌 리액트에서 아토믹 디자인 사용하기

atoms, molecules, organisms, templates, pages 와 같은 구성 요소들을 서로 다른 폴더로 구분함으로써 프로젝트를 더 나은 구조를 가지고 유지보수를 쉽게 해준다. 또한 프로젝트 내에서 여러 구성요소들을 쉽게 식별할 수 있다.

아토믹 디자인 리액트 파일 구조 예시
components	atoms	Button	CommonButton.jsx
			MainButton.jsx
			SubButton.jsx
		Input	SearchInput.jsx
			FilterCheckInput.jsx
			CheckInput.jsx
			TextareaInput.jsx
		Label	FormTitleLabel.jsx
			InputLabel.jsx
	molecules	Form	ImageUpload.jsx
		Card	ProductCard.jsx
	organisms	Header	GNB.jsx
		Footer	Footer.jsx
	templates	BoardTemplate	BoardTemplate.jsx
	pages	Home	MainPage.jsx
		Notice	NoticePage.jsx
		Board	BoardPage.jsx

 

📌 아토믹 디자인을 사용하면 좋은 점

가장 주요한 이점은 유지보수성과 확장성이다. UI 를 더 작게 분해함으로써 컴포넌트의 이해가 쉬워진다. 또한 더 쉽게 수정하고, 리스크를 줄이는데 도움이 된다. 컴포넌트 하나만 수정하면, 이를 사용하고 있는 곳에 모두 반영되기 때문에 버그를 해결하는데 도움이 된다.

 

프로젝트 전반적으로 일관성을 유지할 수 있다. 예측 가능하고, 확장 가능한 코드를 기반으로 새로운 기능을 추가하고 확장하는 것이 쉬워진다.

 

동료와 협업을  쉽게 할 수 있다. 협업 시 효율적인 작업의 흐름과 효율적인 커뮤니케이션을 가능하게 해준다.

 

컴포넌트를 재사용함으로써 개발 시간을 줄일 수 있다. 새로운 기능이나 페이지를 추가할 때, 재사용 가능한 컴포넌트를 사용한다면 새로 코드를 짜지 않아도 되기 때문에 시간을 절약할 수 있다.

 

 

---

참고 : https://bootcamp.uxdesign.cc/from-atoms-to-pages-implementing-atomic-design-in-react-2c91d1031e7c
  등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.