HTML5기반으로 가상 DOM기술 이용

[컴퓨터월드] 모든 프로젝트의 성공포인트는 생각보다 단순하다. 비용은 적게 들고 가치를 많이 얻을 수 있는 것, 즉 부가가치를 높이는데 있다. 우리가 생산성 높은 개발 툴을 찾는 이유도 여기에 있다. 개발 툴은 프로젝트의 성공을 돕기 위한 중심 도구로서 역할을 한다. 토마토시스템은 이 목표를 달성하기 위해 수많은 경험과 실패를 거듭해왔으며 지난 10여 년간 환경적 변화와 함께 변화하고 발전해왔다.

2004년 개발된 액티브X(ActiveX)기술 기반의 ‘익스트림빌더(eXtreambuilder)’는 시대가 변하면서 자연적으로 도태됐으며, 2007년 DHTML과 에이잭스(Ajax)기반의 ‘엑스리아(eXria)’는 전통 브라우저와 최신 브라우저 사이에서 오는 기준의 혼란과 그에 따른 성능상의 이슈들로 실패하게 됐다.

2015년에는 DOM의 접근 수를 최소화하기 위해 캔버스(Canvas) 엘리먼트 하나만 이용, HTML5 기반의 ‘엑스빌더5(eXbuilder5)’가 개발됐다. 이 제품은 이전의 성능적 이슈는 해결했지만, HTML5 가 놀라운 속도로 발전하면서 HTML5나 CSS3의 장점을 상속받지 못하는 문제점이 발생됐다.

▲ UI 개발도구의 발전

토마토시스템은 전체적인 구조 개선을 위해 이전 버전들과는 완전히 다른 새로운 제품을 선보였다. 앞서 설명한 모든 UI의 경험을 자산화 하고 HTML5기반과 가상(Virtual) DOM기술을 이용해 2년간의 연구개발 끝에 ‘엑스빌더6(eXbuilder6)’를 개발했다.

무결성 보증을 위해 요구사항 수집단계부터 개발팀 규모의 2배 이상의 테스트팀을 구성, 블랙박스 테스트 및 시나리오 테스트를 수행했으며, 실제 사용성이 얼마나 뛰어난 지 지속적으로 확인하기 위한 파일럿 프로젝트도 동시에 진행하는 등 제품에 완벽을 기했다.

‘엑스빌더6’는 이론적으로만 좋은 툴이 아니라, 어떻게 하면 일의 능률을 높이고, 어떻게 해야 개발시간을 단축시킬 수 있을지에 가치를 두고 출발했다. 또한 ‘개발자가 찾는 바로 그 제품’을 만들기 위해 오직 제품개발에만 집중했다.


‘엑스빌더6’의 기본 컨셉
이보다 쉬울 순 없다! 소스의 투명성
자기가 개발한 어플리케이션이 왜, 그리고 어떻게 작동되는지 알아야 잘못된 개발자의 관습을 피해 갈 수 있다. ‘엑스빌더6’는 숨겨진 스펙없이 투명하게 모든 걸 공개한다. 전과정이 투명하게 공개되기 때문에 개발자는 컴파일 된 코드 어디에서나 디버깅 포인트를 걸고 확인할 수 있다.

위지윅(WYSIWYG)하게 디자인된 화면은 자바스크립트 코드로 즉시 컴파일이 되며 개발자는 이 코드를 통해 API를 쉽게 학습할 수 있다. 모든 UI구성이 어떤 과정을 통해 제작 컴파일 되는지, 전 과정 산출물을 모두 투명하게 확인할 수 있는 것이다.

실시간 컴파일을 하지 않는 솔루션의 경우, 각각의 로직에 대해 개발자가 그 내부를 알 수가 없고, 의도 하지 않게 만들어진 경우 디버깅할 방법도 없다. 불투명한데서 오는 오류라고 할 수 있다.

▲ 소스의 투명성

