지난 11월 4~5일 이틀 간 미국 샌프란시스코에서는 구글의 주최한 FORM 2014가 진행 되었는데요. Google FORM 이란 여러 디자인 분야의 전문가들을 초청하여 디자인과 기술의 접점에 대해 1박 2일간 열띤 토론을 벌이는 구글의 첫번째 디자인 행사입니다. 

페이스북, 핀터레스트, 우버 등 다양한 서비스를 만드는 디자이너들이 한데 모여 많은 이야기를 나누었으며, 초대 받은 디자이너만 참석 할 수 있었던 인바이트-온리 행사였지만 고맙게도 모든 세션을 유튜브를 통해 공개하였습니다.

그 중 위트스튜디오 팀에서 매우 흥미롭게 시청한 세션이 있어 많은 분들과 함께 공유하고자 이렇게 번역을 하게 되었는데요. 최근 화제가 되고 있는 유명 프로토타이핑 툴 제작자들이 한데 모여 각각의 툴을 만들어온 과정과 UI 디자인의 미래에 대한 토론을 진행하였습니다.


(자막이 안 보이시는 분들은 오른쪽 하단의 자막 설정을 On으로 바꿔주세요)

무엇보다 서로가 경쟁자라고 할 수 있는 팀들이 이렇게 모여 업계의 미래에 대해 자연스레 논의 할 수 있는 이러한 환경이야 말로 그들의 경쟁력이 아닐까 싶네요. 

이런 대규모 디자인 컨퍼런스를 애플이 아닌 구글이 먼저 시작했다는 점도 매우 흥미롭습니다. 첫 시작을 끊은 FORM 2014 뿐만 아니라 디자이너들을 위한 이런 행사들이 앞으로도 더 많이 마련 되기를 기대해봅니다.

- radiofun님의 블로그에서 해당  세션에 대한 요약을 확인 하실 수 있습니다 :) 


신고


본문은 Google Ventures의 Braden Kowitz가 작성한 ’WHY GOOD STORYTELLING HELPS YOU DESIGN GREAT PRODUCTS’을 원작자의 동의하에 번역 및 게시한 글입니다.



제품 디자인팀에서 저지르는 가장 실수 하나는 외형이 아름다운 디자인을 사용하기 좋은 디자인으로 착각하는 것입니다. 어떻게 보면 간단한 실수 수도 있습니다. 하지만 결과는 참담하죠. 만약 당신의 제품이 제대로 작동하지 않는다면, 그것이 어떻게 생겼는지는 다들 관심조차 없을 겁니다.


이러한 실수를 예방하는 가장 좋은 방법으로 "스토리 중심 디자인"이라는 것이 있습니다. 그대로 유저의 사용 흐름을 순서대로 작성하여 유저가 제품을 사용하면서 겪는 모든 과정을 그려나가는 것이죠. 저는 방법을 다양한 스타트업과 함께 작업 당시 자주 사용하였으며 실제로 많은 기업들이 제품의 외형적인 디테일을 넘어 무엇이 정말 중요한지를 파악하고 어떻게 디자인 해야 결정하는데 핵심적인 역할을 했습니다.

디자인은 설계도면이 되어서는 안 됩니다(Designs shouldn’t be blueprints)

직접 관찰해본 결과 대부분의 팀들은 UI디자인을 검토 설계도를 검토하듯이 훑어본다는 것을 있었습니다. 어떤 요소들이 어디에 필요한지를 맞추어보는 식이죠. 각각의 이미지는 제품이 특정 상황에서 어떻게 보여질지를 나타냅니다. 하지만 이미지들은 어떤 방식으로도 서로 연결되어 있지 않죠. 이런 식으로 제품을 검토하다 보면 디자인이 각각의 상황에서 어떻게 보여질지에 대해서만 확인 있습니다. 제품이 어떻게 작동하고, 화면과 화면 사이에서 어떻게 반응 하는지는 없는 것이죠. 결국 팀이 디자인을 설계도처럼 검토하다 보면 제품의 실질적인 사용성에 대한 확인이 제한적일 밖에 없는 것입니다.

