UX 아이디어 시각화 (by 스토리보드)

목차

1. 스토리보드가 무엇인가?
2. 스토리보드의 요소
3. 스토리보드 vs 고객여정지도
4. 왜 스토리보드를 사용하는가?
5. 스토리보드 만드는 방법

1. 스토리보드가 무엇인가?
   연속적인 사건을 보여주는 이미지를 통해 주요 사건을 시간 순으로 전달하여 팀과 이해관계자에게 전후관계를 추가로 제시할 때 사용
2. 스토리보드의 요소
   - 시나리오 : 시나리오나 이야기에 대한 설명
   - 시각자료들 : 시나리오의 각 단계를 순서대로 시각적으로 표현 
   - 캡션 : 사용자의 행동,환경,감정상태,장치 등을 묘사
3. 스토리보드 vs 고객여정지도
   격식에 얽매이지 않고, 이해하기 쉽고, 이미지 중심의 스토리보드 / 프로세스에 대한 많은 텍스트 정보를 포함하여 복잡한 편.
4. 왜 스토리보드를 사용하는가?
   조사 & 사용성테스트
   고객 여정 지도 확장
   우선순위 & 공통점
   아이데이션
5. 스토리보드 만드는 방법
   데이터 수집 > 정확도의 수준 > 기본 정의 > 단계계획 > 비주얼 만들기 및 캡션 추가 > 뿌리고 반복

스토리텔링 하는 것은 UX 전문가에게 큰 역할이다. 이야기는 관심을 끌고, 명확성을 주며, 팀과 행동하는 이해관계자들이 행동하도록 영감을 준다.

팀과 이해관계자들에게 시각적인 의사소통을 하는 방법은 여러가지가 있다. - 몇가지 예를 들자면 UX stories, 스토리보드, 고객 여정 지도, 그리고  공감 지도 등이 있다. 이 글은 그 중 스토리보드에 집중하는 글이다.

1. 스토리보드가 무엇인가?

이미 영화나 애니메이션, 만화책으로 인해 스토리보드 컨셉이 친근할 수도 있다. 정확함의 수준은 산업마다 다르지만 스토리보드는 항상 이미지를 통해 이야기를 전달한다.

스토리보드는 판에 연속적인 사건들을 보여주는 이미지를 통해 주요 사건을 시간순으로 전달한다.

스토리보드의 본질은 높은 정확도를 가지는 것이 아니다. 그보다는 간단한 시각 자료와 기본적인 것을 갖추는 것이다. 그러나 구체적인 시나리오는 팀과 이해관계자들이 기억하기에 좋을 것이다.

UX 분야에서는 팀과 이해관계자에게 전후관계를 추가로 제시할 때 스토리보드를 사용한다. 이미지를 사용하는 것은 언뜻보고 이야기를 빨리 이해시키고, 기억하기 쉽게 하기 위함이다.

2. 스토리보드 요소

형태에 상관없이 세 가지 일반적인 스토리보드가 있다. : 특정 시나리오와, 시각 자료들, 적절한 캡션 이다.

어디서부터 시작해야할지 모르겠다면? 이 스토리보드 템플릿을 활용해보시라. (PDF version)

1. 시나리오

스토리보드는 시나리오나 사용자의 이야기에 기반한다. 시나리오에 해당하는 페르소나나 역할은 스토리보드 상단에 정확하게 명시한다. 여기에는 시나리오의 짧은 텍스트 설명도 포함된다. 시나리오나 이야기에 대한 설명은 팀원이나 이해관계자가 시각적 요소들로 보기 전에 뭐가 묘사 된건지 이해할 수 있을 만큼 명확해야 한다.  ex) 기업 구매자인 제임스는 사무용품을 보충해야 한다.
 

2. 시각자료들

시나리오의 각 단계는 순서대로 시각적으로 표현된다. 단계는 스케치, 일러스트, 사진으로 표현할 수 있다. 스케치보드의 목적과 독자에 따라 이런 이미지들은 빠르고 덜 정확하거나 정교하고 더 정확한 결과물이 될 수 있다. 이미지에는 사용자의 말풍선이나 사용자와 상호작용 하는 화면의 스케치 같은 이야기와 관련된 디테일이 포함된다.
 

3. 캡션

각각의 시각 자료와 상응하는 캡션을 붙인다. 캡션은 사용자의 행동, 환경, 감정상태, 장치 등을 묘사한다. 이미지가 스토리보드상에서 주된 내용이기 때문에 캡션은 간결해야하고, 일반적으로 2개를 넘지 않는다.

3. 스토리보드 vs 고객 여정 지도
 

