우리는 웹 개발자를 위한 효과적인 워크플로우를 구성합니다: Confluence, Airtable 및 기타 도구

저는 프론트엔드 개발자로 XNUMX년 정도 일하며 다양한 프로젝트 창작에 참여해왔습니다. 제가 배운 교훈 중 하나는 동일한 목표를 공유하지만 작업과 책임이 다른 여러 개발자 팀 간의 협업이 쉽지 않다는 것입니다.

다른 팀원, 디자이너, 개발자와의 협의를 통해 소규모 팀(5~15명)을 위한 웹사이트 제작 주기를 만들었습니다. 여기에는 Confluence, Jira, Airtable 및 Abstract와 같은 도구가 포함됩니다. 이 기사에서는 워크플로 구성 기능을 공유하겠습니다.

Skillbox는 다음을 권장합니다. XNUMX년 실습 코스 "저는 PRO 웹 개발자입니다".

알림: "Habr"의 모든 독자를 위한 - "Habr" 프로모션 코드를 사용하여 Skillbox 과정에 등록할 때 10 루블 할인.

이 모든 것이 왜 필요한가요?

웹사이트를 처음부터 만드는 데 필요한 최소한의 팀은 디자이너, 프로그래머, 프로젝트 관리자입니다. 내 경우에는 팀이 결성됐다. 하지만 몇 개의 사이트가 공개된 후 뭔가 문제가 있다는 느낌을 받았습니다. 때때로 우리는 우리의 책임을 완전히 이해하지 못했고 고객과의 의사소통이 많이 부족했습니다. 이 모든 것이 프로세스 속도를 늦추고 모든 사람을 방해했습니다.

나는 문제를 해결하기 위해 노력하기 시작했습니다.

Google 검색은 우리 문제에 대한 좋은 결과를 제공합니다.

작업을 보다 시각적으로 만들기 위해 여기에서 작업이 수행되는 방식을 이해할 수 있는 워크플로 다이어그램을 만들었습니다.

이미지를 클릭하면 전체 해상도로 열립니다.

목표와 목적

제가 테스트하기로 결정한 첫 번째 기술 중 하나는 "캐스케이드 모델"(폭포)이었습니다. 문제를 강조하고 해결 방법을 이해하는 데 사용했습니다.

문제: 대부분의 경우 클라이언트는 개발자처럼 웹 사이트 생성 프로세스를 모듈식으로 평가하지 않습니다. 그는 그것을 일반 사이트로 인식합니다. 즉, 개별 페이지의 관점에서 생각합니다. 그의 의견으로는 디자이너와 프로그래머는 개별 페이지를 차례로 만듭니다. 결과적으로 고객은 실제 프로세스 중에 무엇이 뒤따르는지 이해하지 못합니다.

과제: 그렇지 않으면 고객을 설득할 필요가 없습니다. 최선의 선택은 페이지별 모델을 기반으로 회사 내에서 웹사이트를 만들기 위한 모듈식 프로세스를 개발하는 것입니다.

유니버설 디자인 토큰과 구성 요소는 개발자와 디자이너 모두가 관리합니다.

문제: 이는 많은 전략에서 다루는 일반적인 상황입니다. 흥미로운 솔루션이 많이 있으며, 대부분의 경우 스타일 가이드/라이브러리 생성기에 의해 제어되는 디자인 시스템을 만드는 것이 제안됩니다. 그러나 우리 상황에서는 디자이너의 액세스 수준을 관리할 수 있는 또 다른 구성 요소를 개발 프로세스에 추가하는 것이 불가능했습니다.

과제: 디자이너, 개발자, 관리자가 서로 간섭하지 않고 동시에 작업할 수 있는 보편적인 시스템을 구축합니다.

정확한 개발 추적

문제: 문제를 추적하고 전반적인 진행 상황을 측정하는 데 사용할 수 있는 유용한 도구가 많이 있지만 대부분은 유연하지 않거나 최적이 아닙니다. 이 도구는 일반적으로 특정 작업에 대한 질문과 설명에 소요되는 팀 시간을 절약함으로써 유용할 수 있습니다. 또한 전체 프로젝트에 대한 보다 정확한 이해를 제공함으로써 관리자의 삶을 더 쉽게 만듭니다.

작업: 다양한 팀 구성원이 수행한 작업 진행 상황을 추적하는 대시보드를 만듭니다.

도구 상자

다양한 도구를 실험한 후 Confluence, Jira, Airtable 및 Abstract 세트를 선택했습니다. 아래에서는 각각의 장점을 공개하겠습니다.

합류

도구의 역할: 정보 및 리소스 센터.

Confluence의 작업 공간은 상대적으로 설정이 쉽고, 많은 기능을 갖추고 있으며, 다양한 앱과 통합되어 있으며, 개별적이고 사용자 정의 가능한 템플릿이 있습니다. 모든 경우에 적용할 수 있는 일률적인 솔루션은 아니지만 정보 및 리소스 센터로 이상적입니다. 이는 프로젝트와 관련된 모든 참조 또는 기술 세부 사항이 데이터베이스에 입력되어야 함을 의미합니다.

이 도구를 사용하면 각 구성 요소와 프로젝트에 대한 기타 세부 정보를 적절하게 문서화할 수 있습니다.

Confluence의 주요 장점은 문서 템플릿을 사용자 정의할 수 있다는 것입니다. 또한 참가자의 액세스 수준을 분리하여 사양 및 다양한 프로젝트 문서의 단일 저장소를 구현하는 데 사용할 수 있습니다. 이제 이메일로 문서를 보낼 때처럼 이전 버전의 사양이 있다고 걱정할 필요가 없습니다.

