ui/ux technology trends on the next generation web
DESCRIPTION
본 고에서는 빠르게 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 개발 중에 있는 차세대 웹에서의 UI(User eXperience)/UX(User Interface) 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 하였다.TRANSCRIPT
2011. 8 정보과학회지 9
차세대 웹에서의 UI/UX 기술 동향
한국전자통신연구원 전종홍*․이승윤
1. 서1)론
1989년 CERN의 팀 버너스 리에 의해 만들어진 월
드 와이드 웹 기술은 HTML(HyperText Markup Lan-guage), URL(Unified Resource Locator), HTTP(Hyper-Text Transfer Protocol)이라는 세 가지 기술을 기초로
간단한 문서와 자원들을 공유하기 위한 목적으로 출
발하였다. 이후 1994년 기술 표준화를 위한 W3C(World Wide Web Consortium)가 창립되면서 웹 기술은 눈부
신 진보와 함께 인류 생활에 있어 없어서는 안 될 중
요한 기술로 기반 기술로 발전해오고 있다.2010년 12월 현재 전세계에는 2억5천만개의 웹 사
이트가 공식적으로 서비스를 제공하고 있는 것으로 추
정되고 있고, 2010년 한해에 개설된 웹 사이트의 숫
자만 해도 2160만개에 이르며, 비공식적으로 웹 서버
기능까지 내장한 장치들을 포함한다면 2-3배 정도 규
모가 될 것으로 전망되고 있다.2010년 현재 전세계 인터넷 사용자는 20억명이 넘
으며(국내의 경우도 인구의 77%에 해당하는 3,700만명 이상), 하루 평균 2시간 정도를 웹 접속에 사용하
고 있다.1) 모바일의 경우도 사용자들이 꾸준히 늘고
있으며, 2011년 7월 현재 하루 평균 74분 정도를 웹
사이트 접속에 사용을 하고 있는 것으로 조사되고 있
으며, 그 사용시간도 매년 15% 정도씩 늘어나고 있
다.2)
웹 기술의 진화도 계속 이루어져 초기에 단순히 정
적인 문서 형태로 정보를 공유하는 형식에서, 단말의
HW을 제어하고 비동기적으로 원격 데이터베이스를
연동하며 다양한 응용 로직을 처리하는 수준까지 진
* 종신회원
* 본 연구는 방송통신위원회의 지원을 받는 방송통신표준개발지원
사업의 연구 결과로 수행함.1) http://royal.pingdom.com/2011/01/12/internet-2010-in-numbers/2) http://blog.flurry.com/bid/63907/Mobile-Apps-Put-the-Web-in-Their-
Rear-view-Mirror
화해오고 있다. 이처럼 웹 기술은 우리 생활에 없어서
는 안 될 정도로 중요하게 활용되고 있으며, 브라우저
와 웹 사용자 인터페이스를 통한 정보 접근과 활용은
지속적으로 늘어나고 있는 상황이다.그러나 한편에서는 웹 기술을 활용한 응용과 서비
스가 많아짐에 따라 시스템의 복잡도가 높아지고 개
발 생산성이 낮아지는 문제도 발생하고 있다. 더불어
PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹
서비스를 활용함에 따라 단말과 사용환경에 상관없이
일관성 있는 사용성 제공의 요구가 높아지고 있으며, 모두를 위한 보편적 서비스로 웹 서비스가 활용됨에
따라 제약없고 차별없는 보편적 웹 접근성 제공의 필
요성도 커지고 있다. 단말의 인터페이스 방식도 마우
스/키보드 활용 방식에서 터치/제스처/음성 및 실세계
인식 기능을 결합시키는 형태로 발전하고 있다.본 고에서는 이처럼 변화되는 서비스 환경을 중심
으로 보다 나은 웹 사용성을 제공하기 위해 개발 중에 있는 차세대 웹에서의 UI(User eXperience)/UX(User Interface) 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위
해 나아갈 방향들에 대해 고찰해보고자 하였다.
2. 차세대 웹 기술
웹 기술의 진화 발전 과정을 살펴보면 다음과 같이
크게 4단계로 구분해볼 수 있다. 첫 번째 단계는 1989년부터 1999년까지의 기간으로 HTML, URL, HTTP라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다 나은 인간 중심의 정보처리 및 지식공유 등을 목표로
하는 단계였다. 두 번째 단계는 2000년부터 2004년까
지의 기간으로 XML(eXtensible Markup Language)에
기반하며 인간 중심의 정보 처리뿐 아니라 다양한 디
바이스와 서비스, 멀티미디어를 연결하는 것을 목표
로 하는 단계였다. 세번째 단계는 2005년부터 2009년까지로, 구글, 아마존, 위키피디아 등의 성공과 함께
특집원고
10 특집원고 차세대 웹에서의 UI/UX 기술 동향
그림 1 HTML 마크업 기술의 발전 과정
웹 산업을 제2의 전성기로 이끌며 다양한 신규 서비
스가 등장할 수 있는 기반을 만들었다. 그리고 마지막
네 번째 단계는 2010년 이후부터 현재까지로, 스마트
폰 및 태블릿 등 다양한 모바일 기기들을 대상으로
HTML5와 Web API(Application Programming Interface)를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정보 등을 결합하는 통합 응용 플랫
폼으로서 웹이 자리잡아 가는 단계라 할 수 있다[1].
2.1 HTML5와 브라우저 기술
웹 기술이 확산된 가장 큰 배경은 HTML이라는 언
어를 이용하여 정보를 표현하고, 이를 다양한 단말의
브라우저에서 효과적으로 활용할 수 있다는 점에 있
었다. 그림 13)과 같이 1993년 HTML1.0 규격이 만들
어지고 난 후, 1997년 HTML 4.0과 1999년의 HTML 4.01 규격이 만들어지기까지 웹 기술은 폭발적으로 성
장하였다. 그러나 HTML 자체가 갖는 확장의 어려움
으로 W3C에서는 1999년부터 좀 더 다양한 확장성을
가질 수 있도록 하기 위해서 XML을 기반으로 하는 새
로운 XHTML(Extensible Hypertext Markup Language) 1.0 개발을 추진하였고, 2009년까지 XHTML 2.0 개발
을 진행하여 왔다.HTML은 단순함을 가졌으나 확장이 어려웠고, XHTML
은 확장성은 좋았으나 지나치게 복잡하다는 단점을
가졌었다. 이러한 이유로 XHTML 표준화는 계속 지연
이 되었고, 이런 업계의 노력에 자극을 받은 다양한 기
술적인 진화 내역들을 흡수한 새로운 마크업 언어를 필
요로 했던 업계 전문가들이 2004년 WHATWG을 구성
하고 다양한 웹 애플리케이션에 효과적으로 사용할 수 있는 보다 단순하면서도 다양한 확장성을 갖는 HTML5.0 규격을 만들기 시작하였다. 이에 W3C는 2008년 새로
3) http://is.gd/w9S9a9
운 HTML 규격을 만들기 위한 HTML WG을 구성하였
고, WHATWG(Web Hypertext Application Technology Working Group)의 규격을 기초로 한 새로운 HTML5 표준안을 만들기 시작하였다.
HTML5 표준의 가장 큰 특징은 기존의 HTML 표준의 한계를 극복하기 위해, 별도의 추가적인 확장 기
능 없이도 과거에는 불가능했던 다양한 처리들을 가
능하게 하는 것에 있다. 이를 위해 HTML5에서는 아
래와 같이 웹 애플리케이션 개발에 도움을 줄 수 있
는 다양한 기능과 API를 제공하고 있다.․2차원 그래픽 API 사용을 위한 canvas 기능
․내장 비디오 및 오디오 재생을 위한 video 및
audio 태그
․내장 스토리지와 데이터베이스 지원 기능
․온라인/오프라인 이벤트 기능, 네트워크 API현재 작업중인 HTML5 표준안은 아직 초안 상태로
앞으로도 많은 수정과 보완 작업이 필요할 것으로 예
상되고 있지만, 표준화와 기술개발, 구현이 동시에 진
행되는 특징을 갖고 있다. 구글/애플/모질라/마이크로
소프트 등을 비롯한 많은 브라우저 개발사들은 브라우
저 기능 개선과 함께 자사 규격을 표준에 반영하고 서
비스 개발에 반영하기 위한 확장 노력을 병행하고 있다.
2.2 웹 어플리케이션 기술
2005년 웹 2.0의 등장과 함께 다양한 신규 응용과 기
술들이 등장하기 시작하였다. 이 중에서도 가장 많은
변화를 일으킨 부분은 RSS/Atom 등의 XML 데이터
조각을 이용한 서비스 연동 기술과 AJAX(Asynchronous Javascript And XML)와 같은 비동기식 처리 기술, 브라우저 및 JavaScript 가속화 기술, Open API와 매시
업 기술 분야 등이었고, 이러한 기술들을 종합하는 웹
애플리케이션 기술 분야에서 많은 발전이 있었다[1].일반적으로 “웹 애플리케이션”이라는 용어는 HTTP
2011. 8 정보과학회지 11
를 통해 전달되는 웹 페이지(XHTML 또는 그 변이형
과 CSS, ECMAScript로 구성되는)의 집합체들이 웹 브
라우저 내에서 애플리케이션 같은 환경을 제공하는 것
을 말한다. 즉, 웹 애플리케이션은 여러 페이지를 거
치는 대화형 처리 절차를 가지며, 이를 위한 상태 유
지와 데이터 유지를 필요로 한다는 점에서 단순한 웹
콘텐츠와는 구분된다[2].일반적으로 웹 애플리케이션의 경우 별도 프로그램
의 설치 없이도 표준 브라우저만 있으면 계속 업그레
이드된 기능을 사용할 수 있고, Open API 등을 통해
손쉽게 매시업 할 수 있도록 기능을 제공하는 등 재
활용을 할 수 있다는 장점을 갖는 반면, 오프라인 처
리와 단말의 특성 정보를 활용할 수 없고, 브라우저의
성능에 좌우되며 대용량의 처리 등에 한계를 갖는다
는 단점을 갖고 있다.이중에서도 단말의 하드웨어와 관련되는 제어를 직
접 할 수 없다는 점은 가장 큰 단점으로 꼽히고 있다. 예를 들어, 간단한 애플리케이션을 통해 배터리의 잔
량, 주소록의 주소 정보, 단말에 저장된 일정 정보 등
을 활용하고자 해도 할 수 없다는 점은 치명적인 약
점으로 꼽혀 왔다. 이러한 웹 애플리케이션의 약점은
모바일 환경에서 더욱 치명적이라 할 수 있다. 데스크
톱의 웹 애플리케이션과 달리 모바일 단말의 경우 좀
더 많은 플랫폼으로부터의 제약을 갖고 있지만, 반면
에 좀 더 다양하게 디바이스 기능들을 활용할 필요를
갖고 있어 단말 기능 접근에 대한 요구가 훨씬 크다
고 할 수 있기 때문이다.W3C에서는 핵심적인 단말 기능을 활용할 수 있도
록 하는 Contacts, System Information and Events, Ca-mera, User Interface, Tasks, Messaging, Gallery, File system, Communication Log 등과 같은 8종류 이상의
Device API 표준들을 개발 중에 있으며, 그림 2와 같
이 웹 응용 개발과 관련된 XHR, Widget, Web IDL, Web Socket API, CORS 등과 같은 20여 개 이상의 Web Application 관련 표준들도 개발 중에 있다.
그림 2 웹 어플리케이션 기술 표준 분류 및 현황[3]
․XHR(XmlHttpRequest)은 AJAX와 같은 비동기식
웹 애플리케이션 개발 기법의 핵심 요소, 서버와 클
라이언트 사이의 데이터 전송을 위한 기능을 정의
․Web IDL(Interface Definition Language)은 브라우
저에서 구현되어 웹 상에서 인터페이스를 설명하
기 위한 용도로 사용될 수 있는 IDL(인터페이스
정의 언어)을 정의
․웹 소켓 API 규격에서는 원격 서버와의 양방향
을 가능하도록 하는 웹 소켓 API를 정의
3. 차세대 웹 UI/UX 기술 표준 동향
최근 사용자 경험(UX: User eXperience)에 대한 관
심이 급속도로 높아지고 있다. 사용자 경험이란 사람
들이 어떤 제품이나 서비스와 상호작용하면서 축적하
게 되는 모든 기억과 감정을 의미한다. 즉, 디지털 상
품이나 서비스와의 상호작용을 통해서 유발되는 모든
심리적인 효과(Psychological Effects)를 총칭하는 개념
으로 이는 우리의 시각이나 청각 감각이 자극을 받은
정도, 우리가 상품이나 서비스에 부여하는 가치나 의
미들, 그리고 이를 통해 촉발된 감성과 느낌을 모두
포함한다[4].이처럼 UX란 단순한 경험에서 나오는 요소를 넘어
선 많은 사용자의 감성요소와 제품과 상호작용할 수
있는 인터랙션적인 요소가 포함되어 있다. UX의 향
상 요소들로는 그림 3과 같이 상호작용 방식, 정보 제
공 방식, 효과성/효율성/만족성을 포괄하는 사용성, 그리고 인간공학적 요소 등이 포함되어 있다[5].
웹 분야에서도 기술의 발전과 응용 분야의 확산, 그리고 활용도가 급증함에 따라 웹 사용자 UI와 UX를 개선하기 위한 많은 노력들이 진행되어 왔다. 본
고에서는 웹 UI/UX에 직접적인 영향을 주고 있는 기
술 및 표준화 노력들을 크게 다섯가지 유형으로 구분
하고 관련 동향을 살펴보았다.
그림 3 UX Design과 Interaction Design[5]
12 특집원고 차세대 웹에서의 UI/UX 기술 동향
표 1 HTML5의 새로운 특징[7]주요 기능 설명 관련 W3C 표준명
웹폼
(Web Form)
사용자의 입력정보를 받기 위해 사용되는 입력형태에 대한 정의에
사용되는 마크업, 애트리뷰트와 이벤트HTML5
캔버스
(canvas)
웹에서 즉시모드(immediate mode)로 2차원 그래픽을 그리기 위한
API와 canvas 내 각종 객체를 회전, 변환하고 그레디언트, 이미지
생성 등 각종 효과를 주는 기능에 대한 API
- Canvas 2D API
- HTML Canvas 2D Context
SVG
(Scalable Vector Graphic)XML 기반의 2차원 백터 그래픽을 표현하기 위한 언어 HTML5
Video/Audio
video는 비디오 또는 영화를 보여주기 위해 사용되는 미디어 엘리
먼트이며, audio는 사운드나 오디오 스트림을 표현하기 위한 미디
어 엘리먼트
HTML5
Geolocation 디바이스의 지리적 위치 정보를 제공하는 API 표준 Geolocation API
오프라인 웹 응용
(Offline Web Application)
인터넷 연결이 지원되지 않는 경우에도 웹 응용이 정상적으로 수행
될 수 있도록 지원하는 기능으로 응용에 대한 캐싱과 데이터에 대
한 캐싱으로 구성
- HTML5
- Web SQL Database
웹 SQL 데이터베이스
(Web SQL Database)
다양한 표준 SQL을 사용해 질의할 수 있는 데이터베이스 기능에 대
한 APIWeb SQL Database
로컬저장소
(Local Storage)
기존의 쿠키의 기능을 개선하기 위한 목적으로 개발된 기능으로 웹 클라이
언트에서 키와 값이 쌍으로 구성된 데이터를 영구적으로 저장하는 기능Web Storage
웹 소캣
(Web Socket)웹 응용이 서버 측의 프로세스와 직접적인 양방향 통신을 위한 API WebSocket API
웹 워커
(Web Worker)웹 응용을 위한 쓰레드(Thread) 기능에 대한 API Web Workers
3.1 편의성 - HTML5, Web form
웹의 사용성을 개선하기 위한 많은 노력들 중 가장
대표적인 것은 웹 자체의 편의성을 개선하기 위한 노
력이다. 이런 노력들은 HTML를 비롯하여 관련 마크
업들을 확장하여 새로운 기능성을 갖도록 하는 노력들
로 나타났고, 최근 HTML5로 대표되는 새로운 마크업
표준화 노력이 그중 대표적이라 할 수 있다.HTML5 표준안에서는 과거 HTML의 호환성을 유
지하면서 웹 개발자들이 실질적으로 부딪히는 문제를
해결하고자 하였다. HTML5에서는 기존의 HTML 문법과 사용법을 최대한 지원하고 이미 사용하던 표준
도 재사용하도록 하여 너무 문법에 얽매이지 않도록
하는 ‘호환성(Compatibility)’을 제공하고자 하였다. 또한 실제 웹 개발자들이 겪고 있는 가장 중요한 문제를
해결하면서 유용성을 높일 수 있도록 하며, 상호호환
성 확보를 통해 웹 브라우저간 차이로 인해 웹 개발
자와 사용자들이 겪는 문제를 해결하고자 하였다.HTML5가 사용자 편의성 개선에 기여하는 측면은
다음과 같다[6].첫째, HTML5에서는 기존의 HTML4 보다 확장된
태그들을 지원한다. 20여개 이상의 새로운 태그와 엘
리먼트들이 추가되었고, 문서 구조를 보다 정확하게
의미적으로 표현할 수 있도록 하는 header, footer, nav, section 같은 구조화 마크업을 사용할 수 있다. 또한
<figure>와 <figurecaption>을 사용하여 이미지와 해설
을 의미적 연결 관계를 갖도록 묶어서 제공할 수 있다.둘째, HTML5에서는 다양한 새로운 web form 기능
을 제공한다. 대표적으로는 range, number, date, search, tel, url, color와 같은 새로운 유형을 포함해 12가지 형
태의 각종 Input type 속성이 제공되어 개발자와 사용
자 편의성을 높였다. 예를 들어 email type일 경우, 별도 email 주소 형식인지를 확인하지 않아도 브라우저
가 스스로 유효성 검증을 해준다. Placeholder라는 속
성을 추가로 사용할 경우는 입력창에 안내용 문자열
보여주게 된다. 이 밖에도 progress, output, datalist와
같은 새로운 요소들도 추가되었고, 파일 관련 기능으
로 다중 파일 업로드, 파일 필터링, 파일 정보 액세스
의 기능 등이 추가되었으며, 폼 유효성 검사(입력값
검증) 기능 등도 제공된다.셋째, HTML5는 표 1과 같이 웹 어플리케이션 개발
에 도움을 줄 수 있는 다양한 Web Socket 통신 API, GPS 위치 정보 활용을 위한 geolocation API, 문서간
알림 기능인 Server-sent Event API 등과 같은 다양한
API들을 포함하고 있다. 이러한 API들은 2차원 그래
2011. 8 정보과학회지 13
그림 4 History of Web Application Framework Timeline[9]
픽을 위한 canvas 기능, 비디오와 오디오 재생을 위한
video/audio 요소 등과 연계하여 개선된 사용자 편의
성을 제공할 수 있도록 해준다.
3.2 응용성 - Web Application, Design Pattern
두 번째 웹 UI/UX의 개선 노력은 보다 나은 응용성
과 활용성을 제공할 수 있도록 하는 웹 어플리케이션
과 관련된 개선 노력들이다. 웹 기술이 다양한 비즈니
스 분야에 적용되면서 단순한 정적 문서 표현이 아닌
비동기식 통신과 스크립트 기반의 동적인 처리, 복잡
한 응용 로직과 화면의 결합 등이 필요하게 되었다. 이런 과정에서 개발 복잡도와 난이도를 줄이면서도, 일관되고 효과적인 UI/UX를 제공할 수 있는 방법에
대한 요구들이 등장하고 있다.웹 어플리케이션은 일반적으로 데이터베이스 또는
비즈니스 로직 처리용 서버와 연결되어 데이터의 입
력(Create), 조회(Read), 수정(Update), 삭제(Delete)와 같
은 정보처리 작업을 수행하게 되며, 웹 어플리케이션
의 화면 단위들과 사용자 인터페이스들은 이러한 작
업 단위들과 밀접하게 연관이 되어 있다. 웹 어플리케
이션 프레임워크(WAF : Web application framework)는 이처럼 복잡한 웹 어플리케이션과 동적인 웹사이트의
개발을 보조하기 위한 용도로 활용된다. 웹 어플리케
이션 프레임워크는 데이터베이스 연결, 세션 관리, 코드 재사용과 같이 개발 과정에서 공통되게 수행되는
오버헤들을 줄이고 활용성을 높여 개발 생산성을 높
이기 위한 목적으로 활용된다.웹 어플리케이션 관련 UI/UX 개선 노력은 다음과
같이 세 가지 유형으로 구분할 수 있다.첫째, 디자인 패턴과 모델 기반 UI의 활용이다. 웹
응용 개발과 관련해서는 JavaScript 디자인 패턴, AJAX 디자인 패턴, CSS 및 HTML 디자인 패턴 등에 대한
개발 및 활용 노력들이 진행되고 있다. 이러한 디자인
패턴의 활용은 개발 소요시간의 단축, 유지보수의 용
이성과 같은 여러 장점을 제공한다. 최근에는 MBUI (Model based User Interface)에 관한 표준화를 시작하
여 추상화된 설계를 통해 자동화된 UI를 설계할 수
있도록 하기 위한 관련 기술 및 표준을 개발 중에 있
다[8,10,11].둘째, 이벤트 기반의 비동기적 서비스 환경에서의
인터랙션 디자인이다. XHR을 비롯하여 Websocket과
같은 비동기적 통신 방식의 활용은 서버응답 대기 시
간을 줄이고, 이벤트와 인터랙션 기반의 빠른 동적 처
리를 가능하게 하는 장점을 제공하고 있다. 그러나 불
필요한 분야에서의 비동기적 방식의 사용은 개발의 복
잡도를 높이고 사용자 편의성을 감소시키기에 효과적
인 인터랙션 디자인 기법과 도구에 대한 다양한 연구
가 진행되고 있다[12].셋째, 웹 어플리케이션 프레임워크(WAF) 또는 Web
UI Library 기반의 UI 일관성 확보 노력이다. 최근 YUI, WUI, MochaUI, jQuery, Sencha Touch, iWebKit 과 같
은 다양한 UI Library들과 WAF들이 등장하고 있고
많은 곳에서 활용이 되고 있다. 이런 도구들은 복잡한
DOM script 처리와 이벤트 핸들링을 용이하게 만들어
주며 AJAX 기반의 비동기적 처리를 간단하게 구현할
수 있도록 하며, 여러 유형의 응용 UI를 손쉽게 구현
할 수 있도록 해준다.
3.3 호환성 - Multi Device One Web
세 번째 웹 UI/UX에 대한 개선 노력은 멀티 디바
이스 환경에서 일관성 있고 호환성 있는 웹 사용성과
사용자 경험을 제공하기 위한 노력들이다. 이는 사용
자 기기 종류의 폭발적 성장과 연관되어 있다.PC 이외의 스마트폰, 태블릿, TV 등과 같은 다양한
14 특집원고 차세대 웹에서의 UI/UX 기술 동향
그림 5 모바일OK 표준화 경과
그림 6 터치 제스처 참조 가이드[16]
단말들이 폭발적으로 확산되고, 이러한 단말 상에서
웹 접속이 가능해지면서 멀티 디바이스 환경에서의
일관성 있는 웹 접근과 사용성 보장에 대한 필요성이
늘어나고 있다. 이에 W3C는 유비쿼터스 웹 도메인
(Ubiquitous Web Domain) 영역을 만들어 모바일, TV, 소형 단말 등에서의 웹 접속과 활용에 관련된 다양한
표준들을 개발하고 있다[13].멀티 디바이스 환경에서의 UI/UX 개선 노력은 크
게 세 가지 유형으로 나뉘어 진행되고 있다.첫째, 모바일/데스크탑 웹 사용의 일관성 확보 노력
이다. 근래의 모바일 인터넷 기술과 단말 기술의 급격
한 발전은 유/무선 웹 서비스 경계뿐 아니라, 사업자
간/국가간의 경계를 없애고 급격하게 하나의 웹(One Web) 환경으로 만들어가고 있다. 그림 5와 같이 W3C를 중심으로 진행되었던 모바일OK 표준화에서는 하
나의 모바일 웹 환경으로 일관된 사용성과 호환성을
보장하기 위해 필요한 모범사례 표준와 시험도구, 단말정보 저장소 표준 등을 개발하였다. 스마트폰 브라우
저의 성능 개선으로 PC/모바일 간의 기술적 격차가 없
어지긴 하였으나, 아직도 서로 다른 스크린 사이즈로
인한 UX의 차이를 극복하면서 일관성 있는 UX와 사
용성을 제공할 수 있는 기술을 필요로 하고 있다[14].
둘째, 다중 디바이스 환경에서 장치독립성을 갖는
적응형 콘텐츠 제공 노력이다. 소형 모바일 단말부터
대형 TV 화면까지 어디서든 웹 접속이 가능한 상황
에서 하나의 콘텐츠를 이용하여 다양한 단말 환경에
적합한 UX와 콘텐츠를 제공할 수 있는 기술들이 요
구되고 있다. 이를 위해서는 장치정보의 공유, DIAL (Device Independent Authoring Language) 표준 및 장
치 독립적인 콘텐츠 저작 환경, 단말과 사용자 특성을
명세할 수 있도록 하는 CC/PP(Composite Capability/ Preference Profiles) 기술, 단말과 서비스간 context 정보를 교환할 수 있도록 하는 DCCI(Delivery Context: Client Interfaces) 기술 등에 대한 표준 개발을 진행하
고 있다[15].셋째, 키보드 이외에 음성과 펜, 터치 및 제스처 등
을 통한 멀티 모달 인터페이스 활용 노력이다. W3C에서는 멀티 모달 인터페이스 제공을 위해 음성 기반
브라우징을 위한 VoiceXML, SSML(Speech Synthesis Markup Language), PLS(Pronunciation Lexicon Specifi-cation) 표준 등을 만들었으며, 펜 인터페이스를 위한
InkML 등을 만들고 있다. 또한 EMMA(Extensible Multi-modal Annotation Markup Language)를 통해 멀티모달
인터랙션 메타 정보 표현을 가능하도록 하며, 감성 표
2011. 8 정보과학회지 15
현을 위한 EmotionML 표준 개발도 진행하고 있다. 이 밖에도 그림 6과 같이 멀티터치 이벤트를 활용한
처리 등을 가능하도록 하는 Web Events API4) 등의
표준 개발도 진행하고 있다.
3.4 보편성 - Web Accessibility
네 번째 웹 UI/UX 개선 노력은 보편성의 확보 노력
이다. 웹 접근성(Web Accessibility)는 장애인, 노약자
등 취약계층이 웹 서비스를 활용함에 있어서 차별없
이 다른 사용자와 동등하게 서비스를 활용할 수 있도
록 보장하는 것으로, 좀 더 넓은 개념에서는 보편성의
제공이라는 웹의 기본정신에 따라 웹 응용과 웹 서비
스를 이용하고자 하는 사람은 능력에 관계없이 접근
을 보장 받아야 함을 의미한다[17].즉, 웹 접근성의 본질적 의미는 사용자가 디바이스
와 플랫폼 환경에 종속되지 않고 웹 서비스를 이용할
수 있어야 한다는 것과 사용자 개인의 능력에 관계없
이 웹 서비스를 이용할 수 있어야 한다는 것에 있으
며, 서비스의 제공자의 관점에서 이런 점들을 고려한
설계와 제공을 해야 한다는 점을 의미하는 것이다. 나아가 디바이스와 플랫폼의 유형들에 대한 고려뿐 아
니라, 개별 사용자가 갖고 있는 지식, 경험, 신체적 차
이의 편차를 고려하여 웹 사이트의 설계와 구현이 이
루어져야 한다는 점이기도 하다.W3C는 1997년부터 웹 접근성 확보를 위해 웹 콘텐
츠(Web Content), 웹 저작도구(Web Authoring Tool), 그리고 사용자 브라우저(에이전트)(User Agent)라는 세
가지 표준 개발을 진행하여 오고 있다.첫째, 웹 콘텐츠 접근성 지침(WCAG : Web Con-
tents Accessibility Guidelines)은 웹 콘텐츠 제작자들
이 웹을 제작함에 있어 신체적으로 불편한 사람도 이
용할 수 있도록 웹 콘텐츠 제작 방법을 제시하는 것
이다. WCAG 2.0 표준은 크게 12개의 지침(Guideline)으로 구성되어 있다.
둘째, 사용자 도구 접근성 지침(UAAG : User Agent Accessibility Guidelines)은 웹을 이용하기 위해 필요
한 웹 브라우저, 멀티미디어 플레이어 등의 사용자 도
구(User agent)들도 신체적 불편이 있는 사람들을 배
려하여 제작할 수 있도록 관련 표준을 제공하고 있으
며, 현재 작업 중에 있는 UAAG 2.0 표준안은 5개 원
칙(Principle)에 32개의 지침으로 구성되어 있다.셋째, 저작도구 접근성 지침(ATAG: Authoring Tools
Accessibility Guidelines)은 웹 콘텐츠를 제작할 수 있
4) W3C Web Event WG, http://www.w3.org/2010/webevents/
는 저작도구를 개발하는 개발자 및 접근성 준수 저작
인터페이스를 만드는 개발자를 돕기 위해 제정된 표
준으로, 현재 작업 중에 있는 ATAG 2.0 표준안은 8개
가이드라인에 총 24개 검사항목으로 구성되었다[18].최근에는 리치 인터넷 애플리케이션(RIA: Rich Inter-
net Application) 환경과 같이, 보다 동적으로 화면의
웹 페이지의 일부분이 변경되는 방식이거나, 웹 서버
와의 정보 교환이 비동기 방식으로 이루어지는 동적
인 응용 환경에서의 접근성 관련 표준인 RIA에 관한
접근성 가이드라인(Accessible Rich Internet Applica-tions: WAI-ARIA 1.0) 표준 개발을 진행하고 있다[19].
국내외적으로 웹 접근성 제고를 위한 다양한 법적, 제도적 장치들이 마련되고 있으며, 이에 따라 웹 접근
성 평가와 웹 접근성 보장 방안들에 대한 다양한 연
구들이 활발하게 진행되고 있으며, 보편적 웹 사용성
의 구현 방법으로 활용되고 있다.
3.5 확장성 - Service Interface Design
마지막 웹 UI/UX 개선 노력은 서비스간 손쉬운 연
동을 통한 확장성의 제공 노력이다. 웹 응용들이 단순
한 기능을 제공하는 응용으로서만 아니라, 개방형 API들을 함께 제공하는 플랫폼으로서의 기능들을 하고, 이를 이용하는 다양한 매쉬업 응용들이 가능해지도록
함으로써, 손쉽게 사용자 경험의 연장과 사용자 경험
의 확장을 가져갈 수 있도록 하고 있다.다양한 API 설계 기법으로 활용되고 있는 RESTful
설계 방식은 HTTP와 URI에 기반하여 자원과 액션을
중심으로 자원의 상태를 변화시키는 관점으로 설계하
는 방식을 말한다. 여기서 자원에 대한 요청은 GET, POST, PUT, DELETE와 같은 HTTP 요청으로 표현되
며, 이런 요청을 통해 자원에 대한 접근과 상태 변화
등이 가능하도록 하는 방식으로 설계한다. 또한 REST 방식의 API들에서 사용되는 데이터 교환 형식은 XML, RSS, JSON 등과 같이 단순한 구조를 이용하면서 빠
르고 손쉽게 데이터를 교환할 수 있는 방식을 주로
사용한다. 이러한 REST 방식의 API 설계 방식과 철
학은 다양한 Open API에서 사용되고 있으며, 이를 통
해 웹의 확장성을 넓히고 사용자 경험의 확장을 가능
하도록 하고 있다.
4. 결 언
지금까지 웹 UI/UX 개선을 위한 새로운 기술 표준
동향에 대해 살펴보았다. 그리고 웹 UI/UX 관련 기술
및 표준개선 노력을 편의성, 응용성, 호환성, 보편성,
16 특집원고 차세대 웹에서의 UI/UX 기술 동향
확장성이라는 다섯가지 관점으로 분류하여 고찰해보
았고, 이를 통해 HTML5, 웹 애플리케이션 UI/UX, 멀티 디바이스 지원, 보편적 접근성 확보, REST 기반의
서비스 연계 기술들을 중심으로 웹 UI/UX 개선 노력
들이 진행되고 있음을 확인할 수 있었다. 그리고 이런
노력들을 가로지르는 공통적인 내용으로 웹 표준에
기반한 설계와 활용이 기반이 되고 있다는 사실도 확
인할 수 있었다. 여기서 우리는 두 가지 중요한 시사점
을 발견할 수 있었다.첫째, 우선 제일 먼저 웹 표준 기반의 UI/UX 개선
노력이 우리에게 시사하는 점이다. 지금까지의 국내
의 웹 환경은 ActiveX를 기반으로 하는 비표준 확장
기술이 폭넓게 사용되는 환경으로 심각한 플랫폼 종
속성과 집중화로 인한 많은 부작용을 가져왔다고 할
수 있다. 물론 초기에는 단일 브라우저 환경만을 고려
해도 된다는 점이 장점이 되어, ActiveX를 기반으로
하는 여러 인터넷 서비스가 안정적으로 확산될 수 있
는 기반이 되기도 했었다. 그러나 PC 중심의 서비스
환경에서 모바일 중심의 서비스 환경으로 전환되는
시점에서 이러한 PC 중심의 환경은 큰 장애 요소가
되고 있다.그러므로 새로운 컴퓨팅 환경으로 패러다임 전환이
진행되고 있는 지금, 우리는 서둘러 PC 중심의 서비
스 관점에서 벗어나 다양한 단말과 디바이스 환경에
효율적으로 적용할 수 있는 표준 기술 기반의 서비스
방식과 사용자 인터페이스 제공방식, 그리고 사용자
경험 개선을 제공하도록 노력해야 한다. 또한 지금까
지 각각의 영역에서 진행되었던 다양한 개선 노력들을 총괄적으로 살피며, 총체적인 관점에서 웹 UI/UX 개선 노력들을 재조명하며 그 방향을 모색해야 할 필요
가 있다.둘째, 새로운 단말 환경에 맞는 UI/UX 기술에 대한
고민이 필요하다는 점이다. 웹 기술이 갖는 가장 큰
장점은 단순성, 확장성, 그리고 무한한 연결성이다. 이런 특징을 기초로 웹 기술은 슬로우 스타터(slow star-ter)로 환경의 변화에 적응하며 세계를 잇는 기술로 지
속적이면서도 꾸준한 기술 발전을 진행시켜 왔다. 웹
기술은 모바일 환경과 앱의 시대을 맞아 또한번의 변
화를 시작하고 있으며, 그 변화의 핵심은 UI/UX에 관
한 내용이라 할 수 있다.과거에도 모바일 분야에서 웹 기술은 언제나 당장
이라도 급속히 확산될 것처럼 전망이 되었으나, 실제
로는 그러지 못했다. 피처폰 시대의 WAP 기반의 브라
우징 환경이 그러했고, 다기능폰 시대의 풀브라우징
이 그러했으며, 아이폰 이후 스마트폰 시대의 모바일
웹 환경도 그렇다. 사실 이런 모든 문제들은 모바일
웹이 갖고 있는 UI/UX의 문제와 밀접하게 연관되어
있다고 할 수 있다. 최근의 스마트폰에서 웹 보다 앱
이 예상과 달리 점점 더 많이 활용되고 있다는 점도
이런 점을 반증한다. 단순히 브라우저에서 URL을 입
력하거나 북마크를 선택해서 접속하고 브라우징하는
모바일 웹의 UI/UX는 앱스토어와 함께 빠르게 설치
되고 사용될 수 있는 모바일 앱의 UI/UX와 비교해 장
점이 부족하다. 뿐만 아니라 웹 어플리케이션이 제공
하는 기능과 성능 면에서도 상대적으로 부족함을 갖
고 있다.그러므로 현단계 웹 기술의 진화단계에 맞추어, 4
단계인 웹 응용과 플랫폼 단계로서의 UI/UX들에 대
한 고민들이 필요하다. 앞서 언급했던 많은 이슈들은
웹이 넘을 수 없는 근본적인 한계라기 보다는, 오히려
극복해야 할 기술적 도전 이슈들이라 할 수 있다. 웹
기술이 Web Game, Web OS를 넘어 사물을 연결하는
WoT(Web of Things)의 영역으로까지 확대되어가는 지
금, 새롭게 변화되고 있는 단말과 응용 환경에 적합한
새로운 UI/UX에 대한 고민과 함께, 웹 어플리케이션
에서의 효과적인 상호작용과 인터페이스 방식에 대한
새로운 많은 연구개발들이 필요하다.최근 등장하는 증강현실(AR) 브라우징, QR코드 브
라우징, 사물인식 브라우징, 음성 브라우징 등과 같은
새로운 브라우징 방식과 개념들을 보면 미래의 무궁
무진한 변화를 예상할 수 있다. 지난 15년간의 웹 기
술 발전의 원동력이 확장성과 포용성, 그리고 끊임없
는 도전에 있었던 것과 같이, 다가올 변화에 앞서 웹
기술이 갖고 있는 고유한 장점들은 살리면서 진일보
한 사용자 경험을 제공하는 웹 UI/UX 설계 방법과 기
술 및 도구, 그리고 표준들이 지속적으로 등장하길 바
라며, 이를 통해 보다 편리한 웹 응용과 서비스를 제
공할 수 있기를 기대해본다.
참고문헌
[ 1 ] 전종홍, 이승윤, “웹 2.0 기술 현황 및 전망”, 전자통
신동향분석 제21권 제5호, 2006년 10월[ 2 ] 전종홍, 이승윤, “차세대 모바일 웹 어플리케이션 표
준화 동향”, 전자통신동향분석, 제25권 제1호, 2010년 2월
[ 3 ] EU FP7 MobiWebApp Project report, “Standards for Web Applications on Mobile: May 2011 current state and roadmap”, http://www.w3.org/2011/05/mobile-web-
2011. 8 정보과학회지 17
app-state[ 4 ] 김진우, “UX와 HCI: 정보통신 기술을 이용한 새로운
사용자 경험의 설계”, 통신연합 회보, 2009년 가을호
[ 5 ] 이동민, 전후현, “UX(User eXperience) 특성을 갖춘
디자인 발전 방향성에 대한 연구”, Journal of the Ergonomics Society of Korea, Vol. 29, No. 4 pp.595- 604, August 2010
[ 6 ] 윤석찬, 신현석, 정찬명, 경준호, 권정혁 (2010), “실전 HTML5 가이드”. 한국 웹 표준 커뮤니티(creative commons). http://webstandards.or.kr/html5
[ 7 ] 이원석, “HTML5와 모바일 웹”, TTA Journal, No. 128, pp. 50-54
[ 8 ] 김창겸, 유승연 외 3인, “웹 애플리케이션 기반 UI 패턴 모델 개발과 효용성에 관한 연구”, Entrue Journal of Information Technology, January 2009, Vol. 8, No.1, pp.7-20
[ 9 ] History of Web Application Frameworks, http://www. flickr.com/photos/mraible/4378559350/sizes/o/
[10] W3C, Model-Based UI XG Final Report, http://www. w3.org/2005/Incubator/model-based-ui/XGR-mbui-20100504/
[11] H. M. El-Bakry, A. M. Riad, M. Abu-Elsoud, “Adaptive User Interface for Web Applications,” in RECENT ADVANCES in BUSINESS ADMINISTRATION: ICBA '10, February 20-22, 2010, pp. 190-211
[12] 이지현, “Ajax 기반의 웹 2.0 서비스를 위한 인터랙션
디자인 가이드라인에 대한 연구”, Journal of the Ergonomics Society of Korea, Vol. 29, No. 4 pp.569- 574, August 2010
[13] W3C Ubiquitous Web Domain, http://www.w3.org/ UbiWeb/
[14] 전종홍, 이승윤, “모바일 웹 2.0과 모바일OK 표준화
동향,” 전자통신동향분석, 제22권 제6호, 2007년 12월, pp. 84-95
[15] 이강찬, 이승윤, “유비쿼터스 웹 표준화 동향”, 전자
통신동향분석, 제22권 제6호, 2007년 12월. pp. 66-73
[16] Touch Gesture Reference Guide, http://www.lukew. com/touch/TouchGestureGuide.pdf
[17] 임성배, “서비스의 보편적 제공 관점에서 바라본 웹
표준과 웹접근성의 의미”, 전자정부 포커스 No. 03, 2007
[18] 현준호, “웹 접근성(Web Accessibility)”, TTA Journal, No. 106, pp. 95-102
[19] 김석일, 신민철, “웹 접근성을 고려한 신기술 콘텐츠
제작기법”, 2008. 12
전 종 홍
1996~1999 한국정보시스템 기술개발연구소 주
임연구원
1999~2007 ETRI 표준연구센터 근무
2004~현재 TTA 웹프로젝트 그룹(PG605) 부의장
2008~현재 TTA 모바일 웹 실무반(WG6051) 의장
2010~현재 TTA 증강현실 실무반(WG6053) 부의장
2006~현재 TTA 국제표준전문가
2010~현재 W3C POI WG Editor2011~현재 정보과학회 CG&I 소사이어티 운영이사
현재 한국전자통신연구원 표준연구센터 서비스융합표준연구팀 선
임연구원
관심분야 : 모바일 웹, 웹 응용 기술, 증강 브라우징, Web OS 및 미래
웹 기술 표준화
E-mail : [email protected] : http://twitter.com/hollobit
이 승 윤
1999~현재 ETRI 표준연구센터, 선임연구원
2003~현재 ETRI 표준연구센터 서비스융합표준
연구 팀장
2004~현재 TTA 국제표준전문가
2006~현재 TTA IT응용기술위원회(TC06) 부의장
2006~현재 TTA 웹프로젝트 그룹(PG605) 의장
2006~현재 ITU-T SG13 Editor현재 한국전자통신연구원 표준연구센터 서비스융합표준연구팀 팀장
관심분야 : 차세대 웹 표준, 유비쿼터스 웹서비스(UWS) 표준, 모바일
웹 표준, 웹 2.0 표준
E-mail : [email protected]