[12장 인터랙션디자인 Part2](천윤서)

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

5. 전반적 스토리 구축 단계

 

전반적 스토리 : 특정 과업이나 기능을 수행할 디지털 서비스의 행동을 디자인하고자 하는 개발자의 목적과 의도가 스케치를 통해 추상적으로 묘사된 것. 이를 통해 서비스가 본래 설계된 목적과 잘 부합하도록 행동하는지를 포괄적으로 살펴볼 수 있으며, 인터랙션 디자인의 결과로 좋은 스토리가 도출될 수 있는지를 점검함

 

 

5.1 준비 자료 만들기

 

 

  1. 전반적인 스토리를 구축하는 팀을 구성함.
    • 서비스를 디자인과 관련된 사람들을 모집함

 

  1. 디자인하고 있는 서비스와 관련된 중요한 이슈 정리
    • 이를 위해서는 분석 단계에서 만들어 낸 자료들이 중요한 역할을 함

 

    • 페르소나 모형 : 가상 사용자에 대한 구체적인 특징을 정리한 것이기 때문에 사용자가 새로 개발되는 서비스에 대해 어떻게 행동할 것인지 예측 가능

 

    • 사용 시나리오, 결합 시퀀스모형 : 기존 시스템에 대해 어떤 시나리오로 행동하는지, 어떤 행동을 하는지 알 수 있음

 

    • 사회적/문화적 맥락 자료 : 새로운 시스템이 제공되었을 때 기존의 사회적 구조나 문화적 맥락에 해당 시스템이 어떤 영향을 미칠 것인지 알 수 있음

 

    • 혁신성 분석 결과, 사용경험 분석 결과 : 새로운 디지털 서비스가 제공하고자 하는 기능이 기술적으로 얼마나 혁신적이며 사용자가 어떤 경험을 할 수 있는지에 대한 자료를 제공

 

  1. 스토리를 만들 아이디어 준비
    • 추상적인 콘셉트(+ 왜 그 콘셉트가 선정되었는지 설명 자료), 구체적인 메타포(주, 보조 메타포) 자료 준비

 

    • EX : 장바구니, 솔로몬의 선택. 사진 참고
      -> 세부 기능 짐작, 용도 및 행동 짐작 가능

 

5.2 그룹 스토리텔링하기

 

브레인스토밍 세션을 통해 네다섯 개의 핵심 스토리를 만들어 내는 단계. 일반적 브레인스토밍과 비슷한 원리(되도록 많은양의 스토리, 다른사람의 스토리 비판 금지, 자신의 이야기 덧붙임)가 적용되지만 몇가지 더 주목해야할 점 아래와 같음

 

 

  1. 참여하는 사람들이 사용자 분석 과정에서 도출된 페르소나를 완벽하게 이해하고 그 페르소나의 입장에서 스토리를 만들어 냄. 제 3자가 아닌 자신의 주관적 입장에서 원하는 것 파악함

 

  1. 해당 디지털 서비스를 사용하게 될 실제 환경에서 스토리텔링을 진행하는 것이 더 좋은 스토리를 만들어 내는데 큰 도움이 됨. 다양한 정황 정보를 제공하기 때문에 구체적 스토리 도출에 용이

 

  1. 실제 디지털 서비스가 아직 없기는 하지만 비슷한 크기나 모양의 오브젝트를 준비해서 사용함 (구체적 오브젝트 활용. 사진 참고)

 

  1. 위의 절차를 통해 여러 개의 개별적인 짧은 스토리를 플립차트 형식으로 일단 만들어 봄.
    (플립차트 : 한 장씩 넘길 수 있는 형태로 되어있으므로 여러개의 개별적 스토리를 그리고 비교하기 쉬움)
    이때의 개별적 스토리의 범위는 이 단계에서 최종 목표인 통합된 스토리모형을 그려내고자 하는 디지털 서비스의 기능이나 목적을 구성하는 하위 요소들이며 되도록 많은 개별 스토리를 얻는 것이 중요

 

 

  • EX : 진품 감별 서비스, 원격 장보기 서비스. 사진 참고

 

