본 고에서는 빠르게 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 개발 중에 있는 차세대 웹에서의 UI(User eXperience)/UX(User Interface) 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 하였다.

1. 특집원고
차세대 웹에서의 UI/UX 기술 동향
한국전자통신연구원 전종홍*․이승윤
1. 서1)론 화해오고 있다. 이처럼 웹 기술은 우리 생활에 없어서
는 안 될 정도로 중요하게 활용되고 있으며, 브라우저
1989년 CERN의 팀 버너스 리에 의해 만들어진 월
와 웹 사용자 인터페이스를 통한 정보 접근과 활용은
드 와이드 웹 기술은 HTML(HyperText Markup Lan-
지속적으로 늘어나고 있는 상황이다.
guage), URL(Unified Resource Locator), HTTP(Hyper-
그러나 한편에서는 웹 기술을 활용한 응용과 서비
Text Transfer Protocol)이라는 세 가지 기술을 기초로
스가 많아짐에 따라 시스템의 복잡도가 높아지고 개
간단한 문서와 자원들을 공유하기 위한 목적으로 출
발 생산성이 낮아지는 문제도 발생하고 있다. 더불어
발하였다. 이후 1994년 기술 표준화를 위한 W3C(World
PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹
Wide Web Consortium)가 창립되면서 웹 기술은 눈부
서비스를 활용함에 따라 단말과 사용환경에 상관없이
신 진보와 함께 인류 생활에 있어 없어서는 안 될 중
일관성 있는 사용성 제공의 요구가 높아지고 있으며,
요한 기술로 기반 기술로 발전해오고 있다.
모두를 위한 보편적 서비스로 웹 서비스가 활용됨에
2010년 12월 현재 전세계에는 2억5천만개의 웹 사
따라 제약없고 차별없는 보편적 웹 접근성 제공의 필
이트가 공식적으로 서비스를 제공하고 있는 것으로 추
요성도 커지고 있다. 단말의 인터페이스 방식도 마우
정되고 있고, 2010년 한해에 개설된 웹 사이트의 숫
스/키보드 활용 방식에서 터치/제스처/음성 및 실세계
자만 해도 2160만개에 이르며, 비공식적으로 웹 서버
인식 기능을 결합시키는 형태로 발전하고 있다.
기능까지 내장한 장치들을 포함한다면 2-3배 정도 규
본 고에서는 이처럼 변화되는 서비스 환경을 중심
모가 될 것으로 전망되고 있다.
으로 보다 나은 웹 사용성을 제공하기 위해 개발 중에
2010년 현재 전세계 인터넷 사용자는 20억명이 넘
있는 차세대 웹에서의 UI(User eXperience)/UX(User
으며(국내의 경우도 인구의 77%에 해당하는 3,700만
Interface) 관련 이슈 및 기술 표준 동향에 대해 살피고,
명 이상), 하루 평균 2시간 정도를 웹 접속에 사용하
향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위
고 있다.1) 모바일의 경우도 사용자들이 꾸준히 늘고
해 나아갈 방향들에 대해 고찰해보고자 하였다.
있으며, 2011년 7월 현재 하루 평균 74분 정도를 웹
사이트 접속에 사용을 하고 있는 것으로 조사되고 있
2. 차세대 웹 기술
으며, 그 사용시간도 매년 15% 정도씩 늘어나고 있
다.2) 웹 기술의 진화 발전 과정을 살펴보면 다음과 같이
웹 기술의 진화도 계속 이루어져 초기에 단순히 정 크게 4단계로 구분해볼 수 있다. 첫 번째 단계는 1989
적인 문서 형태로 정보를 공유하는 형식에서, 단말의 년부터 1999년까지의 기간으로 HTML, URL, HTTP
HW을 제어하고 비동기적으로 원격 데이터베이스를 라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다
연동하며 다양한 응용 로직을 처리하는 수준까지 진 나은 인간 중심의 정보처리 및 지식공유 등을 목표로
하는 단계였다. 두 번째 단계는 2000년부터 2004년까
지의 기간으로 XML(eXtensible Markup Language)에
* 종신회원
* 본 연구는 방송통신위원회의 지원을 받는 방송통신표준개발지원 기반하며 인간 중심의 정보 처리뿐 아니라 다양한 디
사업의 연구 결과로 수행함. 바이스와 서비스, 멀티미디어를 연결하는 것을 목표
1) http://royal.pingdom.com/2011/01/12/internet-2010-in-numbers/ 로 하는 단계였다. 세번째 단계는 2005년부터 2009년
2) http://blog.flurry.com/bid/63907/Mobile-Apps-Put-the-Web-in-Their-
Rear-view-Mirror
까지로, 구글, 아마존, 위키피디아 등의 성공과 함께
2011. 8 정보과학회지 9

