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

컴포넌트 중심으로 UI를 개발하는 방법론을 소개합니다.

컴포넌트 주도 개발의 탄생

소프트웨어 엔지니어 Tom Coleman (opens new window)은 컴포넌트 아키텍처 및 프로세스 UI의 개발 변화를 설명하기 위해 Component Driven Development (opens new window)를 소개(2017) 했습니다. 모듈 UI 개념은 마이크로 서비스, 컨테이너와 같은 소프트웨어 움직임에서 많은 유사점을 가지고 있습니다. 이 방법은 20세기 경 희박한 제조와 대량 제조에서 기인한 것입니다.

컴포넌트 주도 개발 (CDD)

컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI) 구축에 도달하는 개발 및 설계 방법론입니다. 기본적인 컴포넌트 단위부터 시작하여 UI 뷰(view)를 구성하기 위해 점진적으로 결합(조립)해가는 상향적(bottom-up) 성향을 띕니다.

컴포넌트란?

상호 교환 가능하고 표준화 된 UI 구성 요소입니다. UI 조각의 모양, 기능을 캡슐화합니다. LEGO 벽돌을 떠올려 보세요. LEGO는 성에서 우주선에 이르기까지 모든 것을 만드는 데 사용할 수 있습니다.

이 방법은 UI를 구축할 때 직면하게 되는 앱 규모의 복잡성을 해결합니다.

• 컴포넌트(components)
• 컨테이너(containers, 2개 이상 컴포넌트 조합)
• 페이지(pages, 2개 이상 컨테이너 조합)

테스트 중심의 개발 방법론인 "테스트 주도 개발(TDD) (opens new window)" 과는 사용 목적이 다릅니다.

왜 컴포넌트인가?

오늘 날 사용자 인터페이스는 그 어느 때보다도 복잡합니다. 사람들은 다양한 기기에서 제공되는 매력적이고 보다 개인화 된 경험(UX)을 기대합니다. 즉, 프론트 엔드 개발자와 디자이너는 UI에 보다 많은 로직을 포함해야 한다는 의미입니다.

하지만 UI는 애플리케이션 규모가 커짐에 따라 다루기 어려워집니다. 규모가 큰 UI는 깨지기 쉽고 디버깅이 어려울 뿐더러 제작에도 많은 시간이 필요합니다. UI를 모듈 식으로 세분화하여 견고하면서도 유연한 컴폰넌트를 구성하면 이러한 문제를 해결할 수 있습니다. 컴포넌트는 애플리케이션 비즈니스 로직 (opens new window)에서 상태를 분리하여 상호 교환(interchangeability (opens new window))을 가능하게 합니다.

이렇게 하면 복잡한 화면을 간단한 컴포넌트로 분해 할 수 있습니다. 각 컴포넌트에는 잘 정의된 API와 목(mock (opens new window)) 구성된 일련의 상태(정적)가 있습니다. 이를 통해 컴포넌트를 분리하고 재구성하여 다른 UI를 구축 할 수 있습니다.

CDD 장점

항목	설명
품질 (Quality)	독립적으로 컴포넌트를 분리하여 관련 상태를 정의하여 UI가 다양한 시나리오에서 작동하는 지 확인 가능합니다.
내구성 (Durability)	컴포넌트 수준에서 테스트하여 세부 사항까지 버그를 정확하게 찾아낼 수 있습니다. 테스트 보다 작업량이 적습니다.
속도 (Speed)	컴포넌트 라이브러리 또는 디자인 시스템의 컴포넌트를 재사용하여 UI를 보다 빠르게 조립할 수 있습니다.
효율성 (Efficiency)	UI를 개별 컴포넌트로 분해 한 다음 서로 다른 팀 구성원 간에 공유하여 개발 및 디자인을 병렬 처리합니다.

CDD가 아닌 UI 개발

다음의 경우 컴포넌트 주도 개발 방식의 UI가 아닙니다.

페이지 기반

웹 사이트를 페이지 모음 정도로 취급하는 개발 및 디자인 프로세스입니다. 페이지에서 공통 요소를 재사용하기 위해 많은 노력을 기울이지 않습니다.

페이지용으로 설계 된 도구

Wordpress 또는 Drupal은 문서를 화면에 렌더링 하는 데 중점을 둔 도구입니다. Rails, Django 및 PHP와 같은 백엔드 프레임 워크는 UI 재사용을 사후 고려사항으로 간주하고 광 범위한 컴포넌트 재사용을 방지합니다.

상호 보완 트렌드

디자인 시스템

에셋(Figma, Sketch 등), 설계 원리, 컴포넌트 라이브러리를 포함하는 모든 UI 패턴 사용자 인터페이스 설계에 대한 전체적인 접근 방식입니다.

애자일

짧은 피드백 루프와 빠른 반복을 촉진하는 소프트웨어 개발 방법입니다. 컴포넌트는 미리 만들어진 빌딩 블록을 다시 사용하여 팀이 보다 빨리 구축하는 것을 도와줍니다. 이를 통해 애자일 팀은 사용자 요구 사항에 더욱 더 집중할 수 있습니다.

JAMStack

정적 파일을 사전 렌더링하고 CDN에서 직접 제공하는 웹 사이트를 구축하는 방법론입니다. JAMStack 사이트 UI는 컴포넌트화 된 JavaScript 프레임 워크에 의존합니다.