[Design] Atomic Design 패턴에 대해서 알아보자

서론, 디자인 패턴을 써보자는 팀원의 제안

우동사리 - 우리 동네 사진가 리스트 라는 프로젝트를 진행하면서 같은 FE 팀원이 Atomic Design Pattern을 적용해보자는 제안이 나왔다. Atomic Design 에 대해 사전지식이 있던 나는 컴포넌트의 재사용성이 높다는 것을 알고 이번 기회에 적용해보기로 했다.

 

---

 

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

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

 

해당 블로그를 참고하여 학습하였다.

 

카카오페이지는 React로 개발을 진행한다고 한다. 이전에는 container-presentational components라는 디자인 패턴을 적용했다.

 

 

Container-presentational Components 디자인 패턴?

윗 패턴은 로직을 수행하는 컴포넌트 / markup UI를 보여주는 컴포넌트가 분리되어 있다. 그에 따라 기능과 UI에 대한 구분이 쉬워지며, props 내림으로 상태 공유를 한다. ex) this.props.children

 

따라서 presenter로 구분되어 있는 컴포넌트는 받은 데이터를 보여주기만 하여 상태관리를 안 하고 렌더링만 한다.

Container 컴포넌트는 데이터를 전달하고 아무것도 렌더링 하지 않으며 스타일 시트도 포함하지 않는다.

 

이는 리액트 Hooks로 쉽게 대체 가능하다.

https://patterns-dev-kr.github.io/design-patterns/container-presentational-pattern/

Container/Presentational 패턴

해당 글에서 참고하면 컴포넌트를 사용할때 호출하여 사용한다.

 

 

장점

관심사 분리를 구현

Container : 상태와 기타 데이터 관리

Presentational 컴포넌트 : 다양하게 재사용 가능, 테스트하기 편함

 

단점

훅을 사용하면 같은 효과를 볼 수 있어 투머치(오버엔지니어)일 수도 있다.

 

---

아무튼 카카오 개발에서 해당 디자인 패턴을 적용하면서 문제가 발생했다고 한다.

 

컴포넌트의 파편화

버튼들이 관리되어 있지 않으니 제각각 다 다른 디자인이고 "~페이지의 ~버튼"과 같이 불필요한 대화 시간이 길어지며 유지보수 하기 힘들다.

 

명확한 컴포넌트 설계 기준 미비

각자 컴포넌트를 관리하니까 제각각 규칙으로 인해 코드 리뷰하기가 어렵다.

 

 

Atomic design을 통해 이를 해결하기로 하였다. 화학적 관점에서 영감을 얻어

atom - molecule - organism - template - page 5가지 레벨을 나누어 관리한다.

 

 

Atom

 

이는 더 이상 분해할 수 없는 기본 컴포넌트로 label, input. button과 같은 기본 태그, 컬러팔레트 레이아웃 등 단일 컴포넌트이다.

 

 

 

우동사리 적용사항

 

 

 

윗 코드 처럼 type을 지정해주거나 width, height도 넘겨 줄 수 있다.

 

최근 부트캠프에서 팀원의 말을 듣자면 atomic design 패턴은 좀 더 세분화 할 수 있다고한다. 이 디자인 패턴을 사용하면 fontawesome과 같은 유명 라이브러리처럼 구현하여 적용할 수 있다.

 

 

Molecule

 

Molecule은 여러 개의 atom을 결합하여 자신의 고유한 특성을 가진다. 중요한 점은 molecule은 한 가지 일만 한다. 이를 SRP (Single Responsibility Principle) 원칙이다. 따라서 UI에서의 일관성, 테스트하기 쉬운 조건이라는 이점을 가진다.

 

 

사용 예시, Profile은 컴포넌트 그대로 유저의 프로필과 세부 내역을 보여준다.

 

 

 

Organism

좀 더 복잡하고 서비스에서 표현될 수 있는 명확한 영역, 특정 컨텍스트를 가진다. 예를 들어 header, footer, Navbar 과 같이 좀 더 구체적인 컨텍스트를 지니기에 재사용성이 낮아지는 특성이 있다.

 

 

 

Template

page를 만들 수 있도록 여러개의 organism과 molecule로 구성한다. 따라서 이는 와이어 프레임으로 실제 콘텐츠가 없는 스켈리톤으로 정의할 수 있다.

 

 

Page

page는 유저가 볼 수 있는 실제 컨텐츠를 담는 인스턴스이다.

 

 

 

---

 

해커톤을 진행하면서 5단계로 나누지는 않고 적당히 합쳐가면서 page를 조합했다. 아토믹 디자인 같은 경우 팀원과 어디까지가 molecule이고 organism을 나누어야하는지에 대해 기준이 없어서 이렇게 진행하게 된거 같다.

(atomic 컴포넌트 -> 기능 구현한 molecule -> page에 배치)

 

atomic design 예시

 

다음에는 atomic design을 고려하며 Object를 나누며 개발해봐야겠다.