2. 그림 1 HTML 마크업 기술의 발전 과정
웹 산업을 제2의 전성기로 이끌며 다양한 신규 서비 운 HTML 규격을 만들기 위한 HTML WG을 구성하였
스가 등장할 수 있는 기반을 만들었다. 그리고 마지막 고, WHATWG(Web Hypertext Application Technology
네 번째 단계는 2010년 이후부터 현재까지로, 스마트 Working Group)의 규격을 기초로 한 새로운 HTML5
폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 표준안을 만들기 시작하였다.
HTML5와 Web API(Application Programming Interface) HTML5 표준의 가장 큰 특징은 기존의 HTML 표
를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위 준의 한계를 극복하기 위해, 별도의 추가적인 확장 기
치정보 및 소셜 정보 등을 결합하는 통합 응용 플랫 능 없이도 과거에는 불가능했던 다양한 처리들을 가
폼으로서 웹이 자리잡아 가는 단계라 할 수 있다[1]. 능하게 하는 것에 있다. 이를 위해 HTML5에서는 아
래와 같이 웹 애플리케이션 개발에 도움을 줄 수 있
2.1 HTML5와 브라우저 기술
는 다양한 기능과 API를 제공하고 있다.
웹 기술이 확산된 가장 큰 배경은 HTML이라는 언
․2차원 그래픽 API 사용을 위한 canvas 기능
어를 이용하여 정보를 표현하고, 이를 다양한 단말의
․내장 비디오 및 오디오 재생을 위한 video 및
브라우저에서 효과적으로 활용할 수 있다는 점에 있
audio 태그
었다. 그림 13)과 같이 1993년 HTML1.0 규격이 만들
․내장 스토리지와 데이터베이스 지원 기능
어지고 난 후, 1997년 HTML 4.0과 1999년의 HTML
․온라인/오프라인 이벤트 기능, 네트워크 API
4.01 규격이 만들어지기까지 웹 기술은 폭발적으로 성
현재 작업중인 HTML5 표준안은 아직 초안 상태로
장하였다. 그러나 HTML 자체가 갖는 확장의 어려움
앞으로도 많은 수정과 보완 작업이 필요할 것으로 예
으로 W3C에서는 1999년부터 좀 더 다양한 확장성을
상되고 있지만, 표준화와 기술개발, 구현이 동시에 진
가질 수 있도록 하기 위해서 XML을 기반으로 하는 새
행되는 특징을 갖고 있다. 구글/애플/모질라/마이크로
로운 XHTML(Extensible Hypertext Markup Language)
소프트 등을 비롯한 많은 브라우저 개발사들은 브라우
1.0 개발을 추진하였고, 2009년까지 XHTML 2.0 개발
저 기능 개선과 함께 자사 규격을 표준에 반영하고 서
을 진행하여 왔다.
비스 개발에 반영하기 위한 확장 노력을 병행하고 있다.
HTML은 단순함을 가졌으나 확장이 어려웠고, XHTML
은 확장성은 좋았으나 지나치게 복잡하다는 단점을 2.2 웹 어플리케이션 기술
가졌었다. 이러한 이유로 XHTML 표준화는 계속 지연 2005년 웹 2.0의 등장과 함께 다양한 신규 응용과 기
이 되었고, 이런 업계의 노력에 자극을 받은 다양한 기 술들이 등장하기 시작하였다. 이 중에서도 가장 많은
술적인 진화 내역들을 흡수한 새로운 마크업 언어를 필 변화를 일으킨 부분은 RSS/Atom 등의 XML 데이터
요로 했던 업계 전문가들이 2004년 WHATWG을 구성 조각을 이용한 서비스 연동 기술과 AJAX(Asynchronous
하고 다양한 웹 애플리케이션에 효과적으로 사용할 수 Javascript And XML)와 같은 비동기식 처리 기술, 브
있는 보다 단순하면서도 다양한 확장성을 갖는 HTML5.0 라우저 및 JavaScript 가속화 기술, Open API와 매시
규격을 만들기 시작하였다. 이에 W3C는 2008년 새로 업 기술 분야 등이었고, 이러한 기술들을 종합하는 웹
애플리케이션 기술 분야에서 많은 발전이 있었다[1].
3) http://is.gd/w9S9a9 일반적으로 “웹 애플리케이션”이라는 용어는 HTTP
10 특집원고 차세대 웹에서의 UI/UX 기술 동향

