문의 : 미래웹기술연구소 영업전화번호 : 070-4335-1749 이메일 : sales@miraeweb.com

워크플로 소프트웨어 솔루션의 UX를 개선하고 개발 비용을 낮추다

기회

주식회사 콜로사는 사용하기 간단하고 비용 효율적인 오픈 소스 워크플로 소프트웨

어 솔루션인 프로세스메이커의 개발사다. 프로세스메이커는 모든 규모의 조직이 ap-

proval-기반의 비즈니스 프로세스를 쉽게 디자인하고 자동화하며 배치해서 작업장의

인력과 시스템을 연결하게 돕는다. 지난 2년 동안 프로세스메이커의 다운로드 횟수는

25만 건이 넘었고 현재 정부, 통신사, 은행, 보험사, 제조회사 등 무수한 시장 영역에서

수백 개 회사의 사용자 수만 명이 실행하고 있다.

프로세스메이커 디자인 스위트로 기업 사용자는 폼을 생성하고 완전한 기능의 워크플

로를 매핑할수 있다. 이 소프트웨어는 전체가 웹 기반이기 때문에 사용자와 부서, 조직

전체에 걸쳐 조직화하기 쉽다. 강력한 SOA 애플리케이션인 프로세스메이커는 문서

관리, ERP, CRM, 비즈니스 지능 애플리케이션을 비롯한 시스템들과 통합할 수 있다.

솔루션

콜로사는 디자인이 우수하고 효율적이며 사용하기 쉽고 간단한 소프트웨어를 제공한

다는 목표를 달성하기 위해 Ext JS를 사용한다. 그러나 처음에는 자체적인 Ajax 프

레임워크를 개발하기로 했다. 콜로사의 창립자이자 CEO인 브라이언 리알리(Brian

Reale)는 설명한다. “초기에는 유저 인터페이스를 단순하고 사용자 친화적으로 개선

하자고 결정했습니다. 사용자가 웹 브라우저 내에서 프로세스를 움직하게 하고 싶었기

때문에 자체적인 Ajax 프레임워크를 만들었죠. 몇 년이 지나자 프로세스 메이커의 새

기능을 구축하기는커녕 프레임워크를 관리하는 문제로 교착 상태에 빠졌습니다. 사용

가능한 주요 자바스크립트 프레임워크들을 평가한 끝에ㅔ ext JS가 최고라는 결론에

도달했어요. Ext JS 객체 모델(Object Model)은 옵션이 풍부해 아주 직관적이고, 크

로스 브라우저 기능의 도움으로 다양한 브라우저를 지원할 수 있습니다.”

콜로사는 Ext JS 그리드로 애플리케이션에서 목록과 보고를 많이 만든다. “Ext JS 덕

택에 페이지네이션, JSON 데이터스토어, 컬럼 렌더링, Ajax 요청 같은 기능이 전부

식은 죽 먹기입니다.”라고 브라이언은 말했다.

Sencha Ext JS 고객사례

콜로사 프로세스메이커(Colosa ProcessMaker)

제품

Ext JS

산업 분야

서비스형 소프트웨어

기회

사용하기 간단하고 비용 효율적인 오픈 소스

워크플로 소프트웨어 솔루션을 만드는 것.

솔루션Ext JS 객체 모델은 직관적이고 풍부한 옵션

을 많이 제공한다. 그리고 크로스 브라우저

기능은 다양한 브라우저에 대한 지원을 보장

한다. Ext JS 그리드를 사용해 목록과 보고를

만들면 페이지네이션, JSON 데이터스토어,

컬럼 렌더링, Ajax 요청과 같은 기능을 구현

하기 쉽다.

결과

·고성능의 커스텀 가능한 UI 위젯으로

애플리케이션 폼을 재디자인해 개발 시간을

약 40% 단축했다.

·워크플로에 간결함, 스타일, 의미를 부여하는

커스텀 컨트롤을 포함함으로써 사용자

경험을 개선해 프로세스메이커의 경쟁력을

크게 끌어올렸다.

