페이퍼 프로토타이핑 가이드
프로토타이핑 배우기 #03
Today UX 아티클
Marvel에 올라온 '페이퍼 프로토타이핑 가이드' 전문 번역한 글입니다.
앱에 대해 가지고 있는 아이디어를 실제 제품으로 바꾸는 것은 여러분이 생각하는 것 만큼 현실과 동떨어진 일이 아닙니다. 보통은 그냥 일단 시작하면 되는 겁니다 –시작하려면, “종이, 펜, 가위, 그리고 상상력만 있으면 됩니다.” (Shawn Medero, Alistapart)
예를 들어, Jack Dorsey는 트위터에 대한 아이디어를 처음 떠올렸을 때, 이렇게 시작했습니다. 아주 기본적인 종이 프로토타입으로 말이죠. 종이 스케치는 Dorsey에겐 트위터에 대한 초기 비전을 표현할 수 있게 해주었으며, 우리에겐 아이디어의 규모와 상관 없이 ‘심플한 스케치’가 시작하는 좋은 방법이라는 점을 알려주었습니다.
트위터의 타임라인- 종이부터 실제 제품까지이번 글에서는 여기서 영감을 얻어 종이로 프로토타이핑을 해야 하는 상황과 그 방법을 비롯해서 종이 스케치에서 시작해서 보다 인터랙티브한 무언가로 아이디어를 발전시키는방법에 대해 얘기해보려고 합니다. 다음은 이번 글에서 다룰 리스트입니다. 관심있는 부분으로 넘어가서 보셔도 됩니다.
섹션1: 왜 종이 프로토타입인가:
종이 프로토타이핑은 디자인으로 들어가는 문턱을 낮추고, 협업하고, 소통하는 데 유용한 이유를 살펴보겠습니다.
섹션2: 종이 프로토타입을 언제 해야 하는가:
종이 프로토타이핑은 디자인 단계 초기에 해야 가장 효과적입니다. 이 부분에선 그 이유를 살펴보겠습니다.
섹션3: 생산적인 종이 프로토타이핑을 하는 요령:
보다 효과적인 종이 프로토타입을 만드는 데 도움이 되는 툴, 테크닉, 템플릿을설명하겠습니다.
섹션4: 종이 프로토타이핑의 미래:
VR 환경에 대한 프로토타입을 만드는 데 종이를 활용하는 방법과 종이 프로토타이핑을 시작하는 데 도움이 되는 몇 가지 템플릿을 소개합니다.
섹션1. 왜 종이 프로토타입인가
종이 프로토타입은, 간단하게말하면, 여러분이 앱에 넣고자 하는 유저 인터페이스 (혹은스크린)을 그린 그림입니다. 종이 프로토타입이 그렇게 효과적일수 있는 이유를 살펴보겠습니다.
디자인 전문가일 필요가 없습니다
잘난척 하는 디자이너들은 온갖 전문 용어, 모범 사례, 여러분이 써야 하거나 쓰지 말아야 할 툴에 대한 의견 등 을 가지고 프로토타이핑을 하는 일에서 여러분을 소외시킬 수도 있습니다.
하지만, 종이로 시작하는 것은 그런 모든 기술적 장벽(예: Sketch 같은 벡터 툴)을 제거해줍니다. 초기에 아이디어를 구체화하는 용도로 사용하는 것이죠. 프로토타입이 얼마나 멋지게 보여지느냐는 상관 없습니다. 여러분이 가진 아이디어를 전달하는 데 도움을 주기만 한다면 말입니다. 바로 그것이 프로토타입의 주 목적입니다.
컬러나 폰트 같은 디자인 디테일은 무시해도 됩니다. 여러분이 마주치게 될 잘난척 하는 디자이너들은Pablo Stanley가 그의 글 ‘The Type Snob‘에서 아주 잘 표현해주고 있습니다.
”제레미, 이 폰트 서로 어울리는 것 같아요?” , “폰트가 아니라 활자체라고 해야 하는데요.”대체로 프로토타이핑엔 누구든 참여할 수 있습니다. 저는 지금까지 프로토타이핑 과정에 참여하는 사람이라면 회사 내 역할이나 경력에 상관 없이 누구나 아이디어를 전달하는 데 종이 프로토타이핑을 사용하는 걸 보았습니다. 그렇게 하면 리더십 관점에서도 더 많은 사람들에게 아이디어에 대한 동의를 구할 수 있습니다. 구성원들이 디자인에 기여하고 새로운 관점을 제시해볼 수 있기 때문입니다.
아날로그가 디지털에 영감을 줄 수도 있습니다.
저희가 하는 일은 대부분 스크린 주변에서 일어나기 때문에, 물리적인 무언가로 시작하는 것은 아주 좋은 방법입니다. 물리적인 것은 우리 인간들에게 더 자연스러운 것이기도 하죠. 물리적 세계가 때로는 디지털 세계에서 만들어질 것에 영감을 줄 수도 있죠.
일례로 구글이 ‘material design’을 만들 때 사용한 접근법을 살펴봅시다. 종이와 카드를 서로 포개보면서 Z축 인터페이스에 대한 실험을 해볼 수 있었다고 합니다. 그들은 디지털 인터페이스에 사용할 ‘머티리얼디자인’을 만들면서 현실 세계의 깊이와 그림자를 스크린에 적용한 것입니다.
종이에서 영감을 받은 Google Material Design이 사례 외에도, Opera는 심지어 공을 활용하거나 동그라미 모양으로 카드를 오려서 실험적인 네온(Neon) 브라우저를 만들 때 활용하기도 했습니다. 그들은 이런 방법을 활용해 인터페이스를 실제로 만지고 보게 되면 보다 몰입할 수 있게 때문에 많은 영감을 받았다고 합니다.
생산적이지 않은 미팅이 줄어듭니다(혹은 효과적인 커뮤니케이션이 늘어납니다)
종이로 프로토타이핑을 하는 것은 누구나 빠르고 효과적으로 앱에 대한 결정을 내리고 아이디어를 소통할 수 있게 해줍니다. 저는 아이디어를 전달 할 때면 언제나 말보단 그림으로 설명하는 것이 더 쉽다는 걸 느끼게 됩니다. (John Maeda말에 따르면) IDEO에서 한 말처럼 말이죠.
“그림 하나가 1000마디말보다 낫다고 한다면, 프로토타입 하나는 1000번의 미팅보다낫습니다”상상해보세요. 종이를 써서 누구나 프로토타이핑 과정을 이해할 수 있게 된다면, 미팅을 덜 해도 되게 되며, 결국엔 미팅을 할 때도 보다 효과적인 미팅을 할 수 있게 됩니다.
한 마디 더 덧붙이자면, 펀딩을 기다리고 있는 스타트업의 경우엔, 벤쳐 캐피털리스트 앞에서 발표할 때 아이디어를 보여주는 것이 단순히 말로 하는 것보다 훨씬 효과적일 수 있습니다.
자존심은 넣어 둡시다.
비즈니스 환경에서 디자인 워크샵을 할 때 사람들에게 종이 프로토타이핑 활동을 시켜보면, 그들이 가진 ‘비즈니스 퍼소나’를 버리고 ‘디자인 씽킹’ 관점을 가져보게 하는 데 도움이 됩니다. 활동이 진행될수록 사람들이 더 이상 말만 하지 않고 실제로 무언가를 만들어보게 되기 때문에 잡음이 줄어드는것을 느끼게 됩니다.
이런식으로 디자이너가 아닌 사람들을 프로토타이핑 과정에 참여시키다보면, 때때로 프로덕트 팀에서 나타나는 ‘우리 vs 그들’이라는 멘탈을 없애는데 도움이 되기도 합니다. 이 점을 IBM의 디자인 리드인 John Morgan은 그의 글 “디자인팀이 좋은 팀을 넘어 위대한 팀이 되게 해주는 4가지 원칙(FourPrinciples That Help Design Teams Go from Good to Great)”에서 강조해주고 있습니다:
“디자이너들 사이에서 자존심은 다양한 방법으로 나타납니다 – 가령 자존심은 ‘우리와 그들’이라는 사고방식으로 나타나기도 합니다.”
Morgan은 훌륭한 제품을 디자인하고 만드는 일에 있어서 소통과 협업이 핵심인 이유와, 서로 다른 스킬을 가진 사람들이 참여하게 하는 방법, 팀원들이 들인 인풋의 합보다 더 가치있는 최종 제품을 만드는 방법 등을 설명합니다.
지금까지 종이 프로토타입을 해야 할 이유를 살펴보았으니, 이제 언제 하면 가장 좋은지 그 목적은 무엇인지 살펴보겠습니다.
섹션2. 종이 프로토타이핑은 언제 해야 하는가
초기 아이디어가 떠오르고 나면, 그 아이디어를 탐색하는 도구로는 종이 프로토타이핑이 가장 좋습니다. 전체 프로세스에서 초기에 사용되면 가장효과적입니다. 유저와 마켓을 이해하는 데 시간을 보낸 후에, 여러분이 해결하고자 하는 문제가 실제 있다는것을 파악했을 때가 가장 이상적인 시기입니다. 목적은 예쁘게 만드는 것이 아니라 ‘빠르게 학습하는 것’입니다. Robert Kiyosaki 이 한 말은 영감을 줍니다.
“더 이상 여러분이 ‘아는것’이 중요한 게 아닙니다. 중요한 건 ‘얼마나 빠르게 배우는가’ 입니다”
빨리 배울 수 있도록 빨리 시작하세요
종이를 사용하는 것의 장점은 높은 피델리티의 툴(예: Sketch나 코딩 등)보다 훨씬 더 사용하기 쉽다는 점입니다. 즉, 많은 아이디어를 더 빠르게 시도해 볼 수 있다는 뜻입니다. 이를 아래 그래프로 표현할 수 있는데, 다양한 피델리티의 프로토타이핑 툴을 사용하는 데 걸리는 시간에 따라 그려보았습니다. 종이 프로토타이핑은 왼쪽 하단에 배치되어 있는데, 가장 적은 시간이 걸리며 들어가는 노력도 가장 적습니다.
기본적으로, 종이를 사용하면 짧은 시간을 들여 디자인에 대해 더 많은 것을 배울 수 있게 됩니다. 쉽게 수정할 수 있고, 그 위에 포스트잇을 붙일 수도 있고, 버리고 다시 그릴 때 화가 나지도 않을 겁니다.
높은 수준의 피드백을 얻기 위해 종이를 사용하세요
낮은 피델리티인 종이 프로토타이핑을 사용하는 목적은 아름답게 그린 그림과 디자인으로 인해 유저에게 강한 인상을 주지 않으면서, 제품에 대한 방향성과 인사이트를 빠르게 얻기 위함입니다. 그렇기 때문에 앱의 레이아웃이나 플로우 등 큰 개념에 대한 피드백을 받을 때 활용하면 아주 좋습니다.
그러니 제대로 된 방향으로 가고 있다는 걸 깨닫기 전까진 와이어프레임을 완벽하게 만드는데 너무 많은 시간을 쏟지 마세요. 더 자세한 내용이 궁금하시다면, Smashing Magazine 에 올라온 Laura Busche의 글을 참고하세요.
전반적인 구조가 결정되고 나면, 컬러나 애니메이션, 전환효과 등과 같은 후반부의 의사결정에 대한 인사이트를 얻을 수 있는 높은 퀄리티 버전을 만들어도 됩니다.
지금까지 왜 그리고 언제 종이 프로토타이핑을 해야 하는지 살펴봤으니, 시작하는 요령에 대해 알아봅시다.
섹션3. 생산적인 종이 프로토타이핑을 하는 요령
시작하는 것은 쉽습니다. 무엇이든 마음 속에 떠오르는 것을 그리면 됩니다. 하지만 보다 유용한 프로토타입을 만들기 위해서는 다음과 같은 팁을 따라보세요.
1. 유저와 함께 시작하기
마음 속에 유저를 두고 시작하게 되면, 유저가 그들의 목표를 달성하는 데 도움이 되는 제품인지 보장할 수 있습니다. 다음 몇가지를 고려해보세요.
앱에 있는 각 스크린은 유저가 하고 싶어하는 태스크와 얼마나 잘 어울리는가?
어떤 맥락에서 이 앱은 사용될 것인가? 유저는 운전 중일 것인가? 달리기를 하는 중일 것인가?
유저가 회원가입을 할 필요가 있는가? 뉴스피드를 넣을 것인가? 유저의 목표에서 시작하다 보면 정보 구조에 대한 초안을 생각해보는 데도 도움이 됩니다.
아이디어가 몇 가지 떠오르고 나면, 그려보세요. 다음은 시작하는 데 도움이 되는 몇 가지 훌륭한 템플릿입니다.
https://marvelapp.com/static/site/downloads/devices.pdf
Maxime De Greve 가 만든 프로토타입 탬플릿
Sneakpeekit의 프로토타입 탬플릿2. 적절한 인사이트를 얻기 위해 피델리티를 다양화하기
프로토타입의 피델리티가 여러분이 얻고자 하는 인사이트의 유형과 매치가 되는지 확인해야 합니다.
매우 낮은 피델리티로 유지하면서 컬러, 폰트, 인터랙션을 제외시키면, 큰 그림에 대한 피드백을 얻을 수 있으며 앱의 레이아웃이나 구조에 대한 답을 얻게 됩니다. 이 단계에서 “OO 서체가 더 낫겠네요” 라거나 “빨간색으로 버튼을 바꾸면 어떨까요?”라는 말을 기대하진 않을 겁니다.
디자인에 대한 확신이 더 생겼다면, 디자인에 좀 더 시간을 들여보세요. 여러분이 기대하는 피드백의 유형이 바뀌었을 테니까요.
프로토타입의 피델리티를 높여 가다보면 인터랙티브까지 넣게 되는 순간이 올 겁니다. Marvel 모바일 앱을 사용하시면 정적인 프로토타입을 클릭 가능한 프로토타입으로 바꿔줄수 있습니다.
인터랙티브한 종이 프로토타입을 만들어보세요이 방법은 종이 프로토타입을 높은 피델리티의 종이 프로토타입으로 바꾸는 가장 빠른 방법 중 하나입니다. 스크린을 사진으로 찍어서 인터랙션을 줄 부분을 설정하면 됩니다. 폰으로 사진을 찍는 것 만큼 쉽습니다. Matthew McConaughey는이렇게 말했습니다.
“작가가 되고 싶으신가요? 글쓰기를 시작하세요. 영화감독이 되고 싶으신가요? 지금 당장 폰으로 뭔가를 찍기 시작해보세요.”
저는 Marvel을 활용해 프로토타이핑을 하는 데도 거의 똑같이 적용 가능한 말이라고 생각합니다. 심지어 전세계 어디서든 누구라도 프로토타입을 써볼 수 있게 해주기 때문에 더 도움이 됩니다.
3. 탐색 – 여러 디바이스 고려하기
종이 프로토타이핑을 할 때, 최종적으로 어떤 스크린사이즈로 디자인을 하게 될지 모릅니다. 때문에 모든 스크린 사이즈를 생각하면서 시작하는 것이 가장 좋습니다. 간단한 ‘좋이 접기’로 도움을 얻을 수 있습니다.
1) A4용지 하나를 준비합니다. 이것이 데스크탑 스크린입니다. 데스크탑 스크린은 어떻게 디자인하실 건가요?
2) 반으로 접습니다. 이것은 태블릿이나 작은 랩탑의 스크린입니다. 공간이 줄어들었죠.
3) 다시 반으로 접으면 패블릿(phablet) 사이즈가 됩니다.
4) 그 다음은 스마트폰과 스마트워치가 되겠습니다.
이 방법이 내용과 기능의 우선순위를 정하는 데는 도움이 되긴 하지만, 때로는 앱이 모바일에서만 사용될 것이라는 점을 알고 있을 수도 있습니다. 가령 달리기를 할 때 사용될 스포츠 앱이라면 그렇겠죠. 혹은 큰 화면에서만 사용될 무언가를 만들 수도 있습니다. 사무실용보드 혹은 15인치짜리 박스 모니터만 있는 구식 사무실에서 일하는 사람들을 위해 원가를 만든다면 말이죠.
이처럼 상황에 따라 달라지겠지만, 이 방법이 다양한 관점에서 생각해보는 데 도움이 되긴 할겁니다.
4. 인간-로봇테스팅
사람들에게 프로토타입을 테스팅하거나 보여줄 때 (종이 그림에 간단한 인터랙션을 적용한 앱을 활용하지 않고) 종이를 그대로 보여주고 싶을 수도 있습니다. 이런경우라면, 컴퓨터의 역할을 해줄 사람이 필요합니다.
이런 걸 말하는 건 아닙니다. 목표는 유저가 앱에 대해 어떻게 반응하는지 보는 것이죠. 테스팅 프로세스를 간단하게 살펴보자면 다음과 같습니다.
1. 역할을 정합니다
- 유저: 테스트 참가자(많을수록 좋음)
- 퍼실리테이터: 테스트진행 및 기록하는 역할
- 인간 컴퓨터: 유저의 인터랙션에 따라 종이를 움직이는 역할
2. 유저를 위해 분위기를 조성합니다
유저에게 그들의 역할을 말해주고 달성해야 할 목표를 줍니다 (예: 이미지 갤러리를 찾고 고양이 사진을 올려본다)
3. 유저가 종이 프로토타입을 (실제스크린이라고 여기면서) 이용하기 시작하면 ‘인간 컴퓨터’가 아무말 없이 종이를 움직여줍니다. 컴퓨터처럼 말이죠. 이렇게 하면 됩니다.
종이로 사용성 테스팅을 하는 방법에 대한 자세한 가이드는 아래 글을 참고하세요.
섹션4. 종이 프로토타이핑의 미래
지금까진 스크린을 디자인하는 방법을 살펴보았는데요. 그렇다면 가상 현실(Virtual Reality) 같은 다른 매체에도 종이 프로토타입을 적용할 수 있을까요? 다른 디자이너들이 VR 프로토타이핑에 종이를 활용해 접근한 방법을 간략하게 살펴보는 것으로 마무리해보겠습니다.
페이스북(이전엔 구글에 있었던)의 Jean-Marc Denis 은 그가 VR을 디자인할 때 사용하는 첫 번째 툴이 종이라고 말합니다. 심지어 Sketch 전에 사용한다고 합니다. 종이 프로토타이핑의 저렴함과 속도 때문에 이를 이길 수 있는 것이 없다고 합니다.
“VR에서는 와이어프레임에서 높은 피델리티로 넘어가는 데 2D보다 더 많은 비용이 듭니다”
Volodymyr Kurbatov은 여기서 한 발 나아가 그의 글 “Draw sketches for virtual reality like pro“에서 VR앱을 스케치하는 전체 과정을 다루고 있습니다. 그는 VR 씬을 스케치하는데 활용할 수 있는 몇 가지 유용한 탬플릿을 공유하는 것부터 시작해서, 360도 포토 뷰어를 활용해서 스케치를 VR로 확인하는 방법까지 다루고 있습니다. 아래 영상을 참고하세요.
그의 글을 보시면 무료 탬플릿을 얻을 수 있습니다.
VR에서 활용할 수 있는 종이 프로토타이핑 탬플릿과 더불어, Sketch 탬플릿도 보입니다. 종이는 아니지만 2D환경에서 VR에 접근하는 방법을 볼 수 있다는 점에서 흥미롭습니다. Sketch 탬플릿에서 얻은 교훈을 종이에 적용할 수도 있을 것입니다. 다음은 VR 프로토타이핑 분야에서 놀라운 작업을 하고 있는 Kickpush 예시입니다.
종이의 한계
종이 프로토타입이 훌륭한 방법이긴 하지만, 당연히 한계도 있습니다. 예를 들어, 유저가 많은 상상력을 발휘해야 하기 때문에 덜 정확한 결과가 나올 수도 있습니다. 더욱이 Google Ventures의 Jake Knapp는 종이 프로토타이핑이 시작할 때는 좋은 툴이 되지만, 유저 테스팅에는 별로 적합하지 않다고 주장합니다.
시작하세요, 그리고 다함께 참여하세요.
종이 프로토타이핑은 초기 아이디어를 내고 탐색하는 데 여러 사람이 함께하게 해주는 훌륭한 방법입니다. 초기단계에서 매우 유용한 방법이기 때문에, 팀원들이 디자인 프로세스에 참여하고 몰입하게 해주는 완벽한 기회를 제공해주기도 할 겁니다. 그렇게 초반부터 참여하게 되면 높은 피델리티의 디자인으로 나아가면서, 계속 관심을 가지고 참여할 확률이 높아집니다.
예를 들어, Huddle에서는 디자이너 뿐만 아니라 프로덕트 매니저, 품질관리 팀,개발자, 커머셜 팀 등이 저희 프로토타이핑툴 Marvel을 사용하고 있습니다. 즉, 초기부터 참여하게 되면 전체 과정에있어서 함께 갈 수 있다는 겁니다.
행운을 빕니다!
감사합니다.
라이브클래스 (줌 Live) UX 스터디 신청 프로그램 안내
1. 줌 Live!!! (실무자) 프로덕트 디자이너를 위한 UX 실무 과정: 총 26회, 총 78시간 (월/수/금 PM 8:30-11:30)
2. 줌 Live!!! (취준생) UX 포트폴리오 부트 캠프 과정: 총 21회, 매주 토/일 PM 8:00-11:00 (OT 1회, 이론 10회, 포플 피드백 10회)
3. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 사용성에 대해 깊이 파고 들고, 프로덕트 역량 키우기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오전 10시-오후 1시)
4. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UI와 인터랙션 원칙에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오후 3시-6시)
5. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 HCI와 UX 정의에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오전 10시-오후 1시)
6. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 프로세스 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오후 3시-오후 6시)
7. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 리서치 기초 뼈대 튼튼히 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (화 오후 8시30분-오후 11시30분)
8. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 원칙&디자인 가이드 뼈대 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (목 오후 8시30분-오후 11시30분)
라이브클래스 (VOD) 프로그램
UX 스터디 참석하지 못한 분을 위해, VOD 강의 촬영하였습니다
(일부 강좌만 VOD 오픈하였고,
그 외 강좌는 아직 VOD 편집 중이며 곧 오픈 예정입니다!!!!)
(VOD) UX 로드맵 시리즈 #1. UX 취업, 면접, 포플
(VOD) UX 로드맵 시리즈 #2. UI, 인터랙션, UX 정의
(VOD) UX 로드맵 시리즈 #3. UX 가설 설계
(VOD) UX 로드맵 시리즈 #4. 데스크 리서치
(VOD) UX 로드맵 시리즈 #5. 유저 컨텍스트 리서치
(VOD) UX 로드맵 시리즈 #6. UX 리서치 분석 및 UX 전략 수립
(VOD) UX 로드맵 시리즈 #7. UX 설계
(VOD) UX 로드맵 시리즈 #8. U8 설계 단계 리서치
(VOD) UX 로드맵 시리즈 #9. UX 디자인 가이드 원칙
