[컴퓨터월드] 윈도우10의 공개와 맞물려 액티브X를 탈피하려는 각계의 노력이 점점 활발해지고 있다. 하지만 아직도 HTML5로의 전환은 느리기만 하다. 이상돈 토마토시스템 대표는 액티브X가 아니면 작동하지 않는 기존 시스템이 너무 많은 것이 문제라고 지적했다.

소프트웨어 전문기업 토마토시스템은 최근 HTML5 캔버스(Canvas) 기반의 UI/UX 솔루션 ‘엑스빌더5(eXbuilder5)’를 출시했다. 엑스빌더5는 웹 표준, 크로스브라우저, 모바일, 확장성, 멀티미디어 등 HTML5에 대한 고객 요구를 수용한 플랫폼으로 풍부한 화면과 빠른 개발 생산성 및 성능 등으로 주목을 받고 있다.

토마토시스템은 엑스빌더5에 애니메이션 툴 기능을 더해 기존에 쓰이던 ‘플래시’를 대체하기 위해 노력하고 있다. 아울러 기존 주력했던 대학 SI사업과 솔루션사업을 바탕으로 해외 진출을 준비 중이다. 이상돈 토마토시스템 대표를 만나 UI에 대한 그의 생각과 앞으로의 비전을 들어보았다.

UI는 직관적이면서 통합적이어야

이상돈 토마토시스템 대표는 좋은 UI에 대한 확고한 신념을 가지고 사업에 뛰어들었다. 그는 “좋은 UI는 직관적이면서도 통합적인 정보를 제공할 수 있어야 한다”고 주장했다. 이어 “가능한 많은 정보를 압축적으로 제공하면서도 교육 없이 이용할 수 있을 정도로 직관적이어야 한다”고 덧붙였다.

직관성과 통합성은 얼핏 양립할 수 없는 모순처럼 느껴지지만 결코 그렇지 않다는 것이 그의 주장이다. 최근까지는 ‘직관성’을 강조해 페이지를 여럿으로 나눠왔던 것이 주된 추세였다면 앞으로는 ‘직관성’과 더불어 한 페이지에서 모든 정보를 확인할 수 있도록 ‘통합성’이 중요시될 것이라는 게 그의 예측이다.

그러기 위해서는 단순히 ‘쓰기 편한’ UI에 집중하는 것만으로는 부족하다. 시스템에 대한 깊은 이해가 뒷받침돼야 진정한 의미의 UX(사용자 경험)가 가능하다는 것이 이 대표의 주장이다.

웹의 미래는 IoT, UI의 역할도 중요해져

이 대표는 웹의 중요성이 곧 UI의 중요성이라 밝혔다. 앞으로의 웹은 단순히 서버와 PC 혹은 서버와 모바일을 연결하는 개념이 아니기 때문이다. 이 대표는 사물인터넷(Internet of Things, IoT)이 곧 웹의 발전이라고 역설했다. 결국에는 모든 기기가 웹브라우저가 될 수 있어야 한다는 것이 그의 주장이다. 이 대표는 화장실 유리에 동영상을 띄우는 것도 웹의 확장이라고 설명했다.

그에 따라 사용자가 직접 마주하는 UI의 역할도 중요해진다는 게 그의 예측이다. 화면을 배치하는 것뿐만 아니라 사용자가 인식할 수 있는 모든 정보가 UI위에서 제공되어야 한다는 것이다. 그는 스마트카 시장의 가능성을 예로 들며, “앞으로는 자동차 계기판을 만드는 것도 UI의 일종”이라고 말했다.

이 대표는 “플랫폼마다 상이한 개발체계를 구축하는 것보다 표준이 확립된 HTML5 바탕의 UI를 만드는 것이 훨씬 효율적인 개발이 될 것”이라며, “결국엔 개별적으로 돌아가던 모든 것이 웹으로 연결될 가능성이 높다. 사물인터넷이 곧 웹과 UI의 미래라고 할 수 있다”고 말했다.
 

