나는 종종 사용자 인터페이스(User Interface, UI)와 사용자 경험(User Experience, UX)의 차이점에 대해 질문을 받곤 한다. 비록 UI가 원래 처음부터 그런 의도로 만들어진 것은 아님에도 불구하고 보통은 인터페이스의 시각적인 측면만(혹은 그 중 좋은 점만) 부각시켜 설명하는 경우가 너무 많았다. 여러분이 쉽게 이해할 수 있게 기술과 연관이 없는 예를 하나 들어볼까한다. 최근에 내가 묵었던 더블린의 한 호텔 방에 대한 이야기이다. 이 호텔은 우리가 여느 대도시에서 볼 수 있는 모던한 스타일의 부티크 호텔이었다(Morcheeba의 음악이 흐르는 로비, 블랙과 화이트를 대비시킨 가구 등을 떠올려보라).

밤 늦게 방에 들어선 나는 당연히 전등을 켜야겠다는 생각을 했다. 거의 어둑어둑한 상태인 방 안, 내 앞에는 전등 패널이 하나 있었다.

여러분도 딱 보면 느낄 수 있듯 "인터페이스"는 괜찮아 보였다. 스테인리스 스틸로 마감한, 깔끔하고 우아한 느낌. 그러나 "경험" 쪽은 이야기가 달랐다. 우선 각각의 스위치가 어떤 역할을 하는지에 대한 안내가 없다. 1분여 동안 이리저리 만져본 후에야 왼쪽 다이얼이 메인 전등이고 오른쪽 다이얼이 욕실 전등이며 메인 스위치가 두 다이얼의 마스터 스위치인 듯 하다는 것을 알게 되었다. 단순해보이지만 다이얼을 누르면 전등을 켜거나 끄는 기능도 한다. 하지만 전등의 상태가 어떤지에 대한 어떤 피드백이나 설명도 없다. 더 헷갈렸던 부분은 다이얼을 누르고 나면 3초 뒤에나 전등이 켜진다는 것이었다. 그래서 실제로는 다음과 같은 상황이 벌어졌었다. 마스터 스위치를 누른다 - 아무런 반응이 없다. 다이얼을 돌린다 - 역시 아무 반응이 없다. 다이얼을 누른다 - 아무 일도 일어나지 않는다. 다이얼을 다시 누른다 (마지막으로 다이얼을 누르고 채 3초가 지나기도 전에 일어나는 일이다). 마스터 스위치를 다시 누른다 - 아무 반응도 없다. 하아 (한숨). 반복한다.

겨우 욕실 전등을 켠 다음에 나는 세면대 앞으로 갔다.

이 역시 매우 근사해보인다. 우아미가 살아있는 배관, 수도꼭지. 현대적인 스타일의 개방형 디자인이다. 이 글을 읽는 독자에게 질문을 하나 던지겠다. 이 세면대에서 물은 어떻게 뺄까? 세면대 주변을 살펴봤지만 마개나 줄 같은 것은 물론, 마개를 뽑는 방법에 대한 설명도 없었다. 게다가 마개가 세면대 표면보다 튀어나온 것도 아니라서 물을 빼기 위해 마개를 뽑거나 누를 수 있어야 할 것 같은 어떠한 유도장치도 없었다. 그래서 답은?

아, 그럼 그렇지. 플러그를 왼쪽으로 45도쯤 기울여서 중간에 있는 회전 고리를 돌릴 수 있게 만들어졌다는 걸 모를 사람이 누가 있겠어? (또 다시) 하아. 이렇게 세면대에서 굴욕을 당한 뒤 나는 샤워나 해야겠다고 생각했다. 그리고 이렇게 생긴 샤워기 헤드가 나를 반겼다.

이번에도 연필처럼 생긴 우아하고 독특한 디자인이다. 하지만, 물이 나오고 있을 때 방향을 조금 돌리려고 하자 말을 듣지 않는다. 이 늘씬한 디자인과 구조로 인해 샤워기 헤드의 방향을 어느 쪽으로도 바꿀 수 없었다. 만약 문으로 들어오는 방향을 향하고 있었다면 정말 짜증스러운 상황이 되었을 것이다. 또한 그 디자인 덕분에 아주 강력하고 곧은 물줄기가 나오는데, 굉장히 상쾌하다고 할 수 있는 반면 누구나 좋아할만큼 편한 느낌이라고는 할 수 없었다.

"멋지게 보이는 UI"와 "UX"의 차이? 여러분은 이제 그 차이를 훌륭한 디자인으로 꾸민 호텔이 형편 없는 사용자 경험를 주었던 이 예를 들어 설명할 수 있을 것이다. 나는 독특한 디자인을 좋아한다. 하지만 이를 위해 불편한 경험을 감수하는 것은 사양한다. UI 신기술에서도 똑같은 상황이 반복되지 않았으면 한다. 독특하게 보이는 인터페이스를 제공하는 새로운 UI 중 진짜 사용자 경험에 대한 이해 없이 제작된 것이 상당수이다. 아마도 내가 묵었던 호텔 방과 똑같이 나쁜 인상을 주게될 것이다.


