안현철 인스웨이브시스템즈 UX팀 팀장

▲ 안현철 인스웨이브시스템즈 UX팀 팀장

[컴퓨터월드] HTML5는 인터넷 웹페이지를 만들 때 사용하는 언어인 하이퍼텍스트 마크업 언어((HyperText Markup Language, HTML)의 다섯 번째 버전이다. 지금까지 줄곧 사용해 오고 가장 많이 사용 중인 HTML4.01 및 XHTML1.0의 차기 버전으로 지난해 10월 웹 표준으로 지정됐다. HTML5는 이전 버전들과는 달리 스펙이 확정되기까지 오랜 시간이 걸렸다. 검증 절차와 시험적인 모델을 시도하기 위한 노력들이 10년 이상 논의돼 왔다.

이같은 이유는 웹표준 기술이 다양한 기기와 플랫폼, OS, 브라우저 등과 무관하게 동등한 수준의 콘텐츠 사용을 보장하기 때문이다. 뿐만 아니라 장애인, 노약자, 정보소외자 등도 웹을 사용할 수 있도록 하는 웹 접근성을 보장하기 위한 기술이다. 따라서 HTML은 계속해서 발전할 것으로 전망되고, 앞으로 더 다양한 스펙들이 차기 버전인 HTML5.1을 통해 구현될 것으로 보인다.

웹 표준 UI·UX 플랫폼 ‘웹스퀘어 5’를 개발한 인스웨이브시스템즈는 최근 웹스퀘어5의 서비스팩 1을 출시한데 이어 모바일 웹 접근성 향상을 위한 기술로 국내 특허를 획득했다. 이외에도 HTML5 웹 표준 선도 기업으로 신기술 개발 및 제품 적용을 위한 다각도의 연구개발을 진행 중이다. 인스웨이브시스템즈의 안현철 UX팀 팀장을 만나 인스웨이브시스템즈가 웹 표준 시장 공략을 위해 무엇을 준비하고 있는지, 갖추고 있는 경쟁력은 무엇인지 자세한 이야기를 들어보았다.

최근 기능과 성능이 향상된 웹스퀘어5의 서비스팩 1을 출시했다

사용자의 감성과 패턴을 분석하고 이를 토대로 한 최적의 UI를 맞춤형으로 제공하는 게 궁극적으로 향후 차세대 웹이 추구할 방향이다. 빅데이터 시대를 맞은 만큼 사용자의 패턴을 얼마나 잘 분석해 내느냐가 웹 표준 시장에서 성공의 열쇠로 자리 잡아가고 있다.

최근 출시한 웹스퀘어5 서비스팩 1은 사용하는 사용자의 패턴을 분석하고 다양한 심층미팅과 설문조사 등을 통해 더욱 쉽고 편리하게 사용할 수 있도록 기능들을 개선한 패키지 제품이다. 새로운 개발 방식인 프로미스 워크플로우(Promise Workflow) 기능이 추가됐고, 개선된 스크립트 개발 기능을 제공해 개발자 관점의 편의성을 대폭 향상시켰다. 프로미스 워크플로우 기능은 HTML5에서 기본적으로 사용되는 비동기 통신(Async)으로 인해 발생하는 프로그램의 복잡성을 획기적으로 개선해준다.

기존의 복잡한 업무화면 개발은 대부분 서버에서 정보를 가져오거나 서버로 정보를 보내기 위해 다수의 비동기 통신을 동시에 호출한다. 하지만 이 방식은 어렵고 복잡해 오류 및 성능 저하가 자주 일어났다. 이에 웹스퀘어5 서비스팩 1은 X-인터넷 동기식 프로그램에 익숙한 개발자들의 편의성을 높이기 위해 프로미스 워크플로우 기능을 직관적이고 간단한 GUI로 적용했다.

개발자는 단순하게 비동기 호출의 결과가 도착했을 때 처리 로직만 간단히 구현하면 돼 개발 복잡성이 개선됐다. 또 HTML 및 XML 요소와 자바스크립트 영역을 분리해 소스 코드 가독성 향상과 업무 스크립트 간 손쉬운 탐색 및 스크립트 검색이 가능하다.

HTML5는 UI·UX 구현에 있어 어떤 이점이 있나

HTML5는 현재와 미래를 모두 바라보고 설계됐다고 평가된다. 이는 다양한 미디어 장치의 발전으로 디스플레이 환경들을 유연하게 대응할 수 있다는 것이다. 하나의 소스로 다양한 곳에 사용할 수 있다라는 ‘원 소스 멀티 유즈(OSMU)’가 기업이 원하는 최소한의 투자로 최대의 효과를 기대하는 요건 중 하나라면 HTML5는 이를 대응하기 위한 최고의 조건을 갖췄다.

HTML이 구조적인 메이크업을 담당한다면 UI 표현 기술의 한 축을 담당하고 있는 기술 요소는 CSS(Cascading Style Sheets)다. UI 발전과 함께 감성적 UX를 추구하는 트렌드에 맞춰 CSS를 사용해서 화면을 꾸미는 것은 어떤 옷과 액세서리를 갖추느냐에 달렸다. HTML5와 함께 최신 CSS 표준 기술인 CSS3는 더욱 다양하고 화려한 옷과 액세서리를 장식할 수 있고, 장소에 따라 빨리 그 장소에 어울리는 옷과 액세서리로 갈아입을 수 있는지 결정한다.

HTML5 기술을 사용하고 OSMU를 가능하게 하기 위한 최적의 기술 조합은 HTML5+CSS3+자바스크립트(Java-script)다. 앞서 말한 CSS3를 이용한 화려한 옷 갈아입기는 반응형 웹디자인(Responsive Web Design), 적응형 웹디자인(Addaptive Web Design)과 같은 표현 기술로 미디어 장치에 따른 디스플레이 방법과 UI를 적용한다.

사용자의 브라우저 환경에 맞춰 PC, 태블릿, 스마트폰 등 하나의 소스로 각 환경에 맞는 UI로 유연하게 표현해 주는 것은 서비스를 제공하는 기업 입장에서 사용자 만족도를 높여 서비스를 이용하는 고객들의 충성도를 높일 수 있다. 이에 웹스퀘어5는 이들 이점을 기업들이 쉽게 사용할 수 있도록 돕는다.

웹스퀘어5는 HTML5로 구성된 태그에 CSS3를 유연하게 사용해 반응형 UI를 구축할 수 있다. 아울러 반응형 UI 구축을 어려워하는 사용자들을 위해 간단한 설정 값만으로 자체적으로 UI변화를 일으켜 고객 미디어 장치에 최적화된 UI로 표현되도록 지원한다.

웹 환경에 따라 UI·UX 기술은 어떻게 변화해왔나

국내 웹 환경에서 UI·UX 기술은 HTML 버전에 따라 변화해 왔다. 인터넷이 본격적으로 보급됐던 1995년을 시점으로 HTML2.0이 널리 알려졌고 개인 홈페이지 등 다양한 환경에서 홈페이지를 구축하기 위한 움직임이 활발해졌다. 하지만 사용자들의 요구사항과 브라우저의 발전은 브라우저마다 서로 다른 UI가 그려지는 혼돈을 가져왔다.

1997년경에는 HTML3.2 버전이 공식적으로 표준화되며 기존 브라우저마다 지원하는 태그의 기능들이 달라 서로 다르게 보이던 차이가 줄어들었다. HTML은 이 시기에 급속도로 발전했다. 하지만 불과 1년 이후에 HTML4.0 스펙이 확정됐는데 애처롭게도 당시 HTML4.0 스펙 지원을 수행한 브라우저가 MS의 인터넷 익스플로러(IE) 5였고, 이점이 불운의 시작이 됐다.

이후 HTML은 추가 수정되는 과정을 거쳐 HTML4.01까지 발전하지만 IE가 오래 동안 장기 집권한 국내 웹 시장은 HTML 표준 스펙과 달리 브라우저 간 동일 UI를 보장하기가 어려워졌다. 21세기 들어 혼탁한 브라우저 시장의 규칙을 바로 잡고자 HTML보다 더욱 엄격한 규칙을 지켜야 하는 XML을 기초로 한 XHTML1.0과 HTML4.01이 표준이 됐다. 하지만 IE가 국내 브라우저 사용자를 독식하던 국내 웹 시장에서 웹 표준 준수는 큰 의미가 없었다. 당시 IE가 표현하는 UI가 표준이었고 IE의 발전 기술이 곧 표준 기술이었다.

이같은 병폐는 웹 이용환경의 발전을 저해하는 액티브X(Active X)를 만들어냈다. 액티브X는 보안 및 암호화 기술을 이용하기 위해 만들어졌지만 UI 표현에도 영역을 넘나들었고 X-인터넷이라는 차세대 UI의 대표주자로 역사의 한 장을 썼다. 당시 어도비 플렉스(Flex), MS 실버라이트(SiverLight)와 같은 설치형 UI 제품들이 부각됐고, 이후 10여 년 동안 국내에서는 X-인터넷 제품들이 IE브라우저를 통한 설치형 UI를 사용했다.

국내 웹 표준 기술 발전의 저해요소로 X-인터넷 UI 제품이 한 몫을 했다. 이후 다양한 브라우저들의 점유율이 높아지고 모바일 기기 등장을 통한 모바일 브라우저 지원까지 크로스브라우징 요건이 필수가 되면서 액티브X UI 제품이나 플렉스, 실버라이트 등 UI제품들은 도태되기 시작했다. 현재 HTML5의 등장은 웹 표준 기술을 갈망하던 사용자들에게 최고의 대안이 됐고, 다양한 스펙과 사용자 요구사항을 충족할 기술로 매우 전망이 밝은 상황이다.

최근 많은 HTML5 제품들이 출시되고 있다. 웹스퀘어5의 경쟁력은 무엇인가

진정한 HTML5 UI는 HTML 태그가 의미하는 바를 직관적으로 표현해야 한다. 이를 통해 접근성과 CSS3의 강력한 유연한 레이아웃 컨트롤을 보장받을 수 있다. 하지만 몇몇 HTML5 제품은 접근성을 국내 접근성 진단 업체와의 꼼수를 통해 피해가려고 한다. 접근성은 국내 장애인만 사용하는 것만은 아니다. 유연한 레이아웃 역시 의미하는 바가 직관적이고, 간결한 구조의 HTML을 가지고 있을수록 UX를 담은 UI 설계가 가능해진다.

웹 표준은 일시적인 현상이 아니다. 과거 통일되지 않던 비표준 웹에서 무분별하게 사용되던 액티브X의 패단을 최근 겪고 있듯, 잘못된 경험을 이미 국제 웹 시장에서는 바꾸고자 노력했다. 그 결과가 웹 표준 HTML5다.

인스웨이브시스템즈는 W3C 회원사로서 웹 표준과 글로벌 트렌드를 수시로 분석하고 웹스퀘어5에 반영하고 있다. 이 점이 타 제품과 가장 차별되는 경쟁력이다. 국제 표준을 준수하는 방식을 채택해야 과거 잃어버린 웹 표준 10년을 다시 경험하는 일이 생기지 않을 것이다.

웹 표준 HTML5 솔루션 도입은 필수사항이 아니다. 하지만 향후 몇 년 안에 발생할 리스크와 비용을 줄일 수 있는 최선의 선택이다. 많은 고객들이 제품을 선정하는데 있어 기대치가 과도하게 높다. HTML 차기 버전에서 다양한 추가 기능은 둘째로 치더라도 우선적으로 고려할 사항은 웹 표준 HTML5 솔루션이 가진 호환성과 변환성이다. 웹스퀘어5는 브라우저 업데이트로 인해 발생하는 오류 등을 웹스퀘어5 엔진 수정을 통해 신속한 패치가 가능하다.

HTML은 지속적으로 발전할 전망이다. 차기 버전인 HTML5.1은 더욱 강력한 기능들이 포함돼 현존하는 한계들을 극복해 내리라 생각된다. 웹 발전과 시대의 트렌드를 가장 완벽하게 이해하고 발전하고 있는 웹스퀘어5는 국내뿐만 아니라 해외에서도 그 품질을 인정받을 것이다.

UI·UX 컨설팅도 제공한다고 하는데

웹스퀘어5를 처음 접하는 대부분의 고객들은 익숙했던 개발 방법과 달라 어색함을 토로한다. X-인터넷 제품을 주로 사용하던 고객들은 개발 방법론에 대한 가이드를 주로 필요로 한다.

자바 서버 페이지(JSP, Java Server Pages) 등 HTML 하드코딩을 병행하던 고객들은 HTML 수정법과 같이 직관적인 수정법과의 이질감은 없는지에 대한 고민이 많다. 이에 웹스퀘어5는 제품 판매와 함께 UI기획, UI 디자인, UI퍼블리싱, UI공통 개발에 이르는 컨설팅 서비스를 제공해해 하나의 제품 구입으로 다양한 역할 수행 고민을 덜 수 있다.

HTML5에 대한 요구는 많지만 국내 웹 환경은 기술을 따라오지 못하고 있는데

현재 국내에서 HTML5에 대한 받아들이기 위한 환경이 완벽하다고 할 수는 없다. 하지만 80% 이상은 HTML5만으로 구현하는데 문제가 없다고 생각한다. 다만 현존하는 각종 연동 솔루션들이 웹 표준 지원 한계를 극복하지 못하고 있는 것은 개선돼야 한다. 전자정부를 표방한 공공기관의 발전은 세계적으로도 눈여겨볼만한 업적임에는 틀림없지만 이러한 노력에 가려져 곪아가고 있는 살점을 보지 못했던 부분도 확실하게 존재한다.

웹 표준은 어렵게 표준을 확정해왔다. 앞으로 지켜나가는 것도 만만치 않을 것이다. 국제적인 웹 표준 단체들은 무수히 많다. 반면 국내 단체는 매우 적고 활동도 활발하지 않다. 정부의 적극적인 지원을 토대로 솔루션 업체와 고객이 협업할 수 있는 웹 표준 단체나 협회의 탄생이 절실하다. 고객과 정부도 웹 표준이 단순한 선택 사항이 아니라 인터넷 강국으로 필수적으로 시행돼야 하는 사항이라는 것을 확실히 인식해야 할 것이다.

저작권자 © 컴퓨터월드 무단전재 및 재배포 금지