HTML5로의 전환은 선택 아닌 필수

아울러 이상돈 대표는 지금까지 너무 많은 시스템이 액티브X 상에서 구축된 것이 가장 큰 문제라고 지적했다. 기존 시스템이 옛 브라우저에서 돌아간다고 해서 새로운 시스템을 도입하지 않는 것은 어불성설이라고 이 대표는 주장한다.

옛 체계에 머물러 있는 것은 현재 발전하고 있는 시스템의 장점을 활용하지 못할 뿐 아니라 보안 등 여러 문제점이 발생할 수밖에 없다는 것이 이 대표의 설명이다. 이어 이 대표는 “HTML5는 거스를 수 없는 대세”라며, “기존 시스템은 금방 바뀌어 나갈 수밖에 없다. 기존 시스템에 집착하지 말아야 한다”고 말했다. 이어 “HTML5의 장점을 보고 빨리 받아들이면 불편보다 얻는 이익이 더 클 것”이라고 강조했다.

이 대표는 이러한 비전을 가지고 UI 솔루션 사업을 강화하고 있다. 시대와 사용자의 요구사항으로 인해 내년부터는 본격적인 성과가 가시화될 것이라는 게 그의 전망이다. 이후는 이상돈 대표와 나눈 일문일답이다.

UI 솔루션 개발사의 입장에서 잘된 UI란 어떤 것이라 생각하는가

직관성이 우선이다. 잘된 UI는 보면 무엇인지 어떻게 써야 하는지 바로 알 수 있어야 한다. 이에 더해 통합성도 중요하다.

직관성과 통합성은 어떻게 보면 서로 상충하는 것일 수 있다. 예전에는 직관성을 확보하려고 한 업무를 한 화면에만 구축하곤 했다. 최근 추세는 이처럼 단순한 직관성만 갖추는 것이 아니다. 직관적이어서 별도의 교육 없이 쓸 수 있으면서도 한 화면에서 모든 것을 할 수 있도록 하는 것이다.

대학교를 예로 들자면 학생이 휴학신청, 복학신청, 성적확인, 장학금확인, 수강신청 등 학사 일정에 관련된 모든 작업을 직관적으로 한 화면에서 다 처리할 수 있도록 하는 것이다.

토마토시스템에서도 사용중인 P모 영업관리 시스템이 이러한 좋은 UI의 표본이다. 하나의 화면에서 모든 것을 할 수 있다. 영업사원들이 정보를 접하고, 고객별, 날짜별 정보를 UI하나에 다 담았다.

앞으로의 UI, UX는 이런 방향으로 흘러갈 것이다. 단순히 조금 편해지는 것이 UX가 아니다. UI는 해당 시스템을 철저히 이해하고 분석한 후 그동안의 방식을 뛰어넘어 직관성, 통합성을 제공해야 한다. 한 화면에서도 모든 것을 할 수 있으면서도 동시에 쉬워야 한다.

HTML5, 왜 중요한가

HTML5 시대에 접어들면서 프로그램으로서의 웹이 완성됐다. HTML이란 원래 프로그램을 지원하는 언어가 아닌 문서를 보여주기 위한 용도의 언어였다. 기존의 RIA솔루션과 X인터넷은 과도기적 기술이라 할 수 있다. HTML5서부터 웹에서 프로그램을 표현할 수 있도록 본격적으로 지원하기 시작했다.

브라우저상에서 메모리와 스토리지를 제공할 수 있다. 서버가 다운되거나 네트워크가 끊기더라도 데이터가 보관된다. 과거에는 브라우저가 그 이름처럼 단순히 보여주는 수단이었지만, HTML5 시대에 들어서면서 브라우저는 일종의 OS 역할을 하게 된다. 브라우저만 깔려있으면 모든 것을 할 수 있는 것이다.

