프로토타이핑을 고민하는 당신에게
모바일 프로토타이핑 입문서.
티몬의 UX랩에서는 다양한 연구과제를 진행하고 있습니다. 그 중, 서비스 선행프로젝트나 진행중인 프로젝트와 같이 즉시 공개가 곤란한 내용도 있지만, 나누면 좋은 정보들을 꾸준히 공유하고자 합니다. 본 레포트는 UX랩에서 프로토타이핑을 고도화 하고 효과적으로 작업하기 위해 출시된 툴을 점검해 본 리서치 내용입니다. 세상에 공개된 지식을 살펴보고 모아서 저희의 시각과 견해를 보태서 나눕니다.
프로토타이핑, 도전해볼까?
최근 UI 디자인에서 프로토타이핑은 뜨거운 감자 중 하나죠. 브런치만 해도 ‘프로토타이핑’이라는 키워드로 검색하면 전문가들이 남긴 프로젝트 후기나 툴 리뷰 등이 넘쳐나는데요, 인터랙티브한 요소가 필요한 UI 디자인의 특성상 정적인 시안만으로는 검증에 한계가 있고, 그 한계를 극복할 방법으로 프로토타이핑이 점점 더 각광받고 있는 상황이라고 생각합니다.
티몬에서도 프로토타입을 적극적으로 활용하고 있습니다. https://brunch.co.kr/@creative/52 프로토타이핑에 대한 티몬의 또 다른 글을 이쪽에서 만나보실 수 있습니다.
연구를 진행한 저는 아트보드상의 그래픽 디자인에 익숙한 디자이너 이며, 그동안 인터랙티브한 프로토타입을 제작해본 적이 없었는데요, 이번 연구를 저와 비슷한 수준의 디자이너가 어떤 프로토타이핑 툴을 활용하면 좋을지, 각 툴별로 어떠한 역량이 필요한 지 확인하기 위해서 각각의 툴을 조사하고 사용해보았습니다. 그리고 정리한 내용을 이 글을 통해 공유하려고 합니다.
실제로 제로베이스에서 사용해보는 과정을 거쳤기 때문에, 이 글은 저같이 처음 프로토타이핑 툴에 입문하는 UI 디자이너들이 프로토타이핑 툴을 이해할 수 있는 좋은 참고자료가 되기를 희망합니다.
목적에 맞는 프로토타이핑 툴 고르기
툴을 고르려 하니, 이렇게나 많은 선택지들이 있습니다. https://www.cooper.com/prototyping-tools프로토타이핑 툴을 사용해보기로 결정한 후, 서치를 해보니 정말 수많은 툴이 있었습니다. 이 수많은 툴을 평가하는 기준으로 사람들이 꽤나 다양한 기준을 제시해 놓았는데요, 그 중 우리가 집중해야 하는 부분은 바로
1. 이 툴을 사용하면 어느 정도 수준의 인터랙션을 구현할 수 있을지
2. 툴을 배우는 게 얼마나 어려울지
일 것입니다.
로우파이? 하이파이?
Fidelity라는 단어, 들어보셨나요? Fidelity는 ‘정확도, 충실도’라는 뜻인데요,
프로토타이핑 툴의 큰 구분으로 사용자가 툴을 이용해서 얼마나 높은 수준의 인터랙션을 구현할 수 있는지를 표현할 때 이 단어를 사용합니다. low-fidelity, high fidelity 이렇게요.
단순한 예로 위의 두 애니메이션을 가져왔습니다.
왼쪽같이, 클릭하면 페이지가 등장하는 정도의 인터랙션은 lo-fi로 분류되는 툴을 이용해 충분히 만들 수 있습니다. 반면 더 섬세하고 복잡한 인터랙션을 보여주는 오른쪽 애니메이션을 만들기 위해서는 hi-fi툴을 익혀야만 합니다. 하지만 당연히 그만큼 학습난이도도 올라가기 때문에, 내가 어떤 목적으로 프로토타입을 만드는지를 잘 생각해보고 툴을 선택하는 것이 좋습니다.
앱의 전체적인 사용 플로우를 확인하는 것과 앱의 모션 및 인터랙션을 구현하는 것,
저는 이 두 가지 목적에 따라 적합할 것 같은 툴을 사용해보았습니다.
invision, marvel
사용 플로우를 확인하기 좋은, lo-fi 툴.
이 단계의 툴은 디자인한 화면들을 서로 연결하기에 적합합니다.
디자인한 화면들을 불러온 후 > 사용자가 누르는 영역을 설정하고 > 그 영역을 누르면 이동할 화면과 화면 전환 효과를 선택하는 것 정도가 주 기능입니다.
설정할 수 있는 유저의 제스처 및 화면 전환효과. 애니메이션 조정은 불가능합니다.모션 디자인이 불가능한 대신에, 앱의 기본적인 인터랙션을 만들기에 효율적인 기능들로 구성되어 있습니다. 특정 화면에서 다른 화면으로 이동하는 것이 주가 되는 앱이라면, invision과 marvel에서 제공하는 기능들로 적당한 결과물을 만들 수 있습니다.
1. 다른 화면으로 자동 이동
자동으로 특정 화면으로 넘어가도록 설정할 수 있습니다. 자동으로 넘어가는 시간도 설정할 수 있습니다.
2. fixed header, footer
화면의 상단이나 하단에서부터, 스크롤하더라도 고정되는 영역을 지정할 수 있습니다.
탭 바 등을 만들 수 있으며, 이 기능을 응용해 floating button도 만들 수 있습니다.
3. 스크린 오버레이
쉽게 말해 팝업 화면을 만들 수 있는 기능입니다.
marvel에서는 'layer an image’, invision에서는 ‘screen as overlay’라는 이름으로 부릅니다.
4. 복수의 핫스팟 설정
프로토타입을 만들다 보면 화면이 20개, 30개는 금방 넘어가버립니다. 이 많은 화면들을 연결하다 보면 이 기능이 매우 강력하게 느껴집니다. 핫스팟은 사용자가 탭 하거나 스와이프하는 영역인데요, 같은 위치에 같은 핫스팟을 적용해야 할 경우가 많습니다. 여러 페이지에서 나타나는 Back 버튼처럼요.
이 때 화면에 일일이 핫스팟을 지정해 줄 필요 없이 한 번에 적용할 수 있습니다.
이 외에, 버튼을 누르면 화면의 특정 부분으로 이동하게 하거나,
back버튼을 눌렀을 때 이전에 유저가 화면에서 보고 있던 위치로 돌아오게 하는 것도 가능합니다.
lo-fi툴로 분류되는 invision과 marvel을 사용해보니, 툴이 제공하는 프리셋에 따라 만들 수 있는 것의 한계가 분명하기도 하지만, 반면 내 프로토타이핑 목적이 툴과 부합하면 엄청나게 쉽고 빠르게 결과물을 만들 수 있다는 생각이 들었습니다.
Tutorial을 따로 보지 않더라도 툴을 바로 사용할 수 있을 정도로 쉬웠고, 사용 플로우를 프로토타이핑할 경우 다른 hi-fi툴에 익숙해지더라도 invision이나 marvel을 사용하고 싶을 정도로 해당 프로토타이핑에 최적화된 툴이었습니다.
atomic, flinto, protopie, origami, framer
본격적으로 인터랙션 프로토타이핑을 하고 싶다면, hi-fi 툴.
Invision과 marvel에서는 화면 간의 연결이 주였다면, 이 단계부터는 화면이나 레이어의 인터랙션 및 애니메이션을 만드는 것이 주 기능입니다.
사용자의 제스처를 설정한 후 > 제스처에 따라 움직일 타겟 레이어의 size, position, opacity, rotate 등을 변경시켜 인터랙션을 만듭니다.
그리고, 이 단계부터는 애니메이팅이 가능합니다.
똑같은 인터랙션을 만들어도 만드는 방법은 다르다.
사용법이나 기능이 비교적 명확한 lo-fi툴과 달리 hi-fi툴로 구분되는 툴은 종류도 엄청나게 많을뿐더러, 툴에 따라 자율도나 난이도가 천차만별이었습니다. 몇 가지 툴을 사용해본 결과, 이 수많은 툴의 차이는 ‘인터랙션을 어떻게 접근하는지’의 차이라고 느꼈습니다.
1. 화면A와 화면B, 그리고 트랜지션. (atomic, flinto for mac)
atomic (https://atomic.io/)atomic과 flinto for mac은 page based방식의 프로토타이핑 툴입니다. 기본적으로 사용자는 인터랙션이 생기는 첫 화면과 다음 화면을 먼저 지정하게 됩니다. 그러면 레이어의 바뀐 속성(size, position, opacity, rotate)에 따라 지정된 두 화면 간의 트랜지션이 만들어집니다.
출처: flinto for mac 튜토리얼 (https://www.flinto.com/tutorial_videos/8)첫 화면과 마지막 화면을 연결한다고 하니 얼핏 들으면 굉장히 쉬워 보이지만, 다양한 인터랙션을 만들기 위해서는 이 원리를 능숙하게 응용해야 합니다. 팝업같이 A상태와 B상태가 명확한 인터랙션은 만들기 쉽지만, progress circle이나 parallax scroll같이 두 화면 이상의 연속적인 인터랙션을 만드려고 마음먹으면 위에서 말한 방법을 어떻게 응용해서 만들지를 고민하게 됩니다.
아래는 atomic과 flinto for mac의 사용법을 캐치해볼 수 있는 튜토리얼 영상들입니다.
2. 오브젝트에 유저의 제스처trigger가 더해지고, 반응response이 돌아오고. (protopie)
프로토파이의 핵심 아이디어는 오브젝트, 트리거, 리스펀스입니다.
레이어(오브젝트)에 트리거를 더하고, 그 트리거에 리스펀스를 결합하는 순서로 인터랙션을 만듭니다.
다양한 트리거와 리스펀스를 제공하고 있어 이 둘을 적절히 조합하면 다양한 인터랙션을 만들 수 있습니다.
Protopie (https://www.protopie.io/)버튼을 누르면 꿀딜 프로모션 카드가 밑에서부터 튀어나오는 인터랙션입니다.
위의 이미지처럼 버튼(오브젝트)을 탭(트리거)하면 프로모션 카드가 움직입니다(리스펀스). Y방향으로 얼마나 움직일지, 그리고 해당 인터랙션의 길이나 delay정도를 조정합니다.
atomic과 flinto는 인터랙션이 일어나기 전과 후의 화면을 먼저 그리는 데에서부터 시작하기 때문에, 사고 과정이 약간 부자연스러운 부분이 있었습니다. 반면 프로토파이의 사용 흐름은 오브젝트에 제스처를 더하고, 제스처에 따라 인터랙션이 발생하는 순차적인 흐름입니다. 이런 논리의 흐름이 일반적으로 인터랙션을 떠올릴 때의 사고의 흐름과 같아서 툴을 학습하는 것이 수월했습니다.
아래는 프로토파이의 기본 개념과 사용법을 볼 수 있는 튜토리얼 영상입니다.
3. 인터랙션 로직을 만들기 (origami, framer JS)
framer (https://framer.com/)이 두 가지 툴은 굳이 따지자면, 프로그래밍적 사고방식에 좀 더 가깝다고 생각합니다.
framer는 아예 coffescript로 코딩해서 프로토타입을 제작하고, Origami는 코드프리지만 '입력', '출력' 그리고 '조건’이라는 조각들을 조립해 인터랙션을 만듭니다.
origami (http://origami.design/)위에 보이는, 선들로 연결된 박스들을 patch라고 부릅니다. 패치의 왼쪽과 오른쪽에 각각 동그라미가 보일 텐데요, 왼쪽이 입력장치, 오른쪽이 출력장치입니다. 다른 패치의 출력장치에서부터 나온 값을 입력장치에서 받아, 다른 패치로 전달합니다. 이런 연결이 모이고 모여서 화면에 인터랙션으로 표현됩니다.
플린토나 프로토파이같이 인터페이스상에서 직접적으로 디자인 화면이나 레이어를 조작하는 것이 아니라 어렵게 느껴질 수 있지만(프레이머 같은 경우 코딩에 대한 이해가 없으면 진입장벽이 굉장히 높습니다.), 그럼에도 불구하고 이 두 툴의 강점은 '자율도'와 '정교한 인터랙션'입니다.
특히 저는 이 두 툴을 이용해 '조건'을 설정할 수 있다는 점이 메리트로 와 닿았는데요, 프레이머에서는 함수function로, 오리가미에서는 조건을 생성하는 로직 패치Logic patch로 가능합니다. 이를 활용해 '스크롤이 y방향으로 50 이상 이동하면 애니메이션이 발생한다'같이 복잡한 인터랙션도 만들 수 있습니다.
아래는 오리가미와 프레이머의 사용법을 볼 수 있는 튜토리얼 및 영상입니다.
아마 저를 포함한 많은 UI 디자이너 분들이 모션과 인터랙션을 프로토타이핑하고 싶어 할 것입니다.
시중에 정말 많은 hi-fi프로토타이핑 툴이 있는데요, 자신이 익숙한 타입의 툴을 잘 골라서 배우는 것이 효율적으로 툴을 사용하는 방법일 것입니다.
마치며.
이상으로, 흔히 말하는 lo-fi 툴부터 시작해서 hi-fi툴까지 전반적으로 리뷰해보았습니다.
이번 연구를 통해 다양한 프로토타이핑 툴들을 사용해보며, 내가 생각했던 수준의 프로토타입을 생각보다 빠르고 쉽게 만들 수 있는 여건이 갖춰졌다는 점에 놀랐습니다. 본 리포트를 통해서 프로토타이핑을 고민하시는 디자이너분들이나 도입을 생각하고 있는 디자인, 개발 조직에 도움이 되었으면 합니다.
티몬의 UX랩에서는 린프로토타이핑 디자인을 프로젝트에 접목하여 의사결정/인터렉션/구조설계등의 사업 및 개발 진행해 편리하고 효과적인 방법을 연구하고 있습니다. 앞으로도 꾸준히 결과물을 공유하도록 하겠습니다.
리서치 도움/피드백 : UX랩 임대찬 유닛장
리서치 진행 : UX랩 이재린