고객여정지도는 고객이 목표를 달성하기 위해 통과하는 과정을 시각화한 것이다. 꽤 복잡하고, 사용자의 행동, 생각, 감정뿐만 아니라 프로세스의 다른 단계에서 얻을 수 있는 통찰력까지 여정의 여러 단계에 대한 많은 텍스트 정보를 포함하고 있다. 종종 경험에 대한 개요 그림을 보여주며, 특정 문제점을 구별하거나 조직의 여러 부서 간에 협업과 책임을 강화하는 수단으로 사용된다.

대조적으로, 스토리보드는 보통 (항상은 아니고) 격식에 얽매이지 않고, 이해하기 쉬운 방식의 그래픽으로 일련의 단계를 설명한다. 가장 집중하는 부분은 은 텍스트에 대한 강조가 적은 이미지이다. 캡션은 결과물에서 중요하지만 고객여정지도처럼 많은 상황을 주지는 않는다.

스토리보는 종종 사용자 여정의 일부를 설명하는데 사용된다. (여정 중 다른 지점을 포착하기 위해 필요할 수도 있다) 특정 문제에 대해 작업하는 모든 팀 구성원의 상황 및 공통점을 확립하는 효율적인 방법이다.

스토리보드는 UX 프로세스에서 다양한 방법으로 사용할 수 있다.
 

만약 팀이나 이해관계자가 사용성 테스트에 관여하지 않는다면, 스토리보드는 참가자가 어플리케이션이나 사이트에서 상호작용을 어떻게 하는지 전달할 수 있다. 요약하면 텍스트상의 사용성 테스트를 텍스트만 사용해서 요약해도 도움이 될 수 있지만, 시각적 자료는 당신의 이야기를 쉽게 읽고 기억에 남도록 만들 수 있다.

사용성 테스트를 위해 만들어진 스토리보드는 실제로 유저가 한 말을 인용하거나, 그들이 보인 신체적 반응을 함께 넣을 수도 있다.
 

사용자가 어플리케이션을 사용 하는 방법을 시각화하면, 그들이 시나리오를 완료하는데 필요한 기능을 이해하고 기억하기 쉽기 때문에, 여기에 집중하는 것은 중요하다.

이 지식은 모든 팀원이 공유하고, 궁극적으로 노력의 우선순위에 대한 생산적인 대화를 이끌어 낼 것이다.  

예를 들어, 로그인 흐름 (버튼, 자동입력autofill), and/or 진행바 )을 개선하는 팀은 스토리 보드를 로그인 과정에서 흐름을 방해하는 것들을 알려주는 리마인더나, 요약본으로 사용할 수 있다.만약 스토리보드의 이미지에 로그인 버튼을 클릭할 때 사용자가 불만을 느꼈다고 보여졌지만 수동으로 정보를 입력할 때 문제가 없다면, 팀은 자동채우기 기능보다 진행바를 우선으로 처리해야한다.

물론 스토리보드는 유저들의 반응이 적절하게 반영된다는 전제와, 제작자가 예쁘기만 한 것을 선택하지 않는다는 전제 하에 이루어지는 의사 결정에만 도움이 된다.팀으로서스토리보드 이미지에 대해 상의하면 사용자와 사용자의 상황의 이해를 바탕으로 어떤 것에 초점을 둘지 결정할 수 있도록 도와준다. 이러한 지식의 공유된 표현은 프로젝트 내내 끊임없이 언급될 수 있다. 로그인 흐름의 예를 사용해서, 팀은 이제 사용자가 버튼과 상호작용 할 때 명백한 피드백을 선호하는 것을 알고, 향후 기능 디자인을 위해 다시 참조할 수 있다.
 

아이데이션 스토리보드는 결과물을 유지보수하거나 우선순위를 결정하는 도구보다는, 의사 소통 수단으로 쓰여야 한다. 실제 데이터를 사용하면 시나리오가 변경될 가능성이 높기 때문이다.스토리보드는  ideation의 형태가 될 수 있다. 잠재적인 경험을 시각화하는데 도움이 되거나 개발하기전에 사용자의 환경을 더 잘 이해하길 원한다면 사용자가 기능을 어떻게 사용할지에 대한 아이디어를 스케치할 수 있다. 아이데이션 스토리보드는 지속적인 구조나 우선순위를 매기는 도구가 아닌 대화의 수단으로 사용해야 한다. 실제 데이터를 사용하면 시나리오가 그럴듯하게 바뀔 수 있다.

 

스토리보드를 만드는 것은 힘든 일로 느껴질 수 있다. 하지만 그건 낮은 충실도의 artifact로써 가장 가치있고 새로 만드는데 시간이 많이 걸리지 않는다는 것을 기억하라.

효과적인 스토리보드는 6가지 주요 단계를 거친다.

먼저 스토리보드에서 사용할 데이터(사용자 인터뷰와 사용성 테스트나 사이트 메트릭스(Site Metrics)) 를 결정한다. 만약 당신이 아직 데이터를 수집하지 않았거나, 아이데이션한 것을 스토리보드에 사용하길 원한다면, 실제 데이터 없이 스토리보드를 사용할 수 있다.