하나를 보면 열을 알 수 있는, 대칭성
‘엑스빌더6’는 대칭성에 중요한 가치를 두고 개발됐다. 하나를 보면 열을 알 수 있는, 상식적인 상황에서 생각하는 대로 프로그램을 작성할 수 있게 해준다. 특정 고객의 무조건적인 요구사항에 따라 기능을 추가하면 이러한 대칭성이나 추상화레벨이 유실되거나 그 수준이 쉽게 깨지게 된다.

‘엑스빌더6’는 대칭성을 지키기 위해 모델 드라이븐 아키텍처(Model Driven Architecture)를 이용, 전반적으로 일치성을 갖도록 개발되었다.

우선 요구사항이 들어오면 API의 타당성을 검증하게 되고, 타당성이 유효하면 대칭성을 깨지않는 범위에서 반영한다. 만약 요구사항이 대칭성을 깨트리는데도 불구하고 꼭 실현해야 할 경우 UDC를 이용, 프로젝트 자산을 쉽게 사용할 수 있는 매커니즘을 통해 그 프로젝트에 특화된 컨트롤을 직접 만들어 공급할 수 있다.

또한 컨트롤 이외의 전역적인 정책들에 대응하기 위한 확장점을 제공하고 있으며 프로젝트 단위의 파편화를 방지할 수 있고 미래 신뢰성을 확보할 수도 있다. 이렇듯 ‘엑스빌더6’는 고객의 요구사항에 대한 부분을 UDC와 다양한 확장점으로 해결했다.


빠르고 정확한, 고응답성
고응답성은 개발자가 일으킨 변경에 대해 가능한 한 빠르게 그 결과를 확인할 수 있는 특징을 말한다. ‘엑스빌더6’는 다음과 같은 방안들로 고응답성을 달성했다.

빠른 실패(Fast Fail)
코드에 문제가 있는 경우, 최대한 빨리 그 사실을 개발자에게 알려, 다른 코드를 오염시키는 것을 사전에 방지한다. 잘못된 코드는 점차 더 많은 코드를 오염시키고 전혀 엉뚱한 곳에서 오류 현상이 발견되기 때문이다. ‘엑스빌더6’는 계약중심의 설계로 실제 에러가 발생한 즉시 그 원인을 개발자에게 알려준다.

라이브렌더링
‘엑스빌더6’는 편집기 내에서 이미지나 색상 등 퍼블리싱에 필요한 자산을 빠른 속도로 검색 하고 선택할 수 있으며, 커서를 이동해 속성을 지정하기 전에 미리 보기가 적용된다.
큰 프로젝트에서는 디자인 팀이 별도로 지원되기 때문에 색상 값이 무엇인지, 어떤 이미지를 사용해야 하는지 개발자들은 전혀 신경 쓸 필요가 없다. 하지만 현실의 IT 환경은 그렇지 못한 곳이 대다수이며 개발자가 이러한 부분까지 신경을 써서 생산성을 향상시키는 것은 당연한 현실로 받아들여진다.
‘엑스빌더6’는 개발하면서 번거롭게 시간을 낭비하는 요소, 즉 서버를 재실행하거나 브라우저를 띄우는 시간을 줄여준다. 결과물을 바로 확인할 수 있어 수백 수천 개의 화면을 개발할 때 효율성을 높일 수 있다. 이 기능이야 말로 개발자들의 편의성에 집중된 기능이라고 말할 수 있다.

▲ 라이브랜더링

팀 에코 시스템
‘엑스빌더6’는 공통화와 표준화 지원을 위해 강력한 개발 방법과 설정을 지원한다. 공통담당자에 의해 개발 설정된 공통 컴포넌트와 표준 정책은 형상관리 서버를 통해 프로젝트 참여자에게 배포되고 손쉽게 프로젝트 표준 적용이 가능하다.
‘엑스빌더6’는 재사용 가능한 공유 앱 및 프로젝트에서 직접 컨트롤을 정의할 수 있는 UDC 를 TA가 개발하고 팀에 공급한다. 이 모든 과정은 스튜디오의 GUI과정을 통해 지원되며, 팀 자산의 생성부터 소비에 이르기 까지 군더더기 없는 빠른 협업을 가능하게 해준다.