5.3 개별 스토리 평가하기

 

 

  • 앞 단계에서 만든 개별 스토리를 평가해 각 스토리에서 어떤 것이 예상대로 잘 동작하고 어떤 것이 그렇지 않은지 파악 -> 디자이너의 의도와 부합할 때까지 지속적 수정

 

  • EX : 진품 감별 서비스에서 메인기능인 진품 감별 기능에 별도로 중고품 검색 기능을 추가할 필요가 있다고 판단되면 해당 기능 추가

 

5.4 통합 스토리모형 만들기

 

개별 스토리를 통합해 특정 디지털 서비스의 행동을 개괄적으로 살표볼 수 있는 단계

 

 

  1. 개별 스토리들 중에서 겹치는 스토리가 있는지 파악하여 반복되는 경우 큰 스토리에서는 축약해서 표시

 

  1. 각 스토리 간에 서로 다른 부분들 중에서 전체적인 스토리 관점에서 별로 모순이 없는 경우는 다른 스토리들을 함께 결합해서 하나의 스토리를 만듬

 

  1. 서로 다른 스토리들 중에서 각 스토리 간에 모순이 발생할 경우 각 스토리가 만들어진 배후에 있는 기술적이거나 비즈니스적인 전제조건을 찾아내고 각 조건별로 별도의 스토리를 작성해 제시

 

 

  • 유의사항 : 앞서 도출된 스토리를 조합할 때 애초의 목적이나 의도가 잘 반영된 스토리들을 선택해야 한다는 점. 무조건 통합만 하는 것이 아니라 개별 스토리 상의 문제점을 수정 보완하는 작업도 함께 이루어져야만 서비스가 수행할 행동에 대한 전반적 이해를 돕는 통합 스토리 모형을 얻을 수 있음

 

  • EX : 사진 참조. 화면 중심으로 실제 사용 정황이나 사용자 반응에 대한 내용은 표시되지 않음

 

 

 

5.5 통합 스토리모형을 평가 및 수정 보완하기

 

좋은 스토리의 요소가 통합 스토리모형에 잘 적용되었는지 평가하고 평가 과정에서 수정 사항이 도출되면 이를 수정 보완하는 단계 (아래 세가지 주의사항)

 

 

  1. 스토리가 꽉 짜인 구조를 가지고 있는지를 평가하기 위해 통합 스토리모형에서 각 단계 사이에 그려진 화살표를 중점적으로 검토함
    • 실제 상황에서 기존 서비스를 사용하던 행위와 순서와 스토리상에서 만들어진 순서가 상반되는 점 없는지 확인

 

    • 기술 분석 과정에서 도출된 기술들에 대한 분석을 바탕으로 제품이나 서비스의 행동이 기술적으로 가능하고 비즈니스적으로 사업성이 있는지 확인
  1. 페르소나에서 기술한 사용자의 관점에서 스토리가 만들어졌는지를 확인
    • 본인이 페르소나 속의 가상인물이라고 생각하고 머릿속에서 각 단계 진행하여 경험 점검 (멘탈 시뮬레이션)

 

    • 스토리상에서 사용자가 의미있는 선택을 할 수 있었는지 확인함. 이를 위해서는 스토리상에서 보이는 각 단계에서 어떤 대안을 사용자가 선택 가능했고, 그중에서 사용자가 어떤 대안을 선택했는지 논리적인 설명이 가능해야 함

 

  1. 사용자 분석 단계에서 도출된 사용자의 필요와 요구가 스토리상에서 제대로 충족되었는지를 확인

 

  1. 과업/맥락 분석 단계에서 도출된 갈등 요소들이 해소되었는지 확인

 

수정 보완이 완료된 통합 스토리모형은 전체 인터랙션 디자인 과정에서 기준점으로 사용되므로 이를 한장으로 정리함. (수작업, 플립차트 등으로. 사진 참조)

 

 

 

 

 

