사용자 경험 디자인을 위한 다섯 가지 역량 (The Five Competencies of User Experience Design)

'사용자 경험을 디자인한다’와 '사용자 경험을 잘 디자인한다’는 분명 다르다. 어떤 일을 잘 하려면 그 일을 잘 할 수 있는 능력이 필요하다. 마찬가지로 사용자 경험 디자인을 잘 하려면 기본적으로 사용자 경험 디자인을 잘 할 수 있는 능력(capability)이 필요하며, 더 나아가 사용자 경험 디자인을 구체적인 성과로 연결시킬 수 있는 역량(competency)도 필요하다.

역량을 갖추기 위해서는 우선 그에 상응하는 지식을 갖추어야 한다. 지식이 있더라도 이것을 실무에 적용시킬 수 있는 방법을 모른다면 무용지물이며, 지식과 방법을 알더라도 이를 실행에 옮기지 않으면 아무 것도 얻을 수 없다. 이처럼 역량을 갖추기 위해서는 지식, 방법, 실행이 적절한 조화를 이루어야 한다. 이러한 사실을 Steve Psomas가 한 장의 그림으로 잘 설명하고 있다.

Steve Psomas는 사용자 경험 디자인을 잘 하기 위한 다섯 가지 역량으로 정보 설계, 인터랙션 디자인, 사용성 공학, 시각 디자인, 프로토타입 공학을 꼽았다. 그리고 각각의 역량은 해당 분야를 정확하게 이해하고(지식), 이러한 이해 기반 위에서 작업하며(방법), 작업 수행을 통해 소기의 결과를 얻는 것(실행)이라고 보았다.

정보 설계 (Information Architecture)³²

정보 설계는 인터페이스 구조(interface structure)와 내비게이션 체계(navigation scheme)를 만드는 활동이다. 사용자와 제품 사이의 상호작용이 효과·효율적으로 이루어지기 위해서는 콘텐츠와 기능이 짜임새 있게 구성되어야 하며, 이를 위해 인터페이스 구조를 설계한다. 여기에서 '인터페이스’는 상호작용이 이루어지는 접점을 의미한다.

인터페이스 구조는 정적인 개념이다. 제 아무리 좋은 구조라도 그곳으로 갈 수 없다면 무용지물이다. 구조와 구조는 제품의 속성과 사용자의 의도에 맞게 연결되어야 하며, 이를 위해 내비게이션 체계를 설계한다. 여기에서 '내비게이션’은 구조와 구조 사이를 돌아다니는 이동 방법을 의미한다.

인터페이스 구조와 내비게이션 체계를 만드는 것은 결코 단순하지 않다. 원래 갖고 있는 성질이 있고, 제공자와 사용자 모두 나름의 목표가 있으며, 상황에 따라 용도나 가치는 달라지는 법이다. 이처럼 정보 설계는 보이지 않는 것을 고려해야 하는 어려움이 있다. 그래서 정보 설계는 단순히 정보나 제품을 설계하는 것이 아니라 콘셉트나 전략을 설계하는 것이라고 볼 수 있으며, 이를 위해 다음과 같은 기초 작업(groundwork)들을 수행한다.

맥락적 분석(contextual analysis): 맥락적 분석은 진정한 의미를 파악하여 통찰을 얻기 위한 분석 기법이다. 일반적 분석이 사용자가 무엇을 원하는지 어떻게 행동하는지를 파악하는 데 주력한다면, 맥락적 분석은 사용자가 그것을 원하는 이유가 무엇인지 그렇게 행동하는 이유가 무엇인지를 파악하는 데 주력한다. 단순히 사용자나 제품의 요구사항을 파악하는 것이 아니라 그 요구사항이 왜 필요한지 파악하는 것이다. 따라서 맥락적 분석은 보다 많은 것을 더 깊게 이해하려는 노력이 필요하며, 이를 위해 관찰, 인터뷰 등과 같은 조사 기법을 사용한다.
비즈니스 프로세스(business process): 비즈니스 프로세스는 어떤 목적을 달성하기 위한 과업과 행동을 정해진 규칙이나 순서에 따라 수행하는 것을 의미한다. 정보 설계에서 비즈니스 프로세스를 알아야 하는 이유는 크게 두 가지로 볼 수 있다. 첫째, 기업이 제품을 통해 얻고자 하는 목적을 확인하는 것이며, 이것은 제품을 좀 더 깊게 이해하기 위한 일환이다. 둘째, 제품을 만들고 판매하기 위한 일련의 경영 활동을 확인하는 것이며, 이것은 업무 절차를 사실 그대로 파악하기 위한 일환이다. 전자는 제품에 대한 전략적 포지셔닝(strategic positioning)을 설정할 때, 후자는 비즈니스 프로세스에 최적화된 업무 시스템을 개발할 때 필요하다.
비즈니스 규칙(business rules): 비즈니스 규칙은 비즈니스의 일부분 또는 어떤 측면을 제한하거나 정의하기 위한 정책이나 가이드라인을 의미하며, 이에 따라 비즈니스 프로세스가 만들어진다. 디자이너는 비즈니스 규칙을 통해 경영 또는 제품에 대한 상위 전략부터 세부 전술까지 이해할 수 있는 기회를 얻을 수 있다. 가령, ‘구글’(www.google.com)과 ‘야후’(www.yahoo.com)의 초기 페이지를 이해하려면 단순히 제품이나 사용자 그 자체에 대한 이해만으로는 부족하다. 그 페이지의 전체적인 모습은 나름의 상위 전략을 반영한 것이고, 부분적인 모습은 세부 전술에 의해 제한되고 정의된다고 볼 수 있다.
제품 브랜딩(product branding): 제품 브랜딩은 제품에 대한 긍정적인 이미지를 소비자에게 심어주는 활동을 의미한다. 디자이너는 브랜딩 전략을 통해 제품의 본질(essence)과 개성(personality)을 이해할 수 있다. 사용자만 잘 알면 된다고 생각하는 디자이너들이 적지 않다. 그러나 제품을 잘 모르면서 어떻게 상호작용을 디자인할 수 있겠는가? 디자이너가 제품의 정체성(identity)을 정확하게 판단하고 시장에서의 전략적 위치와 경쟁관계를 깊이 이해할 수 있다면 설계 측면에서 강조해야 할 콘텐츠나 기능을 좀더 올바르게 선정할 수 있을 것이다.
제품 로드맵(product roadmap): 제품 로드맵은 제품에 관한 앞으로의 전략 계획이며, 현재 위치에 대한 전략적 판단을 돕는다. 디자이너는 제품 로드맵을 통해 제품이 나아가고자 하는 방향과 달성하고자 하는 목표를 확인할 수 있다. 특히, 정교하게 작성된 제품 로드맵은 환경 변화와 시장 요구에 대응하기 위한 구상을 담고 있으며, 더 나아가 세부 계획, 제품의 종류 및 특장점, 경쟁제품에 대한 비교분석점, 기술적 이슈 등을 포함하고 있기 때문에 디자인 전략을 세우는 데 크게 도움된다. 디자이너는 사물에 대한 거시적 관점과 미시적 관점을 두루 살피는 균형 감각이 필요한데, 제품 로드맵은 거시적 관점에서 접근할 수 있는 기회를 제공한다.
사용자 인터페이스 로드맵(UI roadmap): 사용자 인터페이스 로드맵은 제품 로드맵을 이루기 위해 사용자 인터페이스 차원에서 이루어야 하는 일들을 정리한 것이다. 사용자 인터페이스는 제품을 구성하는 부분이므로 사용자 인터페이스 로드맵은 제품 로드맵을 따른다. 로드맵의 특징은 단계(phase)다. 전략적인 순서를 밟게 되면 목적을 달성하게 되어 있다. 사용자 인터페이스에 대한 기대가 지나치거나 제품 콘셉트와 다른 디자인을 요구할 때가 있다. 이럴 땐 거절보다는 로드맵 방식으로 사용자 인터페이스가 앞으로 어떻게 발전해 나아갈 것인지를 보여준다면 섣부른 기대나 과도한 요구를 슬기롭게 해결할 수 있다.
기업 및 제품 전략(corporate & product strategy): 기업 전략은 어떤 목적을 달성하기 위해 기업을 이끌어 가는 방법이나 계획을 의미하며, 제품 전략은 어떤 목적을 달성하기 위해 제품을 만들어 가는 방법이나 계획을 의미한다.³⁴ 기업 및 제품 전략은 디자인 전략을 규정한다.

일반적으로 디자인은 창의적인 작업이며, 이를 통해 새로운 가치를 만들어내는 과정으로 알고 있다. 맞는 말이다. 그러나 이것이 항상 새로운 것을 찾아내고 기존의 것을 반드시 뒤엎어야 한다는 것을 의미하지는 않는다. 디자이너의 역할과 책임은 제한적이며, 디자이너 마음대로 결정할 수 있는 것도 그리 많지 않다. 디자인은 제품을 만드는 과정의 일부분이며, 제품은 비즈니스 수단의 일부분이다. 그리고 비즈니스는 기업을 영위하기 위한 경영활동의 일부분이다. 이러한 인과관계를 무시하고 디자인 가치를 지나치게 내세우는 것은 디자인 중심의 좁은 생각이다. 기업 및 제품 전략을 충분히 헤아리고 이를 효과적으로 구현할 수 있는 디자인 전략을 세우는 것이 먼저다.
재검색성(re-findability): 재검색성은 정보를 다시 찾을 수 있는 성질을 의미한다. Psomas가 검색성(findability)이 아닌 재검색성(refindability)을 제시한 것은 아마 숨은 의도가 있을 것이다. 검색은 키워드를 중심으로 정보를 찾는 것이므로 제한된 범위 내에서 정보 탐색이 이루어진다. 그런데 키워드조차 모르는 경우도 많다. 이럴 땐 결국 관련 있는 정보들을 사람의 손으로 수집하고 분류하는 것이 유일한 방법이다. 수집을 위해 검색(searching)이 필요하고, 분류를 위해 꼬리표(tag)가 필요하다.

웹 사이트는 정보를 잘 아는 사람이 수많은 정보를 미리 분류하여 저장해 둔 곳이다. 사용자는 이곳을 돌아다니면서 정보를 찾는데, 이런 행위가 한 번으로 끝나지 않는다는 사실에 주목해야 한다. 실제 매번 새로운 정보를 찾기보다는 이미 찾았던 정보를 다시 찾는 경우가 더 많다. 그리고 디자이너는 이러한 사용자 행동을 효과적으로 지원하도록 도와야 하고, 이에 필요한 작업이 바로 정보 설계다.