▲ 소스의 투명성

잡음없이 빠르고 쉽게, 저소음성
일반적으로 솔루션 업체들은 자사 제품은 모든 기능을 갖고 있다고 얘기한다. 그러나 되는 게 중요한 게 아니라 어떻게 해야 잡음 없이 빠르고 쉽게 가능한지가 더욱 중요하다.

지능형 세만틱 콘텐트 어시스트
대부분의 콘텐트 어시스트는 단순히 문법이나 API 구조를 바탕으로 제안되지만 ‘엑스빌더6’는 문법은 물론, API의 의도, 문맥, 공통 모듈과 UDC등을 종합적으로 고려해 개발자의 의도를 파악, 의미 있는 참조를 제공한다.

특히 공통모듈 리스트 및 API의 추천은 공통을 필수로 사용하는 프로젝트에서 매우 유용하게 사용할 수 있으며, 내가 만든 컨트롤의 ID와 API까지도 추천해 개발을 편리하게 할 수 있다.

패스트 애셋 억세스(Fast Asset Access)
개발도중 유형별로 빠른 자산을 선택하는 경우, 예를 들어 이미지, 스타일, 컬럼 등을 찾을 때 자주 사용하는 빈도, 최근 사용기록 등을 바탕으로 재빠르게 자산을 선택할 수 있다.

▲ 타입추론엔진 Semantics Content Assistant & Fast Asset Access


‘엑스빌더6’의 가치
말이 필요 없는 성능, 가상 DOM으로 해결!
시스템 구축이 마무리되면 성능테스트를 하게 된다. 초기에는 별 문제없이 성능테스트를 통과하지만 세월과 함께 축적되는 거대한 데이터는 화면을 멈추게 하거나 초 단위를 넘어 분단위로 넘어가는 등 느려지는 안타까운 상황이 발생하게 된다.

‘엑스빌더6’는 가상 DOM 아키텍처를 이용해 꼭 필요한 최적의 DOM 변경사항을 계산한 후, 실제 변경된 부분만 DOM에 반영한다. 변경된 부분만 반영되기 때문에 모델이나 데이터의 복잡도, 데이터의 양에 구애 받지 않고 높은 퍼포먼스를 제공하는 것이다.

가상 DOM은 순수 자바스크립트 객체를 이용해서 만들어진 DOM을 흉내내는 JSON객체이며 가짜 DOM이라고 할 수 있다. 1,000개만 만들어도 브라우저 멈춤 현상이 일어나는 실제 DOM객체와는 달리 제이슨(JSON)객체는 수십만 개를 만들어도 몇 밀리 초 이내에 작업을 끝내 버린다.

BMT 시 기존 제품들과는 달리 10만, 20만 건 기초단위 테스트만 봐도 ‘엑스빌더6’가 얼마나 빠른 지 알 수 있으며 시원하고 매끄럽게 스크롤되고 렌더링 하는 모습을 확인할 수 있다.

▲ 렌더링

UI의 생명, 높은 생산성
경험 중시: 이클립스 통합성
‘엑스빌더6’는 이클립스에 플러그인 돼 있다. 이클립스에서 서버 로직, SQL, 화면 디자인까지 편하고 빠르게 개발할 수 있다.

솔루션은 기존 관습과 경험과 이질성 없이 쉽게 배울 수 있어야 한다. 이미 이클립스 사용자는 ‘엑스빌더6’를 친숙하게 이용할 수 있으며 기타 대부분의 기능들은 이클립스의 전통적인 방식을 따르고 있으므로 도구를 새로 배우는데 시간을 들일 필요가 없다.

