UI 개발 및 문서화 속도를 높이는 6가지 도구

구성 요소 중심 개발은 프론트엔드 및 사용자 인터페이스의 개발을 가속화하는 훌륭한 전략입니다. 구성 요소를 사용하면 애플리케이션을 재사용하고 빌드, 테스트 및 모듈화를 단순화할 수 있습니다.

소규모 응용 프로그램에서는 사용 중인 구성 요소 목록을 쉽게 관리할 수 있습니다. 자신의 메모리 외에 이러한 목록을 유지 관리하기 위해 특정 도구가 필요하지 않습니다. 그러나 응용 프로그램 및 개발 팀의 수와 복잡성이 증가하면 구성 요소의 수와 복잡성도 증가하여 구성 요소를 추적하고 UI의 일관성을 유지하기 위해 일종의 도움이 필요합니다.

중대형 프로젝트에 구성 요소 중심 개발을 채택하려면 구성 요소 라이브러리를 관리하고, 문서화하고, 전시하고, 이를 사용하는 애플리케이션과 독립적으로 개발할 수 있는 도구가 필요합니다.

구성 요소 관리 및 목록화에 대한 이러한 필요성은 다행스럽게도 사용자 인터페이스 및 프론트엔드의 개발 및 문서화 가속화를 직접적으로 목표로 하는 새로운 종류의 도구에 의해 해결되었습니다. 이러한 도구는 Angular, React 및 Vue와 같은 UI 개발을 위한 다양한 라이브러리, 다양한 JavaScript 언어 및 다양한 JavaScript 프레임워크에 대한 지원을 제공합니다.

또한 일부 구성 요소 관리 도구는 프런트 엔드 스타일 가이드를 생성하는 기능도 제공합니다.

프론트엔드 개발 영역에서 스타일 가이드란 무엇입니까?

개발 중인 앱의 사용자 인터페이스에 있는 모든 요소의 라이브 모음입니다. 이 가이드는 구성 요소 목록을 제공할 뿐만 아니라 기능적이고 테스트 가능한 예제도 포함합니다. 또한 개발자가 자신의 코드에 복사하여 붙여넣을 수 있는 각 구성 요소의 코드 스니펫을 제공합니다. 일반적으로 스타일 가이드에는 버튼, 아이콘, 탐색 메뉴, 양식 입력 요소 및 모달 오버레이와 같은 일반적인 UI 구성 요소가 포함됩니다.

아래에서 UI 구성요소 개발 및 문서화 도구 부문에서 선두주자로 부상하고 있는 도구에 대한 리뷰를 찾을 수 있습니다.

동화책

Storybook은 애플리케이션별 종속성에 대해 걱정하지 않고 작업할 수 있는 프론트 엔드 및 UI 구성 요소를 개발하는 데 널리 사용되는 도구입니다. 개발 중인 앱 외부에서 격리된 UI를 빌드하기 위한 샌드박스를 제공합니다. 이를 통해 도달하기 어려운 상태 및 에지 케이스를 개발할 수 있으므로 구성 요소 재사용성, 테스트 가능성 및 개발 속도가 크게 향상됩니다.

또한 UX 디자이너와의 상호 작용을 용이하게 하여 기존 구성 요소를 보고 생성해야 하는 구성 요소를 식별하는 작업을 단순화합니다.

Storybook은 React, Angular, Vue, Svelte, Web Components 등을 비롯한 다양한 JavaScript 프레임워크를 지원합니다. Storybook에서 만든 사용 사례는 개발, 테스트 및 QA 중 검토를 위해 일반 JavaScript의 스토리로 저장할 수 있습니다.

이 도구에는 개발 도구와의 통합을 가능하게 하는 광범위한 애드온 에코시스템이 있어 워크플로 사용자 지정을 용이하게 하고 테스트 및 문서화를 자동화합니다. 예를 들어, Docs Addon을 사용하면 Markdown/MDX를 작성하여 구성 요소 라이브러리 및 디자인 시스템에 대한 사용자 지정 가능한 사이트를 생성할 수 있습니다.

스타일 가이드

