lovesera: ART of VIRTUE

야후! 디자인 패턴 라이브러리: 즐겁게 웹 사이트 기획하기 본문

일과 사람들

야후! 디자인 패턴 라이브러리: 즐겁게 웹 사이트 기획하기

일상예술가 2009. 8. 24. 12:40
이 글은 야후! 개발자 네트워크 블로그에 기고된 글입니다.
--------------------------------------------------------------

지금은 개발에서 한 걸음 물러나 개발자를 지원하는 일을 하고 있지만
저 역시 한때는 개발자 였습니다. :)

기억을 되살려 보면, 프로젝트에서 기획자와 함께 일하면서
도무지 기획자가 원하는 것을 알 수 없을 때는 종종 짜증이 났습니다.
분명 기획서가 있고 설명을 들었지만 한참 후에야
'아하! 원하시는 게 이런것인가요?' 라고 재확인 해야만 했지요.

원인은?
사람마다 웹에서의 경험이 다르기 때문에
동일한 기획서를 보고도 다른 UI를 생각하게 됩니다.

기획자의 머리 속에 있는 것은 이런 모습의 서비스였지만




막상 그려온 기획서는 이런 모습이었습니다.

메인 추천 화면 화면 기획서


애매한 기획서는 서로의 시간을 빼앗는 결과를 만들어 냅니다.
기획자는 MS파워 포인트의 도형을 이용해도 대강의 기능을 설명할 수 있지만
디자이너/개발자가 막상 구현을 하는 단계에서는
많은 고민을 하게 만듭니다.

따라서 기획자는 본인이 상상하는 것을
최종적인 모습으로 명확하게 그려서 개발자에게 알려 주어야 합니다.

이때 필요한 것이 바로 통일된 UI구성 요소(디자인 패턴 라이브러리)입니다.


 
Yahoo Design Pattern Library 바로가기

 

즉, 기획자가 생각하는 기능이 어떤 모습으로 구현이 될지 기획단계에서
명확하게 전달하는 시각적 화면 구성 요소의 모음이죠.


디자인 패턴이 중요한 이유는 바로 구현 가능성입니다.
경험있는 개발자는 디자인 패턴만 보면 머리속에 딱! 그림이 그려집니다.
'이 기능은 가능, 요건 불가능...'
'이건 30분, 저건 2일 걸리겠네'

디자인 패턴 라이브러리를 활용하면 기획서의 품질 수준을 일정하게 유지 할 수 있다는 장점외에
기획시 많은 시간을 절약할 수 있고, UI 및 개발 담당자와의
커뮤니케이션이 원활하게 이루어 질 수 있습니다.

따라서 UI 컴포넌트를 전담으로 개발하는 팀은
과거 프로젝트에서 사용된 패턴들을 공유하는 것이 좋습니다.

모든 프로젝트의 핵심은 거기에 참여하는 팀원들이 모두
같은 생각을 가지고 있어야 한다는 것입니다.
아이디어를 구체화 하고, 협업 시간을 단축시킬 수 있는 적당한 도구가 필요합니다.

그런데 야후는 왜 디자인 패턴 라이브러리을 공개했을까요?
그 이유는 뻔~합니다.
한때는 미국에 있는 야후 본사의 개발팀도 맨날 거지같은 기획서를 가지고 수없이 싸웠겠죠.
그래서 보다 구체적인 무엇인가가 필요했고 그 결과 야후! 디자인 패턴이 나왔습니다.
사용해 보니 너무 좋았고, 잘못된 커뮤니케이션으로 맨날 야근하는 다른 개발자들을 위해서 공개한 것입니다.

백문이 불여 일견.
현재 야후! 디자인 패턴 라이브러리에는 49종류의 패턴이 포함되어 있습니다.

http://developer.yahoo.com/ypatterns/everything.html
Yahoo! Design Pattern Library


다운로드는 아래 링크에서 받을 수 있습니다.
- Stencil Kit, http://developer.yahoo.com/ypatterns/about/stencils/
- Code Modules, http://developer.yahoo.com/yui/

Design Pattern Library Stencils - 다운로드


며칠전에 새롭게 추가된 기능에 대한 이야기는 아래 블로그를 참고하세요.
Design Patterns, Now More Open and Social


인터넷에 공개된 수 많은 디자인 패턴은 아래에 정리 되어 있습니다.
Other User Experience Design Pattern Libraries


"시각적으로 명확한 기획서만큼 개발자들에게 용기를 주는 것은 없습니다"


야후! 개발자 네트워크
정진호 (Jinho Jung)