[컴퓨터월드] Active X와 공인인증서등으로 많은 이슈를 불러일으키고 있는 국내 인터넷 환경에서 이를 대체할 수 있는 다양한 기술과 제품들이 대두되고 있는 가운데, 최근 인터넷 웹 표준 시장을 주도 하고 있는 인스웨이브시스템즈가 HTML5 UI 플랫폼 ‘웹스퀘어5’의 첫 번째 서비스팩1(SP1)을 선보였다.

2014년 출시 된 웹스퀘어5는 웹 표준 기반 UI 엔진과 다양한 UI 컴포넌트, 통합개발도구로 구성되어 한번의 개발로 PC와 모바일을 포함한 다양한 디바이스와 OS, 브라우저를 지원하고 쉽고 빠른 웹 표준 UX를 구축할 수 있도록 하는 전문 UI 플랫폼이다.

대폭적인 신기능 추가와 성능 개선으로 더욱 진보한 웹스퀘어5 SP1은 획기적인 개념의 새로운 개발 방식인 Promise Workflow를 추가하고 전면적으로 개선된 스크립트 개발 기능을 제공함으로써 개발자 관점의 편의성을 대폭 향상시켰다.

Promise Workflow 기능으로 HTML5 비동기 방식의 코딩 쉽게 개발

Promise Workflow기능은 HTML5에서 기본적으로 사용되는 비동기 통신(Async)으로 인해 발생하는 프로그램의 복잡성을 획기적으로 개선해 주는 기능이다.

기존에는 복잡한 업무 화면을 개발하는 경우 대부분 서버에서 정보를 가져오거나 서버로 정보를 보내기 위한 다수의 비동기 통신을 동시에 호출하게 되는데 이때 개발자는 각각의 통신 결과를 받은 시점의 상황을 프로그램적으로 체크해 적절한 콜백(Callback) 함수를 사용하여 컨트롤 해야만 했다.

이러한 코딩방식은 비동기 함수 호출이나 이벤트 처리가 필요한 HTML5 UI 프로그램을 만드는 개발자에게 가장 어렵고 복잡한 작업이며 많은 개발 실수로 오류 및 성능 저하가 빈발하는 HTML5 프로그래밍의 늪으로 인식되어 왔다.특히 기존의 X-Internet 제품 등을 통해 동기식 프로그램 방식에 익숙해져 있는 다수의 개발자들은 이러한 Event-driven 혹은 비동기 방식의 코딩에 적응하는데 많은 어려움을 겪었던 게 사실이다.

그러나 웹스퀘어5 SP1에 새로 포함된 Promise Workflow는 이러한 복잡한 다수의 비동기 처리 로직을 직관적인 GUI 방식으로 간단하게 정의하고 적용할 수 있게 해준다. 이 기능을 사용하면 업무처리의 복잡한 순서나 처리 조건을 GUI 기반의 워크플로우로 손쉽게 정의하고 개발자는 단순하게 비동기 호출의 결과가 도착했을 때의 처리 로직만 구현하면 돼 개발의 복잡성을 획기적으로 개선할 수 있다. 실제 프로그램의 복잡도를 분석하는 소프트웨어 매트릭 분석 기법을 통한 비교 시 이 기능을 사용한 경우 200~300%의 개선 효과를 보인 것으로 나타났다.

HTML5 프로그래밍의 복잡함 대폭 개선

또한 이 기능은 기존의 복잡한 콜백 처리 기능을 구현하면서 겪었던 프로그래밍의 복잡함을 줄여주는 것뿐만 아니라 복잡한 업무 처리 로직으로 발생할 수 있는 코딩 오류 및 성능 저하를 제거해 응답 속도를 최적화 해주는 성능 튜닝 효과도 제공한다.

이외에도 웹스퀘어5 SP1에서는 HTML 및 XML 요소와 Java Script 영역을 분리해 소스 코드 가독성을 향상시켰으며 업무 Script간의 손쉬운 Navigation 및 Script 검색 기능, 화면 디자인과 코딩을 동시에 진행할 수 있는 Dual Editing 기능, 공통 업무처리 모듈(예를 들어 common.js 등)를 사용하는 코딩 시 필요한 자동 완성 기능 등이 새롭게 포함된 Script 창을 제공하여 더욱 강화된 사용자 편의성과 개발 생산성을 기대할 수 있게 되었다.

웹스퀘어5 SP1의 새로운 기능에 대하여 자세히 알아보자.

WebSquare5 SP1 New Functions

1. 신규 Script 개발지원기능