2. 정확도의 수준 선택

목표와 당신의 결과물의 잠재고객을 명심하자.

브레인스토밍 회의 중에 시퀀스를 빠르게 그리거나 장면을 팀에 전달하자. 이러한 아이데이션 회의에서 당신은 스티커 메모를 사용한 스토리보드를 만들어 각 팀원의 관점을 얻을 수도 있다. 먼저 타임라인과 사용자가 행할 단계에 대한 토론을 하자. 토론을 할 때, 각 단계를 스티커 노트에 그리고, 화이트보드나 벽에 놓자. 토론이 그룹으로 진행 중이라면 한 사람이 그리거나 여러 사람이 그릴 수 있다. 한 번에 한 단계에 집중하여 포괄적인 토론을 유지하고 같은 얘기를 서로 다르게 해서 혼란을 일으키는 불상사를 만들지 않도록 하자. 이 과정에서 여러 팀원이 참여하면 하나의 역할이 필수적으로 생각하지 않을 아이디어가 나타난다. 예를들어, 마케팅이나 비즈니스 중심의 팀원은 나머지 팀이 관심가지지 않는 단계 (마케팅 이메일이나 쿠폰 트리거 같은)에 의견을 말할 수 있다. 또한 이 방법을 사용하면 전체 스토리보드를 다시 그리지 않고 스티커 메모를 재배열해서 순서를 변경할 수 있다(특히 타임라인을 조정할 때) . 목표는 세련되고 정제된 결과물이 아니라 이해를 공유하는 것이다.  

사용성 테스트를 기록하고, 정보를 추출l하기 위한 스토리보드를 만들 경우 사진이나 비디오 스틸을 사용하자. 이러한 타입의 비주얼은 스토리보드에 신뢰성을 추가하며 시간을 극대화 한다. (스케치가 필요 없다)

어도비, 스케치, 파워포인트같은 프로그램으로 만든 상세한 일러스트를 사용해서 스토리보드를 클라이언트에게 스토리보드를 보여주거나 디자인 결과물로 보여주자.

기억하기: 스토리보드는 이야기를 전달하기 위한 것. 꼭 필요하지 않은 시각적 자료에 너무 많은 시간을 낭비하지 말자.
 

표현된 페르소나와 시나리오나 사용자의 이야기를 정의하자. 시나리오가 구체적이어야하고 스토리보드가 여러 방향으로 분리되지 않도록 단일 사용자 경로와 같아야한다. 복잡한 다중 경로 시나리오의 경우 하나의 경로당 하나의 스토리보드로 1:1 규칙을 유지한다 - 여러 개의 스토리보드로 끝나면 각각 다른 사용자 경로를 보여준다. (순서차트가 아니라 줄거리다.)
 

4. 단계 계획

스토리보드 템플릿으로 바로 이동하기 전에 단계를 적고 화살표로 연결한다. 그리고나서 아래 그림에서 보이는 것 처럼 각 단계에 아이콘으로 감정적인 상태를 추가한다. 이 기술은 각 비주얼프레임에 포함될 내용을 시각화하는데 도움이 된다.

고급 일러스트레이션 기술을 사용해서 만화책 품질의 멋진 스토리보드를 만들 수 있지만 효과적인 스토리보드를 위한 필수조건은 아니다. 언뜻보기 이해할 수 없는 추가 상황을 설명하기 위해 캡션을 시각요소 아래에 기호로 추가하자.

스토리보드는 수정하기 쉬운 형식이어야 한다. 필요하다면 추가 반복해 바꿀 수 있다. (이건 낮은 신뢰도의 스케치나 스티커 메모의 또다른 장점이다)

당신이 출판할 수준의 만화책을 목표로 하고 있는건 아니겠지만, 스토리보드와 연재만화 사이에는 비슷한점이 너무 많아서 Scott McCloud’s의 고전 책 Understanding Comics으로부터 감정, 상황, 행동의 시각화를 위한 많은 아이디어를 얻을 수 있다.
 

스토리보드를 내부 팀이나 프로젝트 이해관계자나 고객에게 배포하고 피드백을 요청하자. 필요하다면 이 단계 중 일부를 반복해서 artifact를 개선시키자.

결론

이름에서 알 수 있듯, 스토리보드는 우리가 사용자들에 대한 이야기를 하는데 도움을 준다. 실제 데이터를 기반으로 다른 UX 활동과 결합하면 다음을 할 수 있다.

• 내부 편견에서 벗어나 사용자들과 공감할 수 있도록 한다.

• 고객과 이해관계자가 특정 사용자 시나리오를 기억하게 도와준다.

• 무엇이 사용자의 행동을 이끌어내는지 이해하는데 도움이 된다.

디자인싱킹으로 빅 아이디어를 생성하는 종일코스에서 스토리보드를 배우고 연습하자.