이 글은 User Interface (UI) vs User Experience (UX)를 번역한 글입니다.

Posted by 행복한고니 트랙백 0 : 댓글 0

Dan Vanderkam씨가 새 컴포넌트 dragtable발표하셨습니다:

지난 몇년간, Stuart Langridge씨의 sorttable 자바스크립트 라이브러리가 널리 사용되었습니다. 이유를 알기는 쉽습니다. 테이블 태그에 class=sortable를 추가하기만 하면 컬럼 헤더가 자동으로 정렬을 지원하도록 클릭할 수 있었기 때문입니다. 아주 쉽죠.

하지만 때때로 정렬 기능이 충분하지 않을 수 있습니다. 만약 테이블에서 한개나 두개의 컬럼에 포커스를 주고 싶을때는요? 클라이언트측 응용프로그램에서는 다룰 컬럼을 드래그해서 다음 칼럼으로 가져다 놓으면 됩니다. 왜 웹 응용프로그램에서는 안될까요?

dragtable로 들어가면. sorttable과 같이, 단순한 class 속성을 통해서도 HTML 테이블이 새 기술을 가지게 할 수 있습니다.

JavaScript를 불러온 후, 여러분은 단순히 class="draggable"을 추가할 수 있으며, class="draggable sortable"를 통해 둘 다 사용할 수도 있습니다.

테스트 베드open source project를 살펴보세요.

from dragtable: drag-and-drop reorderable columns for an HTML table
Posted by 행복한고니 트랙백 0 : 댓글 0

Processing과 Obsessing

2008.07.14 23:30 from [IT] Web Tech
ObsessingProcessing.js 응용프로그램을 즉시 편집하고 빌드할 수 있는 "지극히 초기단계"의 서비스입니다.
사용자 삽입 이미지

from Processing and Obsessing
TAG UI
Posted by 행복한고니 트랙백 0 : 댓글 0
EclipseIDE의 UI를 좋아하시는 분들 많으실 겁니다. Ruben Daniels씨가 자신의 Javeline 프레임웍에 꽤 인상적인 기능을 추가했습니다. Ajax 응용프로그램을 위한 도킹 가능 프레임 시스템입니다.
사용자 삽입 이미지
스크린 샷으론 충분하지 않습니다; 직접 해봐야 멋진 인터랙션 모델을 느낄 수 있습니다.

코드가 꽤 재밌습니다:
[code:xml]
<j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Tree Window" icon="icopage.gif" id="b2"></j>
<j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Window of Oppertunity" icon="icopage.gif" id="b3"></j>
<j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="20% window" icon="icopage.gif" id="b4"></j>
<j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Some Window" icon="icopage.gif" id="b5"></j>
<j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Lesser Window" icon="icopage.gif" id="b6"></j>
<j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Down Window" icon="icopage.gif" id="b8"></j>
<j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Another Window" icon="icopage.gif" id="b9"></j>
<j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Redmond Window" icon="icopage.gif" id="b10"></j>
<j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Ping Window" icon="icopage.gif" id="b11"></j>
<j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="YAW window" icon="icopage.gif" id="b12"></j>
이게 전부입니다. 물론, 개별 도킹 프레임을 위치시키는 메타 데이터가 있습니다. 프레임웍은 메타데이터를 쉽게 런타임에 읽고 저장할 수 있는 기능을 제공합니다. 직렬화된 메타데이터는 XML입니다:
[code:xml]
<layouts>
      <layout name="Layout 1" icon="" margin="2,2,2,2">
              <vbox edge="splitter">
                      <node name="b1" edge="2"/>
                      <hbox edge="2">
                              <vbox weight="1">
                                      <node name="b2" caption="Tree Window"/>
                                      <node name="b3" caption="Window of Oppertunity" /><!-- height="20%" -->
                              </vbox>
                              <vbox weight="2">
                                      <node name="b4" height="20%" caption="20% window"/>
                                      <hbox>
                                              <vbox>
                                                      <node name="b5" caption="Some Window"/>
                                                      <node name="b9" caption="Another Window"/>
                                                      <hbox>
                                                              <node name="b10" caption="Redmond Window"/>
                                                              <vbox>
                                                                      <node name="b11" caption="Ping Window"/>
                                                                      <node name="b12" caption="YAW window"/>
                                                              </vbox>
                                                      </hbox>
                                              </vbox>
                                              <node name="b8" caption="Down Window"/>
                                      </hbox>
                              </vbox>
                              <node name="b6" weight="1" caption="Lesser Window" />
                      </hbox>
                      <node name="b7" height="20" />
              </vbox>
      </layout>
      <layout name="Layout 2" icon="">
              <vbox edge="splitter">
                      <node name="b1" edge="2" />
                      <node name="b2" height="100" caption="Tree Window"/>
                      <hbox edge="2">
                              <node name="b3" width="20%" caption="Window of Oppertunity" />
                              <node name="b4" width="100" caption="20% window"/>
                              <vbox>
                                      <hbox>
                                              <node name="b6" caption="Lesser Window" />
                                              <node name="b12" caption="YAW window"/>
                                              <node name="b8" caption="Down Window"/>
                                              <node name="b9" caption="Another Window"/>
                                              <node name="b10" caption="Redmond Window"/>
                                              <node name="b11" caption="Ping Window"/>
                                      </hbox>
                                      <node name="b5" caption="Some Window"/>
                              </vbox>
                      </hbox>
                      <node name="b7" height="20"/>
              </vbox>
      </layout>
