사용자와 시스템은 접면(interface)을 통해 서로 대화한다. 이 접면의 외부는 주로 사용자의 지각 과정(perception)을 지원하기 위한 공간이기 때문에 대부분 시각적 요소로 구성되어 있다. 이 때문에 접면에서의 사용자 경험이 시각적 경험 위주로 형성되는 것처럼 보인다. 그러나 오로지 시각적 경험만으로 얻을 수 있는 것은 아무 것도 없다. 사용자는 보고, 생각하고, 행동해야만 비로소 원하는 바를 얻을 수 있다.
따라서 접면의 외부와 내부는 시각적 요소뿐만 아니라 인지적 요소, 행동적 요소 등 사용자 과업에 필요한 요소로 구성되어야 하며, 이러한 요소를 사용자 경험의 요소(the element of user experience)라고 부른다. 사용자 경험의 요소는 겉으로 드러난 모습이 전부가 아니며, 이 모습은 시각적인 이유가 아니라 나름의 인과관계에 의해 결정된다. 인과관계에 맞게 시스템을 설계하려면 여러 차원의 아이디어를 합리적으로 담을 수 있는 체계적인 개발 과정이 필요하다. 이러한 사실을 Jesse James Garrett은 한 장의 그림으로 잘 설명하고 있다.13
Jesse는 웹 사이트를 정보(information)와 과업(task)의 영역으로 구분하였다. 웹 사이트는 전달해야 할 정보를 체계적으로 담고 있어야 하며, 정보는 사용자의 능동적 탐색에 의해 처리될 수 있다고 보았다. 정보 측면으로 볼 때 웹 사이트는 하이퍼텍스트(hypertext system)의 속성을 갖고 있지만, 과업 측면에서 볼 때 웹 사이트는 소프트웨어(software)의 속성을 갖고 있다. 이러한 속성들이 잘 결합되어야만 좋은 사용자 경험을 제공할 수 있다고 설명하고 있다.
본래 웹(Web)은 하이퍼텍스트 문서로 이루어진 시스템을 의미하며, 하이퍼텍스트는 링크(link)를 이용하여 원하는 곳으로 한 번에 이동할 수 있는 전자 문서 형식이다. 미디어 관점에서 보면 텍스트를 읽는 방식은 예전과 다름없지만 다른 텍스트로 전개하는 방식은 크게 달라진 것이다. 기존 미디어는 페이지 순서대로 읽었지만 웹은 링크가 연결된 곳으로 바로 이동하여 읽을 수 있다. 웹은 기존의 정보 탐색 행위를 혁신적으로 변화시켰다.
지난 십 수 년 간 웹의 모습은 크게 변했지만, 여전히 웹의 본질은 하이퍼텍스트이다. 그리고 이러한 명제는 앞으로도 바뀌지 않을 것이다. 따라서 디자이너는 하이퍼텍스트의 가치와 이로 인해 얻어지는 효과를 상상하면서 웹을 만들어야 한다. 이것이 Jesse가 말하고 있는 ‘하이퍼텍스트로써의 웹’(Web as hypertext system)일 것이다.
웹은 그 어떤 매체보다도 짧은 시간 내에 엄청난 발전과 성과를 이루었다. 웹이 생활과 비즈니스 속으로 들어오면서 웹을 필요로 하는 장면이 많아졌고, 웹은 과거보다 더 많은 기능과 역할을 수행하게 되었다. 이젠 웹에서 편지를 보내고, 웹에서 물건을 구매하고, 웹에서 통화를 한다. 웹은 정적인 정보(static information)만을 전달하는 정보 매체를 넘어 기능을 수행하는 도구나 장치로 진화하고 있다.
과거에는 웹에서 동작할 수 있는 기능이 매우 제한적이었다. 즉, 텍스트 입력이나 옵션 선택에 의해 기록된 데이터를 서버로 전송시키는 수준이었지만, 자바스크립트(JavaScript)와 플러그인(Plug-in)의 등장으로 인해 웹은 소프트웨어에 버금가는 기능성을 갖게 되었다. 더 나아가 AJAX와 Flex와 같은 RIA 기술(Rich Internet Application)을 웹에서 구현하게 되면서 웹과 소프트웨어의 차이는 크게 줄었다. 소프트웨어나 다름없을 정도로 웹의 기능성이 향상되면서 ‘웨블리케이션’(Weblication)14이라는 단어가 나타날 정도로 웹은 소프트웨어처럼 변화하고 있다. 이것이 Jesse가 말하고 있는 ‘소프트웨어 인터페이스로써의 웹’(Web as software interface)일 것이다.15
이처럼 Jesse는 웹을 '하이퍼텍스트로써의 웹’과 '소프트웨어 인터페이스로써의 웹’으로 이원화(duality)하여 바라보고 있다. 이러한 시각은 웹의 본질을 제대로 이해할 수 있는 사람만이 얻을 수 있는 통찰이다.
신문을 읽는 사람과 데이터를 입력하는 사람은 각각 다른 욕구를 가지고 있을 것이다. 그리고 정보를 처리하는 방식도 조금씩 다를 것이다. 웹은 하이퍼텍스트와 소프트웨어의 속성을 함께 가지고 있다. 따라서 어떤 부분은 신문을 읽는 사람을 위해 하이퍼텍스트처럼 디자인해야 하고, 또 어떤 부분은 데이터를 입력하는 사람을 위해 소프트웨어처럼 디자인해야 한다. 즉, 읽기가 이루어지는 곳은 하이퍼텍스트의 속성을, 입력이 이루어지는 곳은 소프트웨어의 속성을 가져야 한다. 이런 속성은 사용자 니즈를 효과적으로 만족시키고 사용자 과업을 효율적으로 지원한다. 그리고 이러한 요인들에 의해 좋은 사용자 경험이 형성된다.
Jesse는 일련의 개발 과정을 하이퍼텍스트와 소프트웨어 측면으로 구분하였고, 이 개발 과정을 일종의 사용자 경험을 만드는 과정으로 보았다. 그림을 살펴보면 개발 과정이 사용자 니즈(user needs)와 사이트 목적(site objectives)에서 시작되고 있는 것을 알 수 있다. 사용자가 무엇을 원하는지 알 수 없다면 제공해야 할 콘텐츠와 기능도 알 수 없다. 그리고 웹 사이트는 사용자를 위해 존재하는 것이 아니라 기업이 이루고자 하는 비즈니스 성과를 위해 ‘특별히’ 운영되는 수단이다. 이런 점에서 사용자 니즈와 사이트 목적을 웹 사이트 개발의 출발점으로 둔 것은 정확한 표현이라고 생각한다.
이 그림의 또 다른 매력은 사용자 경험의 요소들을 층(layer)으로 표현한 것이다. 하이퍼텍스트 측면의 정보적 요소와 소프트웨어 측면의 과업적 요소가 최종적으로는 시각적 요소로 표현된다. 겉으로 드러나지 않은 구조와 내용을 겉으로 드러나게 만드는 것이 시각 디자인(visual design)이며, 이것을 통해 사용자와 웹 사이트의 상호작용이 이루어진다. 따라서 시각 디자인은 다음과 같은 개발 과정을 거치면서 산출된 내용과 결과를 담고 있어야 한다.
- 사용자가 웹 사이트를 통해 해결하고자 하는 ‘사용자 니즈’(user needs)와 기업이 웹 사이트를 통해 이루고자 하는 ‘사이트 목적’(site objectives)
- 제공해야 할 ‘콘텐츠’(content requirements)와 콘텐츠 제공에 필요한 ‘기능’(functional specifications)
- 콘텐츠와 기능을 구조화하기 위한 ‘정보 설계’(information architecture)와 사용자 과업을 효과적으로 지원하기 위한 ‘인터랙션 디자인’(interaction design)
- 효과적인 커뮤니케이션을 위한 ‘정보 디자인’(information design), 효율적인 정보 탐색을 돕기 위한 ‘내비게이션 디자인’(navigation design), 그리고 페이지 요소를 디자인 의도에 맞게 구성하기 위한 ‘인터페이스 디자인’(interface design)
모든 시각적 요소는 나름의 의미를 지녀야 한다. 의미가 없는 시각적 요소는 비논리적인 요소이기 때문에 오히려 상호작용을 방해할 수 있으며, 이러한 현상이 지속되면 잘못된 결과나 사용상의 불편을 초래할 수 있다. 접면이 단순히 아름다움만을 위한 시각적 요소로 채워져 있으면 사용자 니즈와 사이트 목적을 위한 요소는 잘 보이지 않게 된다. 디자이너는 보이지 않는 것을 볼 수 있는 통찰과 모든 사용자 경험의 요소를 인과관계에 따라 연결시킬 수 있는 논리를 가져야 한다. 그래야만 사용자가 접면을 통해 원하는 것을 얻을 수 있다.
13 이 한 장의 그림은 2년 뒤 《The Element of User Experience: User-Centered Design for the Web / Jesse James Garrett 저, 2002》이란 이름으로 출간되며, 국내에는 《경험 디자인의 요소 / 방수원 역, 2003》로 번역되었다.
14 웨블리케이션은 웹(Web)과 애플리케이션(Application)의 결합으로 만들어진 단어인데, '소프트웨어 같은 웹’을 의미한다.
15 Jesse는 AJAX(Asynchronous JavaScript + XML)이라는 용어를 최초로 소개하기도 했다. 자세한 내용은 http://www.adaptivepath.com/ideas/essays/archives/000385.php에서 확인할 수 있다.