훌륭한 디자이너들은 스토리 중심의 디자인을 추구 합니다. 그들은 우선 고객들이 제품을 어떤 식으로 사용할지에 대한 유저 스토리를 작성한 후에야 그것에 맞는 화면을 디자인 하죠.


스토리 기반 디자인을 진행하는 과정(The process of designing by story)

스토리 중심의 디자인을 진행 때는 여러 장의 시퀀스 목업을 작성하여 마치 영화 시나리오처럼 나열한 관찰 합니다(아래의 예시 사진을 확인하세요). 디자이너들은 그것을 검토하며 고객이 읽고, 행동하고, 겪게 상황을 하나하나 그려 봅니다. 고객이 제품을 작동시키는 순간부터 목표를 달성하는 최종 지점까지 함께 하는 것이죠. 그리고 디자인을 통해 어떻게 고객을 도울 있을지에 대해 고민 해봅니다. 그간 많은 스타트업과 함께 일하며 이러한 스토리 중심의 디자인을 시도하였고 모바일 , 마케팅 사이트, 지표 페이지 다양한 작업에서 효과를 있었습니다.

오히려 엔지니어들에게는 이러한 작업 과정이 익숙할 지도 모릅니다. 스토리 중심 디자인의 본질과 테스트 주도 개발(TDD) 같은 개념이라고 있기 때문이죠. 다만 지속적인 테스트를 거쳐 코드를 검증을 하는 대신 우리는 지속적인 스토리 작업을 통해 디자인을 검증하는 것이죠. TDD 마찬가지로 스토리 중심 디자인은 팀의 실행력과 제품의 품질에 지대한 영향을 끼칩니다.

아래 사진은 위에 언급한 작업에 대한 예시 입니다.


단계별 스토리텔링(Storytelling step-by-step)


스토리를 모두 화이트보드에 기록하세요. 디자인 프로젝트를 시작 때는 항상 고객들의 반응을 화이트보드에 적어나가는 것에서부터 시작하는 것이 좋습니다. 1 FOOT 짜리 박스들을 보드 여기저기에 그려 넣으세요. 그런 다음 박스 하나하나에 고객들이 제품을 사용하면서 나타나는 가지 특징들을 적어보세요. 위에 사진처럼 유저들이 하거나 클릭 하는 위치를 표시해주세요. 이러한 작업은 분명 어느 정도 시간이 소모 있지만 팀이 스토리에 동의를 하고 나면 디자인 프로세스는 쓸데없는 시간 낭비 없이 훨씬 수월해 있습니다.


툴을 바꿔보세요. 대부분의 디자인 툴은 포스터나 책을 디자인하기 위해 만들어진 툴이죠. 그러한 툴을 사용하다 보면 다양한 프레임으로 이루어진 인터랙션 스토리는 디자인 수가 없습니다. 그러니 초기에는 키노트 옴니그래플, 파이어워크 사용하여 여러 장의 장표를 만들고 전체적인 플로우를 만들어 가도록 하세요.


절대 장의 화면으로 판단하지 마세요. 만약 누군가가 리뷰를 위해 한두장의 목업을 보내왔다면 그건 상당히 심각한 상황이라고 있습니다. 당신의 팀이 반드시 전체적인 스토리를 리뷰하는지 점검하세요. 오프라인 회의를 진행한다면 화면을 프린트해서 방안에 나열해보세요. 팀원 모두가 함께 전체적인 느낌과 디테일을 동시에 확인 있습니다. 만약 이메일을 통해 디자인을 보내는 상황이라면 화면이 어떻게 전개 되는지에 대한 짧은 영상을 하나 만들어서 보내세요.

스토리 중심 디자인이 매우 효과적인 이유(Why story-centered design works so well) 