살펴본 바와 같이 정보 설계를 위한 기초 작업은 제품 그 자체보다 제품에 영향을 주는 요소들을 이해하는 과정이다. 이 과정은 대체적으로 효율이 높지 않다. 많은 시간과 인력을 투입하더라도 구체적인 결과물을 얻기 어렵다. 가시적인 결과물을 얻기 위해 지나친 욕심을 내면 오히려 역효과가 날 수 있다. 정보 설계를 위한 기초 작업을 충실하게 수행하면 다음과 같은 결과물을 얻을 수 있는데, 이 결과물은 다른 작업에 큰 영향을 주기 때문에 신중하게 작업할 필요가 있다.

공통 요소(global elements)³⁵: 공통 요소는 모든 페이지에서 필수적으로 제공되는 요소들을 말하며, 페이지의 제목(title), 헤더(header), 푸터(footer) 등과 같은 일반 요소(common elements)와 제품의 정체성을 결정 짓는 핵심 요소(feature elements)로 구성된다. 이 요소들에 의해 크게는 제품의 모습, 작게는 페이지의 구성이 결정된다. 공통 요소의 범위와 특징에 따라 제품 콘셉트가 달라지기 때문에 공통 요소는 신중하게 결정해야 한다.
내비게이션 패턴(navigation patterns): 내비게이션 패턴은 정보를 찾기 위한 이동 방법을 일정한 형식으로 정의한 것이다. 이동 방법은 제공자 논리에 의해 정의되기도 하지만, 사용자 경험 디자인에서는 사용자 논리가 더 중요하므로 사용자의 요구와 시나리오에 기반하여 이동 방법을 결정하는 것이 중요하다. 결과적으로 내비게이션 패턴은 정보를 어떻게 제공할 것인지에 대한 전략이며, 페이지의 전개 방식을 결정 짓기 위해 필요한 결과물이다.
애플리케이션 구조도(application structure diagram): 애플리케이션 구조도는 애플리케이션을 구성하는 기능·데이터베이스·컴포넌트의 결합 방식이나 상호 관계를 보여주는 도표를 말한다. 단순히 구조만 보여주는 것이 아니라 데이터가 어떻게 처리되는지, 이에 필요한 기능은 무엇인지, 이 기능은 어떤 형태로 구성되는지 등 애플리케이션이 주어진 역할을 성공적으로 수행하기 위한 일련의 흐름을 보여주는 것이 중요하다. 플래시와 같은 플러그인이나 자바스크립트와 같은 애플리케이션이 등장하면서 웹 사이트도 넓게는 웹 기반의 애플리케이션으로 볼 수 있다. 따라서 기능 중심의 웹 사이트인 경우, 사이트 맵(site map)과 더불어 애플리케이션 구조도를 작성하는 것이 바람직하다.
페이지 유형에 따른 구조도(structure diagram with page types): 페이지 유형에 따른 구조도는 웹 사이트를 구성하는 주요 페이지의 연결 구조를 보여주는 도표를 말하며, 주로 웹 사이트 개발에 필요한 결과물이다. 일반적으로 웹 사이트의 페이지 유형은 홈페이지(homepage), 카테고리 홈페이지(category homepage)³⁶, 리스트 페이지(list page), 상세 페이지(detailed page)로 구분되며, 추가적으로 개인화된 페이지(personalized page)³⁷, 로그인 페이지(login page) 등이 포함된다. 사이트 맵은 정보(메뉴)의 넓이와 깊이를 보여주는 결과물이고, 페이지 유형에 따른 구조도는 정보 깊이(information depth)에 따라 페이지 유형을 보여주는 결과물이라고 볼 수 있다.
정보의 계층 구조(information hierarchy): 정보의 계층 구조는 정보의 중요도 또는 등급을 단계적으로 표현하는 것을 의미한다. 정보가 너무 많거나 복잡하다면 카테고리로 묶어야 하며, 이 카테고리가 많아지게 되면 어쩔 수 없이 상위 카테고리와 하위 카테고리로 구분하게 된다. 대부분의 웹 사이트나 애플리케이션은 복잡하고 다양한 정보를 효율적으로 처리하기 위해 계층 구조로 이루어진 정보 체계를 갖는다. 이 작업은 엑셀과 같은 스프레드시트 프로그램으로 작성된다.
상위 수준의 명명체계(high-level nomenclature)³⁸: 상위 수준의 명명체계는 상위 카테고리 또는 대분류 메뉴에 이름을 붙이고 위치를 정하는 방법 또는 원칙을 의미한다. 모든 정보는 블록(block), 섹션(section), 페이지(page), 메뉴 및 카테고리(menu & category)로 분류되며, 분류된 정보는 이름 또는 제목을 갖는다. 마구잡이로 이름을 붙이게 되면 사용상의 혼란뿐만 아니라 관리 상의 어려움이 커질 수 있으므로 원칙을 따르는 것이 중요하다.

인터랙션 디자인 (Interaction Design)

인터랙션 디자인은 사용자 과업이 효과적으로 수행될 수 있도록 페이지의 구조와 구성을 설계하는 활동이다. 이전 단계인 정보 설계에서는 콘텐츠와 기능의 구조와 구성을 설계하였다. 이것은 어디까지나 제품 차원의 구조와 구성이다. 회사 건물에 비유하자면 건물이 어떤 목적으로 사용되며, 건물은 몇 층으로 지어져야 하며, 각 층에 어떤 사무실이 들어서야 하는지 그리고 각 층을 어떻게 연결할 것인지를 결정한 상태이다.

이제 각 층에 들어설 개별 공간을 잘 설계하는 것이 중요하다. 실제 업무는 사무실에서 이루어진다. 사무실 공간이 잘 지어지지 않으면 건물이 잘 지어진들 무슨 소용 있겠는가? 마찬가지로 제품에서 사용자와 직접적으로 상호작용이 이루어지는 곳은 바로 페이지며, 이 페이지를 잘 설계하는 것이 매우 중요하다.

정보 설계가 사용자 과업이 전체적으로 잘 수행되도록 만드는 작업이라면, 인터랙션 디자인은 사용자 과업이 부분적으로 잘 수행되도록 만드는 작업이라고 볼 수 있다. 이를 위해 다음과 같은 기초 작업을 수행한다.

