인스웨이브시스템즈가 최근 자사의 HTML5 UI 플랫폼 “웹스퀘어5”의 Service Pack 1(SP1)을 선보였습니다.
2014년 출시 된 웹스퀘어5는 웹 표준 기반 UI 엔진과 다양한 UI 컴포넌트, 통합개발도구로 구성되어 한번의 개발로 PC와 모바일을 포함한 다양한 디바이스와 OS, Browser를 지원하고 쉽고 빠른 웹 표준 UX를 구축할 수 있도록 하는 UI 플랫폼입니다.
이번에 출시한 웹스퀘어5 SP1은 획기적인 개념의 새로운 개발 방식인 Promise Workflow를 추가하고 전면적으로 개선된 Script 개발 기능을 제공함으로써 개발자 관점의 편의성을 대폭 향상시켰습니다.
Promise Workflow기능은 HTML5에서 기본적으로 사용되는 비동기 통신(Async)으로 인해 발생하는 프로그램의 복잡성을 획기적으로 개선해 주는 기능입니다.
기존에는 복잡한 업무 화면을 개발하는 경우 대부분 서버에서 정보를 가져오거나 서버로 정보를 보내기 위한 다수의 비동기 통신을 동시에 호출하게 되는데 이때 개발자는 각각의 통신 결과를 받은 시점의 상황을 프로그램적으로 체크하여 적절한 콜백(Callback) 함수를 사용하여 컨트롤 하여야 합니다. 이러한 코딩방식은 비동기 함수 호출이나 이벤트 처리가 필요한 HTML5 UI 프로그램을 만드는 개발자에게 가장 어렵고 복잡한 작업이며 많은 개발 실수로 오류 및 성능 저하가 빈발하는 HTML5 프로그래밍의 늪으로 인식되어 왔습니다.
특히 기존의 X-Internet 제품 등을 통해 동기식 프로그램 방식에 익숙해져 있는 다수의 개발자들은 이러한 Event-driven 혹은 비동기 방식의 코딩에 적응하는데 많은 어려움을 겪고 있습니다.
웹스퀘어5 SP1에 새로 포함된 Promise Workflow는 이러한 복잡한 다수의 비동기 처리 로직을 직관적인 GUI 방식으로 간단하게 정의하고 적용할 수 있게 하여 주는 기능으로써 이 기능을 사용하면 업무처리의 복잡한 순서나 처리 조건을 GUI 기반의 워크플로우로 손쉽게 정의하고 개발자는 단순하게 비 동기 호출의 결과가 도착했을 때의 처리 로직만 구현하면 되어 개발의 복잡성을 획기적으로 개선할 수 있습니다.
실제 프로그램의 복잡도를 분석하는 소프트웨어 매트릭 분석 기법을 통한 비교 시 이 기능을 사용한 경우 200~300%의 개선 효과를 보이고 있습니다.
또한 이 기능은 기존의 복잡한 콜백 처리 기능을 구현하면서 겪었던 프로그래밍의 복잡함을 줄여주는 것뿐 만 아니라 복잡한 업무 처리 로직으로 발생할 수 있는 코딩 오류 및 성능 저하를 제거하여 응답 속도를 최적화 해주는 성능 튜닝 효과도 제공합니다.
이외에도 웹스퀘어5 SP1에서는 HTML 및 XML 요소와 Javascript 영역을 분리하여 소스 코드 가독성 향상시켰으며 업무 Script간의 손쉬운 Navigation 및 Script 검색 기능, 화면 디자인과 코딩을 동시에 진행할 수 있는 Dual Editing 기능, 공통 업무처리 모듈(예를 들어 common.js 등)를 사용하는 코딩 시 필요한 자동 완성 기능 등이 새롭게 포함된 Script 창을 제공하여 더욱 강화된 사용자 편의성과 개발 생산성을 기대할 수 있게 되었습니다.
| 1. Promise Workflow 기능 | |
|---|---|
 |
웹스퀘어5 SP1의 강력한 특징인 Promise Workflow는 HTML5 개발에서 사용되는 비동기 통신(Async)으로 인해 발생하는 프로그래밍의 복잡성과 성능 문제를 직관적인 GUI 방식으로 단순화하여 HTML5 성능 튜닝을 보다 쉽게 진행할 수 있도록 개발 생산성과 편의성을 획기적으로 개선시킨 기능이다.
|
| 2. Dual Editing 기능 | |
|---|---|
 |
웹스퀘어5 SP1에 추가된 Dual Editing 기능은 한 파일에 대하여 두 개의 편집기로 작업할 수 있도록 두 개의 편집기를 제공함으로써 개발자는 화면 디자인과 코딩을 동시에 진행할 수 있어 기존 보다 더욱 높아진 개발 생산성과 편의성을 기대할 수 있다. |
| 3. Script Navigation 기능 | |
|---|---|
 |
웹스퀘어 소스의 손쉬운 검색 및 이동을 지원하는 Script Navigation 기능이 탑재되었다. 또한 이클립스 JSDT를 이용한 코드 자동완성 기능의 강화로 웹스퀘어 API는 물론 공통 자바스크립트의 코드자동완성을 지원한다. |
| 4.ID 자동 채번 설정 기능 | |
|---|---|
 |
웹스퀘어 스튜디오에서 컴포넌트를 그릴 때 ID 자동 채번 기능을 지원한다. 또한 ID 자동 채번 기능에서 On/Off 설정이 가능하며, 단축 메뉴를 통한 강제 ID 채번 기능도 제공한다. |
| 5.신규 Event 개발방식 | |
|---|---|
 |
복잡한 화면 개발시 높은 생산성을 보장할 수 있도록 이벤트 처리를 위해서 자동 생성되는 소스의 가독성을 개선하였다. Submission Event도 간단한 방법으로 생성시킬 수 있다.
|
그 외에 이번 웹스퀘어5 SP1에서는 UDC를 개발하기 위한 전용 편집기를 지원합니다. 또한 UDC Wizard의 방향키, 탭, 복사(Ctrl+C), 붙여넣기(Ctrl+V)와 같은 키보드 제어 기능이 강화되어 UDC의 개발 및 배포 편의성이 향상됨음 물론, instance, submission, data collection, script, style 노드 정보가 컴포넌트 뷰에서 표시되도록 기능을 강화하였습니다.. 다양한 정보는계층적(Hierarchy)으로 보여주고 편집기와의 연동도 지원하여 개발 편의성을 한층 개선하였습니다.
웹스퀘어5는 이미 금융, 공공, 유통, 서비스, 통신, 교육, 의료기관 등 다양한 산업군의 HTML5 웹 표준 구축 프로젝트의 UI 툴로 채택되어 뛰어난 편의성과 개발 생산성으로 호평을 받고 있습니다.
인스웨이브시스템즈는 강력하고 편리한 기능을 탑재한 진일보한 웹스퀘어5 SP1이 기존 고객은 물론 다양한 신규 고객의 니즈를 만족시키고 웹 표준의 대표 주자로서 시장을 리드할 것으로 기대하고 있습니다.