Styleguidist는 생활 스타일 가이드 생성기로 분류할 수 있지만 그 기능은 UI 컴포넌트용 개발 환경 서버에 가깝습니다. Styleguidist로 만든 스타일 가이드는 구성 요소 속성을 표시하고 마크다운(.md) 파일을 기반으로 편집 가능한 사용 예를 표시합니다. 이 도구는 ES6, Flow 및 TypeScript와 같은 JavaScript 방언과 호환됩니다.

자동 생성된 문서를 통해 Styleguidist는 전체 개발 팀에서 사용할 수 있는 모든 구성 요소에 대한 문서 포털 역할을 할 수 있습니다. 또한 UI 구성 요소 카탈로그를 포함하는 UI 설명서 사이트의 생성 및 유지 관리를 단순화합니다. 또한 마크다운 페이지를 만들고 UI 구성 요소를 가져올 수 있습니다.

Styleguidist의 중앙 집중식 문서는 대규모 프로젝트에서 상당한 시간과 노력을 절약할 수 있지만 문서를 최신 상태로 유지하려면 리소스를 할당해야 합니다. 그렇지 않으면 문서가 구식이 되고 개발자가 사용을 중단하고 스타일 가이드의 유용성을 잃는 스타일 가이드 사망이라는 문제에 빠질 수 있습니다.

Styleguidist는 강점이 보완적이기 때문에 Storybook과 함께 사용하는 것이 일반적입니다. Storybook은 구성 요소를 빌드하고 변경 사항을 추적하는 스토리를 작성하는 데 사용할 수 있지만 Styleguidist는 Markdown을 사용하여 구성 요소를 문서화하는 데 사용할 수 있습니다.

조금

Bit는 UI 구성 요소의 분산 및 확장 가능한 프레임워크/리포지토리(일명 단일 리포지토리 또는 다중 패키지 리포지토리)로, CDD(구성 요소 주도 개발) 방법론에 따라 애플리케이션을 구축하기 위한 인프라로 사용할 수 있습니다. 이 방법론을 통해 Bit는 빌드, 테스트 및 유지 관리 프로세스를 가속화하여 애플리케이션 개발 주기를 크게 단축하고 애플리케이션 품질을 개선하는 것을 목표로 합니다.

구성 요소를 응용 프로그램의 일부로 구축하는 대신 Bit를 사용하면 구성 요소를 앱 외부에서 개발한 다음 아래에서 위로 응용 프로그램을 구성하는 데 사용할 수 있습니다. 결과적으로 구성 요소는 다양한 응용 프로그램에서 재사용할 수 있으므로 전체 개발 팀에서 사용할 수 있는 일종의 구성 요소 시장을 만들 수 있습니다. 결과적으로 단순히 구성 요소를 추가하거나 제거하여 기능을 변경할 수 있는 확장 가능한 응용 프로그램을 얻을 수 있습니다.

Bit는 React, Vue 및 Angular 라이브러리와 호환됩니다. 작업 공간이 구성 요소를 개발하고 구성하는 데 사용되는 작업 공간 철학을 기반으로 합니다. 이 작업 방식을 사용하면 분산 방식으로 애플리케이션을 구축할 수 있지만 모놀리식과 같은 경험을 할 수 있습니다. Bit 작업 공간의 UI를 통해 쉽게 구성 요소를 시각적으로 개발하고 관리할 수 있습니다.

반응 코스모스

React Cosmos는 확장 가능한 고품질 사용자 인터페이스를 만들기 위해 설계된 개발 환경입니다. 이를 통해 React 구성 요소를 격리하여 개발하고 UI 구성 요소의 라이브러리를 만들 수 있습니다. 즉각적인 시각적 회귀 테스트 또는 필요에 따라 사용자 지정할 수 있는 통합을 통해 개발 시간을 크게 줄이는 데 사용할 수 있습니다.

React Cosmos는 예제 입력을 정의하여 상태를 북마크할 수 있는 구성 요소 고정 장치에 기반한 철학을 사용합니다. 구성 요소 고정 장치를 그룹화하면 시간을 더 생산적으로 만들도록 특별히 설계된 우아한 사용자 인터페이스에서 React Cosmos가 노출하는 라이브러리를 만들 수 있습니다.

작업을 수행하기 위해 React Cosmos는 소스 코드를 이해할 수 있도록 빌드 파이프라인에 자신을 삽입합니다. 즉, Flow, TypeScript 또는 기타 코드를 작성하는 데 사용하는 JS 언어에 관계없이 도구를 사용할 수 있습니다. 또한 때로는 통합이 작동하도록 일부 구성에 몇 가지 옵션을 추가해야 합니다.