시각적 프레임워크(visual framework)³⁹: 시각적 프레임워크는 페이지를 의미 있는 부분으로 나누기 위한 시각적 틀을 의미한다. 우리의 눈은 가능한 사물을 단순한 형태로 보려고 한다. 그래서 사용자는 부분보다는 전체를 먼저 보려고 하고, 그래야만 페이지를 더 빨리 이해할 수 있다. 이때 시각적 프레임워크는 사용자가 부분보다는 전체를 볼 수 있도록 돕는다. 페이지마다 다른 모습을 갖는다면 매번 페이지를 이해하기 위한 노력이 수반된다. 이러한 불필요한 노력을 줄이기 위해 가능하면 일관성 있는 페이지가 전개되도록 설계해야 하며, 이를 위해서는 시각적 프레임워크를 적극적으로 활용할 필요가 있다.
사용자 반응(user feedback): 사용자 반응은 제품에 대한 의견이다. 사용자 과업은 사용자의 입력(input) 또는 작용(action)과 제품의 결과(output) 또는 반작용(reaction)이 연속적으로 이어지면서 진행된다. 이러한 과정을 통해 사용자는 제품에 대한 남다른 의견을 갖게 된다. 사용자 조사를 통해 사용자가 어떤 의견을 갖고 있는지 확인하고, 그 결과를 디자인에 적절히 반영한다. 이러한 과정을 거치면서 제품은 점점 사용자와 가까워지게 된다.
레이블과 콘텐츠(labels & content): 레이블은 콘텐츠를 설명하기 위해 붙이는 표식이며, 콘텐츠는 제품이 전달하고자 하는 내용물이다. 디자이너는 콘텐츠를 단순히 제품에 담긴 내용물로 바라보지 말고, 어떤 의미를 제공하는지 이를 통해 어떤 혜택을 얻을 수 있는지를 꿰뚫어 볼 수 있어야 한다. 방대한 양의 콘텐츠를 통째로 전달할 수는 없는 노릇이다. 효과적인 커뮤니케이션을 위해서는 콘텐츠 성격에 따라 또는 사용자 상황에 맞게 나뉘어야 한다. 본문(full text)을 잘 요약한 정보가 바로 레이블이며, 이 레이블은 콘텐츠가 전달하고자 하는 의미와 이를 통해 얻고자 하는 혜택을 잘 표현할 수 있어야 한다.
오류 배치(error placement): 오류 배치는 사용자의 잘못된 요구나 동작에 대한 제품의 오류 대응을 의미한다. 완벽한 제품은 존재하지 않는다. 따라서 언제든지 오류는 발생할 수 있다. 오류 발생을 최소화하는 것이 가장 중요하지만, 이에 못지않게 오류 발생에 대한 사후 조치도 중요하다. 사용자가 오류 상황을 인식하지 못하면 계속적으로 잘못된 요구를 요청하게 되고, 이것은 더 심각한 오류로 발전할 수 있다. 따라서 오류 발생을 신속하게 알리고 사용자가 오류 상황을 정확하게 인식할 수 있도록 오류 정보를 알기 쉽게 알리는 것이 중요하다.
사용자 지원(user assistance): 사용자 지원은 문제해결을 위한 방법을 제공하거나 최적의 방법으로 과업을 완수하도록 돕는 것을 의미한다. 완벽한 제품은 존재하지 않고, 제품에 대한 사용자의 지식과 능력도 불완전한 수준이다. 사용성 향상을 통해 해결할 수 있는 문제가 있지만, 그렇지 못한 문제도 많다. 특히, 너무 복잡한 문제이거나 특정 상황에 국한된 문제는 사용자 매뉴얼이나 도움말처럼 문제해결 중심의 지원과 도움을 제공해야 한다.
서식 설계 및 흐름(form design & flow): 서식은 체크 박스, 라디오 버튼, 메뉴 등 컨트롤(controls)이라고 불리는 특별한 요소를 포함하고 있는 문서를 의미한다.⁴⁰ 다른 페이지와 달리 서식이 있는 페이지는 입력 행위가 많고, 상호작용 과정이 상대적으로 민감하게 진행된다. 회원 가입, 물건 구매, 이메일 보내기, 계좌 이체 등 서식이 있는 페이지를 상상해 보면 이해가 쉽다. 서식을 잘못 설계하면 치명적인 결과를 낳는다. 제품이 질문하면 사용자가 대답하는 형식으로 구성된다. 서식을 건너뛰거나 입력 순서가 뒤바뀌지 않도록 서식은 의미 있는 그룹핑(grouping)과 논리적인 순서로 설계되어야 한다.
버튼 그룹 및 배치(button groups & placement): 버튼은 데이터 전송이나 기능 작동을 위해 제공되는 컨트롤 요소다. 버튼을 누르면 입력 데이터가 전송되거나 실행 파일이 구동된다. 즉, 버튼을 누르면 사용 상황이 크게 바뀐다. 이러한 버튼이 페이지 곳곳에 배치되면 산만하게 보이거나 내용 읽기를 방해할 수 있다. 따라서 버튼은 비슷한 것끼리 묶어서 구성하며, 그 위치는 사용자 과업의 진행 순서를 고려하여 지정한다.
페이지 요소의 계층 구조(page-element hierarchy): 페이지 요소는 페이지를 구성하는 콘텐츠와 기능을 의미하며, 페이지의 계층 구조는 콘텐츠와 기능을 우선순위에 따라 구조화한 것이다. 사용자가 한 번에 처리할 수 있는 정보량은 제한적이므로 콘텐츠와 기능을 순차적으로 처리하도록 설계해야 한다. 페이지는 사용자 과업이 이루어지는 곳이므로 우선순위는 사용자 과업 순서를 기준으로 정하는 것이 효과적이다.
요소의 주요 상태(element key states)⁴¹: 주요 상태는 상호작용의 결과에 의해 나타난 모양이나 현상을 의미한다. 상호작용을 거치게 되면 제품은 다른 상태로 변화하게 되며, 이 변화를 알리고 표현하는 것은 매우 중요하다. 상태 변화를 명확하게 표현하지 않으면 상호작용이 다음 단계로 원활하게 진행되지 않는다. 이미 클릭한 링크 텍스트(link text)를 다른 색으로 바뀌게 하면 해당 요소의 현재 상태를 직관적으로 표현할 수 있기 때문에 정보처리는 더 빨라진다. 이러한 배려는 사소하게 여길 수 있으나, 실제 사용자 경험에서는 결코 사소하지 않다.
제품 브랜딩(product branding): 정보 설계에서는 브랜딩 전략을 전반적으로 제품 전체에 적용시키는 것이 중요했지만, 인터랙션 디자인에서는 브랜딩 요소를 직접적으로 전달하는 것이 중요하다. 특히, 통합 마케팅 커뮤니케이션(IMC)⁴²에서는 브랜딩 전략을 통합적인 방법으로 운용하기 때문에 개념 차원의 브랜딩 전략을 실행 차원의 커뮤니케이션 전략으로 구체화할 필요가 있다. 사용자가 브랜드 요소를 경험하지 않으면 브랜딩은 구현되지 않는다. 따라서 인터랙션 디자인에서는 사용자와 제품 사이의 상호작용을 통해 브랜드 요소가 자연스럽게 오갈 수 있도록 설계해야 한다.
페이지 차원의 계층 구조(page-level information hierarchy): 정보 설계에서는 제품 전반 또는 전체 정보를 어떻게 구조화할 것인지 여부가 중요했다면, 인터랙션 디자인에서는 페이지 내에 있는 정보를 어떻게 구조화할 것인지 여부가 중요하다. 적은 양의 콘텐츠나 단순한 기능을 제공하는 페이지는 단순 나열식의 구조로 충분하다. 그러나 많은 양의 콘텐츠나 복잡한 기능을 제공하는 페이지는 상위 영역과 하위 영역으로 구성되는 계층 구조가 효과적인 커뮤니케이션에 도움이 된다. 의미 있는 상하관계를 만드는 것이 중요하다.
애플리케이션 차원의 일관성(application-level consistency): 일관성은 처음부터 끝까지 한결같은 성질을 의미한다. 일관성 있는 제품은 최소의 학습으로 사용할 수 있지만, 그렇지 않은 제품은 매번 학습을 해야 할지도 모른다. 특히, 기능 중심의 애플리케이션은 일관성을 엄격하게 지켜야 한다. 따라서 한 번 익힌 사용 방법을 계속 사용할 수 있도록 일관성이 유지되어야 하며, 일관성은 제품의 일부분이 아니라 제품 전체에 걸쳐 적용되어야 한다. 적어도 애플리케이션의 내부적 일관성(internal consistency)은 반드시 유지되어야 한다.
사용자 동기부여(user motivation): 동기(motive)는 행동을 일으키게 하는 요인이며, 동기부여(motivation)는 행동을 일으켜 목적을 달성하게 만들도록 동기를 주는 것이다. 동기가 항상 충분한 것은 아니며, 어렵거나 지루한 과업이 반복되면 동기는 저하되기도 한다. 동기가 부족하면 사용자 과업은 더 이상 진행되지 않는다. 욕구와 관련 있는 관심 요소를 적절한 형식으로 표현하고 앞으로 해야 할 일을 미리 알 수 있도록 만들면 사용자 동기는 효과적으로 유인될 수 있다.
과업 상황(task context): 과업 상황은 현재 수행 중인 과업이 놓여 있는 상황을 의미한다. 사용자의 개념 속에 있는 과업은 주로 주 과업(main task)이다. 그런데 실제 경험하는 과업은 세부 과업(subtask)이다. 이러한 사실이 사용자에게 혼란을 줄 수 있으므로 현재 과업 상황을 명확하게 인식시킬 필요가 있다. 현재 과업이 존재하는 상하관계와 전후관계를 알리는 것이 중요하다. 전자는 현재 수행 중인 과업이 주 과업의 일부분이라는 사실을 알려주는 것이고, 후자는 이전 과업, 현재 과업, 이후 과업이 어떻게 연결되는지 보여주는 것이다.
UI 라이브러리 사용(use of UI library components)⁴³: UI 라이브러리는 제품 디자인에 필요한 표준화된 사용자 인터페이스 요소를 축척·관리하는 공간을 의미하며, UI 프레임워크, 패턴, 컴포넌트 등으로 구성된다. 사용자 인터페이스의 대부분은 일반적인 요소이기 때문에 UI 라이브러리가 잘 구축되어 있다면 작업 생산성을 크게 향상시킬 수 있다. 특히, 프로토타입 개발 단계에서 기존의 UI 컴포넌트를 사용하지 않으면 소스 코드를 재사용할 수 없기 때문에 개발 작업이 어려워질 수 있다는 점에 유의해야 한다.
대시보드 콘텐츠(information dashboard content): 대시보드는 자동차나 시스템의 상태 정보를 알려주는 계기판을 의미하며,⁴⁴ 대시보드에 의해 제공되는 정보를 대시보드 콘텐츠라고 부른다. 증권 시황, 날씨 정보, 재고 현황과 같은 정보는 특수한 형식을 갖추고 있고, 실시간으로 제공되며, 많은 정보를 신속하게 처리해야 하고, 중요성이 높다는 특징을 갖고 있다. 일반적인 페이지 방식은 많은 정보를 체계적으로 전달하기에는 안성맞춤이지만, 시간에 따라 끊임 없이 바뀌는 동적인 정보나 중요한 판단에 필요한 수치 정보를 전달하기에는 적합하지 않다. 이러한 정보는 신속하고 명확한 커뮤니케이션을 위해 대시보드 방식을 고려할 필요가 있다.

살펴본 바와 같이 인터랙션 디자인을 위한 기초 작업은 사용자와 제품 사이의 상호작용을 구체화하는 과정이다. 어느 것 하나라도 이유 없는 것은 없다. 하다못해 버튼의 모양, 크기, 위치, 레이블도 다 나름의 근거를 갖고 있다. 이 근거는 사용자 측면에 있다. 사용자 입장을 충분히 이해하지 못하면 작은 버튼 하나도 제대로 디자인할 수 없다. 인터랙션 디자인을 위한 기초 작업을 충실하게 수행하면 다음과 같은 결과물을 얻을 수 있는데, 이 결과물은 사용자 과업에 직접적인 영향을 주기 때문에 작은 것 하나라도 놓치지 않고 섬세하게 작업할 필요가 있다.

사용자 목표(user goals): 사용자 목표는 과업 수행의 결과로 얻어지는 최종적인 결과를 의미한다. 아무 이유 없이 제품을 사용하지 않고, 아무런 대가 없이 행동하지 않는다. 원하는 것을 얻기 위한 목적 기반의 상호작용이기 때문에 제품의 모든 것은 사용자 목표를 바라보아야 하며, 사용자 목표를 정확하게 알고 있는 디자인과 그렇지 않은 디자인은 차이가 날 수밖에 없다. 사용자 목표의 문서화와 공식화는 반드시 필요한 과정이며, 결과물로써의 사용자 목표는 한 줄짜리 문장이 아니라 사용자 프로파일과 시나리오를 포함하기도 한다.
기능 목록(functional inventory): 기능 목록은 제공해야 할 기능을 일정한 순서 또는 기준으로 작성해 놓은 문서를 의미한다. 기능 목록이 없으면 개발자가 직접 조사 및 디자인 단계의 결과물을 해석하면서 개발해야 할 기능을 뽑아야 한다. 이렇게 하면 해석의 오류가 생겨서 제품 콘셉트가 올바르게 구현되지 않을 수 있다. 사용자와 제품 사이의 상호작용은 기능이 있어야만 가능하다. 디자이너가 기능 구현을 전체적으로 책임지고 있는 것은 아니지만, 적어도 일부분에 대한 책임은 있다.
컴포넌트 요구사항(component requirements): 컴포넌트 요구사항은 컴포넌트가 갖추어야 할 조건이나 성능을 말한다. 디자이너와 개발자는 서로 다른 배경과 관점을 갖고 있다. 이 때 업무상의 의견 차이가 비일비재하다. 문제는 이런 의견 차이가 성능 차이로 이어진다는 것이다. 복잡한 기능의 컴포넌트는 요구사항을 얼마나 잘 정의하느냐에 따라 개발 품질이 달라진다고 한다. 따라서 요구사항은 필요성, 실현가능성, 적용성 등을 고려하여 합리적이고 실용적으로 개발되어야 하며, 디자이너의 관점이 아니라 개발 공정 전체를 아우르는 관점에서 작성되어야 한다.
레이아웃 패턴과 페이지 유형(layout patterns·page types): 레이아웃 패턴은 페이지 요소를 배치하는 방법이나 모양을 의미하며, 페이지 유형은 성격이나 특징에 따라 페이지 형식을 구분하는 것을 말한다.⁴⁵ 레이아웃은 페이지 유형을 결정하는 요인이기 때문에 페이지 유형에 따라 레이아웃 패턴이 달라진다. 레이아웃은 '이 페이지를 이렇게 이용하세요’라는 디자이너의 의도를 표현한 것이다. 다양한 이용 방법보다는 최적의 이용 방법을 제공하는 것이 중요하다. 따라서 레이아웃도 최적의 방식을 패턴화하여 제공한다면 사용자는 최소의 학습으로 제품을 이용할 수 있다.
와이어프레임(wireframes): 와이어프레임은 웹 페이지 구조를 시각적으로 표현한 결과물을 의미한다. 앞에서 살펴본 시각적 프레임워크, 버튼 그룹 및 배치, 페이지 요소의 계층 구조 등 페이지 구조와 구성 측면의 결과를 통합적으로 적용하는 작업을 통해 와이어프레임이 만들어진다. 와이어프레임을 외형적으로 보면 단순히 뼈대만 있는 엉성한 결과물처럼 보이지만, 내용적으로 보면 사용자 목표 달성에 필요한 콘텐츠와 기능을 디자인의 원칙과 원리에 따라 설계한 전략적인 결과물이다.
스토리보드(storyboards): 스토리보드는 이야기를 일정한 형식에 맞게 시각화하는 기법을 의미하며, 영화, 만화, 애니메이션과 같은 이야기를 전달하기 위한 매체에서 주로 사용해 왔다. 인터랙션 디자인에서의 스토리보드는 와이어프레임 상에 사용자의 요구나 입력과 이에 대한 제품의 반응이나 결과를 기술한 것을 의미한다. 디자이너는 스토리보드를 이용하여 사용 장면에서 사용자가 제품을 어떻게 이용하는지 미리 예상할 수 있으며, 다른 개발 구성원에게 설계 의도를 알기 쉽게 표현할 수 있다.
주요 상태(key states): 와이어프레임과 스토리보드를 작성하면 페이지 설계는 거의 완성 단계에 이른다. 여기에 상호작용의 흐름을 좀더 구체적으로 표현하려면 상호작용의 결과로 나타나는 페이지 요소의 상태 변화와 이에 따라 페이지 전체가 어떻게 변화하는지 표현해 줄 필요가 있다. 특히, 어느 한 페이지 요소의 변화가 다른 페이지 요소에 직접적인 영향을 주는 경우, 주요 상태에 대한 결과물은 와이어프레임이나 스토리보드만큼 중요하다.