도구에 대한 추가 정보 공식 제품 홈페이지에서 구매 가능.

락스

도구의 역할: 문제 모니터링 및 작업 관리.

Jira는 매우 강력한 프로젝트 계획 및 관리 도구입니다. 기능의 주요 부분은 사용자 정의 가능한 워크플로우를 생성하는 것입니다. (필요한) 이슈를 효과적으로 관리하려면 요청 유형과 이슈 유형(이슈 유형)의 올바른 사용에 특별한 주의를 기울일 필요가 있습니다.

따라서 개발자가 올바른 디자인을 기반으로 구성 요소를 구축하고 있는지 확인하려면 디자인이 변경될 때마다 알림을 받아야 합니다. 구성 요소가 업데이트되자마자 디자이너는 이슈를 열고 담당 개발자를 할당하고 그에게 올바른 이슈 유형을 할당해야 합니다.

Jira를 사용하면 프로세스의 모든 참가자(우리의 경우 5~15명 있음)가 길을 잃지 않고 실행자를 찾는 올바른 작업을 수신하는지 확인할 수 있습니다.

Jira에 대해 자세히 알아보기 공식 제품 홈페이지에서 구매 가능.

Airtable

도구의 역할: 구성 요소 관리 및 진행 상황 보드.

Airtable은 스프레드시트와 데이터베이스가 혼합된 것입니다. 이 모든 기능을 통해 위에서 설명한 모든 도구의 작동을 사용자 정의할 수 있습니다.

예 1: 구성요소 관리

스타일 가이드 생성기는 사용하기가 항상 편리한 것은 아닙니다. 문제는 디자이너가 이를 편집할 수 없다는 것입니다. 또한 Sketch 컴포넌트 라이브러리를 사용하는 것은 많은 제한이 있기 때문에 좋은 결정이 아닙니다. 아마도 프로그램 외부에서는 이 라이브러리를 사용할 수 없을 것입니다.

Airtable도 완벽하지는 않지만 다른 유사한 솔루션보다 낫습니다. 다음은 구성 요소 관리 테이블 템플릿의 데모입니다.

개발자가 설계 구성 요소를 승인하면 구성 요소를 테이블에 기록하여 결과 ABEM을 평가합니다. 총 9개의 열이 있습니다.

• 이름 - ABEM 원칙에 따른 구성 요소의 이름입니다.
• 미리 보기 - 다른 소스에서 다운로드한 구성 요소의 스크린샷이나 이미지가 배치되는 곳입니다.
• 링크된 페이지는 구성 요소 페이지에 대한 링크입니다.
• 하위 구성 요소 - 하위 구성 요소에 대한 링크입니다.
• 수정자 - 스타일 옵션이 있는지 확인하고 이를 정의합니다(예: 활성, 빨간색 등).
• 구성요소 카테고리는 일반 카테고리(텍스트, 홍보 이미지, 사이드바)입니다.
• 개발 상태 - 실제 개발 진행 상황 및 정의(완료, 진행 중 등)입니다.
• 책임 - 이 구성 요소를 담당하는 개발자입니다.
• 원자 수준은 이 구성 요소의 원자 범주입니다(원자 설계 개념에 따름).
• 데이터는 동일한 테이블이나 다른 테이블에서 참조될 수 있습니다. 점들을 연결하면 크기 조정 시 혼란을 방지할 수 있습니다. 또한 데이터를 문제 없이 필터링, 정렬 및 변경할 수 있습니다.

예시 2: 페이지 개발 진행 상황

페이지 개발 진행 상황을 평가하려면 이 목적을 위해 특별히 만들어진 템플릿이 필요합니다. 테이블은 팀 자체와 고객의 요구를 모두 충족할 수 있습니다.

페이지에 대한 모든 정보를 여기에 기록할 수 있습니다. 이는 마감일, InVision 프로토타입에 대한 링크, 대상, 하위 구성 요소입니다. 디자인 문서화 및 업데이트는 물론 프런트엔드 및 백엔드 개발 상태와 관련하여 작업 수행이 매우 편리하다는 사실이 즉시 눈에 띕니다. 또한 이러한 작업은 동시에 수행됩니다.

추상

도구의 역할: 디자인 자산에 대한 버전 제어의 단일 소스입니다.

Abstract는 Sketch의 자산용 GitHub라고 할 수 있으며 디자이너가 파일을 복사하여 붙여넣을 필요가 없도록 해줍니다. 이 도구의 가장 큰 장점은 "단일 정보 소스" 역할을 하는 디자인 저장소를 제공한다는 것입니다. 디자이너는 마스터 브랜치를 승인된 레이아웃의 최신 버전으로 업데이트해야 합니다. 그 후에는 개발자에게 알려야 합니다. 이는 결국 메인 브랜치의 디자이너 에셋에서만 작동해야 합니다.

결론으로

새로운 개발 프로세스와 위에서 언급한 모든 도구를 구현한 후 작업 속도가 두 배 이상 빨라졌습니다. 완벽한 해결책은 아니지만 매우 좋은 해결책입니다. 사실, 작동하려면 많은 노력을 기울여야합니다. 모든 것을 작동 상태로 업데이트하고 유지하려면 "수동 작업"이 필요합니다.

Skillbox는 다음을 권장합니다.

• 실기 코스 "모바일 개발자 PRO".
• 온라인 코스 "C# 개발자".
• 실기 코스 "0에서 PRO로의 PHP 개발자".

출처 : habr.com