중고거래 플랫폼,
Sellpy의 UX 개선하기 (하)
스웨덴 디자인 스쿨 하이퍼 아일랜드 유학 이야기 #14
사용자 여정 지도 그리기
인사이트를 어떻게 컨셉으로 연결할지 고민하던 중 마침 뉴욕의 디지털 에이전시 Work & Co의 디자인 디렉터 로렌 샤피로 Lauren Shapiro 가 컨셉 만들기와 초기 단계 프로토타입 만들기에 대한 워크숍을 진행했다. 로렌은 컨셉을 만들기 위한 두 가지 방법을 소개했다. 먼저 클리셰와 가설 연결하기. 먼저 브리프에 맞게 업계와 문제를 설정하고 이 주제와 관련된 클리셰를 적는다. 여기서 클리셰는 보편적으로 해온 방식이라고 생각하면 된다. 그다음 클리셰와 반하는 파괴적인 가설을 세운다. 파괴적인 가설은 추후 테스트할 비합리적인 예측을 말한다. “배터리가 필요 없는 스마트폰이 있다면 어떨까?” 정도를 예로 들 수 있다. 가설은 클리셰를 뒤집거나, 부정하거나, 규모를 키우는 방식으로 세울 수 있다.
As a [ 퍼소나 : 처음 유럽여행 가는 대학생 ],
I want to [ 목표 : 공항에서 체크인 ],
So that [ 가치 : 여행 시작 ].
마지막으로 사용자 여정 지도 Customer Journey Map 가 필요하다. 사용자 여정 지도는 사용자가 서비스와 상호작용하는 단계를 차례대로 연결한 것으로 사용자와 공감대를 이루고, 무엇이 빠져있는지 확인하기 위해 사용한다. 사용자가 이루고 싶은 목표, 그를 위해 사용자가 해야 하는 활동, 거기서 사용자가 느끼는 감정으로 구분할 수 있다. 사용자 여정 지도에 최악의 상황에서 생길 수 있는 경험을 단계별로 위치시키고, 현재 서비스에서 무엇이 부족한지 파악하여 이를 해결할 컨셉을 만든다.
이렇게 만든 컨셉을 어떻게 설명하면 기획자, 개발자, 클라이언트 등 다른 사람이 이해하기 쉬울까. 로렌은 초기 단계 프로토타입이면 가능하다고 말한다. 시작 단계에 프로토타입을 만들면 이해 당사자와 커뮤니케이션하기 쉽다는 점 외에도 아이디어가 실현 가능한지 빠르게 알아보고, 사용자에게 빠른 피드백을 받을 수 있으며, 나쁜 아이디어를 시작부터 거를 수 있다는 장점이 있다. 프로토타입은 종이, 디자인, 코드 세 가지 방식으로 만들 수 있으며 상황과 목적에 따라 그에 맞는 걸 만들면 된다.
종이 프로토타입은 컨셉 개발 초기에 말 그대로 종이에 화면을 그려서 만드는 것으로 주로 팀 내부 커뮤니케이션을 위해 사용되고, 인비전 InVision 혹은 키노트에 얹어 UX 흐름을 파악하는 데도 사용된다. 디자인 프로토타입은 종이와 마찬가지로 컨셉 개발 초기에 만드는 것으로 화면 전환과 애니메이션이 어떻게 구현되는지 확인하는 데 집중되어 있으며, 주로 클라이언트 커뮤니케이션과 사용자 테스트에 사용된다. 키노트, 인비전 InVision과 더불어 애프터 이펙트 After Effect, 프린시플 Principle 등을 사용한다.
마지막 코드 프로토타입은 디자인 프로토타입과 마찬가지로 클라이언트에게 설명하는 데 주로 사용되는데, 사용자 인터페이스 디자인, 인터랙션을 실제와 유사하게 구현하여 진짜에 가까운 사용자 테스트를 진행할 수 있다. 실제 코딩 외에도 오리가미 Origami, 프레이머 Framer , 플린토 Flinto, 프린시플로 코드 프로토타입을 만들 수 있다. 때에 따라 스토리보드로 대체할 수도 있다. 이틀 동안 진행된 짧은 워크숍이었지만, 우리가 무엇이 부족하고, 무엇을 해야 하는지 알기에는 충분한 시간이었다.
아이데이션
우리는 일단 세 가지 인사이트를 바탕으로 HMW 질문을 만들었다. 어떻게 하면 웹사이트에 있는 정보를 사용자에게 더 명확하게 전달하고 올바른 기대를 형성할 수 있을까. 이 문장을 가운데에 적고 아이디어 스피드 데이팅을 시작했다. 1시간 만에 나온 다양한 아이디어에서 각자 마음에 드는 아이디어를 하나씩 뽑았다. 아이디어는 크게 세 가지 방향으로 나눌 수 있었다. 하나는 사용자와 대화하는 인터랙션 만들기, 다른 하나는 정보구조 간결하게 정리하기, 마지막은 스토리텔링으로 서비스 소개하기. 우리는 로렌이 알려준 대로 종이 프로토타입부터 만들어보기로 했다. 보기에는 한참 부족하지만, 핵심 기능은 구현했기 때문에 방향 설정에 큰 도움을 주었다.
대화하는 인터랙션 아이디어는 상단에 페이지 하단에 상태 바를 만들었다. 상태 바의 목표는 사용자에게 정확한 서비스 사용 방법을 알려주는 것으로 진행 단계에 따라 사용자에게 가이드와 피드백을 주도록 디자인했다. 정보구조 간결화 아이디어는 먼저 사용자가 방문 목적에 맞게 서비스를 이용할 수 있도록 랜딩 페이지에 상품을 판매와 구매 버튼을 만들었다. 그리고 사용자가 사이트를 조금만 살펴봐도 서비스를 이해할 수 있게 정보 구조를 단순하게 만들었다. 스토리텔링 아이디어는 랜딩 페이지에 서비스 소개 영상을 넣고, 설명을 도식화시키기로 했는데 이는 사실 어디에나 적용할 수 있으므로 다른 두 아이디어에 녹여내기로 했다.
우리는 프로토타입을 들고 인더스트리 리더 하파엘을 만났다. 하파엘은 두 가지 프로토타입을 보면서 아이디어에는 서비스의 뼈대를 이루는 기초 아이디어, 시장을 선도하는 서비스가 가진 선도 아이디어, 서비스의 차별점이 되는 핵심 아이디어가 있는데, 우리 문제가 무엇이고, 그 상황에서 어떤 아이디어가 필요한지 생각해보고, 두 아이디어를 그에 맞춰서 수정하면 좋을 것 같다는 피드백을 주었다. 그리고 시간이 많지 않기 때문에 완벽한 정보구조, 와이어프레임, 카피라이팅, 프로토타입보다 컨셉, 아이디어, 인터랙션을 잘 보여줄 수 있는 방향으로 발전시켜보라고 덧붙였다.
목적에 맞는 프로토타입
우리에게는 어떤 프로토타입이 필요할까. 우리는 마인크래프트를 개발한 게임 회사 모장 Mojang의 익스피리언스 디자이너 오스카 닐슨 Oscar Nilsson 이 목적에 맞는 프로토타입 만들기라는 주제로 진행한 강의에서 힌트를 얻을 수 있었다. 그는 프로토타입 만드는 목적을 탐험, 커뮤니케이션, 평가로 나누어서 설명했다. 먼저 탐험하기 위한 프로토타입은 이것저것 만들어보고 실험해보면서 다양한 분야를 탐험하며 시야를 확장하고, 새로운 아이디어와 관점을 찾아내기 위해 사용한다.
그다음은 커뮤니케이션하기 위한 프로토타입으로 가설을 검증하고, 내러티브를 만들고, 동료, 투자자, 클라이언트를 설득하는 데 사용한다. UI와 UX 둘 중 어디에 초점을 두고 작업해야 하냐는 질문에 그는 UI가 분명 사람들의 시선을 빼앗아서 아이디어 전달과 피드백받기에 방해가 되지만, 때에 따라서는 UI 작업에 공을 들여 아이디어를 먼저 팔고 UX는 마치 트로이 목마처럼 은밀히 들어가게 만드는 방법도 있다고 답했다.
마지막은 평가하기 위한 프로토타입으로 기술적으로 가능한 아이디어인지 확인하고, 전후 맥락을 제공하여 전체 UX 흐름을 확인하여 사용자 테스트하는 데 사용한다. 가령 내비게이션이라면 단순히 화면뿐 아니라 차량 내부까지 디자인하여 총체적인 관점에서 내비게이션이 어떻게 동작하는지 테스트할 수 있다. 오스카도 다양한 프로토타이핑 툴을 소개했는데, 자신은 주로 개발자와 일하면서 UX 디자인보다 인터랙션 디자인 작업 위주로 하므로 코드로 동작하는 프로토타이핑 툴인 프레이머나 오리가미를 사용한다고 말했다.
프로토타입 만들기
이제 콘셉트 탐험을 위해 종이로 만든 프로토타입에서 나아가 클라이언트와 커뮤니케이션하기 위한 프로토타입을 만들 차례. 여기서부터는 두 팀으로 나누어 작업을 진행했다. 칼레는 대화하는 인터랙션 아이디어 디자인을 맡았고, 마리, 엘렌, 미사키, 에스텔은 정보구조 간결화 아이디어 디자인을 맡았다. 루카스는 UX 리드로 전체 디자인이 통일성을 갖도록 정리하고, 내가 이어받아 마무리 UX 흐름과 인터랙션 작업을 하기로 했다. 스케치로 디자인하고, 인터랙션은 프레이머로 작업했다.
대화하는 인터랙션 아이디어는 이미 완성된 상세한 스토리보드에 따라 디자인 작업만 하면 되는 상황이라 그리 많은 시간이 들지는 않았다. 정보구조 간결화 아이디어의 경우 사이트 구조를 체계적으로 만들어 사용자가 더 쉽고 빠르게 정보를 파악할 수 있게 만드는 게 핵심이다 보니 디자인 작업에 앞서 기존 사이트에 어떤 정보가 있고, 어떤 구조로 만들어져 있는지 파악하고, 사용자가 입장에서 재분류한 후, 논리적인 순서에 따라 재배치하는 작업이 필수였다. 게다가 사람도 많아서 시간이 오래 걸릴 수밖에 없었다.
두 팀이 디자인 작업에 매진하는 동안 나와 루카스는 두 팀을 넘나들면서 작업 진행 상황을 파악했다. 루카스는 조금씩 도와주다가 모든 팀의 디자인 작업이 끝난 후 최종 스케치 파일을 넘겨받아 폰트, 색, 간격, 로고 등 전체적인 톤 앤 매너를 정리했다. 나는 프레이머는 스케치 파일을 그대로 가져와서 작업할 수 있었기 때문에, 프레이머로 버튼, 탭, 마이크로 인터랙션, 드롭다운 메뉴 등 그때그때 필요한 기능을 미리 구현해두고, 디자인 작업이 끝날 때마다 바로 넘겨받아서 미리 써놓은 코드와 연결했다. 이 과정을 통해 실제 사이트처럼 동작하는 두 가지 프로토타입을 완성했다.
프레젠테이션 그리고 마무리
우리는 방 하나에 우리가 진행한 모든 걸 벽에 붙이고 클라이언트를 학교로 초대했다. 벽 아래에는 리서치, 아이데이션, 스케치를 붙이고 시선이 머무는 곳 부근에 이런 프로세스를 통해 정리된 인사이트, 아이디어, 프로토타입을 배치했다. 발표는 미사키와 엘렌이 맡았고, 준비한 대로 자연스럽게 흘러갔다. 리서치, 사용자 인사이트, 전략, 아이디어를 지나 마지막 프로토타입 차례가 되었다. 나는 간단한 시연을 맡았다. 클라이언트는 진지한 표정으로 프로토타입을 살펴보면서 어떻게 만들었는지, 어떻게 적용할지에 관해 물었다.
이어서 우리는 클라이언트와 테이블에 둘러앉아 간단한 질의응답을 진행했다. 클라이언트는 기대한 것보다 더 많은 인사이트와 아이디어를 얻어가서 기쁘고 어떤 사고 과정을 통해 아이디어가 탄생한 지 알 수 있어서 재미있었다고 말했다. 브리프에서 나아가 비즈니스 모델, 브랜드 전략, 마케팅 전략, 이벤트 등에 대해 어떻게 생각하는지, 어떻게 하면 개선할 수 있을지 물어보았다. 잠시였지만 브리프의 문제를 해결해주는 수준을 넘어 함께 비즈니스에 대해 고민할 수 있는 파트너가 된 기분이라 뿌듯했다. 그렇게 2시간에 걸친 최종 프레젠테이션을 마지막으로 두 번째 모듈도 끝이 났다. 6주라는 짧은 기간이었지만 프로젝트, 워크숍, 강의를 통해 UX 디자인이 무엇인지, 인터랙션 디자인이 무엇인지 직접 겪으며 배울 수 있었다. 팀 빌딩과 제대로 된 팀 워크에 대해서도 생각해 볼 수 있는 시간이었고, 또, 어렴풋이나마 내가 하고 싶은 것이 무엇인지, 흥미를 느끼는 것이 무엇인지에 대해서도 알게 되었다.
+
디자인 매거진 CA에 실린 하이퍼 아일랜드의 기록 3부 UX 모듈 기사 초고의 일부입니다.
원고 전문은 CA 2018년 3-4월호에서 확인하실 수 있습니다.