Script Navigation 기능
웹 퍼블리셔나 개발자가 화면을 디자인하고 나면 Java Script를 이용해 비즈니스 로직을 개발하게 된다. 비즈니스 로직은 공통 업무처리 함수부터 유틸성 함수까지 수 많은 Java Script 함수를 이용하여 코딩하게 되는데 Script Navigation은 실시간으로 Java Script를 파싱하여 변수와 함수 리스트를 보여준다. 리스트에서 마우스 클릭 또는 키보드 방향키로 쉽게 함수의 소스 코드 위치로 이동할 수 있는 기능을 제공하고 있다.

Code Assist 강화
웹스퀘어5는 웹스퀘어가 제공하는 API에 대해 코드 자동완성 기능을 지원하고 있다. SP1부터는 코드 자동완성 기능이 확대되어 프로젝트에서 사용되는 공통 함수들까지 코드 자동완성 기능을 지원한다. 스튜디오에서 개발자가 개발 완료 또는 개발중인 API들에 대해 코드 자동완성 기능을 제공하기 위해서는 개발자와 스튜디오가 인지할 수 있는 주석 스펙을 필요로 하게 된다.

SP1에서는 표준 Java Script 주석인 JSDoc 스펙을 따르고 있으며 API를 제공하는 개발자는 JSDoc의 주석 Template을 단축키를 통해 간단하게 생성하는 기능을 제공하고 있다.

2. 신규 Event 개발방식

기존의 웹스퀘어5는 화면에 컴포넌트가 처리해야 할 Event 코드를 컴포넌트 자신의 자식 노드로 Java Script 로직을 가질 수 있는 XForms 스펙을 따르고 있다.

실제 프로젝트에서는 Java Script를 모듈화 하고 공통화하여 재사용성을 높이고 화면 또한 복잡한 경우가 많다. 이러한 프로젝트의 소스코드를 열어보면 무수히 많은 컴포넌트 사이사이마다 Java Script Event 코드가 삽입되어 있어 Script 코드의 가독성이 떨어지고 수정이 어려워지는 단점이 발생되어 왔다.

아래와 같이 두 개의 버튼(Trigger)에 onclick 이벤트가 Java Script 함수를 재사용하여 코딩하고 있을 때 개발자가 버튼의 이벤트 처리 로직을 확인하기 위해서는 함수가 선언되어 있는 전역 스크립트 영역을 수시로 확인해야 한다.

SP1에서는 위와 같은 문제를 개선하기 위해 inline event방식의 Event 처리를 지원하여 전역 스크립트 영역에서 이벤트 함수를 포함한 애플리케이션의 모든 함수를 통합하여 개발 및 관리할 수 있게 되었다.

위의 코드와 같이 스튜디오에서 Event를 추가하게 되면 컴포넌트의 Property로 event 함수명이 입력되고 전역 스크립트 영역에 해당 함수가 생성되게 된다.

기존 Event 개발 방식이 적합한 경우 설정을 통해 Event 개발방식을 바꿀 수 있으며 기존 소스 코드를 새로운 Event 형식으로 변환하는 기능도 부가 기능으로 제공하고 있다. 단, 변환기능을 통해 변환된 코드에 대해서는 테스트를 통한 검증작업이 필요하다.

3. UDC(User Define Component) 개발 기능 개선

UDC(User Define Component)는 웹스퀘어 Component와 동일한 수준의 사용자 정의 컴포넌트를 말한다. 개발자는 스튜디오의 UDC Wizard를 통해 UDC를 제작하여 배포하게 된다.

사용자(개발자)들이 배포된 UDC를 스튜디오에 등록하게 되면 UDC View에 UDC가 아이콘으로 등록되어 기본으로 제공되는 웹스퀘어 컴포넌트와 동일한 방식으로 화면을 그릴 수 있다.

또한 UDC에서 공개한 프로퍼티를 입력하는 방식, 이벤트를 사용자가 추가하는 방식, UDC의 API 자동 완성 기능 모두 웹스퀘어 Component와 동일한 수준으로 사용자(개발자)가 편리하게 개발할 수 있도록 지원한다.
웹스퀘어5 SP1에서는 개발자가 UDC를 제작함에 있어 보다 편리한 기능을 추가로 제공한다.

UDC XML을 WebSquare XML과 분리하여 관리
기존버전에서 UDC XML과 WebSquare XML이 동일해 어떤 소스 파일이 UDC를 정의한 소스이고 UDC를 사용하는 소스 파일인지 구분이 어려웠다. SP1에서는 UDC와 WebSquare XML은 아이콘부터 다르게 표현되며 디자인 탭의 색상도 구분되어 개발 관리될 수 있도록 지원한다.