·시니어 개발자는 새 기능을 개발하는데

집중하고 주니어 개발자는 현재 디자인을

재사용해 간결하고 효과적인 목록과 폼을

만들어 개발 시간을 50% 절약했다.

문의 : 미래웹기술연구소 영업전화번호 : 070-4335-1749 이메일 : sales@miraeweb.com

아래 예시는 콜로사가 프로세스메이커에서 Ext JS를 어떻게 사용했는지 보여 준다.

결과

Ext JS의 도움으로 콜로사는 개발에 들어가는 노력을 큰폭으로 줄였다. 브라이언은 콜라

사가 얻고 있는 결과들을 설명한다. “커스텀화할 수 있는 UI 위젯으로 애플리케이션 폼을

재디자인하니 개발 시간이 40% 정도 절약되고 있습니다. 손으로 코딩하는 컨트롤과 폼

이 없기 때문에 프로젝트 중 하나를 석 달에서 두 달로 줄였고 그래서 더 나은 사용자 경험

과 커스텀 컨트롤을 제공할 수 있었습니다. 그뿐만 아니라 현재 디자인을 다시 사용할 수

있어서 보고와 목록의 개발 시간이 50% 줄어들 것으로 예상 중입니다. 현재 주니어 프로

그래머들은 가이드라인만 따라도 멋진 목록과 폼을 만들 수 있습니다.”

프로세스메이커 팀에게 디자인은 중요하다. 그들은 센차를 통해 그와 같은 철학을 가진 개

발팀과제품을 만들어 냈다. “Ext JS는 워크플로의 세계에 간결함과 스타일, 의미를 가져

오는 데 한몫하고 있습니다. 이제 프로세스메이커 인터페이스는 BPM과 워크플로 소프트

웨어 영역에 있는 다른 경쟁자들보다 훨씬 앞서 있습니다. 그러나 가장 중요한 사실은 Ext

JS로 저희가 원하고 고객들이 사용하기를 바라는 제품을 만들 수 있다는 겁니다. 저희는

앞으로 몇 달 안에 센차 터치를 활용해 고객들이 크로스 플랫폼 모바일 환경에서 프로세

스메이커를 즐겁게 사용할 완벽한 방법을 아아낼 계획입니다.” 브라이언은 말을 맺었다.

센차는 개발자가 웹 표준 기술로 흥미진진한 경험을 만들어 사용하고 최적화하도록 돕는

애플리케이션 프레임워크를 만든다. 센차의 주력 상품인 Ext JS와 센차 터치는 데스크톱

과 모바일 기기용 인터넷 애플리케이션을 풍부하게 제공하는 크로스 브라우저 자바스크

립트 프레임워크다. 전 세계적으로 15만여 회사에서 100만 명이 넘는 개발자가 센차 제

품군으로 날마다 멋진 애플리케이션을 만들고 있다.

관리(Admin) 메뉴에 있는 언어(Language) 옵션: GridPanel에서 GroupingStore를 사용해 프로

세스메이커의 다른 언어 버전들을 보여 준다. 단 하나의 Ajax 요청으로 지역과 국가 언어에 대한

정보를 정확히 제공한다.

프로세스 목록(Processes List): 이 그리드에

서 행을 선택하자 컨텍스트 메뉴가 추가되었다.

상단의 툴바에 있는 액션(Action)들은 사용자가

어떤 행을 선택했냐에 따라 활성화되거나 비활

성화된다.

케이스 패널(Case Pane)l: 멀티 탭을 사용해

케이스에 대한 더 많은 정보를 보여 준다.

모든 정보가 한 페이지에 정리되어 있고 간단한

Ajax 요청으로 업데이트될 수 있다.

또한 프로세스맵(ProcessMap)의 그래픽적인

표현도 포함한다.

미래웹기술연구소 서비스

· Sencha 라이센스 판매

· Sencha 공인교육

· 프로페셔널 컨설팅

· 온라인 기술지원

문의미래웹기술연구소

070-4335-1749

sales@miraeweb.com