Component Driven Development
컴포넌트 중심 UI 개발 방법론
Last updated
컴포넌트 중심 UI 개발 방법론
Last updated
소프트웨어 엔지니어 Tom Coleman은 컴포넌트 아키텍처 및 프로세스 UI의 개발 변화를 설명하기 위해 Component Driven Development를 소개했습니다. 모듈 UI 개념은 마이크로 서비스, 컨테이너와 같은 소프트웨어 움직임에서 많은 유사점을 가지고 있습니다. 이 방법은 20세기 경 희박한 제조와 대량 제조에서 기인한 것입니다.
컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI) 구축에 도달하는 개발 및 설계 방법론입니다. 기본적인 컴포넌트 단위부터 시작하여 UI 뷰(view)를 구성하기 위해 점진적으로 결합(조립)해가는 상향적(bottom-up) 성향을 띕니다.
이 방법은 UI를 구축할 때 직면하게 되는 앱 규모의 복잡성을 해결합니다. Storybook은 독립 된 환경에서 UI를 개발 할 수 있는 환경을 제공하므로 다음의 스토리(Story)를 구성하는 데 활용할 수 있습니다.
컴포넌트(components)
컨테이너(containers, 2개 이상 컴포넌트 조합)
페이지(pages, 2개 이상 컨테이너 조합)
테스트 중심의 개발 방법론인 "테스트 주도 개발(TDD)"과는 사용 목적이 다릅니다.
오늘 날 사용자 인터페이스는 그 어느 때보다도 복잡합니다. 사람들은 다양한 기기에서 제공되는 매력적이고 보다 개인화 된 경험(UX)을 기대합니다. 즉, 프론트 엔드 개발자와 디자이너는 UI에 보다 많은 로직을 포함해야 한다는 의미입니다.
하지만 UI는 애플리케이션 규모가 커짐에 따라 다루기 어려워집니다. 규모가 큰 UI는 깨지기 쉽고 디버깅이 어려울 뿐더러 제작에도 많은 시간이 필요합니다. UI를 모듈 식으로 세분화하여 견고하면서도 유연한 컴폰넌트를 구성하면 이러한 문제를 해결할 수 있습니다.
컴포넌트는 애플리케이션 비즈니스 로직에서 상태를 분리하여 상호 교환(interchangeability)을 가능하게 합니다. 이렇게하면 복잡한 화면을 간단한 컴포넌트로 분해 할 수 있습니다. 각 컴포넌트에는 잘 정의된 API와 목(mock) 구성된 일련의 상태(정적)가 있습니다. 이를 통해 컴포넌트를 분리하고 재구성하여 다른 UI를 구축 할 수 있습니다.
독립적으로 컴포넌트를 분리하여 관련 상태를 정의하여 UI가 다양한 시나리오에서 작동하는 지 확인 가능합니다.
컴포넌트 수준에서 테스트하여 세부 사항까지 버그를 정확하게 찾아낼 수 있습니다. 테스트 보다 작업량이 적습니다.
컴포넌트 라이브러리 또는 디자인 시스템의 컴포넌트를 재사용하여 UI를 보다 빠르게 조립할 수 있습니다.
UI를 개별 컴포넌트로 분해 한 다음 서로 다른 팀 구성원 간에 공유하여 개발 및 디자인을 병렬 처리합니다.
다음의 경우 컴포넌트 주도 개발 방식의 UI가 아닙니다.
웹 사이트를 페이지 모음으로 정도로 취급하는 개발 및 디자인 프로세스입니다. 페이지에서 공통 요소를 재사용하기 위해 많은 노력을 기울이지 않습니다.
Wordpress 또는 Drupal은 문서를 화면에 렌더링 하는 데 중점을 둔 도구입니다. Rails, Django 및 PHP와 같은 백엔드 프레임워크는 UI 재사용을 사후 고려사항으로 간주하고 광범위한 컴포넌트 재사용을 방지합니다.
에셋(Figma, Sketch 등), 설계 원리, 컴포넌트 라이브러리를 포함하는 모든 UI 패턴 사용자 인터페이스 설계에 대한 전체적인 접근 방식입니다.
짧은 피드백 루프와 빠른 반복을 촉진하는 소프트웨어 개발 방법입니다. 컴포넌트는 미리 만들어진 빌딩 블록을 다시 사용하여 팀이 보다 빨리 구축하는 것을 도와줍니다. 이를 통해 애자일 팀은 사용자 요구 사항에 더욱 더 집중할 수 있습니다.
정적 파일을 사전 렌더링하고 CDN에서 직접 제공하는 웹 사이트를 구축하는 방법론입니다. JAMStack 사이트 UI는 컴포넌트화 된 JavaScript 프레임 워크에 의존합니다.