사용성 공학 (Usability Engineering)

사용성 공학은 예상되는 사용자 행동과 실제 사용자 행동 사이의 차이를 연구하는 분야이다. 이전 단계인 인터랙션 디자인에서 페이지 구조와 구성을 설계하였다. 여기에 모양을 내고 기능을 부여하면 비로소 제품이 완성된다. 이 과정에서 디자이너는 여러 가지 고민에 빠진다. ‘과연 아이디어를 제대로 구현한 것일까?’, ‘예상하지 못한 불편함이 있는 건 아닐까?’, '의도한 대로 가치를 제공할 수 있을까?'라는 고민과 두려움을 덜어내려면 사용자와 미리 만나는 것이 좋다.

물어보고 관찰하는 것은 누구나 할 수 있다. 그런데 제대로 물어보고 또 관찰해야만 그 결과를 신뢰할 수 있다. 이것을 체계적으로 연구하는 분야가 바로 사용성 공학이다. 정보 설계와 인터랙션 디자인이 사용자 과업을 잘 수행하도록 만드는 작업이라면, 사용성 공학은 사용자 과업이 실제 잘 수행되고 있는지의 여부를 확인하고 분석하기 위한 작업이라고 볼 수 있다.

디자이너는 항상 사용자를 염두에 두고 작업한다. 사용자 행동은 복합적인 요인에 의해 나타나는 결과다. 사용자 스스로도 자신의 행동에 대한 원인을 정확히 파악하지 못한다. 사용자를 염두에 두는 것은 바람직한 자세이지만, 이것만으로는 직면한 문제를 해결할 수 없다. 과학적으로 접근해야만 해결할 수 있는 문제가 분명 존재하며, 이러한 문제는 사용성 공학 차원에서 해결될 수 있다. 이를 위해 다음과 같은 기초 작업을 수행한다.

테스트 목표(test goals): 테스트 목표는 사용성 테스트를 통해 이루고자 하는 것을 말한다. 테스트 목표가 없으면 테스트 계획을 세울 수 없고 테스트 방법을 결정할 수도 없다. 무엇보다도 테스트를 잘했는지 못했는지 평가할 수 있는 기준이 없으니 작업자가 분발하지 않는다. 이런 점에서 테스트 목표는 테스트 결과만큼 중요하며, 타당성을 확보할 수 있도록 구체적이고 달성 가능한 수준으로 기술되어야 한다.
테스트 스크립트 및 과업(test scripts·tasks): 테스트 스크립트는 테스트 진행에 필요한 지시나 설명을 적은 글이며, 테스트 과업은 테스트를 위해 참여자가 수행하는 과업을 말한다. 테스트도 연극처럼 미리 만들어진 시나리오 대로 진행되는데, 이때 참여자의 원활한 과업 수행과 조사자의 정확한 테스트 진행을 위해 테스트 스크립트가 필요하다. 테스트 스크립트는 예상 가능한 상황을 충분히 고려하여 기술되어야 하며, 조사자 도움 없이 참여자 스스로 과업을 수행할 수 있도록 구성되어야 한다.
내비게이션(navigation): 내비게이션은 정보를 찾기 위한 이동 방법이다. 목적지로 가는 과정이 고통스럽다면 목적지를 가는 것을 포기하는 사람이 많아질 것이다. 이런 점에서 내비게이션은 사용자 경험 품질을 결정짓는 중요한 기준이므로 테스트를 통해 내비게이션의 성능 수준을 확인한다. 내비게이션을 테스트할 때 대개 이동 경로에 집중하는 경향이 있다. 그러나 내비게이션은 진행 방향을 선택하는 것이 먼저다. 실제로 선택 옵션이 너무 많기 때문에 진행 방향을 찾는 데 어려움을 겪는 경우가 많으므로 선택 옵션의 적정 수준을 살펴보는 것도 중요하다.
콘텐츠 및 용어(content·terminology): 콘텐츠는 제품이 전달하고자 하는 내용이며,⁴⁷ 용어는 제품에서 주로 사용하고 있는 말이다. 콘텐츠는 제품의 존재 이유이며, 사용자 목표를 달성하게 만드는 본질적 요소이다. 테스트에서는 콘텐츠가 우수한지 여부보다는 콘텐츠가 유용한지 여부를 확인하는 것이 더 중요하다. 단어를 모르면 문장을 이해할 수 없듯이 용어를 모르면 콘텐츠를 이해할 수 없다. 따라서 테스트를 통해 어렵거나 모호한 용어가 과업 수행과 목표 달성에 어떤 영향을 주는지 살펴볼 필요가 있다.
제공 방식(presentation): 제공 방식은 콘텐츠를 전달하는 형식이나 표현하는 방법을 의미한다. 텍스트, 그림, 음성, 영상, 애니메이션 등 콘텐츠를 전달하는 형식은 다양하다. 전달하는 형식을 달리하면 같은 내용이라도 다른 가치를 제공할 수 있다. 따라서 테스트를 통해 콘텐츠를 어떤 형식으로 전달했을 때 관여도(involvement)가 높아지는지, 어떻게 표현했을 때 이해도가 높아지는지 살펴볼 필요가 있다. 표현이 미숙하면 내용이 잘못 전달될 수도 있기 때문이다.
상호작용(interaction): 상호작용은 사용자와 제품 사이의 상호관계를 이루기 위한 작용 또는 활동을 의미한다. 인터페이스에 의한 대화는 아무래도 직접 대화보다 불편하며, 불편하면 대화는 줄어든다. 또한 대화가 막힘없이 이루어지더라도 그 결과가 효용가치로 이어지는지 여부도 중요하다. 상호작용은 시간과 노력을 필요로 하기 때문이다. 따라서 테스트를 통해 상호작용이 얼마나 풍부하고 의미 있게 이루어지는지 살펴볼 필요가 있다.
참여자 섭외(participant recruiting): 참여자 섭외는 테스트에 참여할 사람을 선정하고 연락하는 일을 말한다. 참여자 선정은 목표 사용자(target user)를 대상으로 이루어져야 한다. 테스트는 전수조사가 아니라 표본조사이므로 몇 명이 참여하는지 여부보다는 얼마나 알맞은 사람이 참여하는지 여부가 더 중요하다. 대상자에게 연락할 때, 참여 여부만 확인하는 것이 아니라 테스트 목적, 방법, 참여 대가 등을 충분히 설명할 필요가 있다.
총괄적 테스트(summative testing): 총괄적 테스트는 결과물 수준을 평가하기 위한 테스트를 의미한다. 예컨대, 과업을 성공적으로 완료했는지, 과업을 완료하기까지 시간은 얼마나 소요되는지, 과업 수행 중에 나타난 문제점은 무엇인지 등의 결과물 수준을 정확하게 판단하기 위한 데이터를 얻는 것이 총괄적 테스트의 목적이다. 일종의 최종 평가인 셈이다. 그래서 총괄적 테스트는 후반 작업에 주로 실시되며, 과정보다는 결과를 중요하게 여긴다.
형성적 테스트(formative testing): 형성적 테스트는 결과물 수준을 개선하기 위한 테스트를 의미한다. ‘어떤 문제점이 있을까?’, '이 문제점을 어떻게 해결할까?'라는 고민을 해결하기 위해 작업 도중에 테스트를 실시하고, 이 테스트를 통해 문제점을 이해하고 더 나아가 문제점을 보완할 수 있는 기회를 얻는다. 일종의 중간 평가인 셈이다. 총괄적 테스트와 형성적 테스트는 지향하는 바가 다르지만 배타적인 관계는 아니다. 형성적 테스트에 의해 개선된 결과물을 총괄적 테스트로 최종 평가를 내리는 것이므로 두 테스트 방식은 상호보완적 관계로 볼 수 있다.
권고사항(recommendations): 권고사항은 권유하고자 하는 항목이나 내용을 말한다. 문제를 일으킨 결함 원인을 정확하게 분석한 후 결함 원인을 제거하거나 보완하기 위한 대안이 제시되어야 하는데, 이 대안이 권고사항이다. 권고는 일방적으로 선언하는 것(statement)이 아니라 합리적으로 설득하는 것(persuasion)이라고 볼 수 있다. 이를 위해서는 문제점을 지적하는 것이 아니라 문제점의 원인과 해결방안을 구체적으로 기술할 필요가 있다.
작동 프로토타입 환경(working prototype environment): 작동 프로토타입은 움직이는 프로토타입을 말하며, 기능성 프로토타입(functional prototype)⁴⁹이라고도 부른다. 기능 중심의 제품은 실제 움직임 있는 상태에서 테스트하는 것이 정확한 시뮬레이션과 사용자 만족도 측정에 도움된다. 작동 프로토타입을 이용한 테스트는 시제품에 대한 반응을 미리 살펴보기 위한 과정이므로 시제품에 가장 가까운 수준으로 개발된다. 따라서 단순히 기능적 측면만 강조한 것이 아니라 미적, 구조적 측면도 충분히 고려되어야 한다.

