UX 디자인에서 스토리보드 활용하기
UX 디자인 배우기 #130
Today UX 아티클
오늘은 UX 디자인에서 스토리보드 활용하기 에 대해 애기하고자 합니다.
Nich Babich의 원문을 번역한 글입니다
워크숍이나 인터뷰 같은 유저 리서치 테크닉은 사용자 경험 디자인 분야에서 일하는 우리에게 익숙한 테크닉입니다. 이런 테크닉을 통해 리서치한 내용을 종합하여 유저 스토리(userstory)와 프로세스 플로우(process flow)로 만들게 됩니다. 그 후엔 퍼소나(persona)나 와이어프레임(wireframe) 등의 작업물을 만들어 팀 멤버들에게 우리의 생각과 솔루션을 전달하게 됩니다. 이 모든 과정에 디자인을 사용할 사용자를 어떻게든 고려하게 됩니다. 보다 나은 제품을 만들기 위해서, 우리는 사용자들의 세상에서 어떤 일이 벌어지는지, 제품이 그들의 삶을 어떻게 하면 개선해줄 수 있을지 알아내야만 합니다. 바로 이 부분에서 스토리보드가 힘을 발휘하게 됩니다.
이번 글에서는 스토리보드를 ‘UX 문제에 대한 해결책을 탐색하고, 다른 사람들에게 그 문제와 해결책을 전달하는 데 도움을 주는 도구’라는 관점에서 다뤄보고자 합니다.
스토리보드란 무엇인가?
스토리보드는 궁극적으로 스토리를 보여주는 여러 장면을 그린 삽화를 뜻합니다. 기본적으로 이미지를 엮어 스토리를 시각화하는 연속 예술(sequential art)의 일종으로 봅니다. 스토리보드는 영화 제작에서 사용되던 방법으로, 월트 디즈니 스튜디오가 1920년대 이후로 프레임 스케치에 사용하면서 유명해졌습니다.
스토리보드는 영화 속 세계를 실제로 만들기 전에 그려보는 데 도움을 주었습니다.
디즈니의 라이언 킹 스토리보드 작업스토리는 정보를 전달하는 가장 강력한 툴입니다.
시각화된다. 그림은 수 천 자의 단어보다 더 가치가 있습니다. 개념이나 아이디어를 이해시키는 데 가장 좋은 방법이 일러스트레이션으로 설명하는 겁니다. 이미지는 의미를 더욱 풍부하게 해주기 때문에 단어보다 훨씬 더 강력하게 정보를 전달합니다.
기억하기 쉬워진다. 스토리는 단순히 사실을 나열하는 것보다 22배 더 기억하기 쉽습니다.
공감하기 쉬워진다. 모든 사람들이 이해할 수 있고 공감할 수 있는 스토리를 전할 수 있습니다. 우리는 보통 우리와 비슷하게 현실 속 문제를 헤쳐나가는 캐릭터에 공감을 하게 됩니다.
몰입하게 된다. 스토리는 관심을 끕니다. 사람들은 이야기에 반응하도록 프로그래밍되어 있습니다. 곧 성취할 것으로 예상되는 일이 앞에 놓이면, 우리는 타고난 호기심을 가지고 더욱 몰입하게 됩니다.
UX 디자인의 맥락에서 스토리보딩이란 무엇인가?
UX에서 스토리보드는 제품에 대한 사용자의 경험을 시각적으로 예측하고 탐색할 수 있도록 도와주는 툴입니다. 유저가 어떻게 시간의 흐름에 따라 제품과 상호작용하는지 그 흐름을 이해하는 데 도움이 될 것이며, 강력한 내러티브를 만드는 방법에 대한 명확한 감도 잡을 수 있게 해줍니다.
UX에서 스토리텔링이 중요한 이유는 무엇인가?
스토리는 디자인 프로세스에서 경험을 포착하고, 공감하고, 탐색할 수 있는 효과적이고 저렴한 방법입니다. UX 디자인 프로세스에서 이러한 테크닉은 다음과 같은 이점을 지니고 있습니다.
첫째. 인간 중심의 디자인 접근 가능
스토리는 분석 데이터에 사람의 얼굴을 붙여주게 됩니다. 스토리보드는 실생활에서 해결책을 찾게 해주기 때문에 디자이너는 유저의 입장이 되어 유저의 관점에서 해결책을 바라보게 해줍니다. 스토리보드를 활용하면 디자이너는 기존의 시나리오를 이해할 수 있을 뿐만 아니라, 잠재적 시나리오에 대한 가설 또한 검증해볼 수 있습니다.
둘째. 보여주고 평가받기
스토리보딩은 팀 기반의 활동으로 디자이너뿐만 아니라 모든 팀원들이 참여해야 합니다. 영화 산업에서와 마찬가지로, 모든 팀원들에게 각각의 장면을 보여주고 비평을 받아야 합니다. 스토리텔링으로 UX에 접근하게 되면 디자인 콘셉트에 대한 영감을 받을 수 있고, 팀원들이 서로 협업해서 일하는 과정에서 디자인하고 있는 대상에 대한 명확한 그림을 다 같이 그릴 수 있게 됩니다.
셋째 반복적 접근법
스토리보딩에서 반복적 접근법은 매우 중요합니다. 스케치를 하는 행동은 디자인 콘셉트를 테스트해보는 것과 같아서, 디자이너들이 저렴하게 혹은 전혀 비용을 들이지 않고 디자인을 실험해볼 수 있습니다. 매우 빠르고 간략하게 만들어지기 때문에 디자인에 대한 지나친 애착을 형성하지 않을 수 있습니다.
나만의 스토리보드 만들기
스토리보딩에 대해 생각할 때, 대부분은 자신의 그림 실력에 초점을 맞춥니다. 좋은 소식은 시나리오 스토리보드를 그리기 시작하기 전까진 훌륭한 그림 실력이 필요하지 않다는 겁니다.
마틴 스코세이지의 영화 ‘좋은 친구들’에서사용된 스토리보드 프레임그림 실력보다 훨씬 더 중요한 것은 여러분이 하고자 하는 이야기 그 자체입니다. 명확하게 정보를 전달하는 것이 핵심이라는 거죠.
디자이너가 가져야 할 주된 스킬은 포토샵이나 스케치 이용 능력이 아닙니다. 시나리오를 만들고 설명할 수 있는 능력이 있어야 합니다.
스토리의 구조는 어떻게 만드는가?
유저 이슈를 다른 사람에게 전달하기 위해 스토리를 시각적으로 나타내고 싶다면, 이를 논리적이고, 이해 가능하고, 설득력 있게 만들기 위해 반드시 준비해야 하는 것들이 있습니다. 스토리의 기본 구성을 이해하고 전체 구성을 작은 블록으로 하나씩 해체해나가다 보면, 보다 설득력 있고 강력하게 스토리를 전달할 수 있게 됩니다. 각각의 스토리는 다음과 같은 기본 구성 요소를 갖추고 있어야 합니다.
첫째. 캐릭터
스토리에 등장하는 구체적인 퍼소나를 뜻합니다. 이들의 행동, 외모, 생각뿐만 아니라 그들이 내리는 모든 의사 결정은 매우 중요합니다. 캐릭터의 마음속에서 어떤 일이 벌어지는지 드러내는 것이 스토리보드에서 캐릭터의 경험을 성공적으로 나타내는 데 있어서 기본이 됩니다.
둘째. 장면
캐릭터가 등장하는 환경을 뜻합니다. (장소와 사람이 등장하는 실 생활 속 맥락을 생각하시면 됩니다.)
셋째. 플롯
디자이너 중에는 배경 이야기에 대한 설명을 먼저 하지 않고 디자인의 디테일을 설명하는 단계로 바로 넘어가는 디자이너가 매우 많습니다. 그런 디자이너가 되지 마세요. 스토리는 구조를 중심으로 만들어져야 합니다. 시작과 중간과 끝이 반드시 있어야 합니다. 스토리보드를 통해 드러나는 서사 구조는 캐릭터의 목표에 집중되어야 합니다.
플롯은 구체적인 트리거에서 시작되어 해결책의 이점 혹은 캐릭터에게 남겨진 문제점 등으로 끝나야 합니다. 플롯의 구조를 잡을 때 프레이타그의 피라미드(Freytag’sPyramid)를 활용해보세요.
스토리는 피라미드와 같은 서사구조를 따르게 됩니다.프레이타그의 피라미드는 발단(Exposition), 상승(RisingAction), 절정(Climax), 하강(FallingAction), 결말(Denouement) 등 다섯 파트로 나뉩니다. Ben Crothers는 위 그림과 같이 한 남자와 제대로 작동하지 않는 그의 폰에 대한 짧은 이야기를 피라미드 서사구조로 표현하였습니다.
강력한 스토리를 만들기 위해서는, 다음에 대해 잘 생각해보시길 바랍니다.
첫째. 진정성
캐릭터와 그들의 목표, 그들이 경험하는 것을 최대한 명확하게 잡는 것이 가장 핵심입니다. 제품에 대해 공감을 할 수 없는 스토리를 쓴다면, 유저는 분명 눈치챌 것입니다. 그러므로, 실제 맥락에서 실제 사용자에 집중하여 쓴다면, 청중들은 그 스토리에 공감하게 될 것입니다.
둘째. 간결성
불필요한 모든 부차적인 부분은 걷어내야 합니다. 문장, 그림, 페이지 등이 얼마나 좋건 상관없이, 전체 메시지에서 부가가치를 내지 않는 부분이라면 제거해야 합니다.
셋째. 감성
경험 전반에 걸쳐 캐릭터의 감정적인 상태를 전달하는 것도 필수적입니다.
스토리보드 활용하여 경험 표현하기
스토리보드를 만들기 시작하는 일이 쉽지 않아 보일 겁니다. 특히 그림 실력이 좋지 않다면 더욱 그럴 것입니다. 하지만 걱정하지 마세요, 아래에서 얘기할 가이드라인을 잘 따라가면 괜찮은 시나리오 스토리보드를 쓰는 데 도움이 될 것입니다.
1단계. 텍스트와 화살표만으로 시작하기
핵심은 스토리를 쪼개서 모먼트(moments)를 만드는 것입니다. ‘맥락’을 제시하는 데서 시작해서 트리거와 캐릭터가 내리는 의사결정을 보여주고, 해결책의 이점이나 문제 자체로 마무리하면 됩니다.
모먼트의 흐름2단계. 스토리에 감성 더하기
각 단계마다 감정을 표시하여 다른 사람들이 캐릭터의 머릿속에서 어떤 일이 일어나는지 알 수 있게 해주세요. 캐릭터가 어떤 일이 일어나길 기대하고 있는지, 그 결과가 캐릭터에 어떤 영향을 미치는지, 각각의 감정 상태를 간단한 이모티콘으로 표현해주세요.
위에서 제시했던 사례에 이모티콘을 추가하여 캐릭터의 감정 상태를 표시해주세요.3단계. 각 단계를 스토리보드 프레임으로 전환하기
각각의 모먼트를 집중적으로 다루며 캐릭터가 어떤 생각을 하는지 고민해보세요.
스토리보드 프레임4단계. 명확한 결과물 만들기
스토리보드가 스토리를 오해의 소지 없이 명확하게 전달해주는지 확인해야 합니다. 만일 좋지 않은 상황으로 끝나는 스토리를 전달하는 스토리보드라면, 마지막에 제시되는 문제에 무게를 두어야 합니다. 반면, 해결책을 제시하는 것으로 끝나는 스토리보드라면, 해결책이 캐릭터에게 제시하는 이점에 초점을 맞추어 끝내야 합니다.
캐릭터의 얼굴에 미소나 슬픈 표정을 추가하여 감정을 표현하게 되면 보는 사람에게 보다 생생하게 전달될 것입니다. Image credit: Chelsea Hostetter, Aust결론
UX에서 스토리보드를 활용하는 것은 쉬운 일이 아닙니다. 하지만 유용하죠. 시각화는 스토리에 생명을 불어넣는 훌륭한 방법입니다. 그러니 가능할 때마다 이를 활용해보도록 하세요. 유저를 이해하기 위해 여러분이 할 수 있는 모든 일은 굉장히 유용한 일입니다.
감사합니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
