리액트 Atomic Design (아토믹 디자인)이란?

안녕하세요~ 이번에 알아볼 내용은 리액트에서 디자인 패턴중 아토믹 패턴에 대해 학습해보겠습니다. 디자인 패턴이 무엇인지, 그리고 이것을 왜 사용해야하는지 알아보도록 하겠습니다. 

📑목차
1. 아토믹 디자인 
1-1. 아토믹 디자인 이란?
1-2. 아토믹 디자인  특징
1-3. 아토믹 디자인 5단계 구성
1-4. 아토믹 디자인 적용한 코드

서론

먼저 디자인 패턴중 "아토믹 디자인" 에 대해 들어보셨거나 사용하신적이 있으실까요? 저도 아토믹 디자인을 경험한적이 없어 이렇게 포스팅을 해봅니다. 저번 Node.js 에서는 MVC 디자인 패턴을 사용하여 프로젝트를 제작해보았는데요, 리액트에서는 아토믹 디자인이라는 패턴을 사용해보도록 하겠습니다. 그럼 본문으로 들어가시죠~

본론

1. 아토믹 디자인 (Atomic Design)  

 

1-1. 아토믹 디자인 이란?

UI를 작고 재사용 가능한 단위로 나누어 설계하는 방법론으로, 2013년도 쯤에 '브래드 프로스트' 라는 개발자가 스타일 가이드 관련 경험도를 가지고 제시한 패턴

 

 

 

1-2. 아토믹 디자인 특징

 

1.  재사용성 (Reusability)

- UI를 가장 작은 단위부터 설계하므로, 한 번 만든 컴포넌트를 여러 곳에서 재사용할 수 있습니다.

 

2.  일관성 (Consistency)

- 디자인 시스템을 기반으로 하므로 전체 UI의 스타일과 동작 방식이 통일됩니다.

 

 

3.  확장성 (Scalability)

- 작은 단위로 나누어 설계하기 때문에, 프로젝트가 커져도 쉽게 확장 가능합니다. 

 

1-3. 아토믹 디자인 5단계 구성

1단계: 원자 (Atoms)

- 더이상 쪼갤수 없는 요소

- 가장 작은 단위 UI

- 독립적이거나 재사용 가능한 형태일 때 사용
- 보통 label, input, text, button, img 등등

 

2단계: 분자 (Molecules)

- 두 개 이상의 원자가 모여 하나의 기능을 수행하는 컴포넌트

- 라벨이 붙은 입력창(label + input), 검색창 (input + button)에서 사용

 

3단계: 유기체 (Organisms)

- 여러개의 원자 또는 분자가 조합된 복합 컴포넌트

- 헤더바(Header), 푸터바(Footer), 게시판 리스트 등등

 

4단계: 템플릿(Templates)
- 유기체나, 분자들을 배치하여 전체 페이지의 레이아웃을 정의

- 실제 데이터는 넣지않고 페이지 틀만 제공

- 게시판 목록 템플릿, 상품 목록 템플릿

 

5단계: 페이지 (Pages)

- 템플릿에 실제 데이터를 넣어 구성한 최종 UI 요소

-  로그인 페이지, 마이페이지

 

 

1-4. 아토믹 디자인 적용한 컴포넌트 구조

 

텍스트, 버튼, 입력창 등과 같은 UI 요소들은 다른 페이지에서도 재사용할 수 있기 때문에 원자단위로 나뉘었고, 텍스트 + 입력창 + 배점 이 세개의 UI요소를 분자로 나눠서 다시 재사용하였습니다. 

 

결론

 

아토믹 디자인은 UI를 체계적으로 구성하여 재사용성과 일관성을 높여주는 디자인 방법론입니다. 작은 단위부터 큰 단위까지 계층적으로 설계되기 때문에 유지보수와 협업이 수월합니다. 복잡한 프로젝트일수록 아토믹 디자인은 효율적인 컴포넌트 관리에 큰 도움이 적용될 수 있다고 볼 수 있습니다.