살펴본 바와 같이 사용성 공학 차원의 기초 작업은 사용자 참여에 의해 결과물을 테스트하고 문제점을 확인하는 과정이다. 이 과정은 원래 디자인 의도 대로 제품이 만들어졌는지 여부를 점검할 수 있는 좋은 기회이며, 디자이너에게 객관적인 시각을 갖도록 만든다. 디자인은 디자인을 위한 디자인이 아니라 좋은 제품을 만들기 위한 디자인이어야 한다. 이런 측면에서 디자이너와 개발자에게 있어 테스트 과정은 자신의 부족함과 편협함을 일깨워주는 고마운 도우미인 셈이다. 사용성 공학 차원의 기초 작업을 충실하게 수행하면 다음과 같은 결과물을 얻을 수 있는데, 이 결과물은 제품의 완성도를 높이는데 기여할 수 있도록 실질적인 내용으로 작성될 필요가 있다.

사용성 계획 및 스크립트(usability plan and scripts): 사용성 계획은 사용성 향상을 위한 작업 절차나 방법을 구체적으로 작성하는 것을 말하며, 사용성 스크립트는 사용성 작업에 필요한 지시나 설명을 적은 글을 의미한다. 사용성 향상을 위해서는 테스트뿐만 아니라 서베이(survey), 평가(evaluation), 권고사항 작성(recommendation documentation) 등 다양한 활동이 필요하다. 이러한 활동을 체계적으로 진행하기 위해 사용성 계획을 작성하며, 사용성 목표, 수행 방법 및 절차, 수행 인원 및 일정, 참여자 선정 및 섭외, 결과물 정의 등을 포함한다.
사용성 세션(usability sessions)⁵¹: 사용성 세션은 사용성 향상을 위한 일련의 과정 또는 작업 시간을 의미한다. 특히, 세션은 어떤 주제나 대상과의 연결 상태를 강조한 개념이므로 독립적이거나 분절적인 작업은 세션에 포함시키지 않는다. 참여자 모집, 테스트 실행 및 진행, 토의 등 조사자와 참여자 사이에 정보를 교환하거나 대화를 주고 받는 작업은 사용성 세션으로 볼 수 있다.
사용성 결과(usability findings): 사용성 결과는 사용성 작업을 통해 찾아낸 발견점과 시사점을 정리한 내용을 말한다. 이러한 내용은 제품의 디자인 품질 수준을 판단하는데 도움을 주고 향후 디자인 전략이나 작업에 영향을 준다. 사용성 결과는 간결하게 구성하는 것이 좋다. 그래야만 핵심을 놓치지 않는다. 기본적으로 전체 결과에 해당하는 '총평’과 주요 결과에 해당하는 '시사점’으로 구성되며, 결과 내용을 오랫동안 기억할 수 있도록 인상 깊은 키워드나 비교하기 쉬운 수치 데이터를 포함하는 것이 좋다.
권고사항 정의서(recommendations document): 권고사항 정의서는 권고사항을 공유 가능한 형식으로 작성한 문서를 말한다. 굳이 비교하자면 사용성 결과는 의사결정권자를 위한 문서이고, 권고사항 정의서는 실무자를 위한 문서다. 따라서 이 문서는 문제점을 단순 나열하는 것이 아니라 디자인 개선 작업에 실질적인 도움을 줄 수 있는 매뉴얼이나 지침이 되어야 한다. 또한 권고사항은 철저하게 정성적 데이터 위주로 작성되는 것이 바람직하며, 작업자에게 내용을 알기 쉽게 설명하여 해석 오류 없이 정확하게 이해할 수 있도록 돕는다.
서베이(surveys)⁵²: 서베이는 질문과 답변을 통해 의견을 조사하고 자료를 수집하는 조사 기법이며, 설문조사(questionnaire)와 인터뷰(interview)로 구분된다. 설문조사는 구조화된 질문으로 구성된 설문지(온라인 포함)를 사용하여 조사하는 기법이며, 광범위한 데이터나 주제를 다룰 때 적합하다. 인터뷰는 응답자와 직접 대화하면서 제품에 대한 경험, 행동, 의견을 조사하는 기법이며, 관심 있는 주제를 심층적으로 알고자 할 때 적합하다. 이처럼 설문조사나 인터뷰는 테스트 중심의 사용성 작업에서 테스트 기법을 보완해 주는 역할을 맡는다.

테스트 목표(test goals): 테스트 목표는 사용성 테스트를 통해 이루고자 하는 것을 말한다. 테스트 목표가 없으면 테스트 계획을 세울 수 없고 테스트 방법을 결정할 수도 없다. 무엇보다도 테스트를 잘했는지 못했는지 평가할 수 있는 기준이 없으니 작업자가 분발하지 않는다. 이런 점에서 테스트 목표는 테스트 결과만큼 중요하며, 타당성을 확보할 수 있도록 구체적이고 달성 가능한 수준으로 기술되어야 한다.
테스트 스크립트 및 과업(test scripts·tasks): 테스트 스크립트는 테스트 진행에 필요한 지시나 설명을 적은 글이며, 테스트 과업은 테스트를 위해 참여자가 수행하는 과업을 말한다. 테스트도 연극처럼 미리 만들어진 시나리오 대로 진행되는데, 이때 참여자의 원활한 과업 수행과 조사자의 정확한 테스트 진행을 위해 테스트 스크립트가 필요하다. 테스트 스크립트는 예상 가능한 상황을 충분히 고려하여 기술되어야 하며, 조사자 도움 없이 참여자 스스로 과업을 수행할 수 있도록 구성되어야 한다.
내비게이션(navigation): 내비게이션은 정보를 찾기 위한 이동 방법이다. 목적지로 가는 과정이 고통스럽다면 목적지를 가는 것을 포기하는 사람이 많아질 것이다. 이런 점에서 내비게이션은 사용자 경험 품질을 결정짓는 중요한 기준이므로 테스트를 통해 내비게이션의 성능 수준을 확인한다. 내비게이션을 테스트할 때 대개 이동 경로에 집중하는 경향이 있다. 그러나 내비게이션은 진행 방향을 선택하는 것이 먼저다. 실제로 선택 옵션이 너무 많기 때문에 진행 방향을 찾는 데 어려움을 겪는 경우가 많으므로 선택 옵션의 적정 수준을 살펴보는 것도 중요하다.
콘텐츠 및 용어(content·terminology): 콘텐츠는 제품이 전달하고자 하는 내용이며,⁴⁷ 용어는 제품에서 주로 사용하고 있는 말이다. 콘텐츠는 제품의 존재 이유이며, 사용자 목표를 달성하게 만드는 본질적 요소이다. 테스트에서는 콘텐츠가 우수한지 여부보다는 콘텐츠가 유용한지 여부를 확인하는 것이 더 중요하다. 단어를 모르면 문장을 이해할 수 없듯이 용어를 모르면 콘텐츠를 이해할 수 없다. 따라서 테스트를 통해 어렵거나 모호한 용어가 과업 수행과 목표 달성에 어떤 영향을 주는지 살펴볼 필요가 있다.
제공 방식(presentation): 제공 방식은 콘텐츠를 전달하는 형식이나 표현하는 방법을 의미한다. 텍스트, 그림, 음성, 영상, 애니메이션 등 콘텐츠를 전달하는 형식은 다양하다. 전달하는 형식을 달리하면 같은 내용이라도 다른 가치를 제공할 수 있다. 따라서 테스트를 통해 콘텐츠를 어떤 형식으로 전달했을 때 관여도(involvement)가 높아지는지, 어떻게 표현했을 때 이해도가 높아지는지 살펴볼 필요가 있다. 표현이 미숙하면 내용이 잘못 전달될 수도 있기 때문이다.
상호작용(interaction): 상호작용은 사용자와 제품 사이의 상호관계를 이루기 위한 작용 또는 활동을 의미한다. 인터페이스에 의한 대화는 아무래도 직접 대화보다 불편하며, 불편하면 대화는 줄어든다. 또한 대화가 막힘없이 이루어지더라도 그 결과가 효용가치로 이어지는지 여부도 중요하다. 상호작용은 시간과 노력을 필요로 하기 때문이다. 따라서 테스트를 통해 상호작용이 얼마나 풍부하고 의미 있게 이루어지는지 살펴볼 필요가 있다.
참여자 섭외(participant recruiting): 참여자 섭외는 테스트에 참여할 사람을 선정하고 연락하는 일을 말한다. 참여자 선정은 목표 사용자(target user)를 대상으로 이루어져야 한다. 테스트는 전수조사가 아니라 표본조사이므로 몇 명이 참여하는지 여부보다는 얼마나 알맞은 사람이 참여하는지 여부가 더 중요하다. 대상자에게 연락할 때, 참여 여부만 확인하는 것이 아니라 테스트 목적, 방법, 참여 대가 등을 충분히 설명할 필요가 있다.
총괄적 테스트(summative testing): 총괄적 테스트는 결과물 수준을 평가하기 위한 테스트를 의미한다. 예컨대, 과업을 성공적으로 완료했는지, 과업을 완료하기까지 시간은 얼마나 소요되는지, 과업 수행 중에 나타난 문제점은 무엇인지 등의 결과물 수준을 정확하게 판단하기 위한 데이터를 얻는 것이 총괄적 테스트의 목적이다. 일종의 최종 평가인 셈이다. 그래서 총괄적 테스트는 후반 작업에 주로 실시되며, 과정보다는 결과를 중요하게 여긴다.
형성적 테스트(formative testing): 형성적 테스트는 결과물 수준을 개선하기 위한 테스트를 의미한다. ‘어떤 문제점이 있을까?’, '이 문제점을 어떻게 해결할까?'라는 고민을 해결하기 위해 작업 도중에 테스트를 실시하고, 이 테스트를 통해 문제점을 이해하고 더 나아가 문제점을 보완할 수 있는 기회를 얻는다. 일종의 중간 평가인 셈이다. 총괄적 테스트와 형성적 테스트는 지향하는 바가 다르지만 배타적인 관계는 아니다. 형성적 테스트에 의해 개선된 결과물을 총괄적 테스트로 최종 평가를 내리는 것이므로 두 테스트 방식은 상호보완적 관계로 볼 수 있다.
권고사항(recommendations): 권고사항은 권유하고자 하는 항목이나 내용을 말한다. 문제를 일으킨 결함 원인을 정확하게 분석한 후 결함 원인을 제거하거나 보완하기 위한 대안이 제시되어야 하는데, 이 대안이 권고사항이다. 권고는 일방적으로 선언하는 것(statement)이 아니라 합리적으로 설득하는 것(persuasion)이라고 볼 수 있다. 이를 위해서는 문제점을 지적하는 것이 아니라 문제점의 원인과 해결방안을 구체적으로 기술할 필요가 있다.
작동 프로토타입 환경(working prototype environment): 작동 프로토타입은 움직이는 프로토타입을 말하며, 기능성 프로토타입(functional prototype)⁴⁹이라고도 부른다. 기능 중심의 제품은 실제 움직임 있는 상태에서 테스트하는 것이 정확한 시뮬레이션과 사용자 만족도 측정에 도움된다. 작동 프로토타입을 이용한 테스트는 시제품에 대한 반응을 미리 살펴보기 위한 과정이므로 시제품에 가장 가까운 수준으로 개발된다. 따라서 단순히 기능적 측면만 강조한 것이 아니라 미적, 구조적 측면도 충분히 고려되어야 한다.