이름에서 알 수 있듯이 React Cosmos는 UI 개발의 몇 가지 측면에 중점을 두면서 React와 독점적으로 작동하지만 가장 높은 수준의 세부 사항으로 수행합니다.

React 개발자 도구

Facebook에서 제공하는 이 도구는 Chrome 플러그인으로 작동하므로 Chrome 개발 도구 내에서 React 구성 요소 계층 구조를 검사할 수 있습니다. Firefox 브라우저용 애드온으로도 사용할 수 있습니다.

React 개발자 도구를 사용하면 앱의 구성 요소 계층 구조 트리를 탐색할 때 구성 요소의 상태와 속성을 검사하고 편집할 수 있습니다. 이 대화형 개발 형식을 통해 한 구성 요소의 변경 사항이 다른 구성 요소에 어떤 영향을 미치는지 확인할 수 있으므로 UI ​​구성 요소 구조를 올바르게 조합하고 구성 요소를 적절하게 분리할 수 있습니다.

브라우저에 React 개발자 도구를 설치하면 두 개의 새 탭이 생깁니다. 하나는 구성요소이고 다른 하나는 프로파일러입니다. 첫 번째는 페이지에서 렌더링된 루트 React 구성 요소와 그에 의해 렌더링된 하위 구성 요소를 보여줍니다. 트리에서 구성 요소 중 하나를 선택하여 오른쪽 창에서 해당 속성과 상태를 검사하고 편집할 수 있습니다. 이동 경로를 사용하여 선택한 구성 요소의 상위 항목을 검사할 수 있습니다. 프로파일러 탭은 성능 정보를 기록하는 데 사용됩니다.

독즈

코드를 문서화하는 과정은 아마도 코더가 가장 싫어하는 과정일 것입니다. 테스터로부터 받은 버그 보고서를 읽는 것보다 훨씬 더 중요합니다. 그러나 지속적으로 업데이트되는 문서 사이트는 동일한 구성 요소가 매번 다른 기능을 사용하여 반복해서 다시 작성되는 것을 방지하기 때문에 개발 시간을 줄이는 데 필수적입니다.

Docz는 개발자가 응용 프로그램을 더 빨리 완료하는 데 사용할 수 있는 시간을 낭비하지 않도록 문서 사이트를 문서화하고 업데이트하는 프로세스를 최대한 단순화하는 것을 목표로 합니다. Docz를 사용하면 코드의 대화형 문서를 쉽게 작성하고 게시하여 장점을 보여주는 MDX 파일을 생성할 수 있습니다. 결과적으로 파일이 변경될 때마다 전체가 새로 고쳐지는 라이브 다시 로드를 통해 프로덕션 준비가 된 사이트를 얻을 수 있습니다.

API에 관심이 있다면 이러한 도구를 탐색하여 아름다운 API 문서를 작성할 수 있습니다.

이제 막 시작하는 중입니다.

여기에서 검토한 도구 외에도 Carte Blanche, Atellier, Bluekit 등과 같은 구성 요소를 카탈로그화, 관리 및 문서화하는 도구에 대한 다른 많은 프로젝트가 있습니다. 그들 중 다수는 아직 베타 버전이고 나머지는 유지 관리되지 않는 프로젝트이지만 소프트웨어 개발 시간을 상당히 단축할 수 있는 품질을 제공할 수 있으므로 이에 대해 알고 레이더에 계속 관심을 기울일 가치가 있습니다.

Shopify, Atlassian, IBM, Spotify 및 AirBNB를 비롯한 많은 현대 대기업은 UI 구성 요소의 개발 및 문서화 속도를 높이는 도구 지원 설계 시스템을 채택하고 있습니다. 그러나 이러한 도구를 채택하기 위해 대기업이 될 때까지 기다릴 필요는 없습니다. 유지 관리할 구성 요소의 카탈로그가 최소한 있을 때 사용을 시작하는 것이 가장 좋습니다. 구성 요소 목록이 증가하고 구성을 시작하는 데 비용이 너무 많이 들 때 방심하지 않도록 그들과 친해질 수 있습니다.