3. 를 통해 전달되는 웹 페이지(XHTML 또는 그 변이형 ․XHR(XmlHttpRequest)은 AJAX와 같은 비동기식
과 CSS, ECMAScript로 구성되는)의 집합체들이 웹 브 웹 애플리케이션 개발 기법의 핵심 요소, 서버와 클
라우저 내에서 애플리케이션 같은 환경을 제공하는 것 라이언트 사이의 데이터 전송을 위한 기능을 정의
을 말한다. 즉, 웹 애플리케이션은 여러 페이지를 거 ․Web IDL(Interface Definition Language)은 브라우
치는 대화형 처리 절차를 가지며, 이를 위한 상태 유 저에서 구현되어 웹 상에서 인터페이스를 설명하
지와 데이터 유지를 필요로 한다는 점에서 단순한 웹 기 위한 용도로 사용될 수 있는 IDL(인터페이스
콘텐츠와는 구분된다[2]. 정의 언어)을 정의
일반적으로 웹 애플리케이션의 경우 별도 프로그램 ․웹 소켓 API 규격에서는 원격 서버와의 양방향
의 설치 없이도 표준 브라우저만 있으면 계속 업그레 을 가능하도록 하는 웹 소켓 API를 정의
이드된 기능을 사용할 수 있고, Open API 등을 통해
손쉽게 매시업 할 수 있도록 기능을 제공하는 등 재 3. 차세대 웹 UI/UX 기술 표준 동향
활용을 할 수 있다는 장점을 갖는 반면, 오프라인 처 최근 사용자 경험(UX: User eXperience)에 대한 관
리와 단말의 특성 정보를 활용할 수 없고, 브라우저의 심이 급속도로 높아지고 있다. 사용자 경험이란 사람
성능에 좌우되며 대용량의 처리 등에 한계를 갖는다 들이 어떤 제품이나 서비스와 상호작용하면서 축적하
는 단점을 갖고 있다. 게 되는 모든 기억과 감정을 의미한다. 즉, 디지털 상
이중에서도 단말의 하드웨어와 관련되는 제어를 직 품이나 서비스와의 상호작용을 통해서 유발되는 모든
접 할 수 없다는 점은 가장 큰 단점으로 꼽히고 있다. 심리적인 효과(Psychological Effects)를 총칭하는 개념
예를 들어, 간단한 애플리케이션을 통해 배터리의 잔 으로 이는 우리의 시각이나 청각 감각이 자극을 받은
량, 주소록의 주소 정보, 단말에 저장된 일정 정보 등 정도, 우리가 상품이나 서비스에 부여하는 가치나 의
을 활용하고자 해도 할 수 없다는 점은 치명적인 약 미들, 그리고 이를 통해 촉발된 감성과 느낌을 모두
점으로 꼽혀 왔다. 이러한 웹 애플리케이션의 약점은 포함한다[4].
모바일 환경에서 더욱 치명적이라 할 수 있다. 데스크 이처럼 UX란 단순한 경험에서 나오는 요소를 넘어
톱의 웹 애플리케이션과 달리 모바일 단말의 경우 좀 선 많은 사용자의 감성요소와 제품과 상호작용할 수
더 많은 플랫폼으로부터의 제약을 갖고 있지만, 반면 있는 인터랙션적인 요소가 포함되어 있다. UX의 향
에 좀 더 다양하게 디바이스 기능들을 활용할 필요를 상 요소들로는 그림 3과 같이 상호작용 방식, 정보 제
갖고 있어 단말 기능 접근에 대한 요구가 훨씬 크다 공 방식, 효과성/효율성/만족성을 포괄하는 사용성, 그
고 할 수 있기 때문이다. 리고 인간공학적 요소 등이 포함되어 있다[5].
W3C에서는 핵심적인 단말 기능을 활용할 수 있도 웹 분야에서도 기술의 발전과 응용 분야의 확산,
록 하는 Contacts, System Information and Events, Ca- 그리고 활용도가 급증함에 따라 웹 사용자 UI와 UX
mera, User Interface, Tasks, Messaging, Gallery, File 를 개선하기 위한 많은 노력들이 진행되어 왔다. 본
system, Communication Log 등과 같은 8종류 이상의 고에서는 웹 UI/UX에 직접적인 영향을 주고 있는 기
Device API 표준들을 개발 중에 있으며, 그림 2와 같 술 및 표준화 노력들을 크게 다섯가지 유형으로 구분
이 웹 응용 개발과 관련된 XHR, Widget, Web IDL, 하고 관련 동향을 살펴보았다.
Web Socket API, CORS 등과 같은 20여 개 이상의 Web
Application 관련 표준들도 개발 중에 있다.
그림 2 웹 어플리케이션 기술 표준 분류 및 현황[3] 그림 3 UX Design과 Interaction Design[5]
2011. 8 정보과학회지 11

