96년도의 웹 인터페이스

96년도에 인트라넷 시스템을 개발하면서 웹 기술과 사용자 인터페이스의 구현측면에서 당혹스러웠다. 윈도즈에서의 당연한 인터렉션이 웹페이지에서는 라디오 버튼고 체크박스 정도만 같고 나머지는 완전히 구석기 시대로 돌아간 느낌이기 때문이다.
목록에서 항목을 선택하면 관련항목에 같은 화면의 옆에 쭈루룩 나와야 하는데, 사용자가 웹페이지에서 뭔가를 클릭을 하면 그 자리에서 바뀌지 않고 한참 기다려야 바뀌었는고, 그것도 화면이 통채로 바뀌었다. 기술적으로 볼때 화면이 바뀔려면 서버에서 문서를 가져와야 하는 구조였기 때문이다. 그래도 그당시에 CGI 라는 대단한 방법이 생겨나서 html 로 만들어 놓지 않고 프로그램이 동작해서 html 을 만들어서 보내주는 것 덕분에 웹 어플리케이션이라는 것이 가능하기도 했다.
다행히 그때 html 에는 프레임 과 자바스크립트에 write함수라는 것이 있어서 전체 화면이 바뀌지 않고 부분만 바꿀 수 있었고 서버에 갔다오지 않아도 화면의 내용을 바꿀 수 있었다. 그 당시 최대한 페이지가 바뀌지 않게 하기 위해서 프레임을 많이썼었는데  난 꿈도 프레임만 보이는 꿈을 꾼적도 몇번 있었다.  사용자가 뭔가를 누르면 화면 전체가 바뀌어서 자꾸 사용이 끊기는 현상에 대한 그 당시 할 수 있는 최대한의 인터렉션 설계였다.
보이는 것은 그래픽 환경인데 실제 웹 사이트의 사용은 도스시절보다 더 예전으로 돌아간 것이었다.
하긴 이런것은 아무것도 아니다. 웹은 원래 항상 연결되어 있는 것이 아니라서 데이타베이스 엔진같은 것도 준비가 되어 있지 않아서 한번 클릭하고나면 바로 옆에 있는 개발서버여도 3분에서 15분까지도 기다려야 했었다. 내가 존경하는 대리님은 이 문제를 해결했고 이걸로 사내에서 우수논문상을 받았다.
 

ajax 와 웹 인터레션

그후 한참 후에 에이젝스(ajax) 라는 것이 나왔다. 이 ajax는 윈도우즈 인터렉션에서 볼때 당연한 것을 웹페이지에서 드디어 할 수 있게 해주었다.

페이지를 바뀌지 않아도 그 화면에서 데이타를 수정할 수 있고, 그림을 드래그해서 드롭할 수 도 있게 되었다.
그렇다면 웹의 인터페이스는 윈도우즈의 인터페이스를 그대로 옮겨오면 되는 것일까?
결론은, 기본은 그렇지만 조금은 다르거나 아예 웹에서 새로 시작한 것도 있다는 것이다.
마우스로 하는 인터렉션은 같지만 웹 페이지만의 것들이 조금씩 있다. 특히 어떤 대상이 인터레션이 가능한지(discoverability) 는 잘 생각해봐야 할 문제이고 웹의 미디어속의 인터렉션도 잘 살펴봐야 할 부분이다.
 

야후! 디자인패턴 라이브러리 총 책임자가 쓴 ‘리치 인터페이스 디자인’

야후!에서  ajax 에반젤리스트였고 야후 디자인 패턴 라이브러리의 총 책임자였던 빌스콧(Bill Scoot) 은 ajax 로 웹에서 여러 인터렉션 설계를 구현했다. 야후의 디자인 패턴의 특징은 디자인 패턴이 기존에 야후에서 여러 리서치를 통하고 실제 사이트에 적용하면서 검증을 했고, 소스코드를 제공한다는 것이다.
빌스콧이 야후에 있을때 ajax  기술 자체뿐만 아니라 디자인 패턴 라이브러리에 대해서도 외부에도 많이 알렸는데 빌스콧이 테레사 닐(Theresa Neil)과 같이 책을 썼다.

 
영어 제목은 Designing Web Interfaces 이고, 도서 출판 인사이트에서는 <리치 인터페이스 디자인>이란 제목으로 번역해서 내놓았다.
어쩌면 한글 제목인 rich interface design 이 내용으로 볼때 더 적합한 것 같다는 생각이 든다. 풍부해진 웹의 인터페이스를 다루니 말이다.
디자인 패턴에 대해서 관심이 있어 디자인 패턴에 대한 책을 보는 편인데, 그동안 디자인 패턴 책이 연구자나 인터렉션 설계자가 쓴 것이라면 이 책은 인터렉션 설계 뿐만 아니라 실제 기술까지 구현한 사람이 쓴 책이고 실제 서비스에 적용한 사례도 있어 살아 있는 책이다.
이 책은 다른 디자인 패턴 책들 처럼 웹의 인터페이스 중 75가지를 모아서 디자인 패턴 라이브러처처럼 엮어놓았다. 컴퓨터 개발자들에게 코드 라이브러리가 있다면 인터렉션 디자이너, UI  기획자에게는 이와 같은 디자인 패턴 라이브러리가 있는 셈이다.
 
