디자인패턴이라는 개념은 '컴포넌트'로 착각되기도 하는데 이와는 명확하게 구분될 필요가 있습니다. UIE의 Nathan Curtis가 정의한 내용에 따르면 디자인 패턴은 "기능 정의의 요소", 컴포넌트는 "재사용 가능한 코드"라고 이해할 수 있습니다.

What Is a Pattern?

A pattern is a global solution to acommon design problem, such that you could use the solution many timesand never quite use it the same way twice.

For example, there’s no reason for a designer to not employ thecommon tenants of tabs (such as at least two tabs are required), videoplayback (that can be played or paused), or authentication (that, at aminimum, requires some form of username and password). Patterns areessential in interaction design, serving as a basis for designers toapply common, consistent conventions whether or not those solutions areactually catalogued in a library specific to an organization.

What Is a Component?

On the other hand, components are a reusable, design system-specificchunk of a page. Such components - also known as modules, chunks,portlets, widgets, blocks, or other labels depending on the designcontext - are aggregated to compose an entire page or view. Eachcomponent has a specific application within a page grid and may haveprescriptive specifications for behaviors, formats, editorial, visualstyle, and variable treatments.

2. RIA시대의 디자인 패턴
 디자인 패턴은 레이아웃을 디자인할 때 템플릿으로 활용되는 것이 아니라, 인터랙션을 설계할 때 "디자인 솔루션으로써 큰 의미"가 있습니다. 한 페이지에 많은 정보를 보여줘야한다거나, 하나의 공간에서 두 개 이상의 다른 상태 정보를 보여줘야 하는 등의 문제가 있을 때 이를 어떠한 방식으로 해결할 지에 대한 일종의 툴킷이라고 할 수 있습니다. 앞서 얘기한 것처럼 디자인 패턴이라는 본래의 개념은 특별히 최근에 등장한 새로운 개념은 절대 아닙니다. 많은 기획자와 디자이너들이 화면설계 혹은 와이어프레임(Wireframe)을 만들 때 '탭'이나 '검색창'과 같은 디자인 패턴들을 이미 써왔습니다. (한 페이지에 다수의 디자인패턴이 사용될 수 있는 것이죠) 다만, 요즘에 등장한 디자인 패턴들은 'Rich Interaction'으로 표현되며(Ajax, Flash,Silver Light 등으로 구현) 실시간 데이터 통신이 가능해져서 '실시간 피드백' 혹은 '페이지 이동이 없는 점'이 기존의 디자인 패턴들과 큰 차이를 보이고 있습니다. Yahoo!의 Bill Scott이 최근에 출간한 "Designing WebInterfaces"라는 책에서는 이러한 Rich Interaction Design Pattern들을 소개하고 있습니다.

위의 책에서 소개한 몇 가지만 예를 들어본다면 아래와 같습니다. (이미지는 Companion flickr site에서 가져왔습니다. 이미지의 저작권은 원 제작자에게 있습니다.)

1) Single Field Inline Edit

'Inline Editing' 이 패턴은 'Drag & Drop'과 더불어 너무나 자주 인용되는 디자인 패턴 중의 하나입니다. 평소에는 전혀 수정이 가능할 것처럼 보여지지 않다가, 마우스포인터가 텍스트영역에 가까이 가면 수정이 가능함을 시각적으로 보여주고, 클릭하면 수정상태로 변합니다. Flickr에서 최초로 사용(공개적으로는)되어 널리 사랑받고 있습니다.

2) Always-Visible Tools

실시간 Rating 시스템에 자주 사용되는 디자인 패턴입니다. 마우스포인터가 버튼에 오버되면 투표를 할 수 있다는 시각적인 단서가 제공되고, 투표를 하면 그 결과가 실시간으로 보여지게 됩니다. 전체 페이지를 로딩하지 않는 Ajax의 특성을 십분 활용한 패턴이라고 할 수 있습니다.

3) Expand/Collapse

페이지의 일부 요소가 필요에 따라서 접혔다가 펼쳐졌다가 하는 디자인 패턴입니다. 가장 큰 장점은 사용자가 수행하고 있는 과업의 정황에 따라 공간 활용이 극대화될 수 있다는 것이겠지요.


3. 디자인 패턴의 활용
 디자인 패턴은 말 그대로 패턴이고, 디자인 툴이기 때문에 디자인 문제 자체를 해결해줄 수는 없습니다. 디자인 패턴을 사용하기 전에 디자인 문제가 무엇인지 충분히 검토하고 도입을 신중하게 검토해야합니다. Rich Interaction의 경우에는 실제 구현에 있어서 고려해야 하는 상황이 다양하고 구현의 복잡도(사용자측면의 UI 복잡도가 아닌)가 증가하는 경향이 있기 때문에 더욱 신중할 필요가있습니다. 실제로 QA(Quality Assurance)기간과 테스트 케이스가 늘어나기도 합니다. 그럼에도 불구하고 디자인 패턴이 유용한 이유는 아래와 같습니다.