4. 3.1 편의성 - HTML5, Web form 의미적으로 표현할 수 있도록 하는 header, footer, nav,
웹의 사용성을 개선하기 위한 많은 노력들 중 가장 section 같은 구조화 마크업을 사용할 수 있다. 또한
대표적인 것은 웹 자체의 편의성을 개선하기 위한 노 <figure>와 <figurecaption>을 사용하여 이미지와 해설
력이다. 이런 노력들은 HTML를 비롯하여 관련 마크 을 의미적 연결 관계를 갖도록 묶어서 제공할 수 있다.
업들을 확장하여 새로운 기능성을 갖도록 하는 노력들 둘째, HTML5에서는 다양한 새로운 web form 기능
로 나타났고, 최근 HTML5로 대표되는 새로운 마크업 을 제공한다. 대표적으로는 range, number, date, search,
표준화 노력이 그중 대표적이라 할 수 있다. tel, url, color와 같은 새로운 유형을 포함해 12가지 형
HTML5 표준안에서는 과거 HTML의 호환성을 유 태의 각종 Input type 속성이 제공되어 개발자와 사용
지하면서 웹 개발자들이 실질적으로 부딪히는 문제를 자 편의성을 높였다. 예를 들어 email type일 경우, 별
해결하고자 하였다. HTML5에서는 기존의 HTML 문 도 email 주소 형식인지를 확인하지 않아도 브라우저
법과 사용법을 최대한 지원하고 이미 사용하던 표준 가 스스로 유효성 검증을 해준다. Placeholder라는 속
도 재사용하도록 하여 너무 문법에 얽매이지 않도록 성을 추가로 사용할 경우는 입력창에 안내용 문자열
하는 ‘호환성(Compatibility)’을 제공하고자 하였다. 또 보여주게 된다. 이 밖에도 progress, output, datalist와
한 실제 웹 개발자들이 겪고 있는 가장 중요한 문제를 같은 새로운 요소들도 추가되었고, 파일 관련 기능으
해결하면서 유용성을 높일 수 있도록 하며, 상호호환 로 다중 파일 업로드, 파일 필터링, 파일 정보 액세스
성 확보를 통해 웹 브라우저간 차이로 인해 웹 개발 의 기능 등이 추가되었으며, 폼 유효성 검사(입력값
자와 사용자들이 겪는 문제를 해결하고자 하였다. 검증) 기능 등도 제공된다.
HTML5가 사용자 편의성 개선에 기여하는 측면은 셋째, HTML5는 표 1과 같이 웹 어플리케이션 개발
다음과 같다[6]. 에 도움을 줄 수 있는 다양한 Web Socket 통신 API,
첫째, HTML5에서는 기존의 HTML4 보다 확장된 GPS 위치 정보 활용을 위한 geolocation API, 문서간
태그들을 지원한다. 20여개 이상의 새로운 태그와 엘 알림 기능인 Server-sent Event API 등과 같은 다양한
리먼트들이 추가되었고, 문서 구조를 보다 정확하게 API들을 포함하고 있다. 이러한 API들은 2차원 그래
표 1 HTML5의 새로운 특징[7]
주요 기능 설명 관련 W3C 표준명
웹폼 사용자의 입력정보를 받기 위해 사용되는 입력형태에 대한 정의에
HTML5
(Web Form) 사용되는 마크업, 애트리뷰트와 이벤트
웹에서 즉시모드(immediate mode)로 2차원 그래픽을 그리기 위한
캔버스 - Canvas 2D API
API와 canvas 내 각종 객체를 회전, 변환하고 그레디언트, 이미지
(canvas) - HTML Canvas 2D Context
생성 등 각종 효과를 주는 기능에 대한 API
SVG
XML 기반의 2차원 백터 그래픽을 표현하기 위한 언어 HTML5
(Scalable Vector Graphic)
video는 비디오 또는 영화를 보여주기 위해 사용되는 미디어 엘리
Video/Audio 먼트이며, audio는 사운드나 오디오 스트림을 표현하기 위한 미디 HTML5
어 엘리먼트
Geolocation 디바이스의 지리적 위치 정보를 제공하는 API 표준 Geolocation API
인터넷 연결이 지원되지 않는 경우에도 웹 응용이 정상적으로 수행
오프라인 웹 응용 - HTML5
될 수 있도록 지원하는 기능으로 응용에 대한 캐싱과 데이터에 대
(Offline Web Application) - Web SQL Database
한 캐싱으로 구성
웹 SQL 데이터베이스 다양한 표준 SQL을 사용해 질의할 수 있는 데이터베이스 기능에 대
Web SQL Database
(Web SQL Database) 한 API
로컬저장소 기존의 쿠키의 기능을 개선하기 위한 목적으로 개발된 기능으로 웹 클라이
Web Storage
(Local Storage) 언트에서 키와 값이 쌍으로 구성된 데이터를 영구적으로 저장하는 기능
웹 소캣
웹 응용이 서버 측의 프로세스와 직접적인 양방향 통신을 위한 API WebSocket API
(Web Socket)
웹 워커
웹 응용을 위한 쓰레드(Thread) 기능에 대한 API Web Workers
(Web Worker)
12 특집원고 차세대 웹에서의 UI/UX 기술 동향

5. 그림 4 History of Web Application Framework Timeline[9]
픽을 위한 canvas 기능, 비디오와 오디오 재생을 위한 개발 및 활용 노력들이 진행되고 있다. 이러한 디자인
video/audio 요소 등과 연계하여 개선된 사용자 편의 패턴의 활용은 개발 소요시간의 단축, 유지보수의 용
성을 제공할 수 있도록 해준다. 이성과 같은 여러 장점을 제공한다. 최근에는 MBUI
(Model based User Interface)에 관한 표준화를 시작하
3.2 응용성 - Web Application, Design Pattern
여 추상화된 설계를 통해 자동화된 UI를 설계할 수
두 번째 웹 UI/UX의 개선 노력은 보다 나은 응용성
있도록 하기 위한 관련 기술 및 표준을 개발 중에 있
과 활용성을 제공할 수 있도록 하는 웹 어플리케이션
다[8,10,11].
과 관련된 개선 노력들이다. 웹 기술이 다양한 비즈니
둘째, 이벤트 기반의 비동기적 서비스 환경에서의
스 분야에 적용되면서 단순한 정적 문서 표현이 아닌
인터랙션 디자인이다. XHR을 비롯하여 Websocket과
비동기식 통신과 스크립트 기반의 동적인 처리, 복잡
같은 비동기적 통신 방식의 활용은 서버응답 대기 시
한 응용 로직과 화면의 결합 등이 필요하게 되었다.
간을 줄이고, 이벤트와 인터랙션 기반의 빠른 동적 처
이런 과정에서 개발 복잡도와 난이도를 줄이면서도,
리를 가능하게 하는 장점을 제공하고 있다. 그러나 불
일관되고 효과적인 UI/UX를 제공할 수 있는 방법에
필요한 분야에서의 비동기적 방식의 사용은 개발의 복
대한 요구들이 등장하고 있다.
잡도를 높이고 사용자 편의성을 감소시키기에 효과적
웹 어플리케이션은 일반적으로 데이터베이스 또는
인 인터랙션 디자인 기법과 도구에 대한 다양한 연구
비즈니스 로직 처리용 서버와 연결되어 데이터의 입
가 진행되고 있다[12].
력(Create), 조회(Read), 수정(Update), 삭제(Delete)와 같
셋째, 웹 어플리케이션 프레임워크(WAF) 또는 Web
은 정보처리 작업을 수행하게 되며, 웹 어플리케이션
UI Library 기반의 UI 일관성 확보 노력이다. 최근 YUI,
의 화면 단위들과 사용자 인터페이스들은 이러한 작
WUI, MochaUI, jQuery, Sencha Touch, iWebKit 과 같
업 단위들과 밀접하게 연관이 되어 있다. 웹 어플리케
은 다양한 UI Library들과 WAF들이 등장하고 있고
이션 프레임워크(WAF : Web application framework)는
많은 곳에서 활용이 되고 있다. 이런 도구들은 복잡한
이처럼 복잡한 웹 어플리케이션과 동적인 웹사이트의
DOM script 처리와 이벤트 핸들링을 용이하게 만들어
개발을 보조하기 위한 용도로 활용된다. 웹 어플리케
주며 AJAX 기반의 비동기적 처리를 간단하게 구현할
이션 프레임워크는 데이터베이스 연결, 세션 관리, 코
수 있도록 하며, 여러 유형의 응용 UI를 손쉽게 구현
드 재사용과 같이 개발 과정에서 공통되게 수행되는
할 수 있도록 해준다.
오버헤들을 줄이고 활용성을 높여 개발 생산성을 높
이기 위한 목적으로 활용된다. 3.3 호환성 - Multi Device One Web
웹 어플리케이션 관련 UI/UX 개선 노력은 다음과 세 번째 웹 UI/UX에 대한 개선 노력은 멀티 디바
같이 세 가지 유형으로 구분할 수 있다. 이스 환경에서 일관성 있고 호환성 있는 웹 사용성과
첫째, 디자인 패턴과 모델 기반 UI의 활용이다. 웹 사용자 경험을 제공하기 위한 노력들이다. 이는 사용
응용 개발과 관련해서는 JavaScript 디자인 패턴, AJAX 자 기기 종류의 폭발적 성장과 연관되어 있다.
디자인 패턴, CSS 및 HTML 디자인 패턴 등에 대한 PC 이외의 스마트폰, 태블릿, TV 등과 같은 다양한
2011. 8 정보과학회지 13