</layouts>
그리고 당연히, 직접 코딩하고 싶으시다면 레이아웃을 정할 수 있는 JavaScript API도 있습니다:
[code:xml]
<j :vbox margin="10,10,10,10">
  </j><j :bar margin="3" edge="3" height="20">top</j>
 
  <j :hbox splitter="3">
    </j><j :bar id="b1" splitter="5" width="20%">left</j>
 
    <j :vbox>
      </j><j :bar splitter="5" height="200">
        </j><j :button onclick="b1.hide();">Hide</j>
        <j :button onclick="b1.show();">Show</j>
    
 
      <j :bar>right</j>
  
 
  <j :bar height="20">bottom</j>

from Eclipse-like Dockable Frames using Javeline
Posted by 행복한고니 트랙백 0 : 댓글 0
VMWare의 Greg Brown씨가 최근 1년간의 연구 성과를 발표했습니다; Java를 위한 새로운 GUI 툴킷인 Pivot이 그것입니다.
사용자 삽입 이미지
전통적인 Java 애플릿과 Web이 콘크리트와 땅콩 버터와 같이 어울렸다면 출시될 개정된 Java 플러그인은 Java 기반 GUI 툴킷에 웹 진영들이 흥미를 가질만한 기회를 주었습니다.

Pivot의 소스코드가 작성중이지만, 클래스들을 슬쩍 본 바로는 구조가 Java 내장 Swing GUI 툴킷과 매우 닮았습니다. 하지만, Swing의 거친 경계선 대부분은 부드럽게 처리되었습니다. 오래된 Swing 개발자로서의 Ben씨가 보기엔 Swing++ 이라 해도 될 것 같다고 합니다.

또다른 Java GUI 툴킷으로는 애플릿 개발자들을 대상으로한 Thinlet이 있다고 합니다(새 버전은 아직 개발중입니다).

from Pivot: Swing++ as New Java-based RIA Platform?
TAG Java, UI
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지
Paul Bakaus씨와 jQuery UI 팀이 메이저 업데이트된 jQuery UI 1.5를 릴리스했습니다.

세 가지 새로운 점이 있습니다:

API Refactoring
우리가 가지고 온 것은 우리가 발표한 메소드의 95%를 제거하고 플러그인 당 하나의 오버로드된 메소드를 유지한 API입니다. 예를 들어보죠:
  • $("div").draggable()은 draggable을 하나 만듭니다.
  • $("div").draggable("destory")는 그것을 파괴합니다.
  • $("div").draggable("method")는 플러그인의 다른 메소드를 호출합니다.
새로운 API는 또한 모든 콜백이 유사하게 동작하도록 했으며, 각 플러그인에 기본 옵션을 드러냈고, remove()를 사용해 플러그인을 영리하게 지웁니다. 또한 바로 플러그인 옵션을 업데이트하게 했으며, UI가 하나의 수트인 것처럼 느껴지도록 작은 보다 작은 업데이트 사항을 추가했습니다.

이렇게 하기 위해, jquery.dimensions.js, ui.mouse.js, *.ext.js 에 대한 의존성을 없애고, ui.core.js(유용한 도우미가 많이 포함되어 있습니다)를 도입했으며, 새 UI 플러그인 작성을 놀랍도록 단순하게 해주는 jQuery UI 위젯 팩토리를 작성했습니다.

