보다 감성에 어필하는 사용자 경험(UX : User eXperience)을 위한 인터랙션 디자인이 이쪽 계열에선 화두인 모양이다. 인터랙션 디자인(IxD : Interaction Design)은 시스템이 사용자에게 어떻게 반응하는지 행동패턴을 결정하는 과정으로, 인터랙션 디자이너는 막연한 사용자 경험을 인터페이스를 통해 어떻게 사람과 연결되어 현실적으로 반응할지를 결정한다. 산업 또는 시각디자이너들이 순수 그래픽 요소에 치중한다면 IxD는 제품의 반응이나 컨트롤 등의 인터페이스에 집중하게 된다. 흔히 인터 페이스 디자인은 보여지고 느껴는 부분을 담당하고 인터랙션 디자인은 인터페이스 디자인에 생명을 불어넣는다고들 한다. 결국은 이 인터페이스의 완성도에 따라 사용자 경험을 보다 더 풍부하게 할 수 있다는 것이다.

이 책 '리치 인터페이스 디자인'은 UX실무자에게 리치 인터랙션과 인터페이스를 설계하고, 풍부한 UX경험을 창조하는데 도움을 주기 위한 책이다. 리치 인터랙션의 바탕이 되는 디자인 원칙에 대한 독특하고 놀라운 통찰력을 담은 디자인 패턴과 원칙은 웹디자이너들의 디자인 기술향상에 유용한 참고자료가 될 듯하다. 특히 리치 웹 인터랙션에 가장 일반적으로 사용되는 기술에 대한 75개 이상의 패턴을 다양한 웹사이트 그림으로 예를 들면서 설명하고 있는데, 디자이너가 피해야 할 Anti 패턴(이 부분을 흥미롭게읽었다.)과 그 해결책이 읽을 만하다. 또한 패턴에 대한 여러 제안사항이 정리된 '가이드'와 기술적 경험에서 제시하는 'Tip'이 상당히 유용한 조언이 된다. 결국 사용자에게 만족을 주기 위해서는 각 패턴을 적절히 이용하여 다이렉트하게 만들어야 하고(페이지내 편집, 드래그앤 드롭, 직접선택 등), 가볍게 유지해야 하며(문맥도구 등 사용), 화면에 머물수 있도록 (오버레이, 인레이, 가상페이지, 페이지내 흐름 등), 유인 요소(정적,동적)를 제공하고, 전환효과의 패턴 사용 및 즉각적으로 반응(실시간 검색, 실시간 추천 등 검색패턴과 새로고침 등의 피드백패턴)하도록 설계하고 디자인해야 한다는 것이다.

사실 컴퓨터 언어와 GUI에서 나는 멈췄다. 나의 업무상 더 이상의 발전이 내겐 필요없었기 때문이다. 기술은 진보하여 유비쿼터스 컴퓨팅이 보편화 되면서 인터랙션 디자인은 21세기의 가장 중요한 학문이 되었고, 이 책을 통하여 알게된 UX트렌드와 '사용자 경험을 높여주는 리치 인터랙션 아이디어'는 나에겐 세월의 망각을 딛고 차원의 단계를 높혀주는 귀한 기회가 되었다. 야후나 구글에 접속했을 때 일어나는 모든 액션 뒤에는 사용자의 만족을 위하여 직관적이면서도 사용자 중심의 디자인을 생각하고 설계한 많은 IxD가 있다는 걸 의식하게 하게 되었다. 앞으로도 인터랙션 디자인을 하지는않겠지만 나름의 의견을 제시할 수 있는 안목을 가지게 되었다는 점에서 매우 유익한 책읽기였다. 얼마나 무덤덤하게 컴퓨터를 대해 왔던지 정말로 많이 무디어져 있는 내자신을 알 수 있는 시간이었다. 강렬하고 감각적인 표지처럼 이 쪽 계통에 뛰어들고자하는 이들에겐 많은 영감을 주겠구나~ 생각하면서 책장을 덮는다.

'인레이'나 '머튼'을 들어본 적이 있는가?

이 책에는 위 2가지를 포함 75가지에 달하는 최신 웹 UI 패턴들이 소개되고 있다.

물론 이 75가지에는 인라인편집, 드래그앤드롭, 문맥도구, 오버레이/인레이, 가상페이지 등 최근에 널리 사용되고 있는 Ajax 기술 등을 활용한 새로운 UI 패턴들이 대부분 포함되어 있다.

하지만 이 책은 이런 내용들을 어떻게 구현하는 지를 알려주는 책은 절대 아니다.

(그렇다고 개발자들이 읽지 말라는 뜻도 아니다. Ajax/Web 2.0이 널리 사용되면서부터 개발자도, 디자이너도 서로의 영역에 대한 더 많은 지식이 절실하게 되었다.)

대신 왜 그렇게 디자인해야하는 지, 혹은 어떤 경우에는 그렇게 디자인하면 안되는 지를 알려준다.

이 때 사용되는 기준은 물론 가독성, 접근성, 심미성같은 보편적인 디자인적 학구적(?) 기준이지만, 최신의 여러 웹사이트들에서 갖 뽑아온 좋은 예와 나쁜 예들의 스크린샷들과 함께 친절히 설명해주기 때문에 이해하기 쉽다.

