[#5] Atomic Design Pattern 적용하기

기본 셋팅과 디자인을 끝내고 본격적인 개발을 들어가려고 하는데 한 팀원이 "그런데, 저희 디자인 시스템은 어떤거 써요?"라는 질문을 던졌다. 솔직히 생각도 못하고 있던 부분이였다. 그래서 "어,, 생각안해봤는데, 혹시 사용하고 싶으신 것 있으세요?"라고 여쭤보았더니 Atomic Design을 사용해본 적이 있다고하셨다. "그럼 제가 잘 몰라서 그런데,, 이번주 스프린트로 atomic design pattern 리서치하고 적용해볼께요!" 그래서 이 디자인을 적용하기로 했고 내가 폴더구조를 만들어서 main에 push 한 뒤, 그 다음부터 마크업을 시작하기로 했다. 

Atomic Design Pattern이란?

Atomic Design은 사용자 인터페이스를 구축하기 위한 디자인 시스템을 만드는 방법론이다.
Atomic Design은 지속적이고 견고한, 그리고 재사용가능한 디자인 시스템을 만드는 것을 돕는다.
우리는 페이지들을 디자인하는 것이 아니라, 컴포넌트들의 시스템을 디자인하는 것이다. 

atomic design pattern

위 사진의 순서대로 가면서 합쳐지면 최종적으로는 애플리케이션하나가 완성되는 것을 의미한다. 그렇다면 각각에 대해서 더 자세하게 알아보자. 

 

1. Atoms (원자)

- Atomic Desigin Pattern에서 가장 작은 컴포넌트 단위이다. 어떠한 context가 주어지든지 이에 해당하는 컴포넌트가 생성될 수 있어야 한다. 그리고 다양한 state를 가지고 있어야하며 추상적이지만 최대한 포용할 수 있게 설계되어야 한다. Atoms은 마진이나 위치 값을 가지지 않고 하나의 HTML 태그에 대응한다.

ex) input, label, button

2. Molecules (분자)

- Atom이 2개 이상이면 만들어진다. 자기만의 프로퍼티를 가질 수 있고 이를 활용해 atom에 기능을 만들어 줄 수 있다. 또한, atom의 위치 값을 지정하기도 한다. 

ex) label과 input 2개를 합쳐 아이디와 비밀번호를 입력할 수 있는 LoginInput

3. Organisms (유기체)

- Molecule이 2개 이상이면 만들어진다. 때로는 atom이 섞이기도 한다. Organism이 완성되면 컴포넌트가 최종 모습을 가지게 된다. 

ex) LoginInput, LoginStatusToggle, button을 합친 LoginComponent

4. Templates

- 만들어진 Organisms과 컴포넌트의 positon을 정해주는 역할이다. 주로 페이지를 구성하기 위해 서로 만들어진 organisms로 구성되며, 디자인을 체크하고 레이아웃이 실제로 작동하는 지 볼 수 있다. Templates에는 styling이나 color가 들어가지 않는다. 단지, 페이지의 그리드를 정해주는 역할 뿐이다. 

5. Pages

- Templates를 이용해서 각 그리드에 컴포넌트를 그려서 디스플레이한다. 구연 완성도가 가장 높은 레벨이다. 어플리케이션의 상태 관리가 이루어져야 한다. 사용자와 실제 상호작용이 이루어지는 곳이다. 

ex) - input의 onChange를 위한 상태 등은 input atom에서

      - 실제로 input을 통해 로그인하는 action은 page에서

 

Atomic Design Pattern의 장점

- 모듈성과 재사용성으로 디자인 시스템을 유지 및 확장하기 쉽다.

- Storybook을 활용해서 컴포넌트들을 더 효과적으로 정리할 수 있다. 

- 뷰와 비즈니스 로직을 분리해서 프로젝트가 확장될 때, 코드에서 문제를 디버깅하기 쉽다.

- UI 요소 간의 계층 구조적 관계를 강조하기 때문에 디자인 시스템을 조직화하고 개념화할 수 있다. 

 

Atomic Design Pattern의 단점

- 단기적으로 봤을 때 개발 시간이 오래 걸린다. 

- 로직과 상태를 낮은 단위까지 공유해야 하기 때문에 props drilling issue가 발생할 수 있다. 

- 컴포넌트가 명확하게 분리되어 있으므로, 상위 컨테이너 컴포넌트의 사이즈를 모를 때 미디어쿼리를 사용하기 어려울 수 있다.

 

 

[함께 읽으면 좋은 글]

https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/

아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그

 

과연 스토리북을 사용하지 않는 우리 프로젝트가 이 디자인 시스템을 잘 이용할 수 있을까라는 생각이 들기도 하지만 일단 적용해보기로했다. 

 

위의 내용과 React용 폴더 구조 예시들을 참고하여 Co-Task의 tree를 만들었다. 

yarn berry, zero-install을 package manager로 사용하고 있다. 

├── README.md
├── eslint.config.js
├── eslint.config.mjs
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   ├── components
│   │   ├── atoms
│   │   │   ├── Button
│   │   │   ├── Input
│   │   │   ├── Label
│   │   │   └── Text
│   │   ├── molecules
│   │   │   ├── InputForm
│   │   │   │   └── index.tsx
│   │   │   └── List
│   │   │       └── index.tsx
│   │   ├── organisms
│   │   │   ├── Banner
│   │   │   │   └── index.tsx
│   │   │   ├── Modal
│   │   │   │   └── index.tsx
│   │   │   ├── Search
│   │   │   │   └── index.tsx
│   │   │   └── Toast
│   │   │       └── index.tsx
│   │   └── templates
│   │       ├── CalenderTemplate
│   │       │   └── index.tsx
│   │       ├── InboxTemplate
│   │       │   └── index.tsx
│   │       └── UserTemplate
│   │           └── index.tsx
│   ├── hooks
│   │   └── hook.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── pages
│   │   ├── CalenderPage
│   │   │   └── index.tsx
│   │   ├── InboxPage
│   │   │   └── index.tsx
│   │   └── UserPage
│   │       └── index.tsx
│   └── types
│       └── type.ts
├── tsconfig.eslint.json
├── tsconfig.json
└── yarn.lock