A) 일관된 사용자경험의 제공
- 동일한 서비스에서 동일한 기능에 대해서 동일한 디자인 패턴을 사용했을 경우에, 사용자는 쉽게 기능을 이해할 수 있고 사용할 수 있습니다.
- 디자인 패턴 자체가 획기적이고 충분히 긍정적인 사용자경험을 제공할 수 있다면, 서비스의 아이덴티티까지로도 확장이 가능합니다.(Flickr의 일부 인터랙션은 복잡하거나, 메타포가 모호하지만 사용자들은 즐겁게 Flickr를 즐기는 경향이 있습니다.)

B) 컴포넌트화한 경우에는, 개발기간의 단축 가능
- 다른 프로젝트에서 사용한 디자인 패턴에 대한 코드가 있거나 범용적으로 사용하기 위해서 컴포넌트화 해놓았다면, 새로 코드를 짜야하는 기간을 단축할 수 있습니다.
- 눈에 보이는 인터랙션의 패턴이 있기 때문에 커뮤니케이션상에서도 발생하는 시간과 오해를 줄일 수 있습니다. "이 버튼 클릭하면 이 부분이 샤샤삭~ 움직이게 해주세요." 와 같이, 말하는 사람도 듣는 사람도 모호하고 애매한 커뮤니케이션을 줄일 수 있습니다. ^^;

C) 디자인 솔루션을 도출하기 위한 아이디에이션 자료로 활용 가능
- 아이디에이션의 스타팅 포인트로 충분히 사용할 수 있습니다. 때로는 두 개 이상의 디자인 패턴에서 몇 가지 부분만 따와서 새로운 디자인 패턴을 만들어 볼 수도 있습니다.
- 새로 입사하는 인터랙션 디자이너에게 Rich Interaction에 대해서 교육을 할 때, 다양한 디자인 패턴을 보여주는 것만큼 효과적인 건 없는 것 같습니다.
- 물론, 기존의 디자인 패턴에만 묶이는 것은 바람직하지 않습니다.

4. 더 볼거리
- Designing Web Interfaces에서 소개하고 있는 디자인 패턴들

• 12 Standard Screen Design Patterns: Bill Scott이 화면 구성에 대한 디자인 패턴도 정의한 내용입니다. 디자인 패턴을 몇 가지를 조합하여 웹어플리케이션에서 가장 많이 사용될 수 있는 몇 가지 레이아웃을 정의한 것이라고 이해하시는 게 좋을 것 같습니다.
  
• 15 Commmon Component Patterns: 디자이너마다 Component와 Pattern 혹은 관련된 개념에 대한 정의와 그 범위가 약간씩 다른 것 같네요. UIE의 Narthan Curtis가 말한 Pattern과 유사한 개념입니다.
• 30 Essential Controls: Control > Component > Screen Design 이렇게 정의하는군요. Widget > Design Pattern > Layout (Screen) 이렇게 정의할 수도 있습니다.
  

- User Interface Engineering에서 언급하고 있는 디자인 패턴과 관련된 아티클

• The Elements of a Design Pattern: 디자인 패턴을 정의할 때, 어떠한 정보들이 정의되어야 하는 지에 대해서 설명하고 있습니다.
  
• Tools for Creating Pattern Libraries: 디자인 패턴 라이브러리를 만드는 방법에 대해서 아주 간단히 소개하고 있습니다. 
• Component Versus Patterns: 위에서 소개한 아티클. 컴포넌트와 패턴의 차이를 정의하고 있습니다. 보시면 이해하기 쉽게 그림도 있네요. 한 번 그림이라도 보시길 추천. ^^;

- 참고도서

• Designing Interfaces: Janifer Tidwell이 쓴 책입니다. Bill Scott의 신간서적 제목과 단어 하나 차이 나네요. 이 책에서는 웹, 어플리케이션, 웹어플리케이션 전반에 걸쳐 일반적으로 많이 사용되는 다양한 디자인 패턴을 설명하고 장점과 단점을 상세하게 설명하고 있습니다. 번역서는 여기!
  

첨언
- 디자인 패턴에 있어서도 유행이 있지 않나 생각이 듭니다. 이전에는 Web Widget(콤보박스, 라디오버튼)의 조합으로 이루어진 디자인 패턴의 시대였고, 현재는 Rich Interaction으로 무장한 디자인 패턴의 시대라고 할 수 있을 것 같네요. 다음은 어떤 디자인 패턴들이나오게 될까요? 손가락으로 터치할 수 있는 디자인 패턴들은 아닐까요? 아니면 Haptic?
- 요즘에 등장하는 디자인 패턴이 과거의 것들과 특히 다른 점은 '이름'이 있다는 것입니다. '이름'을 불러줄 수 있기 때문에 유행을 더 하는 것은 아닌지 모르겠네요. "내가 그것의 이름을 불러 주었을 때 그것는 라이브러리로 들어와서 디자인 패턴이 되었다"