6. 그림 5 모바일OK 표준화 경과
단말들이 폭발적으로 확산되고, 이러한 단말 상에서 둘째, 다중 디바이스 환경에서 장치독립성을 갖는
웹 접속이 가능해지면서 멀티 디바이스 환경에서의 적응형 콘텐츠 제공 노력이다. 소형 모바일 단말부터
일관성 있는 웹 접근과 사용성 보장에 대한 필요성이 대형 TV 화면까지 어디서든 웹 접속이 가능한 상황
늘어나고 있다. 이에 W3C는 유비쿼터스 웹 도메인 에서 하나의 콘텐츠를 이용하여 다양한 단말 환경에
(Ubiquitous Web Domain) 영역을 만들어 모바일, TV, 적합한 UX와 콘텐츠를 제공할 수 있는 기술들이 요
소형 단말 등에서의 웹 접속과 활용에 관련된 다양한 구되고 있다. 이를 위해서는 장치정보의 공유, DIAL
표준들을 개발하고 있다[13]. (Device Independent Authoring Language) 표준 및 장
멀티 디바이스 환경에서의 UI/UX 개선 노력은 크 치 독립적인 콘텐츠 저작 환경, 단말과 사용자 특성을
게 세 가지 유형으로 나뉘어 진행되고 있다. 명세할 수 있도록 하는 CC/PP(Composite Capability/
첫째, 모바일/데스크탑 웹 사용의 일관성 확보 노력 Preference Profiles) 기술, 단말과 서비스간 context 정
이다. 근래의 모바일 인터넷 기술과 단말 기술의 급격 보를 교환할 수 있도록 하는 DCCI(Delivery Context:
한 발전은 유/무선 웹 서비스 경계뿐 아니라, 사업자 Client Interfaces) 기술 등에 대한 표준 개발을 진행하
간/국가간의 경계를 없애고 급격하게 하나의 웹(One 고 있다[15].
Web) 환경으로 만들어가고 있다. 그림 5와 같이 W3C 셋째, 키보드 이외에 음성과 펜, 터치 및 제스처 등
를 중심으로 진행되었던 모바일OK 표준화에서는 하 을 통한 멀티 모달 인터페이스 활용 노력이다. W3C
나의 모바일 웹 환경으로 일관된 사용성과 호환성을 에서는 멀티 모달 인터페이스 제공을 위해 음성 기반
보장하기 위해 필요한 모범사례 표준와 시험도구, 단 브라우징을 위한 VoiceXML, SSML(Speech Synthesis
말정보 저장소 표준 등을 개발하였다. 스마트폰 브라우 Markup Language), PLS(Pronunciation Lexicon Specifi-
저의 성능 개선으로 PC/모바일 간의 기술적 격차가 없 cation) 표준 등을 만들었으며, 펜 인터페이스를 위한
어지긴 하였으나, 아직도 서로 다른 스크린 사이즈로 InkML 등을 만들고 있다. 또한 EMMA(Extensible Multi-
인한 UX의 차이를 극복하면서 일관성 있는 UX와 사 modal Annotation Markup Language)를 통해 멀티모달
용성을 제공할 수 있는 기술을 필요로 하고 있다[14]. 인터랙션 메타 정보 표현을 가능하도록 하며, 감성 표
그림 6 터치 제스처 참조 가이드[16]
14 특집원고 차세대 웹에서의 UI/UX 기술 동향