사용성 계획 및 스크립트(usability plan and scripts): 사용성 계획은 사용성 향상을 위한 작업 절차나 방법을 구체적으로 작성하는 것을 말하며, 사용성 스크립트는 사용성 작업에 필요한 지시나 설명을 적은 글을 의미한다. 사용성 향상을 위해서는 테스트뿐만 아니라 서베이(survey), 평가(evaluation), 권고사항 작성(recommendation documentation) 등 다양한 활동이 필요하다. 이러한 활동을 체계적으로 진행하기 위해 사용성 계획을 작성하며, 사용성 목표, 수행 방법 및 절차, 수행 인원 및 일정, 참여자 선정 및 섭외, 결과물 정의 등을 포함한다.
사용성 세션(usability sessions)⁵¹: 사용성 세션은 사용성 향상을 위한 일련의 과정 또는 작업 시간을 의미한다. 특히, 세션은 어떤 주제나 대상과의 연결 상태를 강조한 개념이므로 독립적이거나 분절적인 작업은 세션에 포함시키지 않는다. 참여자 모집, 테스트 실행 및 진행, 토의 등 조사자와 참여자 사이에 정보를 교환하거나 대화를 주고 받는 작업은 사용성 세션으로 볼 수 있다.
사용성 결과(usability findings): 사용성 결과는 사용성 작업을 통해 찾아낸 발견점과 시사점을 정리한 내용을 말한다. 이러한 내용은 제품의 디자인 품질 수준을 판단하는데 도움을 주고 향후 디자인 전략이나 작업에 영향을 준다. 사용성 결과는 간결하게 구성하는 것이 좋다. 그래야만 핵심을 놓치지 않는다. 기본적으로 전체 결과에 해당하는 '총평’과 주요 결과에 해당하는 '시사점’으로 구성되며, 결과 내용을 오랫동안 기억할 수 있도록 인상 깊은 키워드나 비교하기 쉬운 수치 데이터를 포함하는 것이 좋다.
권고사항 정의서(recommendations document): 권고사항 정의서는 권고사항을 공유 가능한 형식으로 작성한 문서를 말한다. 굳이 비교하자면 사용성 결과는 의사결정권자를 위한 문서이고, 권고사항 정의서는 실무자를 위한 문서다. 따라서 이 문서는 문제점을 단순 나열하는 것이 아니라 디자인 개선 작업에 실질적인 도움을 줄 수 있는 매뉴얼이나 지침이 되어야 한다. 또한 권고사항은 철저하게 정성적 데이터 위주로 작성되는 것이 바람직하며, 작업자에게 내용을 알기 쉽게 설명하여 해석 오류 없이 정확하게 이해할 수 있도록 돕는다.
서베이(surveys)⁵²: 서베이는 질문과 답변을 통해 의견을 조사하고 자료를 수집하는 조사 기법이며, 설문조사(questionnaire)와 인터뷰(interview)로 구분된다. 설문조사는 구조화된 질문으로 구성된 설문지(온라인 포함)를 사용하여 조사하는 기법이며, 광범위한 데이터나 주제를 다룰 때 적합하다. 인터뷰는 응답자와 직접 대화하면서 제품에 대한 경험, 행동, 의견을 조사하는 기법이며, 관심 있는 주제를 심층적으로 알고자 할 때 적합하다. 이처럼 설문조사나 인터뷰는 테스트 중심의 사용성 작업에서 테스트 기법을 보완해 주는 역할을 맡는다.
의견 및 제안(feedback)⁵³: 의견 및 제안은 사용성 결과에 대한 조사자의 생각이나 해석을 내놓는 것을 의미한다. 작업이 항상 최적의 조건 아래에서 정상적으로 진행되는 것만은 아니다. 이런 경우, 작업은 제한사항에 의해 영향을 받거나 돌발상황에 의해 예상하지 못한 결과를 얻기도 한다. 이런 내용은 결과나 권고사항을 이해하는 데 좋은 참고가 된다. 때론 의견 및 제안에 스스로 반성하는 내용이나 아쉬움을 담기도 한다.
세션 기록(session recordings): 세션 기록은 인터뷰, 테스트 등 사용성 세션을 녹음하거나 녹화하는 것을 말한다. 사용성 결과는 사용성 작업을 통해 수집된 기초 자료(raw data)를 해석하거나 가공하여 만든다. 결과의 객관성과 신뢰성을 확보하려면 세션 기록과 같은 기초 자료를 반드시 제시해야 한다.

시각 디자인 (Visual Design)

시각 디자인은 사용자 과업이 효과적으로 수행될 수 있도록 페이지 요소를 시각화하는 활동이다. 앞서 인터랙션 디자인에서는 콘텐츠와 기능의 구조와 구성을 설계하였다. 이것은 사용자 과업 수행을 위한 논리적 디자인이다. 합리성과 기능성은 구현되었지만, 브랜드와 제품의 특성은 아직 표현하지 못한 상태다.

경험은 지각 과정을 거치며, 시각, 청각, 촉각, 미각, 후각 등 감각기관을 통해 수용된 자극은 경험 형성에 중요한 역할을 한다. 이 때 가장 중요한 역할을 하는 것이 바로 시각이며, 제품에 대한 강한 인상을 형성시킨다. 따라서 기본적인 뼈대만으로는 시각적 전달이 효과적으로 이루어질 수 없기 때문에 색과 형태를 입히는 작업을 통해 시각적 커뮤니케이션을 강화한다. 이것을 시각화(visual treatment 또는 visualization)라고 하며, 크게 시각적 표현(visual representation)과 시각적 효과(visual effect)⁵⁴로 구분할 수 있다.

페이지 요소의 시각화는 단순히 멋있게 보이려는 것이 아니라 사용자 과업의 효율성(efficiency)과 효과성(effectiveness)을 극대화시키기 위한 목적으로 이루어진다. 즉, 시각화는 목적이 아니라 수단이다. 인터랙션 디자인이 사용자 과업을 수행할 수 있는 구조물을 만드는 작업이라면, 시각 디자인은 사용자 과업을 촉진시킬 수 있는 시각물을 만드는 작업이라고 볼 수 있다.

건축가인 Louis Sullivan은 “형태는 기능을 따른다”(Form ever follows function)고 했다. 이 말에서 '형태’는 의미를 표현하며, 디자인적으로는 합목적성을 지닌다. 마찬가지로 모든 페이지 요소는 나름의 의미를 지니고 있다. 의미를 전달하지 않고 단순히 아름다운 것은 적어도 디자인에서는 아무 소용이 없다. 따라서 시각화는 의미 전달 측면에서 접근해야 한다. 이처럼 시각 디자인은 페이지 요소의 의미를 보다 효과적으로 전달시키기 위한 작업이라고 볼 수 있으며, 이를 위해 다음과 같은 기초 작업을 수행한다.

시각적 계층 구조(visual hierarchy): 시각적 계층 구조는 페이지 요소의 계층 구조를 표현하기 위한 시각적 우선순위(visual priority) 구조를 의미한다. 사용자는 보이는 대로 본다. 디자이너의 의도 대로 시각화가 이루어지면 사용자는 디자이너의 의도 대로 본다. 만약 페이지 요소의 전략적 우선순위는 높은데 이 요소의 시각적 우선순위가 낮다면 잘못된 상호작용이 발생할 수밖에 없다. 따라서 페이지 요소의 계층 구조와 시각적 계층 구조는 일치해야 한다.
유사성(similarity): 유사성은 형태적으로 닮은 것이 내용적으로도 관련 있게 보이는 성질을 의미한다. 페이지는 전략적 의도에 따른 시각적 그룹핑(visual grouping)이 이루어져야 하는데, 이때 형태적으로 묶는 기법이 바로 유사성이다. 닮은 것끼리 더 강하게 연결될 필요가 있다면 공통적인 특성을 강화시킬 수 있는 방향으로 시각화한다. 서로 다른 것을 비슷하게 보이게 하려면 공통적인 특성을 인위적으로 부여하여 유사성을 확보해야 한다.⁵⁶
근접성(proximity): 근접성은 위치적으로 가깝게 있는 것은 내용적으로도 관련 있어 보이는 성질을 의미한다. 유사성이 형태에 의한 시각적 그룹핑이라면, 근접성은 배치에 의한 시각적 그룹핑이다. 시각적 그룹핑을 위해 비슷한 내용을 담고 있거나 비슷한 결과를 내는 요소들을 하나의 그룹으로 묶는다면 페이지를 보다 신속하게 이해할 수 있다. 형태적으로 다른 요소들은 가깝게 배치하여 묶는 방법을 먼저 고려해야 한다.
색(color)⁵⁷: 색이란 사물에 투사된 빛이 눈에 도달하여 생긴 감각을 의미한다.⁵⁸ 이처럼 색은 단순히 사물의 특성이 아니라 빛, 사물, 시각기관, 대뇌 사이의 상호작용에 의해 생긴다. 빛은 환경에 따라 달라지며, 시각기관과 대뇌는 사람마다 차이가 있다. 이것은 같은 사물이라도 상황이나 사람에 따라 달리 보고 느낄 수 있다는 사실을 알려준다. 따라서 빛이 부족한 상황이나 색을 볼 수 없는 사람도 사용할 수 있도록 디자인의 보편성(universality)을 확보할 필요가 있다.
질감(texture): 질감은 만졌을 때 느껴지는 감각이다.⁵⁹ 시각적 단서를 이용하여 물리적 질감을 느끼도록 만드는 것을 시각적 질감(visual texture)이라고 부른다. 터치 인터페이스(touch interface)를 채택하더라도 전달할 수 있는 물리적 질감은 아주 제한적이다. 따라서 다양한 느낌을 전달하려면 시각적 질감을 적극적으로 사용할 필요가 있다. 다만, 시각적 질감은 강한 인상을 주기 때문에 지나친 사용은 부작용을 가져올 수 있다는 사실에 유의해야 한다.
형태(shape)⁶⁰: 형태는 사물의 생김새나 모양을 말한다.⁶¹ 조화로운 비례와 안정된 구도, 의미 있는 시각적 관계와 정리된 구성은 시각적 즐거움을 주지만, 반대의 경우이거나 일부가 미흡하면 시각적 불편함을 준다. 형태는 적절한 수준으로 구현되어야 하며, 그 기준은 사용자 과업에 도움을 주는지 여부다.
방향(direction): 방향의 사전적 의미는 사물이 향하거나 나아가는 쪽이다. 디자인에서는 시각적 이동(visual movement)을 포함하는 개념이다. 기본적으로 사용자는 정보에 대한 개념이 불완전한 상태이다. 이런 경우 사용자 스스로 이동 경로를 선택하는 것이 아니라 디자이너가 사용자에게 이동 경로를 제안하거나 알려줄 필요가 있다. 즉, 시각적 경로(visual path)를 제공하는 것이다. 디자이너는 선, 농담의 연속적인 차이(gradation), 색의 대비(color contrast) 등을 통해 방향을 만든다.
크기(size): 크기의 사전적 의미는 사물의 넓이, 부피, 양 따위의 큰 정도이다.⁶² 디자인에서는 규모(scale)와 비례(proportion)를 포함하는 개념이다. 규모 측면에서 큰 요소는 작은 요소보다 눈에 더 잘 띄며 더 중요한 요소로 여겨진다. 크기는 요소 사이의 관계를 직관적으로 보여줄 수 있는 강력한 기법이다. 잘 사용하면 의미를 잘 전달할 수 있지만, 잘못 사용하면 혼란과 오해를 불러일으킬 수 있다.
서체(typeface): 서체는 글씨의 모양을 뜻하며 ‘폰트’(font)라고 불리기도 한다. 여기에서의 '서체’는 단순히 폰트가 아니라 ‘타이포그래피’(typography)⁶³의 의미로 사용되었다고 판단된다. 타이포그래피는 글자를 위한 시각화 기법이며, 가독성(readability), 판독성(legibility), 문체(style)를 아우르는 개념이다. 가독성은 읽기 쉬운지의 여부를 나타낸다. 판독성은 찾기 쉬운지 또는 구분하기 쉬운지의 여부를 나타낸다. 웹 사이트나 소프트웨어의 문체는 인쇄물과 달라야 한다. 가능하면 짧고 간결한 구성, 편하게 부드러운 느낌, 의미 전달 위주의 소박한 표현이 바람직하다.
맥락(context)⁶⁴: 맥락은 어떤 일이나 사물의 전후 관계를 의미한다. 어린아이가 알아들을 수 없는 말을 하더라도 엄마는 알아듣는다. 이것은 맥락이 말을 이해할 수 있도록 도왔기 때문이다. 내용을 더 잘 이해할 수 있도록 만드는 것이 바로 디자인이다. '내용’이 'contents’라면, '디자인’은 'context’다. 잘못된 디자인은 올바른 내용 전달을 방해한다. 따라서 내용과 상관없이 멋있는 디자인이 아니라, 내용에 맞는 디자인을 추구해야 한다.

