본문은 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가지 습관

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

신고

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

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

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



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

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

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

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



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


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



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

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

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

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

움직인다는 것의 의미


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

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

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

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

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