UI디자인 패턴 파악에 도움을 주는 10개의 사이트

이번 포스트는 인터랙션디자인 재단에서 작성한 '10개의 UI디자인 패턴 참고 사이트'라는 포스트를 소개해 드릴까 합니다. 

답을 찾기 위해서 똑같은 리디자인의 작업의 반복을 좋아하는 디자이너가 있을까요? 이미 성공적으로 문제를 해결하는 데에 성공한 디자인 양식을 활용할 수 있다면 그러한 작업의 반복을 피할 수 있을 것입니다.

저희는 UI디자인 패턴을 찾을 수 있는 최적의 장소들을 선별해서 기재하는 작업을 하였습니다. 몇몇 사이트는 특정 정보에 한해서는 과금을 할 수도 있으니 주의하시기 바라며, 저희는 해당 사이트들과 어떠한 이익적 관계가 없음을 밝혀 드립니다.

(모든 사이트는 영문 사이트입니다.)

01. UI Patterns (UI 패턴스)

UI 패턴스라는 이 사이트는, 말 그대로 UI디자인 패턴을 쉽게 찾을 수 있게 해주며, 더불어서 디자인 패턴들을 그룹화하는 기능까지 제공합니다. 또한 UI디자인에 대한 기사를 작성하기도 하니, UI디자인에 대한 이해도를 높이는 데에도 활용할 수 있는 사이트라고 볼 수 있습니다.

- UI Patterns : http://ui-patterns.com/

2. WELIE Interaction Design Patterns (웰리 인터랙션디자인 패턴)

WELIE는 사이트가 특별히 예쁘거나 한 편은 아니지만, 매우 합리적인 구조로 그룹화된 유용한 UI디자인 패턴들을 제공합니다.

- WELIE Interaction Design Patterns : http://www.welie.com

3. Pattern Tap (패턴 탭)

만 개 이상의 사용자들이 직접 만든 디자인 패턴들을 보유하고 있습니다. 사이트의 UI디자인 또한 매우 사용자 친화적으로 제작되어 쉽게 리소스를 찾을 수 있게 되어 있습니다.

- Pattern Tap (Zurb Notable) / http://patterntap.com/patterntap

4. UI Scraps (UI 스크랩스)

텀블러 블로그인 UI Scraps입니다. 좋은 UI디자인 사례와 나쁜 UI디자인 사례를 함께 소개합니다. 비평과 함께 제공되기에 어떤 디자인이 북저러하게 평가되는 지에 대한 정보를 얻을 수도 있습니다.

- UI Scraps : http://uiscraps.tumblr.com/

5. Pattern Browser (패턴 브라우저)

Pattern Browser는 이름 그대로 브라우저 역할을 합니다. 매우 신속하게 다양한 UI디자인 패턴들을 오고가며 확인할 수 있게 설계되어 있습니다. 리소스가 아직 많은 편은 아니지만, 충분히 도움될만한 자료들을 많이 보유하고 있습니다.

- Pattern Browser : http://www.patternbrowser.org

6. User Interface Engineering (유저인페이스 엔지니어링)

단순 디자인 패턴만을 제공하는 것이 아니라, UI디자인 작업 시에 필요한 매우 주요한 리소스를 제공한다고 볼 수 있습니다. 특히 사용자들과 사이트 측에서 올리는 디자인 패턴에 대한 코멘터리는 매우 가치 있다고 볼 수 있습니다.

- User Interface Engineering / https://articles.uie.com/

7. Design Snips (디자인 스닙스)

그래픽으로 잘 정리된 라이브러리를 제공합니다.

- Design Snips : http://designsnips.com

8. CSS Bake (CSS 베이크)

웹사이트 제작에 필요한 요소들을 잘 정리해서 제공합니다. 실용적으로 쓸 수 있는 리소스들을 다수 보유하고 있습니다.

- CSS Bake : http://www.cssbake.com

9. Elements of Design (엘레먼츠 오브 디자인)

디자인 요소들에 대한 편리한 그룹핑을 제공합니다. UI디자인 보다 조금 더 나아간 범위의 자료들을 다루고 있다고 볼 수도 있는데, UI디자인 프로페셔널들에게 매우 유용하게 쓰일 수 있는 자료들을 보유하고 있습니다.

- Smiley Cat : Elements of Design / http://www.smileycat.com/category/elements-of-design/

10. Web Design Practices (웹디자인 프렉티시스)

매우 오래된 사이트이지만 최근의 업데이트는 좀 줄어든 감이 있습니다. 매우 유용한 자료들이 여기 있는 것은 변함 없습니다.

- 웹디자인프랙티시스 : http://www.webdesignpractices.com

다음 포스트에는 웹/모바일 UI디자인을 파악할 수 있는 국내 참고 사이트 목록도 정리해서 올려 보도록 하겠습니다.

저작권 관련 정보 (License Info.)

원 저작 게시물 제목(Original Post Title) : 10 Great Sites for UI Design Patterns 원 저작 게시물 주소(Original Post URL) : URL Link 원 저작 게시물 제공(Original Post Provider) :  NICK KELLINGLEY, The Interaction Design Foundation 본 콘텐츠는 유용한 정보를 널리 알리려는 취지에서 해외 기사를 국문으로 번역하여 제공하는 포스트입니다. (This post is a translated content to Korean in purpose to spread good information more broadly over the globe.) 번역된 내용 상의 문제가 있거나, 저작권 침해 요소가 있다고 저작권자가 판단할 경우, 요청에 따라 언제든지 지워질 수 있습니다. (If the translated content has some problems itself or the original content provider/creator think posting the translated content here inappropriate, this can be removed immediately upon request.) 번역된 콘텐츠는 CC 4.0 기준을 따르며, 정보 공유 시 최초 저작자(원 저작 관련 내용)를 콘텐츠 내에 표기해 주어야 합니다. (The translated content follows CC 4.0 policy. When it's shared, the original content provider/creator has to be attributed in the content.)