스토리보드

[스토리보드 개념]
- 스토리의 주요 이벤트를 시간으로 매핑하는 일련의 패널에 표시된 이미지를 통해 스토리를 전달
- 제작(촬영) 전 스토리브도를 제작하여 영화 또는 대화형 미디어 시퀀스를 미리 시각화

---

[UX에서의 스토리보드]
- 스토리텔링 : 주의를 끌고 명확성을 제공 / 팀과 이해관계자가 조치를 취하도록 유도
  UX스토리 -> 스토리보드 -> 여정지도 -> 공감지도

- 제품이 사용되는 방식을 시각적으로 표현한 것
  사용자 / 컨텍스트 / 제품사용법
 
- 사용자가 제품을 쉽게 상상할 수 있도록 도와줌
  다양한 아이디어, 사용 사례, 문제 도출 밑 다른 팀원과의 공유를 통해 팀원들 간의 이해를 돕는 데 사용

---

[스토리보드 관련 개념]
- 고객 여정customer journey : 큰 그림을 볼 수 있도록 도움을 주는 도구. 제품에 대해 처음 듣는 순간부터 제품을 사용하고, 사용 후 고객의 전체 경험을 고려.

- 사용자 여정User Journey : 사용자가 제품을 사용하는 동안 거치는 흐름. 타깃 고객의 제품에 대한 사용 목표를 위한 사용자 여정을 설계. 사람들이 사용 목표를 달성하는 방법을 매핑함. 
  - 사용자 여정의 장점 : 제품을 디자인하는 동안 독립형 화면 대신 프로세스를 생각하는 데 도움이 됨. 사용자가 가질 다양한 장점과 생각을 논의할 수 있으므로 나중에 디자인에 반영할 수 있음. 사용자 여정 자체는 다이어그램으로, UI/UX가 표시되지 않고 단순한 상자와 사용자 여정과 관련하여 수집한 정보만이 포함됨. 이 단계를 통해 다양한 경로에서 아이디어를 얻고 사용자 요구에 맞는 경로를 찾을 수 있다며. 이는 실제 사용자에게 보여질 화면을 디자인하기 전에 이루어짐. 

- 사용자 플로우User Flow : 사용자 여정과 비슷하지만 사용자 플로우는 순서를 보여주는 플로우 차트에 더 가까움. 각 단계의 화면 UI 또는 와이어 프레임을 표시. 
  - 사용자 플로우의 장점 : UI/UX의 프로세스를 살펴 보는 데 도움이 됨. 개발자에게 제품 작동 방식을 보여주는 좋은 도구. 클릭 가능한 영역을 강조 표시. 클릭하면 어떤 일이 발생하는지 보여주는 UI/UX 디자인과 관련한 상세 흐름에 대한 것. 다음 화면이 어떻게 보여지게 될 것인지에 대한 디자인을 기획하는 데 도움을 줌. 

---

[스토리보드 사용 시점]
1. 신제품 개발 초기단계 : 사용자 스토리/사용자 인터뷰/현장 조사 결과를 스토리보드로 요약됨. 

2. 제품 개발과정 : 사용자 테스트/사용자 인터뷰/사용자 분석에서 수집한 정보를 기반으로 제품-사용자 상호작용 모델링. 이 과정에는 기존 제품과 개발 중인 제품이 모두 포함될 수 있으며 시나리오뿐만 아니라 일상적인 상황이 내재됨. 

---

[UX스토리보드의 필요성]
1. 시각적 이점
- 이미지는 단어보다 더 강력하게 정보, 의미를 전달
- 스토리보드는 사용자의 전반적인 흐름과 더불어 더 깊은 단계의 UX 디자인 의미를 내포

2. 정서적 참여
- 스토리보드는 기능보다 문제., 상황 위주이며 시각적 형태로 전달되므로 쉽게 공감할 수 있고 상황에 대한 이해가 가능함

3. 기억력
- 흐름과 문제를 한눈에 이해할 수 있으므로 스토리보드를 통해 정보를 공유하고 추가적인 통찰력을 얻을 수 있음

---

[UX스토리보드의 활용]
- 전체 서비스 개요 : 디지털 서비스 및 온/오프라인 서비스의 경우 사용자와의 여러가지 접점이 필요. 텍스트 기반 자료보다 쉽고 기억에 남음. 
- 오프라인 이벤트가 있는 디지털 제품 

---

[UX스토리보드의 구성요소]
- UX스토리보드 : 시나리오 / 시각자료 / 캡션

1. 시나리오 
 (1) 페르소나(역할) 설정 
     - 보드 상단에 명확히 지정
     - 시나리오 대한 간단한 설명 : 이해 관계자가 영상을 보기 전에 내용을 이해할 수 있을 만큼 명확하게 표기 

