10/10/2015 Archive
HTML5 시대 UX의 과제와
차세대 UI 플랫폼의 조건
HTML5 표준의 등장으로 웹 환경의 일대 변화가 예고되고 있다.
HTML5는 특히 기존에 웹에서 멀티미디어 및 인터랙티브
UI 구현에 사용되던 ActiveX/RIA 환경을 대체할 수 있다는
점에서 기대를 모으고 있으며, 관련 시장의 움직임도 분주하다.
기존 웹 UX 환경의 한계와 문제점을 짚어보고 HTML5의 가능성,
이런 가능성을 100% 활용할 수 있는 차세대 UI
플랫폼의 조건을 살펴본다.
IDG Summary│
HTML5 시대 UX의 과제와
차세대 UI 플랫폼의 조건
HTML5 표준의 등장으로 웹 환경의 일대 변화가 예고되고 있다. 10년 만에 업그레이드되는 HTML 표준인 HTML5는 특히 기존에 웹에서 멀티미디어 및 인터랙티브 UI 구현에 사용되던 ActiveX와 RIA 환경을 대체할 것이란 전망이 제기되어 국내 웹 환경의 개편에 업계의 관심이 쏠리고 있다.
웹 기술의 변화와 멀티미디어 UI
전통적인 클라이언트/서버 환경의 기업용 애플리케이션이 HTML 기반의 웹 애플리케이션으로 전환되기 시작한 것은 2000년대 들어 인터넷과 월드 와이드 웹이 컴퓨팅 환경의 사실상의 표준으로 부상하면서부터이다.
웹 애플리케이션은 웹 브라우저만 있으면 어디에서나 원하는 사이트에 접속 해 작업을 할 수 있다는 장점이 있는 반면, 대용량 데이터를 다루거나 복잡한 동작을 필요로 하는 업무용 애플리케이션으로서는 비용과 성능 측면에서 많 은 문제점이 불거졌다. 이런 문제를 해결하기 위해 등장한 것이 바로 ActiveX 나 Java Applet 기반의 설치형 전용 실행 환경으로, 컴포넌트를 기반으로 기 존 클라이언트/서버 환경의 풍부한 UI를 웹으로 구현해 각광을 받았다. 이른바 X-Internet의 시대가 열린 것이다.
DOM(Document Object Model)과 자바스크립트의 조합으로 대표되는 RIA 환경은 브라우저나 운영체제를 가리지 않고 다양한 컴포넌트를 제공하고, 모바 일을 지원하는 장점도 제공했다. 하지만 과도한 동적 DOM 사용으로 인한 성
능 문제나 기반이 되는 브라우저나 운영체제의 변화에 영향을 받는 한계도 가 지고 있다. 이런 단점을 가지고 있지만, X-Internet/RIA는 데스크톱 애플리 케이션과 대등한 사용자 경험을 웹 환경에 구현할 수 있는 핵심 환경으로 현재 까지도 폭넓게 사용되고 있다.
HTML5 시대 UX의 과제와
차세대 UI 플랫폼의 조건
김용수 | 토마토시스템 기술연구소 책임 연구원
DOM의 한계를 극복하라
HTML5 캔버스가 각광을 받는 것은 기존 X-Internet/RIA 환경에서 그래픽
처리의 중심 역할을 맡았던 DOM의 제약 때문이다. DOM은 객체 지향 모델로
구조화된 문서를 표현하는 W3C 공식 표준으로, 플랫폼이나 언어 중립적이며,
동적 문서나 문서 트리 등을 생성하는 데 이용되고 있다.
문제는 자바스크립트를 사용한 DOM 조작에 심각한 성능 저하가 발생하기
쉽다는 것. 잘 알려져 있는 것처럼 기존에 DOM과 자바스크립트를 이용한 방식
은 코드를 파싱하고 DOM을 생성하는 과정이 필수적이다. 이런 방식은 기존 입
력값이 있는 DOM을 삭제하고, 새로 생성하고 하는 작업을 반복하게 되는데,
이 때 가비지 컬렉션(Garbage Collection)이 필수적이다.
가비지 컬렉션은 웹 브라우저에서 자동으로 처리하는 것이기 때문에 개발자
들이 원하는 대로 설정할 수 없다. 문제는 DOM 삭제와 생성이 빠르게 이루어
IDG Summary│HTML5 시대 UX의 과제와 차세대 UI 플랫폼의 조건
▶▶▶ 3
지는 경우, 불필요한 요소가 제때 수거되지 않으면서 심각한 메모리 누출이 발
생한다는 것. 이는 심각한 성능 저하로 이어진다.
해법은 가비지 컬렉션을 필요로 하는 DOM을 최소화하는 것이다. eXbuil
der5 구조는 HTML5 캔버스 엘리먼트 단 하나가 생성되고, 자바스크립트 객체
의 연산과 드로잉이 이벤트로 진행되는 구조이다. 예를 들어 기존 환경에서 웹
페이지 하나가 로딩되면, 입력, 선택, 버튼 등 화면 하나에 50~60개의 요소가
로딩되는 경우가 드물지 않다. 하지만 eXbuilder5 캔버스 방식은 캔버스 엘리
먼트 하나만 필요하게 된다.
물론 기존 방식이 잘못된 것은 아니다.
캔버스 엘리먼트를 이용하는 방식이
더 효율적이지만, 그동안 표준으로 승인되기
전까지는 비즈니스 측면에서 위험
성이 높았고, W3C의 대응도 늦었기 때문에
불가피한 측면이 많았다.
두 번째 문제는 표준 CSS를 적용해도 웹
브라우저마다 서로 다른 렌더링 엔
진을 사용하기 때문에 각각 다른 결과물이
나타난다는 것이다. 비슷해 보이지
만, 조금씩 다른 이런 차이는 웹 개발자들에게
여간 골치거리가 아니다. 결국
개발자들이 모든 종류의 운영체제에서
모든 종류의 웹 브라우저를 테스트할 수
밖에 없고, 여기에 모바일 환경까지 가세하면서 테스
트해야 할 환경이 약 10여 가지에서 기하급수적으로
증가하기 시작했다.
하지만 수많은 테스트에도 불구하고 렌더링의 차이
로 인해 생기는 유지보수가 늘어나고, 개발사는 고객
의 요구에 빠르게 대처할 수 없는 악순환이 반복되는
경우가 허다하다.
HTML5 캔버스를 사용하면 이런 문제점이 말끔하
게 해소된다. 도메인에 영향을 받는 요소가 아니기 때
문에 말 그대로 “드로잉”을 하는 것이기 때문에 어떤
브라우저, 어떤 기기에서도 동일한 결과물을 볼 수 있
다. 개발 생산성 측면에서 무시할 수 없는 이점을 얻
게 되는 것이다.
eXbuilder5 컨트롤 생성 구조 – Canvas 방식
국내표준웹 기반 제품의 컨트롤 생성 구조 – DOM 방식
브라우저별 CSS 렌더링의 차이
특히 이런 장점은 개발 프로젝트가 막바지에
이르렀을 때 빛을 발한다. 프로
젝트 초기에는 설계가 중심이기 때문에 실감하기
어렵지만, 최종 단계에서는
개발은 개발대로 진행되면서 추가 요구사항이 쏟아지고
디버깅과 오류 수정이
한데 뒤섞이는 경우가 많다. 이때 테스트해야 할
사항을 대폭 줄어든다는 것은
프로젝트의 효율성에 엄청난 효과를 가져다 준다.
특히 개발사는 비즈니스 측
면에서도 테스트 비용 절감이란 추가
효과를 얻을 수 있다.
개발 생산성을 높여라
eXbuilder5는 순수 HTML5로 개발된 엔진을
기반으로 PC와 동일한 화면을
보장하는 모바일 지원 기능, DOM을
액세스하지 않는 빠른 UI 렌더링, 애니메
이션 효과를 지원하는 플래시 수준의
UX 구현을 특징으로 한다.
특히 HTML5 캔버스의 장점을 살린
제한없는 그래픽 표현은 가장 큰 장점인
데, 대표적인 기능이 그리드 컨트롤이다.
eXbuilder5의 그리드 컴포넌트는 리
포팅 툴처럼 표 형식 자체를 디자인할 수
있어 다양한 포맷을 지원하는 강력한
리피트(Repeat) 컨트롤 제작 기능을 제공한다.
eXbuilder5는 성능과 기능의 장점을 넘어
개발자의 생산성을 높이는 것을 또
하나의 축으로 삼고 있다.
우선 TmtDesigner는 WYSIWYG 기반의
통합 개발 환경으로, 폼 문서 작성
시 각종 뷰와 유기적으로 결합해 개발자에게
필요한 정보를 효과적으로 제공해
개발의 생산성은 물론 편의성을 높여준다.
또한 기본 19개의 뷰에 확장 가능한
구조의 디자이너를 통해 개발자들의 요구
사항을 반영한 뷰를 지속적으로 제공
한다. 기본 컨트롤, 확장컨트롤 및 HTML5 전용 컨
트롤 등 총 30여 가지 이상의 컨트롤도 개발 편의성
을 높여준다.
개발자의 반복적인 코딩 작업과 번거로운 유지보
수를 효율화하기 위한 템플릿 기능으로 한 번 제작
한 컴포넌트 및 문서를 재활용할 수 있고, 특히 템플
릿의 수정사항이 일종의 상속 개념을 이용해 기존 프
로그램에 임포트된 템플릿에도 자동으로 반영된다.
또한 잘 설계되고 구조화된 애플리케이션 기반 구
조 디자인을 추상화시켜 구현한 소프트웨어 모듈인
TmtFrameWork는 소프트웨어 개발 시 반복적인 작
업을 배제하고 재사용을 유도하는 것은 물론, Tmt
Designer, TmtViewer와의 융합을 통해 최고의 개
발 생산성을 제공한다.
① 메뉴 및 단축아이콘 모음
② 워크스페이스뷰
③ 디자인, 스크립트, 리피트 편집
④ 기본컨트롤, 확장컨트롤 뷰
⑤ 컴포넌트 팔레트 뷰
⑥ 스크립트 에디트 뷰
⑦ 인스턴스, 서브미션등 각종 뷰
⑧ 인스턴스, 서브미셔등 에디터
⑨ 속성, 이벤트, 스타일 뷰
⑩ 속성, 이벤트 , 스타일 에디터
eXbuilder5의 통합 개발 환경 구성
①메뉴및단축아이콘모음
②워크스페이스뷰
③디자인, 스크립트, 리피트편집
④기본컨트롤, 확장컨트롤뷰
⑤컴포넌트팔레트뷰
⑥스크립트에디트뷰
⑦인스턴스, 서브미션등각종뷰
⑧인스턴스, 서브미셔등에디터
⑨속성, 이벤트, 스타일뷰
⑩속성, 이벤트, 스타일에디터
댓글