사용자 경험을 그대로 재현 있습니다. 스토리 중심 디자인은 디자이너가 단계에서 유저와 가까워 있도록 도와줍니다. 전체(디자이너,엔지니어,CEO) 제품에 대한 유저들의 구체적인 사용자 경험을 통대로 디자인에 대한 선택을 내릴 있게 됩니다.

문제점을 빠르게 찾을 있습니다. 스토리를 통해 시간대별 사용자 경험을 더할 있기 때문에 각각의 화면을 확인 때보다 팀이 놓치게 되는 훨씬 다양한 디자인 실수를 확인 있죠. 짜여진 각본과 기대대로 흘러가지 않을 수록 쉽게 문제점을 발견 있습니다. 불필요하고 흐름이 끊기는 UI 확인하고 빠르게 고칠 있으며, 이러한 작은 디테일들이 결국 나은 사용자 경험을 제공합니다.

디자인적으로 지향하는 바를 확실하게 해줍니다. 디자인 스토리 작업을 제일 먼저 진행하게 경우 소소한 디테일을 정하기 전에 미리 다같이 디자인 목표점을 확인 있습니다. 디자이너가 디테일한 UI 목업을 완성한 후엔 결국 각각의 요소들이 디자인적 지향점을 정확히 이해하고 실행 되었는지에 대한 검토가 이루어지기 때문에 이는 매우 중요한 점이라고 있습니다.