2. 시각자료 
 - 시나리오의 각 단계는 시각적 시퀀스로 표시
 - 스케치 / 일러스트레이션 / 사진 등 활용
 - 스토리보드의 목적과 청중에 따라 이미지는 빠르고 충실도가 낮은 그림이거나 정교하고 충실도가 높은 인공물이 될 수 있음.  그러나 의미만 전달될 수 있다면 화려한 시각적 표현은 중요치 않음. 
 - 이미지에는 사용자 환경이 어떻게 생겼는지, 사용자의 말을 인용한 말풍선, 사용자가 상호작용하는 화면 스케치 등 스토리와 관련된 세부정도 포함되어야 함

3. 캡션 
- 사용자의 행동, 환경, 감정상태, 사용하는 기기 등 두 개의 글머리 기호를 초과하지 않도록 간결하게 작성

---

[UX스토리보드 다자인 방법]
1. 1단계 : 데이터 확보
- 실제 데이터는 스토리보드 기반을 형성. 다양한 UX 조사 방법을 통해 적절한 데이터를 수집. 
- 사용자 조사 방법 : 사용자 인터뷰 / 현장 조사 / 전문가나 팀원 간 회의. 신뢰할 수 있는 결과를 도출하는 것이 중요함. 되도록 많은 정보를 수집함으로써 스토리에 대한 충분한 지식 확보. 

2. 2단계 : 집중할 플로우를 선택
- 가장 중요한 사용자의 스토리들 중 일부를 선택하여 사람들이 서브시와 상호작용하는 방식을 보여줌. 
- 제품 이용 동기부터 문제해결까지 모든 과정을 포함하되 5~7개의 스토리로 제한함. 

3. 3단계 : 줄거의 단계와 이야기의 기본 개요를 기록
 (1) 메인 캐릭터 주연 배우의 특성, 기대치, 전반적인 태도 등을 설정. 기존에 개발한 페르소나를 이용해도 됨. 
 (2) 장면 : 이야기가 전개되는 장소와 환경 등을 설정. 
 (3) 플롯 단계 : 사건/문제/헤결책을 정리. 줄거리를 작성하는 것만으로도 이야기를 상상하고 살펴보는 데 도움이 됨. 

4. 4단계 : 스토리보드 만들기
- 스케치 / 브레인스토밍 / 스티커 메모 등의 방식 활용.
- 타임라인과 사용자가 취할 단계에 대해 토론. 토론하면서 스티커 메모, 화이트보드 등 활용. 한 번에 한 단계에 집중하여 토론 진행. 
- 정제된 인공물이 아닌 공통된 이해 형성이 목표
- 사용성 테스트를 기록하고 정보를 추출하기 위해 스토리보드를 만드는 경우 사진이나 비디오스틸 사용하면 시간이 단축되어 편리함. 
- 피그마/스케치/파워포인트 등 상세한 일러스트레이션 사용. 다만 꼭 필요한 경우가 아니라면 영상을 미세 조정하는 데 많은 시간을 소비하지 말 것. 

5. 5단계 : 감정 및 장면에 대한 세부 정보 추가
- 이모티콘 사용시 사용자가 주어진 순간에 경험하는 느낌을 보여줌. 

6. 6단계 : 시각 자료 작성 및 캡션 추가
 - 보드판 활용. 시각자료에 글 머리 기호로 캡션 추가.

7. 7단계 : 좋은 카피 만들기
- 1차 스토리보드에 넣을 좋은 카피 제작. 이때 다양한 클라우드 소프트웨어 활용 가능. 

---

[스토리보드 제작]
1. 설정샷 만들기 : 이야기가 언제, 어디서 발생하는가. 포스트잇을 활용하며 필요에 따라 신속하게 재배열, 폐기 및 교체 가능. 

2. 주인공과 갈등상황 제시 : 주인공은 서비스 이용자. 갈등은 주인공이 처한 문제상황. 갈등상황에서 주인공이 느끼는 바를 제시해야 함. 

3. 엔딩 만들기 : 모든 것이 해결된 상황에서의 결과를 제시. 주인공의 감정을 시각적으로 표현해야함.

4. 반대로 작업하기 : 메인 플롯을 제외한 나머지 이야기를 채우기 위하여 반대로 작업하기 필요. 

5. 수정하기 : 제안한 내용을 비판적으로 살펴보기
- 디자인 목표를 달성했는가
- 주인공은 어디에서 실수를 할 수 있는가
- 주인공의 노력을 어디에서 줄일 수 있는가
- 비현실적으로 느껴지는 부분은 없는가

6. 템플릿을 활용하여 스토리보드 정리