살펴본 바와 같이 시각 디자인을 위한 기초 작업은 사용자와 만나는 실재(the real) 또는 실체(the truth)를 만드는 과정이다. 이 과정을 통해 제품의 물리적인 외관이 완성되며, 이 외관은 사용자의 눈에 가장 먼저 인식된다. 제품의 내용과 겉모습이 인과관계를 이루면 사용자는 겉모습만으로 내용을 짐작할 수 있다. 바깥에서 안이 훤히 보이면 잘못된 기대나 불필요한 오해가 생기지 않기 때문에 명쾌한 커뮤니케이션이 가능해진다. 시각 디자인을 위한 기초 작업을 충실하게 수행하면 다음과 같은 결과물을 얻을 수 있는데, 이 결과물이 그대로 제품에 반영되기 때문에 완벽한 수준의 작업을 필요로 한다.

시각화 정의(treatment definition)⁶⁵: 시각화 정의는 시각화를 위한 방향이나 수준을 결정하는 것이다. 시각적인 것은 다분히 선호도(preference) 측면이 강하다. 사람마다 취향이 다르기 때문에 보는 사람마다 다른 평가를 내리기 쉽다. 이러한 현상이 개발 구성원 사이에 벌어지면 곤란하다. 따라서 내부적으로 시각 디자인에 대한 관점을 통합할 필요가 있으며, 이를 위한 수단이 바로 시각화 정의이다. 이 방향성은 제품의 정체성(또는 차별성)을 부각시키고 사용자 과업의 효율성과 효과성을 높일 수 있는 디자인 특성을 포함한다.
목업(mockups): 목업은 실제 크기 또는 실물과 똑 같은 모형을 의미한다. 디자인 측면에 있어서 목업이나 프로토타입은 차이가 없지만, 프로토타입은 실제 코딩까지 입혀져서 작동 상태까지 검증할 수 있다는 점이 다르다. 사용자 경험 디자인은 양적 작업을 포함하지 않기 때문에 주요 페이지 위주로 목업 작업이 이루어진다. 목업은 시각화를 위한 방향이나 수준을 효과적으로 표현해야 하므로 가장 보편적이거나 또는 극적인 장면을 담는 것이 바람직하다.
스타일 가이드(style guide): 스타일 가이드는 시각화 방식을 일목요연하게 정리한 문서를 의미한다. 스타일은 시각 디자인의 전략적 방향성에 기초하여 정의된 제품의 시각적 특색이며, 제품의 디자인적 개성을 만든다. 만약 일정한 형식과 체계가 없으면 디자이너마다 다른 해석을 하게 되어 스타일을 일관성 있게 구현할 수 없다. 스타일 가이드는 디자인 전체와 부분에 대한 스타일을 기술하는데, 단순히 스타일에 대한 정의나 규격만을 담는 것이 아니라 스타일에 대한 배경과 지침을 구체적으로 담아야 한다. 그래야만 실무 매뉴얼(field manual)로 사용될 수 있다.⁶⁶
주요 상태(key states treatment): 로그인 전후의 변화, 활성화에 따른 변화 등 상호작용의 결과에 따라 페이지 전체와 부분(page template & sections)이 다른 모습으로 변화한다. 또한 마우스를 올렸을 때, 드래그 앤드 드롭 등 마우스와 키보드 조작에 따라 페이지 요소(page elements)는 다른 모양으로 바뀐다. 이러한 내용은 인터랙티브한 제품에서 아주 중요한 의미를 지닌다. 복잡한 상호작용을 구체적으로 표현해야 하거나 개발자를 위한 별도의 문서가 필요하다면 주요 상태만 별도로 작성하는 것도 좋은 방법이다.
자산화(assets): 자산화는 결과물을 가치 있는 실체로 만드는 것을 말한다. 이미지, 아이콘 등 시각적 요소와 레이아웃, 메타포 등 시각적 방법을 언제든지 재사용할 수 있는 형식으로 만드는 것이 중요하다. 자산화가 이루어지면 디자인 결과물의 'One Source Multi-Use’를 구현할 수 있다. 특히, 디자인 과정에서 채택되지 못한 시안이나 습작은 미래 가치를 지니고 있으므로 자산화 대상으로 삼을 필요가 있다.

프로토타입 공학 (Prototype Engineering)

프로토타입 공학은 프로토타입을 체계적으로 연구·개발하는 분야이며, 완벽한 수준의 시제품을 얻기 위한 개발 및 양산 검증 과정이다. 제품은 아이디어(concept), 디자인(design), 프로토타입(prototype), 개발(product)의 과정을 거치면서 본모습을 갖추게 된다.

디자인은 아이디어를 구체화하는 것이다. 이 과정에서 여러 가지 이유로 인해 개념(the idea)과 실체(the real) 사이의 차이가 발생한다. 이 차이를 극복하기 위해 문제확인, 해결대안, 재설계 등 반복적인 디자인 과정(iterative design process)이 이루어진다. 이 과정을 보다 효과적으로 수행하려면 테스트와 시뮬레이션이 필요하고, 이를 위해서는 만질 수 없는 것을 만질 수 있도록, 실물 같지 않은 것을 실물처럼 보이도록 만드는 프로토타입이 있어야 한다.

인터랙션 디자인과 시각 디자인이 아이디어를 창의적으로 구현하는 작업이라면, 프로토타입 공학은 아이디어를 객관적으로 검증하는 작업이라고 볼 수 있다.

디자인 결과물은 프로토타입 과정을 거치면서 현실적인 감각을 찾게 된다. 통신 속도, 트래픽 상황, 하드웨어 요인 등 실제 사용 조건이나 요인이 복합적으로 작용하는 환경까지 염두에 두기란 결코 쉽지 않다. 따라서 시간과 비용이 더 들더라도 실제 모습과 움직임을 보면서 완성도를 확인할 필요가 있다. 이처럼 프로토타입 공학은 시제품에 가까운 결과물을 만들기 위한 체계적인 개발 활동으로 볼 수 있으며, 이를 위해 다음과 같은 기초 작업을 수행한다.