풀 위지윅 & 폼 레이아웃: 아무리 복잡한 화면도 위지윅으로
비지니스 서식을 위한 디자인 작업은 매우 힘들고 많은 시간이 허비된다. 구분선을 배치하고 스타일 속성을 지정하는 것은 매우 비생산적이고 어려운 일이다.

‘엑스빌더6’는 이러한 복잡한 서식을 간단하게 만들 수 있는 폼 레이아웃이나 프리 폼 레이아웃 등의 강력한 기능을 지원하고, 마우스 클릭만으로 원하는 대로 구성할 수 있는 위지윅 인터페이스를 제공한다. 실제 비지니스 폼 서식 작성에 기존대비 30배 이상의 시간을 단축시키며, 이는 프로젝트의 가치로 직결된다.

▲ 이클립스 통합성 및 풀 위지윅

모듈 국소성
개발자들이 협업을 하게 되면 똑 같은 함수나 변수를 선언하여 충돌이 나기도 한다. ‘엑스빌더6’의 모든 공통모듈, 앱, UDC등은 제품에 내장된 컴파일러에 의해서 모듈화되고, 동료가 사용하기 원하는 속성이나, 함수, 이벤트들을 명시적으로 출판할 수 있는 프로토콜 영역을 제공하므로 프로젝트 팀원간 최소한의 소통만 요구된다.

팀협력 도구
일반 앱 경험과 완전히 동일한 경험으로 UDC컴포넌트를 만들 수 있으며, 별도 로딩 절차 없이 디자인타임에 모든 기능 및 속성을 위지윅으로 구성할 수 있다. 라이브렌더링을 지원하며 팀원에게 즉시 공급되어 팔레트에 나타난다. UDC폴더를 SCM서버에 커밋하는 것만으로 동료에게 UDC자산을 손쉽게 공급하며 협력이 가능하다. 타사 솔루션처럼 별도 컴파일이나 압축 배포 등의 번거로운 절차없이 형상관리 서버를 통해 프로젝트 자산 관리가 가능하다.

▲ 팀 협력 도구

데이터 모델 및 바인딩
‘엑스빌더6’는 데이터셋과 데이터맵을 제공하며 테이블 형식의 데이터와 비정형데이터를 표현할 수 있다. 또한 데이터 뷰를 이용하여, 개별의 조건식이나 정렬을 적용해 하나의 데이터 셋을 여러 컴포넌트를 통해 각기 다른 방식으로 표현할 수도 있다. 컨트롤의 대부분 속성들은 바인딩될 수 있으며, 이를 통해 데이터모델 혹은 다른 데이터 소스들과 컨트롤 사이의 다양한 관계를 정의할 수 있다.

▲ 데이터 모델 및 바인딩

쉽게 적용가능한 반응형 웹
모바일 버전을 위해 별도로 코딩작업을 하거나, CSS 미디어 쿼리를 이용해 코딩작업을 하는 건 무척 번거로운 일이다. ‘엑스빌더6’는 디자인 시점에 PC용, 테블릿용, 모바일용을 지정만 해주면 바로 확인 가능하다. 디바이스별 브라우저 크기 변경에 따라 자동으로 컨트롤 크기를 조절하여 정렬되며, 개발자들은 스크린별 리사이징 변화에 대해 별도 코딩 작업을 하지 않아도 된다. 멀티플랫폼 페이지 개발을 빠르게 할 수 있다.

익스프레션 엔진
‘엑스빌더6’ 엑셀의 수식과 유사한 강력한 표현식 언어와 이를 위한 초고속 표현식 컴파일러가 탑재되어 있다. 간단하고 배우기 쉬운 이 표현식을 이용하여 역동적이고 효율적으로 데이터를 가공하고 표현 가능하다.

저작권자 © 아이티데일리 무단전재 및 재배포 금지