이번 pxd talk는 어도비의 프로덕트 매니저 엄고운 님을 초대하여 Adobe XD 개발 과정에 관한 이야기를 들어보았습니다. Adobe XD는 하나의 애플리케이션에서 UI 디자인, 프로토타이핑 및 협업을 할 수 있도록 만들어진 툴입니다. Adobe XD를 만들게 된 계기는, UI/UX 디자인에 최적화된 툴이 필요하다는 사용자들의 피드백이 바탕이 되었습니다. UX 디자이너들이 포토샵, 일러스트레이터와 같은 툴들을 활용하여 작업을 하고 있기는 했지만, 이 제품들이 UI/UX를 위해 만들어진 것이 아니다 보니, UI/UX 디자이너들이 가장 편리하게 사용하기에는 한계가 있었습니다. 또한, 시장에 출시된 UI/UX 디자인 툴들이 많기는 했지만, 그 기능들이 통합되어 있지 않고, 디자인 혹은 프로토타입 등 개별..

스케치 UX/UI 전문가를 위한 제작 툴 완전 정복을 위한 실전 가이드 크리스티안 크래머 지음 The Sketch Handbook / Smashing Magazine 처음부터 뭔가 이상하다고 생각했다. 화면을 설계하기 위해 "발표" 도구인 파워포인트를 사용하고 디자인을 위해 "사진" 편집 도구인 포토샵을 사용하는 건, 아무리 생각해도 이상하지 않은가? 그리고 계속 불편했다. 당연하게도 용도가 다른 툴을 사용하다 보니 괴로운 일도, 웃길 일도 많았다. 새로운 도구를 통한 생산성 향상을 기대해 왔지만, UX 디자인 시장이 작아서인지 새로운 도구들은 좀체 나타나지 않았다. 잘 해 봐야 파워포인트 플러그인 정도였는데 그마저도 너무 느리고 무거워서 쓰지 못했다. 생산성 향상으로 수익률을 높이고 야근율을 낮추고 끊..

pxd의 멋진 동료분들. 다들 잘 지내시나요? 오랜만에 글로 인사를 합니다. 트루밸런스 일을 하게 된지 1년이 되었던 올해 봄부터, 스타트업 이야기를 들려줘야겠다고 생각만 하고 계속 미루다가, 한 발 내딛지 않으면 결국 못하겠다는 생각이 들어서 가벼운 글로 안부를 전합니다. 이번에는 큰 고민 없이 이야기할 수 있는, 프로토타이핑에 대해 이야기하려고 합니다. 옛날부터 pxd 내에서도 프로토타이핑에 대한 관심이 많았었죠. 제가 참여했던 프로젝트만 해도 두 번의 프로젝트에서 웹사이트 인터랙션 구조의 프로토타이핑을 했었고, IoT 프로젝트에서도 디지털 스크린과 관련한 프로토타이핑을 사용했었습니다. 요즘도 점차 많은 프로젝트에서 프로토타이핑을 활용하고 있다는 이야기도 들었어요. 저도 트루밸런스 일을 하며 이런저런..

올해 초부터 관심깊게 보고있던 프로토타이핑 툴 하나가 얼마전에 베타버전을 공개했습니다. XID사에서 개발한 ProtoPie는 코딩을 하지 않고도 손쉽게 인터렉션을 개발할 수 있는 프로토타이핑 툴인데요. 지난 한 주동안 이 툴을 다루며 느꼈던 부분과 작업한 내용을 공유하려 합니다. ProtoPie는 현재 무료로 사용하실 수 있으며. Windows 버전은 아직 공개되지 않았습니다. https://protopie.io/ 특징 3D Touch, 디바이스 센서를 활용한 인터렉션 구현 ProtoPie는 인터렉션 중심의 프로토타입을 제작할 수 있는 툴로, 이미 많은 분들이 사용하고 있는 Pixate나 Proto.io 등과 비슷한 수준의 프로토타입을 개발할 수 있는 툴입니다. 또 3D터치와 디바이스 센서를 활용한 인터..

이전 글(Facebook Origami 리뷰 1편)에서 간략하게 Origami가 어떤 툴인지 알아보았다면, 이번에는 예제를 만들면서 학습을 하는 형식으로 진행해 보겠습니다. 이전 글에서 말씀드렸듯이 우리가 사물을 보며 정의하는 것과는 반대로 사고의 흐름을 가져가면서 예제를 만들어 가도록 하겠습니다. 그리고 Origami를 능숙하게 사용하기 위해서는 Patch에 대한 이해가 중요한데요. 예제를 진행하면서 사용하는 Patch들의 속성값을 자유롭게 변경하고, 값애 따른 오브젝트의 변화를 확인하다보면 빠르게 Patch를 알아가실 수 있을겁니다. Patch 마다 다양한 속성을 가지고 있는데, 속성의 이름만으로 어떤 역할을 하는지 쉽게 파악할 수 있습니다. 1. Origami 프로젝트 생성 Quartz compos..

