클라우드 기반 인프라 스트럭쳐 솔루션

VueJS 개발자가 반드시 사용해야 하는
JavaScript UI 컨트롤

“소프트웨어 개발은 화초를 키우는 일과 같습니다. 화초는 잘 심는 것도 중요하지만 계속해서 물을 주고 가꾸는 것이 심는 것만큼이나 중요한 일이죠.  MESCIUS Wijmo는 효율적으로 화초할 방법을 일깨워 준 중요한 솔루션이었습니다.” -Growth 김지호 CEO-

구성원의 성장이 기업의 성장임을 알고 실천해 나가는 소프트웨어 기업, Growth(이하 그로스)는 공공사업을 비롯하여 대기업, 통신사, 제조업체 등 다양한 고객들과 SI 비즈니스를 수행하는 클라우드 솔루션 개발 기업입니다. 그로스는 고객사와의 협업 과정에서 수많은 데이터를 컨트롤 하여 고객이 쉽게 사용할 수 있는 데이터 시각화 솔루션이 필요했습니다. 그들이 MESCIUS Wijmo 제품을 선택하게 된 이유와 제품 도입을 통해 어떤 성과를 거둘 수 있었는지, 그로스의 김지호 CEO를 만나 그 자세한 이야기를 들어 보았습니다.

• 개발 환경: VueJS
• 사용 제품: Wijmo(위즈모) – JavaScript UI 컨트롤 (자세히 알아보기)
• 사용 컨트롤: FlexGrid, FlexChart (Stacked Bar chart, line chart, Scatter chart), Gauge

Wijmo를 도입하게 된 결정적 이유가 있으셨나요?

Wijmo를 도입하게 된 이유는 크게 세 가지입니다. .NET 환경이 익숙한 개발자들이 쉽게 사용할 수 있는지, 제품 관련 지원이 잘 이루어지는지, 데이터 처리 성능이 떨어지지 않는지, 이 세 가지 관점에서 제품을 검토하였습니다.

고객사 개발자들은 윈도우 애플리케이션과 .NET 프레임워크 개발 환경에 익숙합니다. 때문에 .NET 개발자들도 부담 없이 쉽게 사용할 수 있는 개발 환경이 중요하다고 생각했습니다. 기술적으로 쉽게 학습하고 사용하며 유지보수 할 수 있는 솔루션을 찾던 중 Wijmo를 알게 되었습니다. 기능적/성능적인 측면이 타제품보다 월등히 우수하여 도입을 결정하게 되었습니다.

Q. Wijmo 제품 도입 이전, 업무 진행 과정에서 어떤 어려움을 겪으셨나요?

어렵고 복잡한 오픈소스는 이제 그만!!

레거시 시스템에서 그리드나 차트를 만드는 작업은 상당히 어려운 작업입니다. 시중에 오픈 소스 제품이 많지만 기능적 제약이 많아 사용에 한계가 있지요. 저희도 오픈 소스를 커스터마이징하여 고객사에 제공하기도 했는데요. 커스터마이징 과정에서 리소스가 상당히 많이 투입되었습니다. 또한 커스터마이징에 따른 문제가 발생하면 기술 지원도 직접 해야 하는 상황이 발생하기도 했습니다.

Q. 현재 Wijmo를 어떻게 활용하고 있으신지요?

Vue.JS 기반의 차트, 그리드를 활용한 제조업 시각화 대시보드

내부에서 전사 프레임워크로 Vue.JS를 사용하고 있습니다. Vue.JS에서 가장 자주 사용하고 있는 기능은 Wijmo 차트, FlexGrid 입니다. 특히 FlexGrid는 엑셀의 대부분의 기능을 제공한다는 장점이 있습니다. 웹에서도 누구나 엑셀처럼 수식을 입력하거나 셀 간의 복사 이동이 가능합니다. 또한 필터나 정렬을 따로 구현하지 않아도 쉽게 사용할 수 있습니다. 이러한 측면에서 실무자들이 기존의 윈도우에서 쓰던 엑셀과 유사한 형태로 프로그램을 활용하고 있습니다.

USE CASE

아래 샘플은 위의 화면은 실제 Growth에서 MESCIUS의 Wijmo(위즈모) UI 컨트롤을 사용하여 개발 및 운영 중인 MES 솔루션의 샘플 화면입니다.

< Database 서버 모니터링 솔루션 >

해당 화면은 GROWTH 멀티 서버 통합 모니터링 솔루션 중, DataBase 서버를 모니터링 하는 시스템의 일부 샘플 화면입니다.

고객에게 DB 서버 트래픽 및 사용에 대한 상태를 직관적으로 보여주기 위해 Wijmo의 누적 막대 차트(Stacked Bar Chart)를 활용했습니다.

모든 트랜잭션에 대해서 Percentage(100%) 기준으로 모니터링이 가능하도록 Wijmo 컨트롤을 커스터마이징하여 구현했습니다. Wijmo(위즈모)의 누적 막대 차트에 대한 자세한 사용 방법 및 샘플은 아래 링크를 통해 직접 확인할 수 있습니다.

Wijmo 누적 막대 차트(Stacked Bar Chart) 튜토리얼 바로가기 
PureJS | PureJS(SystemJS 버전) | Angular | ReactJS | VueJS