페이지 요소의 상호작용 상태(page-element interactive states): 페이지 요소의 상호작용 상태는 사용자 요구와 제품 반응이 연속적으로 이루어지는 모양을 말한다. 정적인 것은 단순히 정보에 지나지 않는다. 경험은 주고 받는 과정을 통해 형성된다. 실제로 페이지를 연결하여 상호작용 상태를 표현해 보면 생각하지 못했던 문제나 색다른 느낌을 받는다. 따라서 기능이 많거나 구조가 복잡한 제품은 프로토타입 개발을 통해 상호작용 상태를 꼼꼼히 점검할 필요가 있다.
디자이너의 의도(designer’s intentions): 디자이너의 의도는 디자이너가 제품에 담고자 하는 생각이나 계획을 말한다. 프로토타입 개발은 사용자 경험 디자인과 개발이 겹치는 영역이다. 기능 구현 방식이나 개발 방법은 개발자의 의도가 반영되지만, 나머지 부분은 디자이너의 의도가 반영되어야 한다. 디자이너의 의도를 제대로 전달하려면 문서 형식보다는 직접적인 대화 방식(briefing & discussion)이 더 효과적이다.
페이지 템플릿 및 유형(page template·type): 페이지 템플릿은 페이지의 기본 뼈대를 말하며, 페이지 구조를 만드는 틀이다. 틀이 바뀌면 변화의 폭이 커진다. 불필요한 학습이나 적응은 사용자를 피곤하게 만들기 때문에 페이지 템플릿은 일정한 기준을 중심으로 일관성 있게 운용된다. 일반적으로 페이지 유형에 따라 2~3개 정도의 페이지 템플릿이 있다. 프로토타입을 모든 페이지마다 만들 필요는 없다. 따라서 페이지 템플릿과 유형을 중심으로 프로토타입을 개발하되, 상호작용 상태를 확인할 수 있도록 주요 사용자 과업의 순서를 고려한다.
기술적 접근(technical approach): 기술적 접근은 프로토타입 개발에 대한 기술적 방법 및 관점을 의미한다. 모든 제품은 제약사항을 갖고 있으며, 제약사항에 따라 개발 난이도가 결정된다. 이러한 제약사항과 난이도를 신중하게 고려하여 기능 구현 여부에 신중하게 접근하는 것이 기술적 접근이다. 적어도 디자이너는 자신의 의도가 실현 가능한지 알고 있어야 한다. 기술적 난이도와 제약사항을 해결하지 않으면 디자인에 대한 최종적인 결론은 다시 디자인하는 것이다. 이런 사태를 겪지 않으려면 디자인 초기 단계부터 개발자의 의견을 적극적으로 수용할 필요가 있다.
기존 UI 프레임워크(existing UI framework): UI 프레임워크는 UI 패턴과 컴포넌트를 재사용하기 위한 구조를 의미한다. UI 프레임워크는 일종의 맞춤화된 환경이다. 특별하거나 새로운 제품은 기존 UI 프레임워크를 재사용할 수 없다. 그러나 대부분의 경우에는 기존 UI 프레임워크를 그대로 사용하거나 일부만 고쳐 사용할 수 있다. 기존 UI 프레임워크를 재사용하면 작업의 효율성과 기능의 안정성을 높일 수 있다. 따라서 프로토타입 개발에 있어서도 기존 UI 프레임워크를 재사용하는 방안을 가장 먼저 검토할 필요가 있다.
UI 패턴(UI patterns)⁶⁹: UI 패턴은 어떤 과업을 수행하기 위한 상호작용을 일정한 형식으로 정의한 것이다. 상호작용 방식은 원칙이나 표준이 아니라 일반적인 방법이나 해결책으로 존재한다. 프로토타입 개발은 많은 시간과 노력을 필요로 한다. 특별한 상호작용은 UI 패턴을 사용할 수 없지만, 일반적인 상호작용은 UI 패턴을 재사용하여 업무 효율성을 크게 향상시킬 필요가 있다.
UI 컴포넌트(UI components): UI 컴포넌트는 사용자 인터페이스를 구성하는 부품 또는 요소를 말한다. 컴포넌트는 다른 패턴, 다른 프레임워크, 다른 제품에도 재사용될 수 있다. 제품은 아주 많은 컴포넌트로 구성되지만, 이중 많은 컴포넌트는 재사용할 수 있다. 만약 컴포넌트를 일일이 개발해야 한다면 개발 비용을 감당해 낼 수 없을 것이다. 따라서 프로토타입 개발에 있어 기존 컴포넌트의 재사용은 중요한 전략으로 고려되어야 한다.

살펴본 바와 같이 프로토타입 공학 차원의 기초 작업은 컴포넌트, 패턴, 프레임워크를 이용하여 사용자 인터페이스를 만들고, 여기에 기능을 부여하여 프로토타입이 동작하도록 만드는 과정이다. 또한 단순히 프로토타입을 만드는 것이 아니라 UI 프레임워크, 패턴, 컴포넌트 등 프로토타입을 만드는 데 필요한 요소를 자산화(assets)하는 기회가 된다.

어떤 목적이든 간에 형식보다는 내용에 초점을 두어야 한다. 즉, 프로토타입 개발 때문에 전체 디자인 작업이 끌려가서는 안된다는 얘기다. 프로토타입은 디자인 작업의 일부분이지, 디자인 과정의 목적이 될 수 없다. 따라서 프로토타입 개발 작업은 디자인 작업 상황에 따라 유연하게 진행하는 것이 바람직하다. 프로토타입 공학 차원의 기초 작업을 충실하게 수행하면 다음과 같은 결과물을 얻을 수 있는데, 이 결과물은 다른 작업에 재사용될 수 있도록 체계적으로 축척·관리될 필요가 있다.

UI 컴포넌트 라이브러리(UI component library)⁷⁰: UI 컴포넌트 라이브러리는 UI 컴포넌트를 체계적으로 축척·관리하는 공간을 의미한다. 우선 컴포넌트를 언제든지 재사용할 수 있는 형식으로 만드는 것이 중요하다. 이것을 컴포넌트화(componentization)라고 부른다. 컴포넌트의 종류가 워낙 많기 때문에 만드는 것만큼이나 관리가 중요하다. 따라서 내부적으로 공유할 수 있는 공간에 UI 컴포넌트 라이브러리를 구축하여 체계적으로 축척·관리할 필요가 있다.
프로토타입(prototypes): 프로토타입의 사전적 의미는 원형(the original form)이다. 디자이너는 프로토타입을 시제품에 가장 가까운 결과물로 보지만, 개발자는 프로토타입을 가장 기본적이거나 표준적인 결과물로 본다. 따라서 프로토타입은 개발 과정을 거치면서 여러 가지 이유로 인해 다른 형태로 바뀔 수 있다. 문제의 원인은 대개 디자이너가 실제 조건이나 환경, 제품 관련 기술을 고려하지 않고 디자인 결과물을 만드는 데 있다. 프로토타입 공학 분야는 분명 사용자 경험 디자인의 영역이다. 이것은 디자이너도 자신이 몸 담고 있는 분야의 표준 기술이나 하드웨어 규격을 알고 있어야 한다는 사실을 일러준다.
UI 패턴의 변형 및 응용(variations on UI patterns): UI 패턴의 변형 및 응용은 표준화된 UI 패턴을 디자인 콘셉트에 맞게 구성하는 것을 의미한다. 제품마다 디자인 콘셉트가 다르기 때문에 표준화된 UI 패턴만으로는 차별화된 사용자 경험을 제공하기 어려운 경우가 있다. 작은 차이가 큰 결과를 만드는 만큼, UI 패턴을 변경하는 작업은 새로 만드는 작업만큼이나 중요하다. 기존 UI 패턴을 잘 응용한다면 새로운 UI 패턴을 만드는 것이 좀더 쉬워진다.

³² 자세한 내용은 245페이지의 '정보 설계’에서 확인할 수 있다.

³⁴ 제품 전략에 마케팅 전략이 포함되는 경우도 있다.

³⁵ 'Global elements’를 단어 그대로 해석하면 '전체 요소’이지만 디자인 측면에서는 '공통 요소’로 해석하는 것이 더 적절하다고 판단된다.

³⁶ 메인 페이지(main page)라고 부르기도 한다.

³⁷ 마이 페이지(my page)라고 부르기도 한다.

³⁸ 'nomenclature’는 ‘naming system’ 또는 'labeling system’이라고 부르기도 한다.

³⁹ 프레임워크(visual framework)은 구조(structure) 속의 구조로 볼 수 있다.

⁴⁰ (참조) W3C HTML 4.01

⁴¹ 'key states’의 키보드 조작에 의한 활성화 상태를 의미할 수 있지만, 'states’가 복수형으로 사용되었다는 점과 문맥을 고려했을 때 '주요 상태’라는 의미가 더 적합하다고 판단하였다.

⁴² Integrated Marketing Communications의 약자

⁴³ 일반적으로 '컴포넌트를 모아둔 곳’이라는 의미로 'components library’라는 용어를 사용하고 있다. 아마 Psomas는 '라이브러리에 있는 컴포넌트’라는 의미로 'library components’라고 표현한 것 같다.

⁴⁴ 자동차와 같은 기계의 계기판은 ‘dashboard’, 업무 시스템과 같은 소프트웨어의 계기판은 'information dashboard’라고 부른다.

⁴⁵ '페이지 유형’은 130페이지의 '페이지 유형에 따른 구조도’에서 이미 설명하였다.

⁴⁷ 자세한 내용은 135페이지에서 확인할 수 있다.

⁴⁹ 웹 사이트의 경우에는 'HTML 프로토타입’이라고 부르기도 한다.

⁵¹ 여기에서 ‘사용성 세션’(usability sessions)은 ‘테스트 세션’(testing sessions)의 의미로 사용되었다.

⁵² 'survey’는 'research’와 동일한 개념으로 사용되기도 하지만, 여기에서는 질문 기반의 조사 기법으로 해석하였다.

⁵³ 'feedback’은 문맥에 따라 다른 해석이 필요한 단어다. 'user feedback’은 ‘사용자 반응’ 또는 '사용자 의견’으로 해석할 수 있지만, 'feedback’이 결과물에 포함된다면 다른 의미로 해석할 필요가 있다.

⁵⁴ 시각적 꾸밈(visual decoration)으로도 불린다.

⁵⁶ 《디자인과 형태론 / Wucius Wong 저, 최길렬 역, 도서출판 국제, 1997》 참조

⁵⁷ '색’은 '색채’라고 부르기도 한다. ‘색상’(hue)은 색의 3요소(색상, 명도, 채도)에 해당한다.

⁵⁸ 《색채와 디자인 / 박영순·이현주 저, 교문사, 2000》 참조

⁵⁹ 《디자인 원리 / Paul Zelanski·Mary Pat Fisher 저, 김현중·이명기 역, 도서출판 국제, 2002》 참조

⁶⁰ 엄밀하게 말하면, 'shape’은 '형태’가 아니라 ‘형’(shape)이며, 선, 면 등 2차원적인 요소로 표현된다. 입체감, 부피 등 3차원적인 요소로 표현되는 것을 ‘형태’(form)라고 부르는데, 여기에서는 '형’과 '형태’를 통칭하여 '형태’라고 부르기도 한다.

⁶¹ (인용) 네이버 국어사전

⁶² (인용) 네이버 국어사전

⁶³ 타이포그래피는 말을 시각적 형태로 표현하여 그 내용을 기억시키는 역할을 한다. (인용) 《타이포그래픽 커뮤니케이션 / 김지현 편역, 창지사, 1999》

⁶⁴ 'context’는 상황, 맥락, 문맥 등으로 해석될 수 있다. 사용자와 함께 사용된 경우에는 ‘상황’, 디자인 요소에 사용된 경우에는 ‘맥락’, 문장 중에 사용된 경우에는 '문맥’으로 해석한다.

⁶⁵ 'treatment’의 사전적 의미는 ‘처치’ 또는 '처리’이지만, 여기에서는 ‘가공’, ‘연출’, '표현방법’이라는 의미로 해석하였다.

⁶⁶ 'Patrick J. Lynch’와 'Sarah Horton’의 ‘Web Style Guide’(http://webstyleguide.com/index.html)가 널리 알려져 있다.

⁶⁹ 패턴에 대한 자세한 내용은 http://designinginterfaces.com/About_Patterns에서 확인할 수 있다.

⁷⁰ 야후의 UI 라이브러리(http://developer.yahoo.com/yui/)가 많이 알려져 있다.

정보 설계 (Information Architecture)32

인터랙션 디자인 (Interaction Design)

사용성 공학 (Usability Engineering)

시각 디자인 (Visual Design)

프로토타입 공학 (Prototype Engineering)

정보 설계 (Information Architecture)³²