Effects: Internalizing Enchant
훌륭한 점 중 하나는 모든 기능을 갖춘 UI 솔루션이 제공해야할 것에 대해 완전히 다른 관점을 제공한다는 것입니다. jQuery UI v1.0에서는 UI 컨트롤의 멋진 수트는 제공했었지만, 사용자들은 script.aculo.us나 jQuery UI의 이전 형태인 Interface와 같은 라이브러리들이 제공해주는 단일 효과를 필요로 했습니다. 안타깝게도, Interface는 더 이상 업데이트되지 않고, 효과에서 허점을 남기고 말았습니다; 그래서 "Enchant"라 불리는 새로운 프로젝트가 탄생했습니다. 원래는 jQuery와 jQuery UI의 보완적인 성격으로 계획된 라이브러리였으나, Enchant를 jQuery UI와 통합해 사용자들이 하나의 솔루션으로부터 진보된 효과와 UI 컨트롤에 접근할 수 있도록 하는 것이 좋겠다 싶었습니다.

Enchant가 jQuery UI의 일부가 되었음을 말할 수 있어 자랑스럽게 생각합니다. jQuery 사용자들은 이제 그들의 효과와 UI에 대한 요구를 충족시킬 통합 솔루션을 가지게 되었습니다. jQuery UI 효과는 독립적으로 사용하거나 UI와 함께 사용하는 것이 가능하며 진보된 easing과 클래스 트랜지션(모핑), 색상 애니메이션의 도입을 위해 jQuery core를 확장하는 분리된 core를 가지고 있습니다. 모든 효과는 메인 API와 긴밀하게 통합되어있으며, 독립적으로 ( $(..).effect() ) 사용하거나 여러분이 이미 알고 있는 jQuery 메소드( hide()/show() ) 안에서 직접 사용할 수도 있습니다.

전체적으로, 우리는 이미 여러분의 프로젝트에서 사용할 수 있는 15개 이상의 효과를 가지게 되었습니다. script.aculo.us 에 의해 제공되는 것들(blind,bounce,drop,fold,slide …) 뿐만 아니라 jQuery UI를 훌룡한 라이브러리로 만들어주며 여러분의 응용프로그램을 매혹적으로 만들어주는 새로운 효과(transfer, explode. clip, scale)까지 포함해서 말이죠.

최근 블로그 글에서 약속했든 완벽한 문서와 직접 확인할 수 있는 데모 페이지도 함께 제공됩니다.


Create your own Themes, with help
ThemeRoller는 사용자가 바로 테마를 작성하고 저장할 수 있는 응용프로그램입니다. Filament Group이 사용법에 대한 글을 블로그에 작성했습니다.

from jQuery UI 1.5 : Effects, API, and Themes
TAG jquery, UI
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지

Yahoo! Developer Network 에서 Yahoo! 디자인 모양 키트 1.0 을 출시했습니다. 말 그대로 여러 응용프로그램에서 Yahoo! 웹 컴포넌트들의 외양을 표현할 수 있는 모양 키트입니다. 다음과 같은 컴포넌트 모양이 포함되어있습니다:
  • Ad Units
  • Calendars
  • Carousels
  • Charts and Tables
  • UI Controls
  • Form Elements
  • Grids
  • Menus and Buttons
  • Mobile - General
  • Mobile - iPhone
  • Navigation and Pagination
  • OS Elements
  • Placeholder Text
  • Screen Resolutions
  • Tabs
  • Windows and Containers
화면 디자인할 때 유용하게 사용할 수 있을 것 같습니다. 지원하는 포맷별로 다운로드 받으시면 됩니다:
OmniGraffle,
Visio (XML),
PDF,
PNG,
SVG.

from Yahoo! Design Stencil Kit 1.0 on Ajaxian
TAG UI, Yahoo!
Posted by 행복한고니 트랙백 0 : 댓글 0
Dion씨와 Ben씨가 Google I/O 행사 중 State of Ajax 세션에서 사용한 예제 중 하나라고 합니다. 폼의 이력(history)를 해결해주는 것이라고 합니다.

Aza Raskin씨가 제안한 대로 Web에서 Undo를 구현할 수는 없을까라고 생각하다가 폼 데이터의 사용 패턴에 대해 생각했다고 합니다.

실제 동작하는 것을 보시고, 전체 코드도 살펴보세요. 아래 동영상을 보시면 실제 작동하는 부분을 더 잘 이해하실 것 같습니다.

Addressbook: Form History Pattern from Dion Almaer on Vimeo.

from Addressbook: An example of the Form History Pattern on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

JS 타임머신

2008.04.11 22:39 from [IT] Web Tech
from JS Time Machine on Ajaxian

Kristian Thornley 씨가 시간에 따른 데이터 변화를 보여주고자 맥 레오파드 JS 타임머신을  만들었습니다.

JS Time machine

JS Time Machine


Kristian씨는 말합니다. “현재는 패널의 데이터가 너무 상세하면 효과가 좀 버겁습니다.
제가 아마 onScale, preScale, postScale 등의 이벤트 핸들러를 만들게 될 것입니다. Livegrid와 약간 비슷하게 Ajax calls와 preload 데이터를 불러올 수 있는 것들이죠.”


Posted by 행복한고니 트랙백 0 : 댓글 0