UDC Wizard 기능 개선
UDC를 제작/배포하는 개발자는 UDC에서 공개할 Property, Event, API를 쉽고 빠르게 정의할 수 있어야 한다. SP1의 UDC에서는 Wizard내의 그리드 편집을 키보드 방향키 및 스페이스키 편집/엔터키 적용모드, Ctrl + C/Ctrl +V 등과 같이 빠른 편집 기능이 추가되었다. 또한 공개한 정보들을 바탕으로 UDC Java Script 함수를 템플릿으로 생성하는 기능도 제공한다.

4. ID 자동 채번 설정 기능

웹스퀘어 스튜디오에서 컴포넌트를 그릴 때 ID 자동 채번 기능을 지원한다. 또한 ID 자동 채번 기능에서 On/Off 설정이 가능하며, 단축메뉴를 통한 강제 ID 채번 기능도 제공한다.

5. Component View Head의 Navigator 기능

SP1에서는 Component View의 instance, submission, data collection, script, style 노드 정보가 컴포넌트 뷰에서 표시되도록 기능을 강화했다. 다양한 정보를 계층적(Hierarchy)으로 보여주고, 편집기와의 연동도 지원하여 개발 편의성을 한층 개선했다.

6. Promise Workflow 기능

웹스퀘어5 SP1의 강력한 특징인 Promise Workflow는 HTML5 개발에서 사용되는 비동기 통신(Async)으로 인해 발생하는 프로그래밍의 복잡성과 성능 문제를 직관적인 GUI 방식으로 단순화하여 HTML5 성능 튜닝을 보다 쉽게 진행할 수 있도록 개발 생산성과 편의성을 획기적으로 개선시킨 기능이다.

직관적인 GUI 방식으로 복작한 비동기 처리로직을 쉽게 이해
X-인터넷 동기식 프로그램에 익숙해져 있는 개발자들의 고충을 해결하고 편의성을 높이기 위한 프로미스 워크플로우 기능은 복잡한 다수의 비동기 처리 로직을 직관적인 GUI 방식으로 간단하게 정의하고 적용할 수 있도록 했다.

업무처리의 복잡한 순서나 처리 조건을 GUI 기반의 워크 플로우로 손쉽게 정의하고 개발자는 단순하게 비동기 호출의 결과가 도착했을 때 처리 로직만 간단히 구현하면 되는 것으로 개발 복잡성을 줄일 수 있다.

복잡한 프로그래밍에서 오는 개발 오류 및 성능 저하 개선
실제 프로그램의 복잡도를 분석하는 소프트웨어 매트릭 분석 기법을 통해 동일한 업무 프로그램 하나를 프라미스 워크플로우, Ajax Sync, Ajax Async 방식으로 적용하여 비교해 보았다. 프라미스 워크플로우가 코드 복잡도에서 Ajax Async에 비해 200%이상 개선되었으며, 수행속도는 Ajax Sync방식에 비해 233.16%가 개선된 것을 확인할 수 있다.

7. Dual Editing

SP1에 추가된 Dual Editing 기능은 한 파일에 대해 두 개 편집기로 작업할 수 있도록 지원한다.

Dual Editing 기능을 이용하면 한 파일을 두 개의 에디터로 좌우 또는 상하 분할해 배치하고 한쪽은 디자인 탭, 다른 한쪽은 스크립트 탭으로 구성하여 개발할 수 있다. 화면(디자인) 개발 완료 후 Java Script로 각종 컴포넌트를 제어하는 코드를 작성할 때 컴포넌트들의 위치와 ID를 확인하면서 개발을 진행 할 수 있다.

2015년 국내 웹 표준 시장 대표
주자 웹스퀘어5는 이미 금융, 공공, 유통, 서비스, 통신, 교육, 의료기관 등 다양한 산업군의 HTML5 웹 표준 구축 프로젝트의 UI 툴로 채택돼 뛰어난 사용자 편의성과 개발 생산성으로 개발자와 고객들로부터 호평을 받고 있다.

2015년 새롭고 강력한 신기능 탑재로 뛰어난 성능 개선과 사용자 중심의 편리성을 제공하고 있는 진일보한 웹스퀘어5 Service Pack1은 기존 고객은 물론 다양한 신규 고객의 요구를 만족시키고 웹 표준의 대표 주자로서 시장을 주도할 것으로 기대되고 있다.