< 생산 설비 모니터링 솔루션 >

해당 화면은 GROWTH 멀티 서버 통합 모니터링 솔루션 중, DataBase 서버를 모니터링 하는 시스템의 일부 샘플 화면입니다.

공장에서 운영 중인 모든 생산 설비로부터 운영 및 계측에 대한 정보를 실시간으로 받아와, 그리드(FlexGird)를 통해 RAW 데이터를 보여주고 있습니다. 사용자가 원하면, 그리드가 제공하는 정렬, 필터 기능을 통해 원하는 정보만 빠르게 확인할 수 있습니다.

또한, 위의 실제 Raw 데이터에 대한 상태에 정보를 한눈에 볼 수 있도록 게이지(Gauge), 선 차트(Line Chart) 그리고 분산형 차트(Scatter Chart)를 사용하여 대시보드를 구현했습니다. 이를 통해 관리자가 한눈에 생산에 대한 상태를 확인하고 관리할 수 있도록 제공하고 있습니다.

Wijmo 그리드(FlexGrid) 튜토리얼 바로 가기 : PureJS(SystemJS 버전) | Angular | ReactJS | VueJS

Wijmo 게이지(Guage) 튜토리얼 바로 가기 : PureJS(SystemJS 버전) | Angular | ReactJS | VueJS

Wijmo 분산형 차트(Scatter Chart) 튜토리얼 바로 가기 : PureJS | PureJS(SystemJS 버전) | Angular | ReactJS | VueJS

Wijmo를 도입하게 된 결정적 이유가 있으셨나요?

Vue.JS 기반의 차트, 그리드를 활용한 제조업 시각화 대시보드

첫 번째, Wijmo는 Vue.JS는 물론 퓨어 자바스크립트까지 지원하고 있어 가이드 문서만 보더라도 누구나 쉽게 개발할 수 있습니다. 러닝커브가 짧고 동시에 여러 가지 프레임워크를 웹 환경에서 지원하기 때문에 오픈 소스를 쓰는 업체가 전환하기 쉽다는 장점이 있습니다.

두 번째, 제조기업에서는 2만 개에서 100만 개가 넘는 방대한 데이터를 한 번에 그리딩해야 하는 경우가 많습니다. Wijmo의 대량 데이터 처리 성능이 매우 만족스러웠습니다.

세 번째, 데이터를 표현하기 위해서는 대시보드 및 비주얼라이제이션 기능이 필요합니다. Wijmo에는 비주얼라이제이션에서 제공해 줄 수 있는 다양한 차트가 이미 내장되어 있습니다. 실무자뿐만 아니라 관리자들도 쉽게 통계적인 인사이트를 얻을 수 있다는 장점을 가지고 있습니다.

Q. Wijmo 도입 이후 나타난 성과가 있으신지요?

제조업 솔루션, 클라우드 기반으로 진화하다

.NET 환경에서 클라우드 서비스(Cloud Service)로 전환했다는 것 자체를 성과라고 생각합니다. 저희는 윈도우 애플리케이션이 가지고 있는 성능을 웹 환경에서 어느 정도까지 끌어낼 수 있는지, 실제 고객들이 사용할 때 크게 불편함 없이 전환할 수 있는지를 성과의 기준으로 삼았습니다.

실제로 국내 제조업계의 특성상 .NET 개발자가 바로 웹 환경으로 전환하는 것은 쉬운 일은 아닙니다. 현재는 윈도우형 프로그램에서 웹으로의 패러다임 전환에 적응하는 시기이며 적응 과정에는 어려움이 따르기도 하지요. 하지만 고객사 분들이 보안적 측면, 중앙 집중식으로 관리하고 쉽게 배포하는 측면에서는 분명한 패러다임 전환이 필요합니다. 제조업계가 생각하는 패러다임 전환에 Wijmo나 MESCIUS 제품이 도움이 될 것입니다.

Q. 마지막으로 하고 싶은 이야기가 있다면?

Wijmo, 고객에게 최대의 가치를 이끌어 내는 원동력

국내 SI에서 그리드, 차트 기능을 추가하는 것은 비용과 리소스 측면에서 어려움이 많이 따르는 작업입니다. 비용을 고려하여 오픈소스 제품을 사용하면 기술 지원을 받기가 매우 어려운데요. 오픈 소스 커뮤니티에 있는 문제 해결 방법은 우리가 이미 알고 있는 낮은 수준의 지원이기 때문입니다.

MESCIUS 제품을 사용하며 느낀 가장 좋은 점은 높은 수준의 기술 지원이 매우 빠르게 이루어진다는 것입니다. 빠른 지원 서비스는 우리의 고객사에게로 이어져 비즈니스 민첩성을 한 층 업그레이드 시키는 중요한 계기가 되었지요. 고객사에서 기술 문제가 발생하는 즉시 그 문제를 해결할 수 있도록 MESCIUS가 즉각적인 지원에 나서고 있고, 이러한 점에서 MESCIUS를 다른 SI 기업에게도 추천하고 싶습니다.

About GROWTH

아마존 AWS S3 시스템과 완벽 호환되는 시스템을 국내 최초로 구축, 개발자를 위한 laaS, PaaS, BaaS등 다양항 오픈소스를 활용한 전문 개발 업체입니다.