2015. 3. 4. 07:50ㆍUI 가벼운 이야기
회사에서 진행하고 있는 TFD(투명플렉서블디스플레이) 과제의 일환으로 인터랙션 패턴 사이트를 만들어 사내에만 공개하였는데 이번에 일반에게 공유하려고 합니다.
UI 디자인 패턴
얼마전 pxd talks 시간에 현업에서 새롭고 혁신적인 인터랙션 디자인을 하는 방법이 있는지 질문이 오갔는데요. 대부분의 인터랙션(좁은 의미의)은 새롭지 않습니다. 바퀴를 새로 발명하지 않는 것처럼 가급적 기존 인터랙션을 차용하여 재활용합니다. 사용자에게도 익숙한게 좋으니까요. 물론 기존의 방식이 맥락에 잘 부합하지 않는다면 새로운 방식을 고민해 볼 수 있겠지만 새로운 것을 찾는 노력은 해결(인터랙션 방식)보다는 무엇이 문제인지, 왜 그렇게 해야 하는지에 좀 더 비중을 두는 것이 도움이 됩니다. 문제가 무엇인지를 잘 찾았다면 해결은 주어진 문제를 해결할 수 있는 재사용 가능한 해결 방법으로써 디자인 패턴을 활용합니다.
가장 익숙하고 작은 단위의 UI 디자인 패턴은 UI 컴포넌트 입니다. 사용자에게 선택지를 선택하도록 하는 UI를 설계하는데는 다양한 방법이 있을 수 있겠지만 주로 pulldown menu 나 radio buttons 컴포넌트를 사용합니다. 풀다운 메뉴는 공간을 절약할 수 있지만 옵션이 감추어져 있어서 라디오 버튼보다는 사용하기 불편합니다. 하지만 옵션이 많은 경우에 라디오 버튼은 오히려 복잡해 보있 수 있고 공간도 많이 차지합니다. 디자인 패턴에서는 해결하려는 문제가 무엇인지 그것의 해결 방법을 소개하고 사례와 유의해야 할 점들을 정리하여 쉽게 활용할 수 있도록 합니다.
일반적으로 디자인 패턴에서는 UI 컴포넌트들을 조합하여 특정한 작업을 수행하는데 적합한 형태나 인터랙션 방식을 정리하여 소개합니다. 기존 WIMP 방식으로 UI 디자인 패턴들을 정리하려는 시도는 많이 있었습니다.
http://designinginterfaces.com/patterns/
새로운 입력 방식이 등장할때 마다 인터랙션이 크게 변화하게 되는데, 최근에는 터치스크린을 이용한 새로운 직조작 방식이 많이 등장하고 있습니다. 터치스크린 채용 초기에는 기존의 WIMP UI 컴포넌트를 터치에 맞게 개선하는 수준이었다면 최근에는 UI 컴포넌트를 사용하지 않고 컨텐트 객체를 직접 조작(direct manipulation)하는 제스처 방식이 대중적으로 받아들여지면서 인터랙션이 큰 변화를 맞고 있습니다.
이런 흐름을 반영하여서 모바일 디자인 패턴 사이트들이 여럿 생겨나고 있습니다. 다양한 앱들이 나오고 있어서 우선은 이것들을 비슷한 유형끼리 사례를 모아두는 형태로 운영을 하고 있습니다.
http://www.mobile-patterns.com/
차세대 인터랙션 패턴
TFD 과제에서는 대형 투명 스크린을 활용한 공공 서비스를 설계하는 것을 목표로 하고 있어서 기존의 WIMP 방식이 아닌 새로운 인터랙션을 정리해 볼 필요가 있었습니다.
대상으로는 크게 현재 대중적으로 사용 중인 터치 인터랙션에 대한 디자인 패턴과 제스처나 새로운 센서를 이용한 차세대 인터랙션에 대한 디자인 패턴을 모으고 정리하기로 하였습니다.
터치인터랙션 패턴은 웹사이트와 모바일 앱을 같이 개발하는 경우가 많기때문에 가급적 기존의 WIMP UI 패턴 분류을 따르도록 하였습니다.
차세대 인터랙션은 입출력 방식에 따라 다음과 같은 분류를 사용하였습니다.
동적인 사용자의 행위와 그에 대한 피드백으로 애니메이션 전환 효과들이 사용경험에 밀접한 영향을 주는 경우가 많아서 가급적 직접 연구원들이 시연을 통해서 동영상으로 촬영하여 자료를 모았습니다.
pxd와 함께 연세대 HCID랩의 정의철 교수님과 연구원들, 서울과학기술대학교 PUXD 랩의 최정민 교수님과 연구원들이 인터랙션 자료를 모으고 정리했습니다. 패턴을 정의하고 분류체계를 만드는데 많은 노력과 고민을 함께 해 주셨습니다.
인터랙션 패턴 위키위키
인터랙션 패턴 사이트를 기획하면서 기본적인 방향으로 생각한 것은 사이트가 자료를 모아 놓은 박물관이나 라이브러리가 아니라 도구로서 동작하도록 하는 것이었습니다. 새로운 사례나 패턴을 추가하고 다른 방식으로 패턴을 나눠보고 싶으면 쉽게 페이지를 추가하고 수정할 수 있기를 바랬습니다. 이런 패턴 사이트는 지속적인 업데이트가 없으면 그 생명력이 지속되기 어려우니까요. 그래서 고민 끝에 사이트를 사용자 누구나 편집할 수 있는 위키위키로 만들기로 하였습니다.
국내 사용자에게 익숙하지 않은 위키위키로 사이트를 만드는데 많은 우려도 있었지만 pxd만의 자료실이 아니라 UI에 관심있는 사용자들이 직접 함께 만들고 성장하는게 중요하다고 생각했습니다.
당분간은 운영이 안정화 될때까지는 pxd에서 관리와 업데이트를 맡아서 운영할 계획이지만 참여를 원하는 사용자들을 대상으로 시범적으로 사용자 등록을 해드리도록 하겠습니다. 운영이 안정화 되면 모두에게 사용자 등록을 열 계획입니다. 참여를 원하시는 분은 help @ ixpatterns.com 으로 메일을 보내주세요.
ixpatterns.com 패턴 라이브러리를 만들기 위해 애써 주신 교수님들과 연구원분들께 다시 한번 감사드립니다. 또한 사이트의 디자인과 미디어 위키 사이트 구축을 맡아주신 퍼셉션에 감사드립니다.
아래에는 정의철 교수님의 소개글을 함께 싣습니다.
정의철 교수님 ixpatters 소개글
분야를 막론하고 디자이너들은 다들 자신에게 영감을 주는 시청각적 자료를 모아두고 있기 마련입니다. 특히 인터랙션 디자인, UX디자인 분야는 새로운 기술과 제품이 빠른 속도로 쏟아져 나오면서 디자이너가 뛰놀 수 있는 장이 변화되곤 하기 때문에, 디자이너들은 항상 새롭게 등장하는 디자인과 기술 동향에 관심을 가지게 됩니다.
IxPatterns.com 라이브러리는 인터랙션 디자이너, UI/UX디자이너의 이러한 니즈에 대해 공감하면서 시작되었습니다. UX디자인 컨설팅 회사인 pxd에서 인터랙션 패턴 아카이브를 제공하는 것은 어떻게 보면 자기만의 꿀단지를 내놓는 일인 듯 합니다. 경제적 이윤 추구와는 무관해 보이는 일이지요. 하지만 컨설팅 회사로서 쌓아온 내공을 블로그에 아낌없이 공유하고 함께 고민할 화두를 던지면서 인터랙션, UX 디자인 분야를 이끌어온 pxd의 철학을 익히 알고 있기에, 이 프로젝트의 가치에 매료되어 절로 흥이 났습니다. 처음 프로젝트를 제안 받을 때의 기분은 그랬습니다…
하지만 프로젝트가 시작되면서 이러한 흥분은 깊은 고민으로 바뀌어 갔습니다. 기존에 있는 인터랙션 패턴 사이트와의 차별성, 인터랙션 패턴의 정의와 검색 방법, 사이트 생명력인 자료 업데이트 등 고민할 문제가 산 너머 산으로 다가왔습니다. 그리고, 실무와 현장의 경험이 풍부한 pxd의 관점과, 학구적 완성도를 놓치고 싶지 않은 HCID 랩, PUXD 랩의 관점을 조화시키는 것도 쉽지 않은 일이었습니다.
가장 어려웠던 점은 IxPatterns.com의 기본 정보단위인 ‘인터랙션 패턴’을 정의하고 분류체계를 구조화하는 일이었습니다. 많은 분들이 공감하다시피 인터랙션, UI, UX 등 여러 개념들이 어지럽게 혼재되어 있으며, ‘패턴’이라는 용어도 저마다 다른 관점에서 사용되고 있습니다. 따라서 ‘인터랙션 패턴’을 정의하는 일은 참으로 용감하고(?) 난감한 일이 아닐 수 없었습니다. 또한 인터랙션 패턴의 분류체계를 만드는 일도 쉽지 않았는데, 인터랙션디자인 분야는 새로운 사례의 등장 속도가 빠를 뿐 아니라 기존과 전혀 다른 사례들도 우후죽순 등장하기 때문에, 다양하고 많은 사례에 열려있는 플렉서블한 정보 구조로 계획할 필요가 있었습니다.
IxPatterns.com의 정보설계는 위계적 카테고리에서 출발하는 top-down 방식이 아닌, bottom-up 방식으로 진행되었습니다. 흥미로운 인터랙션 사례를 모으고, 유사성 있는 사례들을 모아 하나의 패턴으로 정의한 후, 다시 패턴들 간의 유사성을 파악하며 상위 분류로 정의해나가는 작업은 결코 쉽지 않은 과정이었습니다. 두 대학 연구팀의 끝없는 회의, 그리고 pxd 담당팀과의 수차례 워크샵을 통해 패턴 정의와 분류체계는 수 없이 뒤집히고 수정되었습니다. 이 과정이 고생스럽기는 했지만, 뒤돌아보면 한 가지 일이 다함께 몰두한 열정의 시간이었고, 인터랙션과 인터랙션 패턴의 의미에 대해 깊이 생각해보는 계기가 되기도 했습니다.
현재의 IxPatterns.com은 단지 출발점이라고 생각합니다. IxPatterns.com에는 누구나 자신이 알고 있는 새로운 사례를 업로드하고 패턴을 만들 수 있습니다. 많은 분들이 참여하여 함께 진화해가는 정보공유의 장, 더 나아가 의미있는 지식생성의 장이 되기를 바래봅니다.
연세대학교 인간중심 통합디자인 연구실 정의철 교수