7. 현을 위한 EmotionML 표준 개발도 진행하고 있다. 는 저작도구를 개발하는 개발자 및 접근성 준수 저작
이 밖에도 그림 6과 같이 멀티터치 이벤트를 활용한 인터페이스를 만드는 개발자를 돕기 위해 제정된 표
처리 등을 가능하도록 하는 Web Events API4) 등의 준으로, 현재 작업 중에 있는 ATAG 2.0 표준안은 8개
표준 개발도 진행하고 있다. 가이드라인에 총 24개 검사항목으로 구성되었다[18].
최근에는 리치 인터넷 애플리케이션(RIA: Rich Inter-
3.4 보편성 - Web Accessibility
net Application) 환경과 같이, 보다 동적으로 화면의
네 번째 웹 UI/UX 개선 노력은 보편성의 확보 노력
웹 페이지의 일부분이 변경되는 방식이거나, 웹 서버
이다. 웹 접근성(Web Accessibility)는 장애인, 노약자
와의 정보 교환이 비동기 방식으로 이루어지는 동적
등 취약계층이 웹 서비스를 활용함에 있어서 차별없
인 응용 환경에서의 접근성 관련 표준인 RIA에 관한
이 다른 사용자와 동등하게 서비스를 활용할 수 있도
접근성 가이드라인(Accessible Rich Internet Applica-
록 보장하는 것으로, 좀 더 넓은 개념에서는 보편성의
tions: WAI-ARIA 1.0) 표준 개발을 진행하고 있다[19].
제공이라는 웹의 기본정신에 따라 웹 응용과 웹 서비
국내외적으로 웹 접근성 제고를 위한 다양한 법적,
스를 이용하고자 하는 사람은 능력에 관계없이 접근
제도적 장치들이 마련되고 있으며, 이에 따라 웹 접근
을 보장 받아야 함을 의미한다[17].
성 평가와 웹 접근성 보장 방안들에 대한 다양한 연
즉, 웹 접근성의 본질적 의미는 사용자가 디바이스
구들이 활발하게 진행되고 있으며, 보편적 웹 사용성
와 플랫폼 환경에 종속되지 않고 웹 서비스를 이용할
의 구현 방법으로 활용되고 있다.
수 있어야 한다는 것과 사용자 개인의 능력에 관계없
이 웹 서비스를 이용할 수 있어야 한다는 것에 있으 3.5 확장성 - Service Interface Design
며, 서비스의 제공자의 관점에서 이런 점들을 고려한 마지막 웹 UI/UX 개선 노력은 서비스간 손쉬운 연
설계와 제공을 해야 한다는 점을 의미하는 것이다. 나 동을 통한 확장성의 제공 노력이다. 웹 응용들이 단순
아가 디바이스와 플랫폼의 유형들에 대한 고려뿐 아 한 기능을 제공하는 응용으로서만 아니라, 개방형 API
니라, 개별 사용자가 갖고 있는 지식, 경험, 신체적 차 들을 함께 제공하는 플랫폼으로서의 기능들을 하고,
이의 편차를 고려하여 웹 사이트의 설계와 구현이 이 이를 이용하는 다양한 매쉬업 응용들이 가능해지도록
루어져야 한다는 점이기도 하다. 함으로써, 손쉽게 사용자 경험의 연장과 사용자 경험
W3C는 1997년부터 웹 접근성 확보를 위해 웹 콘텐 의 확장을 가져갈 수 있도록 하고 있다.
츠(Web Content), 웹 저작도구(Web Authoring Tool), 그 다양한 API 설계 기법으로 활용되고 있는 RESTful
리고 사용자 브라우저(에이전트)(User Agent)라는 세 설계 방식은 HTTP와 URI에 기반하여 자원과 액션을
가지 표준 개발을 진행하여 오고 있다. 중심으로 자원의 상태를 변화시키는 관점으로 설계하
첫째, 웹 콘텐츠 접근성 지침(WCAG : Web Con- 는 방식을 말한다. 여기서 자원에 대한 요청은 GET,
tents Accessibility Guidelines)은 웹 콘텐츠 제작자들 POST, PUT, DELETE와 같은 HTTP 요청으로 표현되
이 웹을 제작함에 있어 신체적으로 불편한 사람도 이 며, 이런 요청을 통해 자원에 대한 접근과 상태 변화
용할 수 있도록 웹 콘텐츠 제작 방법을 제시하는 것 등이 가능하도록 하는 방식으로 설계한다. 또한 REST
이다. WCAG 2.0 표준은 크게 12개의 지침(Guideline) 방식의 API들에서 사용되는 데이터 교환 형식은 XML,
으로 구성되어 있다. RSS, JSON 등과 같이 단순한 구조를 이용하면서 빠
둘째, 사용자 도구 접근성 지침(UAAG : User Agent 르고 손쉽게 데이터를 교환할 수 있는 방식을 주로
Accessibility Guidelines)은 웹을 이용하기 위해 필요 사용한다. 이러한 REST 방식의 API 설계 방식과 철
한 웹 브라우저, 멀티미디어 플레이어 등의 사용자 도 학은 다양한 Open API에서 사용되고 있으며, 이를 통
구(User agent)들도 신체적 불편이 있는 사람들을 배 해 웹의 확장성을 넓히고 사용자 경험의 확장을 가능
려하여 제작할 수 있도록 관련 표준을 제공하고 있으 하도록 하고 있다.
며, 현재 작업 중에 있는 UAAG 2.0 표준안은 5개 원
칙(Principle)에 32개의 지침으로 구성되어 있다. 4. 결 언
셋째, 저작도구 접근성 지침(ATAG: Authoring Tools
지금까지 웹 UI/UX 개선을 위한 새로운 기술 표준
Accessibility Guidelines)은 웹 콘텐츠를 제작할 수 있
동향에 대해 살펴보았다. 그리고 웹 UI/UX 관련 기술
및 표준개선 노력을 편의성, 응용성, 호환성, 보편성,
4) W3C Web Event WG, http://www.w3.org/2010/webevents/
2011. 8 정보과학회지 15

