인터랙션 패턴 라이브러리

인터랙션 패턴은 반복적으로 등장하는 UI 설계 문제에 대해 검증된 재사용 가능한 해결책을 정리한 것이다. pxd는 대형 투명 스크린 기반 공공 서비스를 설계하는 TFD(투명 플렉서블 디스플레이) 과제를 진행하며 사내용 패턴 정리 사이트를 만들었고, 이를 2015년 ixpatterns.com으로 일반에 공개했다. 연세대 HCID랩(정의철 교수)과 서울과학기술대 PUXD랩(최정민 교수)이 자료 수집과 분류 체계 설계에 함께 참여했다.

새로운 인터랙션을 고민할 때의 핵심 관점은 "바퀴를 새로 발명하지 않는 것"이다. 대부분의 인터랙션은 완전히 새롭지 않으며, 사용자에게도 기존에 익숙한 방식이 더 유리하다. 새로움을 찾는 노력은 해결 방식 자체보다 "무엇이 문제인지, 왜 그래야 하는지"를 규명하는 데 더 많은 비중을 두어야 하며, 문제가 명확해지면 재사용 가능한 디자인 패턴으로 해결책을 도출하는 편이 효율적이다. 가장 작은 단위의 UI 디자인 패턴은 UI 컴포넌트로, 예를 들어 옵션 선택 UI를 설계할 때 풀다운 메뉴(공간 절약, 옵션이 감춰져 상대적으로 불편)와 라디오 버튼(가시성 높음, 옵션이 많으면 공간을 많이 차지) 사이의 트레이드오프를 다루는 식이다.

ixpatterns.com 이전에도 ui-patterns.com, designinginterfaces.com처럼 WIMP(Window-Icon-Menu-Pointer) 방식 UI 패턴을 정리한 사이트들이 있었고, 터치스크린 대중화 이후에는 mobile-patterns.com, pttrns.com 같은 모바일 패턴 사이트들이 등장했다. ixpatterns는 여기서 한발 더 나아가 두 층위로 분류 체계를 설계했다. 현재 대중적으로 쓰이는 터치 인터랙션 패턴은 기존 WIMP 분류를 따라 Dealing With Data, Getting Input, Navigation, Screen Interaction, Notifications로 나누었고, 제스처·새로운 센서 기반의 차세대 인터랙션 패턴은 Manipulation, Voice & Bio Interaction, Mixed Reality, Context Recognition으로 구분했다. 애니메이션 전환 효과가 사용자 경험에 미치는 영향이 커서, 연구원들이 직접 시연하며 동영상으로 자료를 수집했다.

사이트 운영 철학에서도 특징이 드러난다. 자료를 모아둔 박물관·라이브러리가 아니라 누구나 새 사례·패턴을 추가하고 분류 체계를 수정할 수 있는 도구로 기능하도록, 사용자 참여형 위키위키 형태로 구축했다. 지속적인 업데이트 없이는 패턴 사이트의 생명력이 유지되기 어렵다는 판단에 따른 것으로, 초기에는 pxd가 운영을 맡되 점진적으로 외부 사용자 등록을 개방할 계획을 밝혔다.

핵심 내용

새로운 인터랙션 필요 여부는 해결책보다 "무엇이 문제인가"를 규명하는 데서 판단
UI 컴포넌트는 가장 작은 단위의 UI 디자인 패턴 (예: 풀다운 메뉴 vs 라디오 버튼)
ixpatterns.com은 pxd TFD 과제에서 출발해 대학 연구실과 협업해 일반 공개한 인터랙션 패턴 위키
터치 인터랙션 패턴: 기존 WIMP 분류(Dealing With Data, Getting Input, Navigation, Screen Interaction, Notifications) 계승
차세대 인터랙션 패턴: Manipulation, Voice & Bio Interaction, Mixed Reality, Context Recognition으로 신규 분류
위키위키 형태의 참여형 운영으로 지속 업데이트를 유도

출처

[디자인 패턴] ixpatterns.com 인터랙션 패턴 사이트 공개 — 2015-03-04, 無異

인터랙션 패턴 라이브러리

핵심 내용

관련 개념

출처