웹 디자인이나 앱 디자인 업무를 진행하면서 중요한 것은 무엇일까? 바로 기획자와 클라이언트의 의도를 정확하게 파악하고 조율해나가는 것이다. 디자이너가 아무리 예쁘고 멋있게 사이트를 꾸며도, 기획자나 클라이언트의 의도에서 벗어난다면 작업을 다시 갈아엎어야 하는 상황이 얼마든지 일어날 수 있다.
그리고 불행히도 기획자와 디자이너의 의견이 한 번에 맞아떨어지는 일은 그리 많지 않다. 대부분의 경우 의견을 다시 조율하고 고치고의 반복이 일어날 수밖에 없다.
그래서 필요한 작업이 디자인 프로토타이핑이다. 간단하게 표현해서 샘플을 만드는 일이다. 넥슨 아메리카에서 시니어 디자이너로 재직 중인 이종환 디자이너는 이 프로토타입을 '선택'이라고 표현했다. 그는 강연을 통해 프로토타입의 중요성과 노하우, 그리고 몇 가지 프로토타입 툴을 소개했다. /디스이즈게임 이승운 기자
■ 프로토타입은 무엇인가
이종환 디자이너는 프로토타입을 '선택'이라고 표현한 것에 대해, "선택을 통해 실패와 성공 두 가지에 대한 학습을 하고, 그 학습 과정을 통해 하나의 성공적인 결과를 얻는 것"이라고 설명했다.
업무를 진행하다 보면 전혀 알지 못하는 길을 걷게 될 수도 있고, 이미 알던 길을 가더라도 수 많은 변수를 통해 의도하지 않은 결과를 얻는 경우가 많다. 그래서 선택의 리스크를 줄이고자 학습을 통한 경험으로 가설을 세우고, 이를 통해 성공으로 보다 안전하게 가도록 하는 것이다.
성공적인 결과를 위한 선택의 과정과 학습, 그리고 수 많은 시도를 통해 얻는 교훈, 이를 바탕으로 세워지는 가설들. 이를 프로토타이핑이라 정의했다.
웹, 앱, UI/UX 디자인에서의 프로토타입은 크게 세 가지로 분류할 수 있다. 하나는 이미지 등의 비주얼 없이 레이아웃 뼈대만으로 이루어진 와이어프레임. 하나는 전체적인 톤이나 모드, 블렌딩을 체크할 수 있는 비주얼 목업. 하나는 실제 완성품과 흡사하게 움직임 등이 구현된 인터랙션 프로토타입이다.
한 마디로 줄여서 표현하자면 프로그래머가 작업에 들어가기에 앞서 디자이너가 최대한 실물과 비슷한 디자인 샘플을 만들어내 각 요소를 체크하는 것이 프로토타입인 것이다.
■ 디자인에서 프로토타입이 필요한 이유는?
디자이너가 직접 움직이는 프로토타입까지 만들어내야 하는 이유는 간단하다. 일단 디자이너와 개발자는 '언어'가 통하지 않는다. 그리고 기획자와 디자이너 사이에도 언어의 장벽이 있다. 이를 나타낼 아주 산뜻하고 좋은 표현이 있는데, 바로 "느낌 같은 느낌"이다.
직접 생각해 봐도 표현이 너무 모호하다. "분석이 분석적이지 않다"든가, "레이아웃이 느낌적인 느낌"이라든가, "칼라가 좀 더 어두우면서도 화사한 느낌이었으면 좋겠다"든가. 참고로 어둡지만 화사한 느낌은 이종환 디자이너도 실제로 겪어본 주문이었다.
그래서 화성에서 온 디자이너, 금성에서 온 개발자라는 말도 있다. 가장 많이 협업을 해야 하는, 그러나 서로 다른 언어를 사용하는 두 직군 사이의 공용 언어를 프로토타입이 맡는 셈이다.
사실 프로토타이핑은 이전에도 많이 하던 작업이다. 하지만 그게 이제와서 더 주목받는 이유가 있다. 예전에는 기획자가 와이어프레임 등으로 뼈대를 만들면 그 위에 살만 예쁘게 붙이면 충분했다. 그런데 지금은 시대가 바뀌었고, 모바일 디바이스의 성능이 향상되며 인터랙션이 필요해졌다.
예전엔 단순하게 비주얼로 표현됐던 부분에 인터랙션이 결합되면서 다양한 결과물이 나오기 시작했다. 단순히 그림만으로는 설명이 어려워졌고, 자연히 디자이너의 손에서 나오는 인터랙션 결과물에 대한 관심이 높아진 것이다.
그렇다면 효과적인 디자인 프로토타입이란 무엇일까? 이종환 디자이너는 효과적인 프로토타입의 요소로 '신속한 전달', '최소한 비용', '효율적 협업'을 꼽았다.
이 중 가장 중요한 것은 바로 신속이다. 프로토타입은 최대한 빠르게 나와야 다양한 관찰과 판단을 할 수 있고 업무가 효과적으로 진행된다. 피드백이 있다면 다시 빠르게 고치고, 빠르게 고치고. 이걸 반복 학습하는 과정에서 정확한 데이터를 뽑아낼 수 있어야 한다.
일반적인 기획->디자인->개발->테스트 단계를 거치는 것이 아니라, 다소 과정이 뒤죽박죽이 되더라도 빠른 테스트로 빠르게 결과를 얻고, 빠르게 학습하고, 빠르게 가설을 세우는 것을 반복하는 것이다. 실패를 미리 학습하고 정확한 방향을 추론하기 위해서는 결국 빠르게 많이 만들어보는 것이 중요한 것이다.
■ 효과적인 프로토타입을 위한 생각
일반적으로 프로토타입 제작을 하면서 머릿속에 떠오르는 몇 가지 신경써야 하는 부분이 있다. 그 중 첫 번째는 "얼마나 디테일하게 만들어야 하는가"다.
우선 이 이미지를 보자. 컬러에서 차이가 느껴지는가? 실제로는 차이가 있으면서도 별 차이가 없다. 마치 폰트 사이즈 12와 13의 차이 같은 미묘한 정도다. 프로토타입에서 지나치게 이런 비주얼 디테일에 집착하면 신속함이 떨어질 수밖에 없다. 비주얼 요소 보다는 흐름과 느낌에 맞춰가며 진행하는 것이 좋다.
또한, 비주얼 작업을 빠르게 넘기다 보면 부분부분 빈틈이 보이기도 한다. 심하면 안 되겠지만, 적당한 빈틈은 의도하지 않은 유쾌한 결과를 만들기도 한다. 작은 빈틈을 통해 서로의 아이디어를 공유하고 발전시킬 기회가 만들어지는 경우도 있다.
두 번째로 생각해볼 건 "뼈대가 얼마나 충실한가"다.
실제로 링크와 간단한 인터랙션으로 구현된 와이어프레임, 혹은 플로우 디자인은 생각 이상으로 큰 힘을 발휘한다. 요소들의 배치가 정확히 되었는지, 기대와 판단과는 다른 결과들이 있지는 않은지, 추가해야 할 내용과 제거해야 할 내용을 구별할 수 있는 단계다.
이 섹션이 얼마나 충실한가에 따라 제품 전반의 품질이 좌지우지되는 셈이다. 유저가 어떻게 불편을 느끼는지, 무엇을 원하는지를 빠르게 체크하도록 하자.
세 번째는 "개발의 한계와 가능성에 대한 이해"다.
디자이너가 프로그래밍 언어를 반드시 알 필요는 없다. 애초에 전공 분야가 다른 만큼 디자이너에게서 개발자만큼 시간과 결과에 대한 만족스러움을 얻기는 어렵다. 하지만 개발의 한계점, 또는 가능성에 대한 기본적인 부분은 반드시 이해하고 있어야 한다는 것이다.
흔히 인터넷에서 "개발자 : 우와 신기하다! 이건 어떻게 만드는거야?", "디자이너 : 그건 니가 생각해야지" 같은 농담을 볼 수 있다. 과장된 농담이지만, 적어도 개발자에게 '불가능한 주문'을 하지 않으려면 디자이너에게도 기본적인 이해가 필요하다.
네 번째는 "티끌 모아 태산"이다.
전체 완성품의 모든 기능이 한 번에 구현되는 프로토타입에 대한 미련은 버려야 한다. 빠른 제작 및 손쉬운 수정, 관리를 위해서는 프로토타입을 여러 개의 조각으로 만드는 것이 일반적인 프로세스 진행에 도움된다. 물론 필요에 따라선 전체가 한 번에 구현돼야 하는 경우도 있지만, 이 경우는 리소스에 대한 충분한 판단이 필요하다.
다섯 번째는 "좌우로 슝슝이요! 느낌 안 오세요?" 같은 표현을 피하는 것이다.
예를 들어 개발자가 샘플을 보며 "이 이미지 슬라이더는 어떻게 움직이나요?" 하고 물었을 때, 디자이너가 "오른쪽에서 왼쪽으로 부드럽게 슈우웅 오다가 탁탁 서는 느낌이요" 하고 대답하는 경우다. 그리고는 설명할 만큼 했다고 생각한다.
이건 가장 기본적인 문제다. 말로 설명하지 말고 샘플을 보여주자. 이럴 때 쓰라고 있는 것이 프로토타입이다. 프로토타입 툴은 개발자들과 협업할 때 정말로 강력한 성능을 발휘한다.
마지막은 "상상의 공유"다.
디자이너는 다양한 대화와 정보를 통해 상상에 대한 영감과 통찰력을 얻는다. 그리고 그 상상들을 시각화 시키는 일을 한다. 이종환 디자이너는 이를 '상상의 공유'라고 표현했다.
상상의 공유는 적당한 타협을 위한 과정이 아닌, 올바른 방향을 가기 위한 대화다. 프로토타이핑은 디자인 프로세스의 한 부분이지만, 상상의 공유를 가장 많이 할 수 있는 때이기도 하다.
■ 그래서 추천하는 프로토타입 툴은?
● Sketch 3
Sketch 3는 뛰어난 생산성으로 주목받는다. 많은 수의 화면 디자인을 컴포넌트 기반으로 제작해, 한 번에 여러 화면을 동시에 수정할 수 있다는 장점이 있다. 만약 포토샵으로 진행할 경우 작업 규모에 따라 많은 양의 PSD를 따로 저장하고 관리해야 하는데, Sketch 3에선 하나의 파일로 전체를 진행할 수 있다.
프로젝트 내의 여러 파일을 한 번에 바꾸기도 좋다. 그 중 한 예가 바로 버튼이다. 전체 프로젝트에 동일한 버튼이 1,000개가 있다고 치면, 이걸 클릭 한 번으로 전체 수정이 가능하다. 하나하나 손으로 작업하면 끔찍한 작업인데, 이건 정말로 편한 기능이다. 그리고 대부분의 프로토타입 툴에 호환된다는 점도 장점이다.
단점은 버그가 좀 있다. 툴이 가볍고 장점도 많은데, 이 버그가 유일한 흠이다. 세이브의 생활화가 필요하다.
다른 단점은... 이건 장점이기도 한데, Mac 전용이다. 즉, 디자이너가 Mac을 사야 하는 이유를 합법적으로 설명할 수 있는 프로그램이다. 툴 자체가 가벼운 만큼 그렇게 고가의 기기는 필요 없고, 맥북 정도면 작업하기에 큰 지장이 없다.
● Invision
Invision은 플로우와 인터랙션이 결헙된 프로토타입을 만들 때, 현재 나와있는 툴 중 가장 빠르게 구현할 수 있다. 다른 프로토타입 툴에 비해 간단히 표현 가능한 기능들을 제공하기 때문에 초기 배우는 진입장벽이 매우 낮은 편이다.
현재 나온 프로토타입 툴 중 가장 많이 쓰이고 있는 만큼 업데이트도 능동적이다. 꾸준히 새로운 기능이 추가되고 있으므로 앞으로도 더 유용한 툴이 될 것으로 기대되고 있다. 단점은 빠르게 이것저것 만들 수 있는 대신 기능이 약간 제한적이라는 점이다.
● Framer
Framer는 현재 나온 툴 중 가장 완벽한 표현력을 자랑하는 툴이다. Java스크립트의 일종인 Coffee스크립트를 가지고 코드 기반으로 제작하며, 현재 개발되고 있는 거의 대부분의 앱/웹 인터랙션을 표현할 수 있는 상용화된 툴 중 가장 강력한 성능을 지녔다.
Framer로 제작된 결과물은 코드가 함께 표시되는 만큼(애초에 코드 입력으로 프로토타이핑을 하는 툴이라서) 개발자에게 좀 더 쉽게 구조를 이해시킬 수 있다. 단점은 코드에 대한 지식이 부족할 경우 툴을 배우는 데 상대적으로 시간이 오래 걸린다는 점.
제공되는 예제가 굉장히 많기 때문에 다양한 샘플을 가져다 쓸 수 있다. Copy & Paste는 나쁜 게 아니다. 프로토타입은 빠르게 샘플을 만들고 의견을 나누는 게 목적인 만큼 최대한 활용하도록 하자.
● Origami
Origami는 Framer와 더불어 강력한 성능을 자랑하는 프로토타이핑 툴이다. 코드를 입력하지 않고, 대신 특별한 역할을 하는 '패치'라는 것을 '노드'라는 선으로 연결해가며 프로젝트를 제작하는 방식이다.
폴더처럼 생긴 여러 개의 패치를 선으로 연결하는 만큼 직관성이 매우 뛰어나고, 예제도 다양하게 마련돼 있다. 동작 구조를 해석하기에 무엇보다 좋은 툴이다.
● pixate
Invision은 표현이 너무 한정적이고, Framer나 Origami는 배우기가 절망적인 사람에게 강력히 추천하는 툴이 있다. 바로 구글에서 만든 pixate다. 화면에 보이는 메뉴에서 움직이는 그림 버튼을 눌러 화면 위로 끌어오면 끝이다. 중간 이상급의 프로토타입을 만들기에 매우 적합하다. 그리고 제일 중요한 건데, 공짜다.
단점은 이미지 에셋이 따로 없다는 점이다. 샘플로 쓸 이미지는 포토샵 등에서 만들어서 가져와야 한다. 딱 그정도가 단점이다. 정말로 말도 안되게 환상적인 인터랙션만 아니라면 pixate로 대부분 구현할 수 있다.