8. 확장성이라는 다섯가지 관점으로 분류하여 고찰해보 이 그러했으며, 아이폰 이후 스마트폰 시대의 모바일
았고, 이를 통해 HTML5, 웹 애플리케이션 UI/UX, 멀 웹 환경도 그렇다. 사실 이런 모든 문제들은 모바일
티 디바이스 지원, 보편적 접근성 확보, REST 기반의 웹이 갖고 있는 UI/UX의 문제와 밀접하게 연관되어
서비스 연계 기술들을 중심으로 웹 UI/UX 개선 노력 있다고 할 수 있다. 최근의 스마트폰에서 웹 보다 앱
들이 진행되고 있음을 확인할 수 있었다. 그리고 이런 이 예상과 달리 점점 더 많이 활용되고 있다는 점도
노력들을 가로지르는 공통적인 내용으로 웹 표준에 이런 점을 반증한다. 단순히 브라우저에서 URL을 입
기반한 설계와 활용이 기반이 되고 있다는 사실도 확 력하거나 북마크를 선택해서 접속하고 브라우징하는
인할 수 있었다. 여기서 우리는 두 가지 중요한 시사점 모바일 웹의 UI/UX는 앱스토어와 함께 빠르게 설치
을 발견할 수 있었다. 되고 사용될 수 있는 모바일 앱의 UI/UX와 비교해 장
첫째, 우선 제일 먼저 웹 표준 기반의 UI/UX 개선 점이 부족하다. 뿐만 아니라 웹 어플리케이션이 제공
노력이 우리에게 시사하는 점이다. 지금까지의 국내 하는 기능과 성능 면에서도 상대적으로 부족함을 갖
의 웹 환경은 ActiveX를 기반으로 하는 비표준 확장 고 있다.
기술이 폭넓게 사용되는 환경으로 심각한 플랫폼 종 그러므로 현단계 웹 기술의 진화단계에 맞추어, 4
속성과 집중화로 인한 많은 부작용을 가져왔다고 할 단계인 웹 응용과 플랫폼 단계로서의 UI/UX들에 대
수 있다. 물론 초기에는 단일 브라우저 환경만을 고려 한 고민들이 필요하다. 앞서 언급했던 많은 이슈들은
해도 된다는 점이 장점이 되어, ActiveX를 기반으로 웹이 넘을 수 없는 근본적인 한계라기 보다는, 오히려
하는 여러 인터넷 서비스가 안정적으로 확산될 수 있 극복해야 할 기술적 도전 이슈들이라 할 수 있다. 웹
는 기반이 되기도 했었다. 그러나 PC 중심의 서비스 기술이 Web Game, Web OS를 넘어 사물을 연결하는
환경에서 모바일 중심의 서비스 환경으로 전환되는 WoT(Web of Things)의 영역으로까지 확대되어가는 지
시점에서 이러한 PC 중심의 환경은 큰 장애 요소가 금, 새롭게 변화되고 있는 단말과 응용 환경에 적합한
되고 있다. 새로운 UI/UX에 대한 고민과 함께, 웹 어플리케이션
그러므로 새로운 컴퓨팅 환경으로 패러다임 전환이 에서의 효과적인 상호작용과 인터페이스 방식에 대한
진행되고 있는 지금, 우리는 서둘러 PC 중심의 서비 새로운 많은 연구개발들이 필요하다.
스 관점에서 벗어나 다양한 단말과 디바이스 환경에 최근 등장하는 증강현실(AR) 브라우징, QR코드 브
효율적으로 적용할 수 있는 표준 기술 기반의 서비스 라우징, 사물인식 브라우징, 음성 브라우징 등과 같은
방식과 사용자 인터페이스 제공방식, 그리고 사용자 새로운 브라우징 방식과 개념들을 보면 미래의 무궁
경험 개선을 제공하도록 노력해야 한다. 또한 지금까 무진한 변화를 예상할 수 있다. 지난 15년간의 웹 기
지 각각의 영역에서 진행되었던 다양한 개선 노력들을 술 발전의 원동력이 확장성과 포용성, 그리고 끊임없
총괄적으로 살피며, 총체적인 관점에서 웹 UI/UX 개 는 도전에 있었던 것과 같이, 다가올 변화에 앞서 웹
선 노력들을 재조명하며 그 방향을 모색해야 할 필요 기술이 갖고 있는 고유한 장점들은 살리면서 진일보
가 있다. 한 사용자 경험을 제공하는 웹 UI/UX 설계 방법과 기
둘째, 새로운 단말 환경에 맞는 UI/UX 기술에 대한 술 및 도구, 그리고 표준들이 지속적으로 등장하길 바
고민이 필요하다는 점이다. 웹 기술이 갖는 가장 큰 라며, 이를 통해 보다 편리한 웹 응용과 서비스를 제
장점은 단순성, 확장성, 그리고 무한한 연결성이다. 이 공할 수 있기를 기대해본다.
런 특징을 기초로 웹 기술은 슬로우 스타터(slow star-
ter)로 환경의 변화에 적응하며 세계를 잇는 기술로 지 참고문헌
속적이면서도 꾸준한 기술 발전을 진행시켜 왔다. 웹
[ 1 ] 전종홍, 이승윤, “웹 2.0 기술 현황 및 전망”, 전자통
기술은 모바일 환경과 앱의 시대을 맞아 또한번의 변
신동향분석 제21권 제5호, 2006년 10월
화를 시작하고 있으며, 그 변화의 핵심은 UI/UX에 관
[ 2 ] 전종홍, 이승윤, “차세대 모바일 웹 어플리케이션 표
한 내용이라 할 수 있다. 준화 동향”, 전자통신동향분석, 제25권 제1호, 2010
과거에도 모바일 분야에서 웹 기술은 언제나 당장 년 2월
이라도 급속히 확산될 것처럼 전망이 되었으나, 실제 [ 3 ] EU FP7 MobiWebApp Project report, “Standards for
로는 그러지 못했다. 피처폰 시대의 WAP 기반의 브라 Web Applications on Mobile: May 2011 current state
우징 환경이 그러했고, 다기능폰 시대의 풀브라우징 and roadmap”, http://www.w3.org/2011/05/mobile-web-
16 특집원고 차세대 웹에서의 UI/UX 기술 동향