6. 구체적 스토리텔링 단계

 

 

  • 사람들이 디지털 서비스를 어떻게 사용할 것인지를 세부 단계별로 스토리보드로 묘사하는 단계

 

  • 스토리보드의 한 컷은 사용자가 서비스를 한 번 조작하거나 시스템이 한 번 반응하는 것처럼 한 번의 단위 작업을 표현함

 

  • 이 기법을 통해 사람들이 언제, 어디서, 어떻게, 왜 해당 서비스를 사용하는지에 관한 이야기가 만들어지기 때문에 서비스의 세부적 해ㅐㅇ동을 사용 맥락에 맞추어 보다 적절히 디자인 할 수 있음

 

구체적인 스토리텔링의 특징

 

 

  1. 스토리보드는 통합적 스토리모형과 비교했을 때 더 구체적이고 자세함
    • 작업에 참여하기 않은 사람들이라도 스토리보드를 보면 서비스의 인터랙션이 어떻게 진행되는지 충분히 파악할 수 있을 정도로 많은 텍스트, 그래픽 정보, 경우에 따라서는 청각 정보 등도 제공되어야 함

 

  1. 스토리보드는 분석 단계의 결과와 콘셉트 디자인 결과, 그리고 통합 스토리모형 자료를 바탕으로 체계적으로 작성되어야 함
    • 스토리상의 사용자는 페르소나모형에서 분석된 사람과 일관된 특성을 보여야 하고 시나리오 분석에서 파악된 순서와 부합되게 행동해야하며, 맥락 분석에서 파악된 특성도 감안해서 진행해야 함

 

  1. 스토리보드는 어느 정도 유연하게 변경될 수 있는 모습을 하고 있어야 함
    • 너무 확정된 모습으로 작성되면 인터랙션 디자인 과정에서 창의적인 산출물을 기대하기 힘듬

 

 

 

 

6.1 스토리텔링할 내용 선정하기

 

앞서 진행했던 통합 스토리모형보다 구체적이고 더 세부적인 스토리를 그린 뒤 본격적인 스토리보드 작업에 들어감. 특정 단위 스토리를 대상으로 진행. 모든 스토리를 구체적으로 만들 수 없는 경우(시간, 예산의 한계) 소수의 대상 스토리를 선정함 (아래 세가지 기준을 바탕으로)

 

 

  1. 제품이나 서비스의 가장 핵심이 되는 기능과 연관되어 있는 스토리를 선정함

 

  1. 여러 스토리에서 공통적으로 등장하는 세부 스토리를 선정하여 먼저 시작함

 

  1. 사용자경험과 관련해 가능한 한 많은 이슈가 제기된 스토리를 우선적으로 스토리보드로 만듬

 

 

6.2 스토리보드의 타입 결정하기

 

스토리보드 기법의 주요 특징이자 효과 중 하나는 서비스의 행동을 실물보다 단순화시켜 구상하는 것. 스토리보드의 전형적 타입 중 서비스 과업 및 행동 특성에 따라 적당한 것을 선택해 해당 케이스에 적용함

 

 

스크린샷 스토리보드

 

사용자의 행동에 대해서 서비스가 화면상에서 어떤 반응을 보일 것인지에 집중헤서 스토리보드를 작성하는 타입

 

 

  • 스마트폰이라면 액정화면, PC라면 윈도우 화면, IPTV라면 TV화면의 변화만을 표현해줌

 

  • 장점 : 시스템의 반응을 상세하게 표현해줄 수 있음

 

  • 자세한 과정을 직접 화면을 통해 표현함으로써 인터랙션 디자인을 구체적으로 진행할 수 있게 해줌
    사진 참조

 

  • 폰 그라피티. 설계자의 스케치 실력을 보완하거나 구체화하는데 유용. 사진 참조

 

  • 문제점 : 시스템의 반응에만 초점을 맞추다 보니 주변 맥락의 변화나 사용자의 변화 그리고 전체 과업 중에 현재까지의 진행 정도를 알기 어렵다는 점

 

  • 사용자의 특성이나 정황에 따라 별로 영향을 받지 않는 간단한 서비스에 대한 인터랙션을 디자인할 때 유용

 

순서도 스토리보드

 