지난 몇달 동안 프로토타이핑 툴에 관련된 업무를 진행하다보니, 지인분들로부터 괜찮은 툴을 추천해달라는 말을 간혹 들었습니다. 프로로타입 제작 목적에 따라 툴을 선택하는 것이 중요하지만, 비용 부담이 있다보니 무료이면서, 대부분의 기능을 구현할 수 있는 Facebook Origami로 결론이 나더군요. 하지만 Origami는 훌륭한 툴이지만 몇가지 단점도 있습니다. 첫째. Mac에서만 사용할 수 있다. 많은 툴들이 웹 플랫폼으로 개발되어 OS와 관계없이 어느 플랫폼에서나 사용이 가능한 반면, Origami는 Apple에서 제공하고 있는 Quartz composer 라는 툴에서 확장한 것이기 때문에, MAC OS X 외에는 사용할 수가 없습니다. 여전히 많은 사용자가 Windows를 사용하고 있다는 점을 고..

하나의 프로젝트가 완성되기까지 우리는 선택이라는 과정을 반복해서 겪게 됩니다. 그때의 상황에 맞는 논리와 경험을 토대로 무언가를 결정을 하게 되죠. 그러나 때로는 개척하지 못한 황무지 같은 길을 걸어야 할 때도, 이미 닦아져 있는 길을 의심해야 할 때도 있습니다. 이런 경우라면 어떤 논리나 경험을 통하더라도 결과가 원하는 방향으로 나오지 않을 때가 많습니다. 그리고 그 선택이 큰 리스크를 안겨줄 수도 있고요. 이런 일들을 미리 방지하기 위해 가설을 세우고 최소한의 경험만으로 리스크도 줄이면서 값진 정보를 얻어 낼 수있는 방법이 있습니다. 이것을 우리는 프로토타이핑이라고 합니다. 프로젝트를 진행하다보면 프로토타이핑의 필요성을 느낄 때가 많이 있습니다. 어떤 선택을 해야하는 상황에서 기준이 될 수 있는 테스..

네이버, 다음의 버스 도착 안내의 현재 운행 버스 위치는 왜 오른쪽에 있을까요? 또 서울시와 경기도, t맵와 올레맵도 왜 다들 오른쪽에 있는 걸까요? 아래 그림을 보며 이유를 한번 생각해 보고나서 계속 글을 읽어주세요. 그림: 왼쪽 상단부터 서울버스앱,네이버지도,다음지도,서울시버스정보,경기도버스정보,올레맵,T맵 질문: 왜 버스 운행 정보는 목록의 오른쪽에 위치할까? 1. 버스 운행 정보를 표시하는 가장 최적의, 궁극의 디자인이라서 2. 서울버스 앱을 베껴서 거의 모든 모바일 버스 운행 정보 페이지들이 목록으로 왼쪽에 정류장 명을 정렬하여 보여주고 오른쪽에 노선도와 현 위치의 버스를 보여주고 있습니다. 서울버스 앱이 처음 나왔을때는 이렇게 목록과 그래픽을 섞은 정보디자인이 상당히 참신했습니다. 웹에서는 긴..

일단 즉흥 연기는 Improv 라고 불린다. Improv is theatre that you create. It can be funny, it can be sad, it can be interesting- but it's usually fun to do. It helps build imagination, confidence, team building, and creativity.(즉흥 연기는 상상, 자신감, 팀웍 강화, 창의력에 도움을 준다) 지난 6월 8일에 열린 즉흥 연기 입문 워크샵은 애자일컨설팅 김창준 님에 의해 주최되었는데, 강사는 제시카 코일(Jessica Coyle)과 메그 앤더슨(Meg Anderson)이었다. 중요한 개념들은 Acceptance(받아들이다),Endowing(정보를 주다),..

2011년에 발간된 UX(UI) 관련 신간을 소개합니다. 요즘 들어서 번역본들이 많이 나오고, 흥미로운 책이 많이 나와서 즐겁네요. 더 많은 책 정보를 얻으시려면 제 '유저스토리북 책장'에도 들려주세요. http://uxdragon.userstorybook.net/ 1. 거침없이 배우는 익스프레션 블랜드 - 프로토타이핑을 도와주는 강력한 툴인 익스프레션 블랜드에 대한 소개를 다루고 있습니다. - 책 정보 보기 : http://book.naver.com/bookdb/book_detail.nhn?bid=6635394 2. The design of sites - 웹 사이트 디자인의 107가지 패턴에 대해서 다룬 책입니다. 원서인 The design of sites 2판이 2006년도에 나왔네요. - 책 정보 ..

선행 프로젝트가 아닌 양산형 프로젝트일 경우에는 전략단계 이후 워크플로우 작업이 수반됩니다. 이 때 프로젝트의 규모가 클 수록 UI 기획자가 다루어야할 시나리오는 수백장에 이르는데요. 앨런 쿠퍼는 자신에게 익숙한 툴로 프레임웍을 작성하길 권장하고 있습니다. 하지만 일반 문서도구로는 끊임없이 결정하고 커뮤니케이션해야 UI 프로세스에서 시간과 에너지를 소모적으로 쓸 수 밖에 없는 한계가 있습니다. 현재 국내외에서는 파워포인트, 인디자인, Axure 등 다양한 프로그램을 프레임웍 툴로 사용하고 있습니다. 최근에는 어도비사에서 인터랙션 디자인 전용 툴인 카탈리스트(코드명: Thermo)라는 프로그램도 출시하기도 했습니다. 하지만 대부분커스텀 UI를 작성하기 어렵거나 수백장에 이르는 화면과 시나리오를 컨트롤하기에..