[아이티데일리] 오늘날 웹 기반 시스템들은 보다 다양한 디바이스와 플랫폼을 지원해야한다는 과제에 직면해있다. 과거의 웹이 소비자가 콘텐츠를 소비하는 보조적인 경로로 활용됐다면, 기업들의 비즈니스 환경이 온라인으로 옮겨가면서 웹은 콘텐츠를 생산하고 유통시키는 핵심적인 역할을 수행하고 있다. 고객에게 제공되는 상품과 재화, 기업의 비즈니스 관리 체계나 업무 프로세스가 모두 웹 기반으로 디지털화되면서 웹 시스템들의 중요성과 영향력은 더욱 높아지고 있다.

이에 따라 웹 시스템을 구축하기 위한 개발도구에도 관심이 집중되고 있다. 웹 시스템의 역할이 다양해짐에 따라 웹 개발도구는 멀티미디어나 온라인 콘텐츠‧문서들과의 연결은 물론, 다양한 외부 장치들과의 연결을 관리할 수 있는 허브 역할을 수행해야 한다. 또한 복잡한 시스템을 빠르고 효율적으로 개발하면서도 웹에 집중되는 대용량 트래픽들을 빠르고 안정적으로 처리할 수 있는 성능이 요구된다.

인스웨이브시스템즈의 ‘웹스퀘어5 서비스팩5(WebSquare5 SP5)’는 디지털 트랜스포메이션 트렌드에 적합한 HTML5 기반 엔터프라이즈 UI 플랫폼이다. 오픈 아키텍처로 다양한 오픈/상용 라이브러리와의 손쉬운 연계를 지원하고, 대다수 웹 애플리케이션 서버(WAS)와 프레임워크, OS 등을 지원해 어떠한 환경에서도 개발이 가능하다.

특히 웹, 모바일, 웨어러블 디바이스, 네이티브 앱 등 모든 개발 환경에 대한 요구를 통합 지원하는 다중 경험 개발 플랫폼(MXDP, MultieXperience Development Platforms)을 지향해 OSMU(One Source Multi Use)가 가능한 높은 개발 생산성을 자랑한다. 반응형 웹 컴포넌트(Responsive Web Component)는 가변적인 그리드, 이미지, 미디어쿼리 등을 기반으로 어떠한 디바이스에서도 웹 아이덴티티(Web Identity)를 동일하게 유지할 수 있다. 여기에 반응형 웹 기술만으로는 구현하기 어려운 테이블, 그리드 등의 컴포넌트에도 OSMU를 지원할 수 있도록 최적화된 적응형 웹 컴포넌트(Adaptive Web Component) 기술도 갖췄다.

모놀리식(Monolithic) UI 대체하는 마이크로 프론트엔드 아키텍처

‘웹스퀘어5’는 올해 서비스팩5로 업데이트되면서 마이크로 프론트엔드 아키텍처(Micro Frontend Architecture)를 지원할 수 있게 됐다. 이는 애플리케이션을 서비스 단위로 잘게 쪼개어 개발하는 마이크로 서비스 아키텍처(MSA, Micro Service Architecture)를 프론트엔드 레이어에 적용하는 것을 의미한다. MSA가 기존의 무겁고 복잡하며 유지보수도 어려운 모놀리식 아키텍처의 대안으로 제시된 것처럼, 마이크로 프론트엔드 역시 크고 무거운 모놀리식 UI의 대안으로 제시됐다. 전체 화면을 개별적으로 작동할 수 있는 단위로 나누어 개발한 후 통합해 제공함으로써 보다 민첩하고 현대적인 UI 개발과 관리가 가능하다.

‘웹스퀘어5’의 마이크로 프론트엔드 아키텍처는 MSA로 구성된 기업 내 다양한 업무 시스템에서 필요한 리소스를 가져와 화면을 구성하는 크로스 MSA 리소스 셰어링(Cross MSA Resource Sharing)을 지원한다. 이를 통해 복잡하게 구성된 사내 MSA에서 원하는 정보들을 찾고 간편하게 하나의 화면 안에 표시할 수 있다. 특히 서로 다른 서버의 정보로 구현한 UI들이 서로 직접적인 영향을 미치지 않도록, 별도의 MSA 메시지 브로커를 마련해 통신하도록 함으로써 UI 구성요소 간의 종속성을 최소화했다.

또한 UI 개발 프로젝트의 진행 프로세스에 맞춰서 UI 기획자와 공통 개발자, 업무 개발자의 역할에 따라 수행해야 할 태스크를 웹스퀘어5의 스튜디오를 통해서 소통하며 개발할 수 있도록 하는데 초점을 맞췄다.