최신 동향에 맞는 웹사이트를 디자인하거나 개발하려는 사람이라면 꼭 한 번 읽어보기를 권하고 싶다. 특히, 디자인에 관심을 가지게된 개발자로서, 도움이 될만한 디자인 책을 찾아 여기저기 기웃거려보았지만  Grid, Color, Font 등 기초적인 내용을 다루는 책들만 많고 정말 실무에 필요한 책이 없다고 느낀 나 같은 개발자들에게 강추!

끝으로 이 책의 단점이 있다면 너무 상세하게 설명하는 부분들이 많아서 조금 지루할 수도 있다는 점. 그럴 때는 조금씩 스킵하면서 읽어도 좋겠다.

Ajax나 Flash(Flex)로 개발되는 웹서비스와 관련된 UX업무를 진행하다보면,

이 기술을 이용해서 구현이 가능한 기능이나 UI패턴에 대한 자료를 많이 필요로 한다.

또 내가 기획서상에 제시한 다양한 UI와 인터랙션을 구현하게 하기 위해 

세세한 동작 정의를 기획서에 빠짐없이 기재해야하는데,

실무자가 리치인터페이스를 제공하는 서비스의 기획업무를 진행해 본 경험이 없다면

이와 같은 기술을 이용하여 서비스의 상세기획(설계)을 하는데에 실무적으로 어려움을 겪게되는 것 같다.

이 때 사내에 누군가가 리치인터페이스나 인터랙션과 관련된 가이드를 작성해두었고 이를 참고하면 업무 수행에 큰 도움이 되곤 한다.

이 책은 누군가가 정성껏 작성해 둔 가이드와 같이 실무를 진행하는데 참고할 수 있는 다양한 유형의 패턴과 팁을 제공하고 있어서 나와 같이 서비스 화면을 기획/설계하는 실무자에게 큰 도움이 될 것 같다.

커뮤니케이션의 과정에서는 항상 오해의 여지가 있습니다. 

정보과 전달되는 채널 자체의 노이즈일 수도 있고, 정보가 표현되는 언어 체계로서의 불명확성에 있을 수도 있고, 전달된 정보를 해석하는 과정에서의 문제일 수도 있습니다. 

어떻게 하면 이런 오해의 소지를 없앨 수 있을까를 많은 사람들이 고민해왔지만, 아직도 정답은 없고, 그저 "이럴 땐 이렇게 하면 좋더라..." 라는 나이브한 경험상에서 찾아낸 패턴들의 집합이 있을 뿐이지요. 

이 책은 리치 인터페이스를 요구하는 환경이 새롭게 만들어졌고, (인터넷 기술의 발달로 소위 웹 2.0 이라는 환경과 Ajax를 분기점으로 html5로 대표되는 새로운 인터넷 환경을 의미합니다) 그런 환경에서 적용 가능한, 패턴들이 무엇이 있을까를 말해줍니다. 

결과는 다음의 6개로 정리되는 원칙들이지요. 

1. 다이렉트하게 만들어라. 

WISIWYG! 사용자가 컨텍스트 내에서 바로 콘텐츠를 편집할 수 있게 하고, 인터페이스를 드래그 앤 드롭으로 제어하고, 직접 오브젝트를 조작 가능하게 하는 것

2. 가볍게 유지하라

현재 맥락안에서 사용자의 의도를 이해하고 그에 알맞는 인터페이스를 만들어서 사용자의 노력을 최소로 요구하라

3. 페이지에 머무르게 하라

오버레이, 인레이, 가상공간, 프로세스 흐름을 적절하게 사용하여 반복되는 페이지 새로고침으로 사용자의 정상적인 작업 흐름을 깨지 말아라. 

4. 유인 요소를 제공하라

대문 앞에 환영이라고 쓰인 매트를 깔아놓듯 페이지 내에서 정적/동적으로 사용자를 유인할 수 있는 요소 (어포던스 유인 요소, 행위 유인 요소, 빈 공간 유인 요소, 둘러보기 유인 요소, 마우스 오버 유인 요소, 드래그 앤 드롭 유인 요소, 추측 유인 요소, 콘텐츠 더 보기 유인 요소)를 배치하여 사용자가 새로운 인터페이스 형식을 쉽게 사용할 수 있도록 하라

5. 전환 요소를 사용하라

다양한 효과들(밝게 하기, 흐리게 하기, 확장/축소, 희미하게 사라지기, 애니메이션, 스포트라이트, 조명 효과, 표면판 튕기기, 컨베이어, 아코디언, 줌 등)은 사용자를 질리게 만들 수 있지만, 잘 사용하면, 오브젝트들의 관계를 보이고, 전체적인 흐름을 설명하며, 주의를 집중시킬 수 있다

6. 즉각적으로 반응하라

사용자가 취하는 모든 행위에 그에 대한 반응을 보여야 한다. 

-------

단순한 6개의 원칙들이지만, 막상 실제 프로젝트에 적용하려고 하면 막막해지는 것은 아무리 책을 반복해서 읽고, 많은 책을 읽어도 사라지지는 않네요.