이 글은 비즈니스 프로세스 모델 앱에 관한 사용기술, 기능, 개발과정들을 설명하는 개인 문서입니다.

데모 영상:

https://www.youtube.com/watch?v=BSDHIYqwnkQ&ab_channel=누미

서론:

학교 졸업 프로젝트로 여러 외국 회사들이 외주한 프로젝트 중에 선택하여 개발하게 되었습니다. 팀을 꾸려 총 5개의 프로젝트를 선택하였으며 각각 회사한테 포트폴리를 제출하여 컨텍을 기다렸습니다.

연락온 DeHeus 회사와 면접을 진행했고 프로젝트의 세부사항 및 Functional Requirements(기능적 요구)를 전달 받았습니다.

프로젝트 최종 확정 이후 회사와 필수기능 및 개발방향에 대한 상의를 했으며, 매주 회사에서의 오프라인과 오라인 병행하며 미팅을 진행했습니다.

개발은 에자일 방식을 택하였으며 저는 프론트 담당으로 참가하게 되었습니다.

개발 이유:

DeHeus 회사는 비즈니스 프로세스 모델을 자주 사용합니다. 회사가 기존에 사용하던 엑셀과 Bizagi 툴은 BPMN 다이어그램을 만드는 툴이며 사용하기 꽤나 복잡하며 값을 매번 반복해서 설정해야 했기 때문에 번거로웠습니다.

• 자주 쓰는 용어 및 기능들을 매번 설정해야 하므로 매우 복잡하였습니다.
• Parent Child 형식의 다이어그램 트리 형식을 요청하였으며, 회사는 상위와 하위 다이어그램의 구분을 명확하게 표시되길 원하였습니다.
• 다이어그램의 공유 및 같은 문서의 작업을 위해 온라인 다이어그램 업데이트를 요구하였습니다.
• 온라인으로 다이그램 생성 및 수정을 가능하게 요구하였습니다.

이러한 이유로 새로운 DeHues의 자사 BPMN 웹앱을 개발하게 되었습니다.

기술 스택:

Frontend: React, BPMN.js, JavaScript

Backend: Node.js, Express.js, Azure SQL Database

인증: Microsoft SSO, Azure Active Directory

배포: Docker, Azure