스크린샷 스토리보드의 문제점 중 과업의 진행 상황을 알기 어렵다는 단점을 극복하기 위해 작하는 것

 

 

  • 시간에 따른 서비스 행동 변화를 단계적으로 보여주는 기법으로, 특정 과업의 특성이나 진행 양상을 파악하는 데 도움이 됨

 

  • 해당 장면에서 수하는 행동이 전체 단계에서 어디 단계쯤에 위치하는지에 대한 정보 제공 사진 참조

 

  • 서비스의 다이나믹한 행동을 보여주고 전반적인 흐름 파악할 수 있음

 

  • 그래픽적인 표현을 통해 설계자들 간의 의사소통에서 오해가 발생할 확률을 낮춤

 

  • 하나의 서비스 안에서 이루어지는 특정 행동을 자세하게 표현하는 데 적합. 특히 여러 케이스 발생하거나 단계가 많은 경우 유용

 

  • 문제점 : 행동이 진행되는 제반 상황에 대한 정보가 부족하기 때문에 서비스를 사용하는 사람에 대한 정보나 사용 맥락에 대한 정보를 표현하기 힘듬. 사용자 특성이나 맥락에 영향을 받는 경우 부적절

 

그래픽 컨텍스트 스토리보드

 

사용자의 요구에 대응하는 서비스의 작용 및 움직임을 화살표 등의 도식을 사용해 역동적으로 표현하는 기법

 

 

  • EX : 비행기 탑승 시 위급상황에 구명조끼 착용하는 방법 – 그래픽, 화살표, 숫자 인덱스, 동시 발생 표현 등 사진 참조

 

  • 서비스의 반응뿐만 아니라 그것을 촉발시키는 사용자의 행동 또한 더불어 살펴보는데 적합

 

  • 제품과 사용자를 함께 볼 수 있다는 점에서 일반적인 인터랙션 디자인에 널리 사용

 

  • 문제점 : 사용 맥락에 대한 자료가 많지 않음

 

하이브리드 컨텍스트 스토리보드

 

실제 사용 정황에 대한 내용을 스토리보드 속에 많이 반영하기 위해 사용하는 스토리보드 기법

 

 

  • 실제 사진과 외곽선 따라 그리기를 혼합해 원하는 정도의 스케치를 얻어내는 방법

 

  • 사용자가 주변 배경에서 부각됨

 

  • 사용자가 서비스를 사용하는 상황이나 맥락에 초점을 맞춤

 

  • 고난도의 스케치 기술을 요하지 않으며 이미지 편집툴에 대한 기본적인 이해만 있다면 쉽게 응용할 수 있어 널리 쓰임 사진 예시 참조

 

  • 실제 사용 환경을 사진을 통해 정밀하게 제공하여 사용 정황에 따라 인터랙션 자체가 큰 영향을 받는 서비스에 사용할 수 있음

 

  • 문제점 : 사용자의 반응이나 시스템이 반응은 자세히 표시되지 않음. 스토리 상의 각 단계 진행하는 속도와 방향전환 정보 알 수 없음

 

영화 각본 스토리보드

 

영화에서 자주 사용되는 기법으로 화살표 등의 도식을 이용해 디지털 제품 및 서비스의 행동을 표현한다는 점에서는 그래픽 컨텍스트 스토리보드와 유사하나, 장면과 장면 간의 전환에 초점이 맞추어져 있는 점이 다름

 

 

  • 각 장면이 얼마나 빨리 바뀌는지 알 수 있고 주변 환경이나 주인공의 상태가 어떻게 변환하는지 제시됨. 사진 참조

 

  • 장면마다 주석이나 메모로 부가 설명 곁들여 그래픽 요소로 표현할 수 없는 장면에 대한 정보 제공

 

  • EX : IPTV를 통해 드라마 시청 중 아이템 구매하는 서비스 관련 스토리보드. 사진 참조

 

혼합형 스토리보드

 

여러 종류의 스토리보드를 필요에 따라 하나의 스토리보드 안에 혼합해 사용함

 

 

  • 필요에 따라 그에 적합한 스토리보드를 적절하게 혼합해 사용하는 것도 스토리보드의 효과를 증진시킬 수 있는 방법임
천 윤서 (29 Posts)


0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×