기존의 RIA솔루션은 문서를 표현하기 위한 기술로 프로그램을 하게 만든 과도기적인 방법이었다. 브라우저마다 표현방법의 차이가 생기기도 했고, 컬럼(column)마다 DOM을 만들어야 했기에 데이터 양이 많아지면 속도 또한 느려질 수밖에 없었다. X인터넷에 비해 발전된 개념이긴 하나 기술적으로도 어려웠고 속도나 퍼포먼스도 느릴 수밖에 없다.

HTML5 캔버스는 결국 이미지를 표현할 수 있는 요소이다. DOM을 반복적으로 만드는 구조가 아닌 캔버스태그만을 이용하기 때문에 시간과 성능에서 굉장히 많은 차이가 난다.

이러한 중요성에도 HTML5 도입이 늦어지고 있는 이유는

공공기관과 기업의 시스템 중 액티브X가 반드시 필요한 시스템이 아직 너무 많다. 아직 액티브X를 완전히 포기할 수 없는 상황이다. 아직도 MS에 의존하고 있는 환경을 벗어나지 못하고 있다는 이야기다.

액티브X를 탈피해야 한다는 얘기를 6, 7년 전부터 해오고 있다. 하지만 아직도 바뀌는 속도는 빠르지 않다. 엑스빌더5를 소개할 때도 반응은 좋지만 액티브X 상에서 돌아가는 기존 시스템이 너무 많다. 국내의 많은 솔루션 회사들이 영세한 상황이다. 기존 액티브X 완벽히 벗어나기 어렵다.

모 대학의 경우 IE 10이 아닌 브라우저에서 그룹웨어가 돌아가지 않았다. 재정 부족으로 다른 시스템을 무작정 도입할 수도 없는 상황이었다. 시스템을 발주하기 전부터 충분한 검토가 필요하다. 단순히 대학뿐 아니라 그룹웨어 업체에서도 HTML화를 지원해야 웹표준에 맞는 시스템 구축이 가능하다. 현재 엑스빌더5는 이러한 상황을 지원하기 위해 단계적인 절충안을 도입했다. 엑스빌더5를 통해 구축한 페이지가 IE 10 이하에서 구동될 경우 기존처럼 액티브X로 동작하게 만들었다.

엣지(Edge) 브라우저가 기본으로 채택된 윈도우10이 공개되면서 웹 표준화가 차츰 속도를 얻고 있다. 회사 내부적으로는 내년 하반기부터 본격적인 성과가 나올 것으로 기대하고 있다.

캔버스의 장점이 엑스빌더5의 장점이라 할 수 있다. 성능과 속도가 월등하다. 캔버스는 HTML5에서 그림을 그릴 수 있도록 해주는 껍데기라 할 수 있다. 그만큼 가볍고 활용도가 높다.

토마토시스템은 경쟁사들에 비해 UI솔루션에 늦게 진출한 후발주자다. 처음에는 CS 툴인 파워빌더로 시스템을 구축했다. 2002년쯤 X인터넷에 대한 이슈들이 있었고, 웹에서 CS와 똑같은 환경을 구성할 수 있다는 생각에 X인터넷 기술로 UI툴을 개발하게 됐다.

당시 출시까지 1년, 안정화에 1년 반이 걸렸다. 후발주자다보니 시장 진출도 어려웠다. 이러한 상황을 타계하기 위해 액티브X 탈피에 선두주자가 되고자 노력했다. 이러한 노력을 밑바탕으로 2008년 엑스리아(eXria)를 출시했다. 하지만 성능상의 문제, 표현상의 문제 등 RIA솔루션의 한계가 나타나기 시작했다.

HTML5가 본격화되면서 HTML5의 그래픽요소인 캔버스를 활용하면 이러한 문제점을 극복할 수 있을 거라는 확신이 들었다. 본격적인 제품이 나오기 전 엑스리아의 영업을 중단했다. 엑스빌더5의 개발에 집중하기 위해서였다.

