Planty 프로젝트 FE 컴포넌트 디자인에
Atomic Design을 도입하여 활용한 느낀점을 공유한 문서입니다.
1. Atomic Design
우선 Atomic Design에 대해 알아봅시다.
아래 사진을 보면 대략적인 내용을 파악할 수 있습니다.
(출처 : DLTLABS)
ATOMIC DESIGN은 문자 그대로의 뜻처럼
컴포넌트들을 최소한의 단위인 Atoms(원자) 단위로 쪼개서 관리하는 방법을 의미합니다.
왜 그렇게 하냐고요?
가장 큰 이유는 코드의 재사용성 때문입니다.
가장 작은 단위인 Atoms(원자)가 모여 Molecule(분자)가 되고,
또 그것들이 모여 Organism이 되며, Template를 거쳐 Pages들이 됩니다.
특히 대규모 프로젝트의 경우 때문에 디자인 요소들의 통일을 이루기 용이합니다.
그러나 단점도 있었습니다.
Atoms, Molecule, Organism 구분의 모호함,
작은 것이라도 컴포넌트화 해야하는 번거로움이 있었습니다.
프로젝트에 적용은 5단계의 디자인패턴중 Atomes, Organism, Pages 3단계로 구성하였습니다.
구분의 모호함과, 대규모 프로젝트가 아닌 것도 하나의 이유였습니다.
2. 프로젝트 적용
프로젝트에는 총 150여개의 atoms와 organism가 구현되었습니다.
예시는 다음과 같습니다.
작은 버튼 하나까지 컴포넌트화 하여 atom, organism, 페이지
모두 60줄이 넘지 않는 코드로 구현되었습니다.
기본 버튼 컴포넌트 예시
특히 페이지 뷰는 레이아웃 컴포넌트를 미리 구상하고 리액트노드를 사용한 것이 큰 특징입니다.
HomePage 예시:
homePage라는 컴포넌트로 구성된 리액트노드를
homePagePayout이라는 레이아웃에 각각의 노드를 삽입하는 방식으로,
누구나 직관적으로 알 수 있는 페이지 뷰를 구상하였습니다.
Layout 활용
3. 느낀 점
아토믹 디자인과 레이아웃을 활용하여 체계적인 FE 컴포넌트 디자인을 활용하여,
다음과 같은 장점을 느꼈습니다.
- 코드 재사용성을 극대화 하였다는 점과
- 명확한 코드 디자인으로 의견충돌 없는 프로젝트를 진행하였습니다.
- 디자인 통일을 가진 것도 큰 장점 중 하나입니다.
그러나 다음과 같은 단점도 있었습니다.
- 코드 재사용을 위해 설계단계에 더욱 힘을 쏟아야 합니다.
: 간단한 버튼이라도 재사용을 위해 색상, 활성화/비활성화 등 변수를 미리 설계를 해야 합니다.- 이것도 atoms화 해야해?
: 추후 재사용 될지 안될지 모르는 아이템들도 컴포넌트화 해야 하기 때문에 노동력이 배가 됩니다.
체계적인 컴포넌트 디자인을 활용하여 프로젝트에 적용해 본 결과,
장점과 단점이 명확했던 Atomic Design이었습니다.
추후 대규모 프로젝트에서 3단계가 아닌 5단계로 나뉘어진 Atomic Design을 활용해보고 싶다는 생각이 들었습니다.