스토리중심 디자인은 과학입니다. 어떻게 보면 그렇다고도 있죠. 고객이 시작 버튼(이메일이나 알림 확인) 누르는 순간부터 목표점에 다다르는 것까지, 상당 부분이 BJ Fogg 트리거 모델(역자: http://rannnyu.tistory.com/2 ) 유사하다고 있습니다. 스토리 점검을 통해 유저의 사용자 경험을 극대화 있는 요소가 빠지지 않았는지를 면밀하게 살펴 있습니다.

모든 일들도 빠르게 처리 있게 해줍니다. 한번 작성한 스토리는 내에서 언제든지 재사용이 가능합니다. 스토리를 보여주기 위해 작업한 목업은 유저 스터디를 위한 클릭형 프로토타입을 제작하는데 사용 있고, 같은 스토리를 이용하여 유저가 실제 제품을 사용하는 것에 대한 퍼널 분석(역자: http://jasonwi.com/13 ) 진행 있죠. QA 팀에서는 출시 마다 각각의 스토리를 확인하며 시나리오를 점검 있습니다.


원문: WHY GOOD STORYTELLING HELPS YOU DESIGN GREAT PRODUCTS by Braden Kowitz


블로그 추천글

절대 지켜져야만 하는 UI 디자인의 7가지 법칙

훌륭한 디자이너들의 6가지 생각과 행동

디자이너로서 업계에서 주목 받을 수 있는 3가지 전략

 나은 디자이너가 되기 위한 6가지 방법

그래픽 디자인을 잘하기 위한 10가지 습관

디자이너가 굳이 코딩을 배워야 할까?

신고

Introduction

ListBox나 Listview와 같이 목록형으로 데이터를 출력하는 컨트롤에서 많은 양의 데이터를 출력할경우, 스크롤 바를 조작할때 스크롤 속도가 매우 느려지는 현상을 발생합니다. 속도가 느려지는 가장큰 원인은 스크롤하는 도중에 매번 화면에 출력될 View가 업데이트되면서 퍼포먼스에 영향을 주게 되는것인데, 이를 해결하기 위한 간단한 방법으로 ScrollViewer의 IsDeferredScrollingEnabled 속성을 이용해 스크롤이 모두 끝났을때 View를 갱신하는 방법이 있습니다.

하지만 IsDeferredScrollingEnabled을 사용 할 경우 스크롤 동작이 완료될때까지 뷰가 갱신되지 않기때문에 디테일한 탐색이 불가능하기 때문에 오히려 더 불편한 상황이 발생 할 수도 있습니다. 이번시간에는 IsDeferredScrollingEnabled를 사용하여 스크롤할 때 View 전체가 갱신되지는 않지만 Thumb가 위치 한 데이터를 미리보기 형태로 제공함으로서 효과적인 탐색이 가능하도록 하는 방법에 대해 소개합니다. 아래는 이번시간에 구현할 결과물 영상입니다.

Create Scrolling Preview Helper

위 동영상과 같은 내용을 구현하기 위해 가장 먼저 확인 해 봐야 할 것이 DefferedScrolling을 이용했을 때 ScrollBar의 변경상태를 확인하는 방법입니다. ScrollViewer에서 기본적으로 제공되는 ScrollChanged는 DefferedScrolling을 이용할 경우 마지막에만 이벤트가 호출되기 때문에 정확한 위치를 계산할 수 없습니다.

WPF에서는 DefferedScrolling을 제어할 수 있도록 ScrollBar에 DeferScrollToVerticalOffsetCommand를 제공하고 있습니다. 이 Command는 ScrollViewer가 DefferedScrolling를 사용해 스크롤을 조작할 때 호출되는 Command로 CommandParameter를 통해 현재 Thumb의 위치를 가져올 수 있습니다.

ScrollViewer를 사용하는 Selector 컨트롤에서 미리보기가 가능하도록 하기 위해서 아래와 같이 Attached Dependency Property를 정의하고 ScrollViewer에 CommandBinding을 추가해줍니다.

속성값을 DataTemplate으로 받는 이유는 사용자가 임의로 미리보기로 출력될 데이터의 모양을 수정할 수 있도록 하기 위해서입니다. 그리고 아래와 같이 Command가 발생했을때의 처리를 해줍니다.


마지막으로 Thumb의 위치를 통해 계산된 Item Index에 해당하는 아이템을 Thumb옆에 Popup으로 출력하면 완성 할 수 있습니다.


아래는 이번시간에 구현한 전체 소스코드이며 궁금하신점이나 문의사항은 이메일이나 댓글로 남겨주시면 답변드리도록 하겠습니다. 아래소스코드는 VisualStudio2010버전에서 제작되었습니다.

신고

호응에 힘입어 벌써 4번째 세미나를 개최하게 되었습니다.
UI 디자인을 쉽고 효율적으로 할 수 있는 방법을 알려드릴 예정이오니 많은 참석 부탁드립니다.

일시 : 2011년 8월 17일 (수) 19시 00분 ~ 21시 00분
장소 : 강남 토즈2호점


코디네이터 (쉽고 빠른 UI 디자인 툴)

http://codinator.co.kr

코디네이터는 고품질의 UI 디자인을 아주 쉽고 빠르게 제작할 수 있는 디자인솔루션입니다.
개발자, 디자이너 누구나 몇번의 클릭만으로 나만의 UI 디자인과 테마를 아주 높은 퀄리티로
제작할 수 있는 방법이 바로 여기에 있습니다.
(최근 1.1로 버전 업데이트가 되면서 퍼포먼스가 향상되었습니다.)

 ※ 제품의 버전이 1.1로 업데이트 되면서 '무료'로 결정되었습니다.
세미나 당일날 크로스플랫폼 버전과 관련한 '무료'정책의 배경을 설명해 드립니다. 

 1. 누가 들으면 좋은가?
- 홀로 앱을 개발하는 개발자
- 윈도우즈폰 앱을 남과 다른 느낌으로 디자인하고 싶은 디자이너
- UI 디자인을 효율적인 방법으로 제작하고 싶은 개발자와 디자이너

 2. 코디네이터는 무엇이 좋은가?
 - 마우스 클릭 몇번으로 UI 디자인이 완성됩니다.
- 포토샵 수준의 수준 높은 디자인을 쉽게 제작할 수 있습니다.
- 다양한 색감의 테마를 쉽게 만들 수 있습니다.

 3. 코디네이터만의 특장점
- 자신만의 디자인 프리셋을 저장하고 언제든지 재사용할 수 있습니다.
- 컬러휠 기능으로 전체적인 분위기를 빠르게 변환할 수 있습니다.
- 데스크탑, 모바일, 웹 개발환경에 동일한 디자인을 적용하고 교환할 수
   있기 때문에 N스크린 개발환경에 적합합니다.

Codinator 소개 동영상 : http://www.youtube.com/watch?v=hpy2yhDJksU





저작자 표시 비영리 변경 금지
신고

최근 발매된 ipad를 필두로 현재 IT업계 최고 화두는 단연 UX입니다. 더 편한 인터페이스, 더 나은 사용자 경험을 만들어
내기 위해 지금도 여러 기업에서는 밤을 새어 고민하고 있습니다.

이 중에서 가장 열렬한 환호를 받고 있는 기업은 단연 애플입니다. 애플의 제품은 조금은 폐쇄적이면서 몇몇 단점이
있음에도 불구하고 사람들은 그것을 감수하고 애플의 제품에 환호를 보내고 있습니다. 그 이유야 여러가지가 있겠지만
애플의 각 제품에는 저마다의 스토리가 있고 그것을 포장해서 사람들에게 보여주는 기술이 대단해서가 아닐까 생각합니다.

각설하고 지금부터 말씀드릴 내용은 결코 애플 제품만의 이야기가 아니라 UI에서 이루어지는 여러가지 움직임에 대한
이야기 입니다. 여러 제품을 만져보고 느껴보면서 저는 UI의 움직임에 더 많은 생각을 해 보았고 먼저 아이폰에서 가장
눈에 띄는 몇가지 모션을 직접 캡쳐해 보았습니다.



아이폰OS의 움직임에서 가장 눈에 띄는 특징은 더 이상 존재하지 않는 영역의 방향으로 손가락을 스윕할 시 반동을
일으키며 존재하지 않는 영역을 순간적으로 보여 주었다가 다시 제자리로 돌아오는 것입니다. 이것은 사용자가 행하는
행동에 대한 성공과 실패를 시각적으로 확실하면서도 효과적으로 보여줌으로써 사용자의 인지력을 향상 시키는데
큰 역할을 합니다.

그리고 또 다른 특징으로는 카메라 어플을 동작하는 과정에서 파인더를 열고 닫는 일련의 과정입니다. 각 상황에
적절하게, 그리고 효과적으로 파인더가 열리고 닫히며 사용자의 상황 인지력을 높여주고 찍은 사진을 저장하는
과정에서는 빨려 들어가는 움직임을 줌으로써 별다른 텍스트 형태의 피드백 없이도 사용자는 자신이 한 행동에
대해 효과적으로 인식을 하게 됩니다.

그리고 결정적으로 제가 가장 눈여겨 본 부분은 음악재생 부분입니다. 연속 두번의 터치로 음반커버와 곡 리스트를
넘나드는 과정에서 단순히 커다란 판이 가운데 축을 중심으로 플립되는 움직임이 아니라 판이 뒤로 빠졌다가 앞으로
나오면서 플립이 됩니다. 저는 두가지 상황이 예상됩니다. 중심축이 앞뒤로 이동하는 상황, 그리고 판을 지탱하는
축이 우측이나 좌측끝에 위치하였다가 반대편으로 이동하면서 판은 축의 움직임에 따라 이동하는 상황입니다.

좀 더 확실한 움직임을 보여드리기 위해 느린 재생으로 인코딩을 해 보았고 우측 상단 윗부분을 보면 작은 아이콘은
축의 이동없이 정사각형이 플립되는 것을 볼 수 있는데 그것과 비교를 해보면 더욱 그 차이가 느껴질 것이라 생각합니다.



사실 이 부분의 움직임은 사용성과 크게 연관이 있지 않을수도 있겠지만 더욱 완성도를 높이고 시선을 집중 시키기
위한 움직임에 대해 그들이 얼마나 심혈을 기울였는지 알 수 있는 부분인지라 그 의미가 크다고 생각합니다.


다음으로는 공개 당시 커다란 반향을 일으켰던 윈도우즈7폰시리즈의 움직임을 캡쳐해 보았습니다.



처음에 이 영상을 보고 굉장히 놀라워 했던 기억이 나네요.
이번 윈도우즈폰7시리즈는 전체적으로 기존의 윈도우즈 모바일에서 완벽하게 탈피하였다는 점이 이슈입니다.
그 중에서도 가장 눈에 띄는 부분은 역시 움직임이고 주목할 점은 바로 터치하는 순간에 있습니다. 똑같은 사각형의
영역일지라도 어느 부분을 터치하느냐에 따라 달리 움직이는 모습은 짧지만 굉장히 인상적이며 경탄을 자아내기에
충분합니다. 그리고 역시 이 부분에서도 축의 개념이 들어가 있는 것을 알 수 있습니다.

각 대메뉴간의 이동에 있어서도 커다란 축이 존재 함으로써 자연스럽고 유기적인 움직임을 보여주고 있으며 메뉴
이동과정에 있어 보여지지 않는 부분을 순간적으로 보여주기 때문에 사용자로 하여금 컨텐츠에 대한 예상을 할 수
있도록 유도하고 있습니다. (덤으로 17초 부분에서는 최상단에 사진 전송의 의미로 작은 점들이 일렬로 이동하는데
이 또한 백미군요. 전통적으로 윈도우즈 부팅시에 보여졌던 지렁이의 메타포인가 하는 생각도 듭니다.)

개인적으로는 직관적인 아이폰OS의 UI도 굉장하지만 이번 MS의 시도 또한 찬사를 받기에 충분하다고 생각합니다.

이렇게 가장 대표적으로 주목 받고 있는 두 회사의 제품을 움직임으로써 살펴 보았는데 이러한 효과적인 움직임들은
단순히 시각적인 화려함을 제공하여 사용자들의 눈을 현혹 시키려는 술수가 아닌것을 알 수 있습니다. 더 나은 사용자
환경을 위해 그들이 얼마나 심혈을 기울였는지 다시 한번 생각해 볼 만 합니다.

움직인다는 것의 의미


UI의 효과적인 움직임이 의미하는 것에 대해 간단히 정리를 해 보자면 다음과 같습니다. 
인지력의 향상 :
사용자가 행하는 행동에 대한 성공과 실패를 시각적으로 확실히 보여줌으로써 학습의 속도가 빠르다. 즉 사용자의 실수를 줄여준다.

속도감의 향상 :
움직임이 가미 됨에 따라 그 프로세스가 실행되는 절대적 시간은 느려질 수도 있다. 하지만 빠르고 완성도 높은 움직임은 오히려 사용자로 하여금 속도감을 향상시키는 효과를 주게 된다. 이러한 효과로 사용자는 더 반응이 좋고 빠르다고 인식하게 된다.

심미성의 향상 :
각 상황에 걸맞는 적당한 움직임은 사용자의 지루함을 달래주고 사용하는 즐거움을 제공한다. 

결론적으로 적절하고 완성도 높은 움직임은 위와 같은 수많은 가치를 창출해 낼 수 있지만 그렇지 못한 경우에는
안하니 못한 상황이 연출될 것입니다. 이 모든것이 효과적으로 연출 되려면 움직임을 위한 최적화된 기술이 가장
중요할 것이고 상황에 맞는 적당한 움직임에 대한 철저한 연구는 당연할 것입니다.

끝으로, 완성도 높은 UI에 적절하게 가미된 움직임 요소는 사용자들로 하여금 기계를 기계로만 생각하지 않고 하나의
살아있는 유기체로 받아들이게끔 만들고 있다는 점에선 누구나 동의할 것이라고 생각합니다.
저작자 표시 비영리 동일 조건 변경 허락
신고