[FE] CDD (컴포넌트 주도 개발) feat. Atomic Design

 

들어가며

최근 한 프로젝트를 리팩토링하며 Storybook을 통해 컴포넌트들을 문서화하는 작업을 수행하고 있다.

Storybook은 각 컴포넌트를 애플리케이션과 독립된 환경에서 렌더링해 보고 테스트를 수행해볼 수 있는 그런 컴포넌트의 문서화를 도와주는 도구인데, CDD를 위한 도구라는 표현이 왕왕 나올 정도로 CDD를 전제로 설계된 도구라고 한다.

 

그래서 Storybook을 쓰는데 CDD를 모르면 될까? 싶어서 심도있게 여러 자료들을 살펴보고 내가 배운 것을 정리해두려 한다.

 

CDD (Component-Driven Development; 컴포넌트 주도 개발)

컴포넌트 주도 개발론에 대해서는 아래 링크에서 자세하게 소개하고 있다.

 

Component Driven User Interfaces

 

CDD의 기본 골자

• CDD는 '컴포넌트를 중심으로 개발하자'라는 사고방식·개발 방법론으로 프론트엔드 개발에서 주로 사용되는 개발 패러다임이다.
• 애플리케이션을 개별적인 컴포넌트로 분리하여 독립적으로 개발, 테스트, 문서화하는 접근 방식이다.
• CDD는 모듈화와 재사용성을 강조하며, 애플리케이션의 구조를 이해하고 유지보수하기 쉽게 만들어주는 것을 기대한다.

 

CDD의 순서

 

CDD를 구성하는 순서는 위의 이미지와 같은데, 각 항목별로 정리를 다시 해보자.

 

1. 한 번에 하나의 컴포넌트 빌드

가장 작은 단위의 컴포넌트를 빌드한다.

버튼, 툴팁, 입력창 등이 이 단계에서 빌드된다.

 

2. 컴포넌트 결합

가장 작은 단위의 컴포넌트를 결합하여 복잡성이 있는 컴포넌트를 빌드한다.

'버튼과 입력창으로 구성된 검색창 컴포넌트' 같은 것을 생각하면 될 것 같다.

 

3. 페이지 조립

2단계에서 만들어진 복잡성을 가진 컴포넌트들을 조합하여 하나의 페이지를 만든다.

버튼과 입력창 등으로 조합된 form 따위로 만들어진 로그인 페이지 정도로 이야기할 수 있을 것 같다.

 

4. 프로젝트에 페이지 통합

3단계에서 만들어진 페이지에 데이터와 비즈니스 로직을 연결하여 온전한 기능을 갖추도록 한 후 애플리케이션에 통합한다.

 

CDD의 특징 및 장점

• 품질 : 컴포넌트를 분리하여 구축하고 관련 상태를 정의하여 UI가 다양한 시나리오에서 작동하는지 확인 가능
• 내구성 : 컴포넌트 단위에서 테스트를 수행하여 버그를 세부적으로 파악할 수 있어 작업량이 적고 정확도가 높음
• 속도 : 컴포넌트 라이브러리나 디자인 시스템의 기존 구성 요소를 재사용하여 UI를 더 빠르게 구현할 수 있음
• 효율성 : UI를 컴포넌트 단위로 분해하여 개발과 디자인을 병렬화할 수 있어 여러 팀원 간 작업 공유 가능
• 문서화 : 컴포넌트를 독립적으로 개발하기에 각 컴포넌트의 동작과 인터페이스에 대한 문서화가 용이하여 다른 개발자들의 컴포넌트 이해 및 활용이 수월하다.

 

Atomic Design Pattern

 

아토믹 디자인 패턴은 UI를 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)의 다섯 단계로 나눠 인터페이스 디자인 시스템을 구축하자는 사고 방식이다.

 

웹 뿐 아니라 모바일 애플리케이션, 데스크톱 등 모든 UI에 적용 가능한 일반적인 모델이다.

 

CDD와 Atomic Design

Atomic Design이 왜 CDD를 이야기하며 뜬금없이 튀어나왔을까?

💡둘 다 'UI를 컴포넌트 단위로 쪼개서 계층 구조로 조합해 전체 화면을 만든다'는 철학을 공유하기 때문이다.

 

아래에서 하나씩 짚고 넘어갈 Atomic Design의 요소 중 Molecules·Organisms는 실제 React 컴포넌트와 디자인 시스템의 컴포넌트에 거의 그대로 매칭이 되며, 컴포넌트를 독립적으로 개발·테스트하고 상위 컴포넌트에서 조립하는 구조를 권장하는 CDD는 이 Atomic Design의 계층과 자연스럽게 구조가 맞물린다.

 

따라서 컴포넌트 UI를 각각 Atmos / Molecules / Organisms로 설계하고, 그걸 CDD의 상향식 방식으로 구현하기에 두 개념이 함께 쓰이는 것이다.

 

정리하자면, Atomic Design은 '디자인 및 개념'에 대한 이야기이고, CDD는 그것들을 '코드 상에서' 개발하는 개발 방법론에 대한 이야기이다.

 

Atomic Design의 계층

Atoms (원자)

 

• label, input, button 등 더 이상 쪼갤 수 없는 원자 단위의 기본 UI 요소를 말한다. 

Molecules (분자)

label + input + button = search form

 

• 원자가 서로 결합되어 독특한 새로운 특성을 갖는 화학에서의 '분자'는 물 분자와 과산화수소 분자 같이 같은 원소로 구성되어 있어도 각기 다른 고유한 특성을 보인다.
• 이처럼 인터페이스에서의 '분자' 또한 같은 원자들로 이루어져있어도 각각 고유한 단일 책임에 집중하다.
• 하나의 책임에 집중하는 작은 컴포넌트 단위이기 때문에 테스트·재사용·일관성 확보에 유리한 특징이 있다.

Organisms (유기체)

 

• Molecule, Atom이 모여 만들어지는 비교적 복잡한 UI 블록을 이야기하며, 페이지 곳곳에서 반복 사용 가능한 '섹션' 단위를 이야기한다.
  • e.g. 헤더, 카드 리스트, 상품 그리드 등

 

Templates (템플릿)

 

• 위 홈페이지 템플릿에서 확인할 수 있듯 Organism들을 배치해서 페이지의 레이아웃을 정의한 뼈대다.
• 실제 콘텐츠가 아니라, '어디에 무엇이 들어오는지', '길이는 어느 정도인지' 등 콘텐츠 구조에 초점을 맞추는 단계다.

Pages (페이지)

 

• Template에 실제 혹은 목업 콘텐츠를 삽입한 최종 화면이다.
• 이 단계에서 실 데이터가 삽입되었을 때, 디자인 시스템의 변형이 없는지 검증한다.

 

마치며

여기까지 간단하게 CDD와 함께 서로를 뒷받침 해주는 개념인 Atomic Design의 골자를 공부하고 정리해보았다.

단지 Storybook으로 '컴포넌트 명세를 문서화 하는 것'을 경험해보려 하다가 여기까지 왔는데, 생각보다 재미있는 공부가 되었다.

리팩토링을 진행하고 있는 프로젝트에서는 단지 컴포넌트 명세를 문서화하는 것에 그치겠지만,

새로이 시작할 프로젝트에서는 Atomic Design과 CDD를 적극적으로 고려해나가며 개발해보고 싶다.

 

참고 자료

Component-Driven

Component Driven User Interfaces

 

Atomic Design

Atomic Design Methodology | Atomic Design by Brad Frost

 

컴포넌트 주도 개발 (CDD) 이론편 [리액트 (React + TypeScript)]