그리하여 프로젝트 템플릿, 레이아웃 매니저(개발 생산성 향상을 위해 컴포넌트 단위로 화면에 배치), 페이지 템플릿, 디자인 시스템(디자인 일관성 유지를 위한 디자인 시스템) 등의 개발 도구 기능을 대폭 강화하였다.

풍부한 컴포넌트 제공해 개발 생산성 향상

‘웹스퀘어5’는 개발 생산성 향상을 위한 기능도 대거 갖췄다.

먼저 기본 제공되는 80여 종의 UI 컴포넌트들이 개발 생산성을 높인다. 점점 더 복잡해져가는 웹 UI 개발 환경에서 자주 사용되는 캘린더, 탭, 트리, MDI와 같이 다양한 UI 컴포넌트를 풍부하게 제공된다. 기본적인 그리드 컴포넌트부터 데이터 분석과 표현을 위한 피봇, 사용자가 개인화된 화면(Personalized UI)를 구현하도록 돕는 위젯 등 개발 생산성과 UX를 개선할 수 있는 컴포넌트들을 갖추고 있다.

또한 사용자 정의 컴포넌트(UDC, User Defined Component)는 개발자가 다양한 컴포넌트들을 직접 제작해 활용하게 도움으로써 개발 생산성과 확장성을 크게 향상시킨다. 기존에 사용하던 컴포넌트를 상속 또는 조합해 새로운 컴포넌트로 제작하는 것은 물론, 외부 라이브러리를 사용해 작성한 컴포넌트를 ‘웹스퀘어5’ 컴포넌트처럼 사용할 수 있도록 지원한다. 또한 상용 라이브러리를 이용한 차트 컴포넌트를 랩핑(wrapping)해 ‘웹스퀘어5’ 컴포넌트로 등록 및 사용하는 것도 가능하다. 이렇게 제작한 UDC들은 공통 컴포넌트로 활용할 경우 각 프로그램에 임베디드해 사용하는 방식이기 때문에, 수정 시 모든 프로그램에 일괄 반영되므로 개발 생산성이나 유지보수 효율성이 향상된다.

SPA로 트래픽 줄이면서도 성능 개선

기존 웹 개발에 사용되던 아이프레임(Iframe, HTML Inline Frame) 방식은 다른 HTML 페이지를 현재 페이지에 추가하는 방식이다. 하나의 웹페이지 안에 다른 페이지를 제한없이 삽입할 수 있어 편리하게 사용 가능하다. 하지만 복수의 탭 구조로 웹페이지를 만들면 브라우저 생성이나 리소스 로딩을 각각의 탭마다 실행해야 하기 때문에 로딩에 부하가 걸리고 많은 시간이 소요된다. 표시하는 화면의 수에 비례해 브라우저 사용 메모리가 증가하므로 메모리 누수(leak)에 의한 장애가 발생할 수도 있다.

‘웹스퀘어5’에는 기존 아이프레임과 다른 더블유프레임(Wframe)이 적용됐다. 더블유프레임은 웹페이지 전체를 하나의 페이지(Single Page)로 구현할 수 있도록 돕는다. 모델이나 뷰, 컨트롤 등을 포함하는 독립적인 업무 화면이나 단위 모듈로 기능하며, UI 개발의 기본 단위가 될 수 있는 속성‧이벤트‧메소드 등이 정의돼있다.

기존의 아이프레임은 브라우저 로딩으로 인한 메모리 부하가 컸지만, 더블유프레임 기반의 싱글 페이지 애플리케이션(SPA, Single Page Application)으로 대체함으로써 메모리 부하를 줄이고 전반적인 성능 향상을 기대할 수 있다. SPA는 웹페이지가 로드된 이후 갱신할 때 페이지 전체를 서버에 요청하고 반영하는 대신, 구조화된 페이지에서 변경된 항목만 갱신함으로써 메모리와 서버 트래픽의 부하를 줄인다. 브라우저 창 생성부터 공통 리소스를 로딩하는 일련의 과정을 최초 1회만 실행함으로써, 웹페이지 로딩 속도를 높이고 향상된 사용자 경험(UX)을 제공한다.

웹스퀘어5는 생산성 향상을 통해 비용을 절감하고, 신뢰할 수 있는 성능을 제공한다. 오픈소스 개발 대비 40% 가량의 공수를 절감하고, 여러 프레임워크와의 연계, 표준화된 80여개의 컴포넌트, 6400여개의 API를 통해 반복 개발의 낭비를 제거할 수 있다. 또한 OSMU 지원으로 여러 디바이스의 중복 개발을 최소화할 수 있다. 개발 생산성 향상으로 사용자 입장에서의 빠른 속도, 관리자 관점의 안정적인 운영 시스템을 통해 비용 절감과 신뢰할 수 있는 성능을 제공한다.