2004년부터 시작한 사업에 11년만에 제대로 도전할만한 제품을 갖춘 것이라 자평한다. 토마토시스템은 툴을 만드는 회사이기보다 개발하는 회사였다. 그러한 관점에서 접근하니 우리가 쓰기 편한 툴을 만들자는 생각이 들었다. 개발하기 쉬운 툴, 개발자들이 개발하기 쉽고 성능이 좋은 툴을 만들자는 것이 목표였다.

실제로 완성된 엑스빌더5를 통해 토마토시스템이 이전에 구축했던 웹사이트를 다시 작업해 봤을 때 5달 이상 걸리던 기간이 3주 정도로 단축되는 것을 확인했다.

기존 대학사업과의 연계는

새로운 제품을 만들면 우선적으로 대학에 먼저 적용을 한다. 대학이 새로운 기술을 받아들이는데 거부감이 적을뿐더러 신기술을 선호하기도 한다. 전체 시스템을 새로 구축하는 경우도 많기 때문에 새로운 기술을 적용하더라도 부담이 없는 편이다. 그래서 엑스빌더5도 대학에 많이 공급된 편이다. 제품을 개발해서 대학사업에 적용하니 기술경쟁력도 높아질 뿐만 아니라 가격경쟁력도 높아진다. 또한 거기서 쌓인 레퍼런스와 경험을 토대로 대학 외 시장에 적용할 수 있기 때문에 시너지 효과가 높다.

물론 우리나라가 고령화 사회에 진입하게 되면서 장기적으로 대학시장은 줄어들 수밖에 없다. 대학 구조조정 등이 맞물려 현재의 대학시장 전망이 밝은 것은 아니다. 그렇기에 솔루션 사업에 집중하기 시작했다. 계속적으로 새로운 분야를 연구 중이다.

앞으로는 해외 대학시장에도 진출하려고 생각중이다. 현재 말레이시아, 일본, 에티오피아, 베트남 등 여러 나라로 진출하기 위해 다각도로 노력하고 있다.

해외에 나가기 위해서는 단품 솔루션만으로 어렵다. 기술과 비즈니스, 솔루션을 전부 가져가야 한다. 이러한 점에서 국내에서의 대학 SI 구축 경험이 큰 도움이 될 것으로 생각된다. 포털, UI솔루션, 기술력을 모두 갖춰야 해외에서 승산이 있다고 판단하고 있다.

국내 웹 환경이 표준화된다면 이후 어떤 전략으로 시장에 대응할 생각인가

지금까지는 업무용 UI 시장 중심이었다. 앞으로는 B2C 관련 시스템 시장에도 적극 나설 생각이다. 보험이나 여행상품, 항공기, 극장 예매 등 고객을 상대로 하고 있는 UI들이 주로 플래시를 많이 사용했었지만 플래시를 사용하지 못하게 되면서 일반 HTML로 작성되는 경우가 많다. 우선적으로는 이를 대체해나갈 생각이다.

현재 집중적으로 연구하는 분야는 엑스빌더5에서 지원될 애니메이션 편집기다. 현재 개발 마무리 단계이며 11월 말쯤에 공개될 예정이다. 지금까지는 개발자가 따로 작업해줘야 표현이 가능했다. 앞으로는 디자이너나 애니메이터가 쉽게 애니메이션 표현이 가능하도록 만들어나갈 생각이다. 그렇게 되면 기존 어도비 플래시가 차지했던 영역을 대체할 수 있을 거라 생각한다.

현재까지 2D 이미지만 표현 가능한 캔버스에 3D를 표현할 방법도 연구중에 있다. 애니메이션 툴이 완성된다면 단순한 개발자를 위한 툴이 아닌 디자이너와 개인사용자에게도 충분히 어필할 수 있는 솔루션이 될 거라 생각한다.

기존 UI툴들이 접근하지 못했던 영역이고 토마토시스템으로서도 새로운 영역의 사업이다. 아직까지 제대로 된 플래시의 대안이 없는 상황이다. 국내뿐 아니라 해외에서도 시장성을 확보할 수 있을 거라 생각한다.