9. app-state [16] Touch Gesture Reference Guide, http://www.lukew.
[ 4 ] 김진우, “UX와 HCI: 정보통신 기술을 이용한 새로운 com/touch/TouchGestureGuide.pdf
사용자 경험의 설계”, 통신연합 회보, 2009년 가을호 [17] 임성배, “서비스의 보편적 제공 관점에서 바라본 웹
[ 5 ] 이동민, 전후현, “UX(User eXperience) 특성을 갖춘 표준과 웹접근성의 의미”, 전자정부 포커스 No. 03,
디자인 발전 방향성에 대한 연구”, Journal of the 2007
Ergonomics Society of Korea, Vol. 29, No. 4 pp.595- [18] 현준호, “웹 접근성(Web Accessibility)”, TTA Journal,
604, August 2010 No. 106, pp. 95-102
[ 6 ] 윤석찬, 신현석, 정찬명, 경준호, 권정혁 (2010), “실 [19] 김석일, 신민철, “웹 접근성을 고려한 신기술 콘텐츠
전 HTML5 가이드”. 한국 웹 표준 커뮤니티(creative 제작기법”, 2008. 12
commons). http://webstandards.or.kr/html5
[ 7 ] 이원석, “HTML5와 모바일 웹”, TTA Journal, No.
128, pp. 50-54
[ 8 ] 김창겸, 유승연 외 3인, “웹 애플리케이션 기반 UI 패
전종홍
턴 모델 개발과 효용성에 관한 연구”, Entrue Journal
1996~1999 한국정보시스템 기술개발연구소 주
of Information Technology, January 2009, Vol. 8, No.1,
임연구원
pp.7-20 1999~2007 ETRI 표준연구센터 근무
[9] History of Web Application Frameworks, http://www. 2004~현재 TTA 웹프로젝트 그룹(PG605) 부의장
2008~현재 TTA 모바일 웹 실무반(WG6051) 의장
flickr.com/photos/mraible/4378559350/sizes/o/
2010~현재 TTA 증강현실 실무반(WG6053) 부의장
[10] W3C, Model-Based UI XG Final Report, http://www. 2006~현재 TTA 국제표준전문가
w3.org/2005/Incubator/model-based-ui/XGR-mbui-20 2010~현재 W3C POI WG Editor
2011~현재 정보과학회 CG&I 소사이어티 운영이사
100504/
현재 한국전자통신연구원 표준연구센터 서비스융합표준연구팀 선
[11] H. M. El-Bakry, A. M. Riad, M. Abu-Elsoud, “Adaptive 임연구원
User Interface for Web Applications,” in RECENT 관심분야 : 모바일 웹, 웹 응용 기술, 증강 브라우징, Web OS 및 미래
웹 기술 표준화
ADVANCES in BUSINESS ADMINISTRATION: ICBA
E-mail : hollobit@etri.re.kr
'10, February 20-22, 2010, pp. 190-211 Twitter : http://twitter.com/hollobit
[12] 이지현, “Ajax 기반의 웹 2.0 서비스를 위한 인터랙션
디자인 가이드라인에 대한 연구”, Journal of the
이승윤
Ergonomics Society of Korea, Vol. 29, No. 4 pp.569-
1999~현재 ETRI 표준연구센터, 선임연구원
574, August 2010 2003~현재 ETRI 표준연구센터 서비스융합표준
[13] W3C Ubiquitous Web Domain, http://www.w3.org/ 연구 팀장
UbiWeb/ 2004~현재 TTA 국제표준전문가
2006~현재 TTA IT응용기술위원회(TC06) 부의장
[14] 전종홍, 이승윤, “모바일 웹 2.0과 모바일OK 표준화 2006~현재 TTA 웹프로젝트 그룹(PG605) 의장
동향,” 전자통신동향분석, 제22권 제6호, 2007년 12 2006~현재 ITU-T SG13 Editor
월, pp. 84-95 현재 한국전자통신연구원 표준연구센터 서비스융합표준연구팀 팀장
관심분야 : 차세대 웹 표준, 유비쿼터스 웹서비스(UWS) 표준, 모바일
[15] 이강찬, 이승윤, “유비쿼터스 웹 표준화 동향”, 전자 웹 표준, 웹 2.0 표준
통신동향분석, 제22권 제6호, 2007년 12월. pp. 66-73 E-mail : syl@etri.re.kr
2011. 8 정보과학회지 17