이 책은 기존 웹의 툭툭 끊어지는 인터렉션이 아니라 끊기지 않은 사용자 경험(seamless user experience) 를 위해 rich 한 인터페이스를 제공하라는 것이고, 그  핵심은 다음의 6가지이다.

1. 직접조작하게 하라 (make it direct)
출력된 데이타에서 바로 입력을 가능하게 한다

2. 가볍게 유지하라 (keep it lightweight)
모든 기능을 보여주지 말고 필요한 대상에서 할 수 있는 정황메뉴같은 것을 제공한다

3. 페이지에 머무리게 하라(stay on the page)
사용에 몰입이 되도록 시각적인 인지가 지속되도록 한다

4. 유인요소를 제공하라 (provide invitations)
인터렉션에 대한 단서를 제공하라

5. 전환 효과를 사용하라 (use transitions)
사용자가 인터렉션을 하고 있는 것을 알수있게 한다

6. 즉각적으로 반응하라 (react immediately)

 
이 6가지 원칙 속에서 각각의 디자인 패턴들을 살펴보면 익숙한 UI 라고 하더라고 기획자 입장에서 보면 배울점이 많다. 사실 이 원칙은 아주 당연해 보인다. 그러나 웹에서는 당연하지 않았다.  ajax 라는 기술이 이제 이 당연한 것처럼 보이는 것을 가능하게 했다.
다음 동영상은 빌 스콧이 오렐리에서 녹화한 Scott & Neil’s Designing Web Interfaces Master Class 제목의 유료 강의 맛보기 이다. 4시간 짜리라는데 $79.9 라고 한다.

 

리치 인터페이스의 소스코드는?

디자인 패턴이 지식이 아니라 실무에서 사용되기 위해서는 소스코드와 같이 움직여야 한다.  설계서만 가지고 백날 얘기하는 것 보다 개발자에게는 소스코드를 던져 주는 것이 바로 적용이 가능해지는 지름길이니 말이다.
실제로 내가 인터렉선 설계자로서 프로젝트를 할때 시스템에 필요한 디자인 패턴에 소스코드를 같이 묶어 놓고 개발자에는 소스코드를 제공했는데,  무슨 무슨  UI  가이드라인을 제공하는 것보다 훨씬 더 효과적이었다.
인터렉션 설계자는 설계서가 일이지만 개발자는 소스코드가 일이니 원하는 최종 결과를 내기 위해서는 내 결과물을 받아서 일을 하는 사람의 언어나 도구를 제공하는 것이 효과적이다.
이 책을 보다  보면 소개된 디자인 패턴의 소스코드를 썼으면 좋겠다는 생각이 든다. 아마도 UI 기획자가 개발자에게 이 책에 나와있는 인터렉션처럼 만듭시다라고 하면 바로 “책 부록에 소스코드는 없어요?” 가 아닐까 싶다.
플리커에는 화면캡처들이 모아져 있는데, 개발자들은 이 화면과 같이 소스코드를 모아 두고 싶을 것이다. 참고로 야후 디자인 패턴 라이브러리는 실제로 소스코드 라이브러리도 있다.
 

활용

책 내용은 라이브러리 처럼 되어 있는데 필요할때 찾아 볼 수도 있지만, 한개 한개 케이스 스터디를 하듯이 꼼꼼히 분석하고 고민해 보면 인터렉션 설계이 스킬 향상에 도움이 될 것이다.
마지막으로 다음은 빌스콧이 이 책에 대한 강연한 발표 자료이다. 219장으로 되어 있는데 내용을 잘 설명해주고 있다.