[디자인] 프로토타이핑을 도와주는 툴 소개
프로토타이핑의 중요성과 유용한 툴을 소개해 드려요.
이런 분들이 읽으면 좋아요!
제품을 Lo-fi / Hi-fi 프로토타이핑 하고 싶은 디자이너 또는 팀
아이디어나 새로운 제안을 효과적으로 표현하고 싶은 디자이너, 개발자, 스타트업 팀
이런 내용을 알 수 있어요!
주요 디자인 툴 별 프로토타입 방식의 차이를 알 수 있어요.
나의 서비스, 프로젝트에 적합한 프로토타이핑 툴을 소개해 드려요.
*[패파솔루션] 공식 제휴사 ‘똑똑한개발자’에서 제공한 콘텐츠입니다.
안녕하세요, 똑똑한개발자의 디자이너 아인입니다.
XD, 피그마, 프레이머는 디자인 툴이기도 하지만 프로토타입 제작도 가능한 툴들입니다.
오늘은 각 툴로 프로토타입을 제작하며 느낀 공통점과 차별점을 소개하고 프로토타이핑이 주는 장점에 대해 이야기 하고자 합니다. 제작하고 싶은 프로토타입이 어떤 툴과 적합할지 미리 알아볼 수 있는 시간이 되었으면 좋겠네요!
1. 프로토타이핑 툴
이전에는 프로토타입을 만드는 일에 따로 전문 인력이 필요할 때가 있었습니다.
포토샵으로 만든 GUI를 애프터이펙트로 가져가 애니메이션을 적용해 프로토타입을 만들기도 했고, ‘프로토타이핑' 자체가 하나의 또 다른 큰 업무로 존재하기도 했죠.
시간이 지나며 더 효율적인 다양한 툴들이 나오기 시작했고, 이제 ‘프로토타이핑'은 프로덕트 디자이너에게 있어서 옵션이 아닌 필수가 되어가고 있다고 느낍니다.
출처: 나에게 맞는 프로토타이핑 툴 선택하기플린토(Flinto), 인비전(invision) 그리고 국내 스타트업에서 만든 프로토파이(ProtoPie) 같은 멋진 툴들도 있지만, 오늘은 프로토타입에 아주 고도화 된 툴들보다는 하나의 툴에서 디자인과 프로토타이핑 두 가지를 빠르게 제작 가능한 [XD, 피그마, 프레이머] 위주로 소개 드리고자 합니다.
다양한 프로토타이핑 툴의 구분에 대해서는 상단에 남긴 이미지 출처의 아티클 [나에게 맞는 프로토타이핑 툴 선택하기] 를 참고하시면 큰 도움이 될 것 같아요!
2. 각 툴의 공통점과 차이점
XD와 피그마 : 러닝커브가 낮다
XD와 피그마는 디자이너와 기획자 등, 코드에 친숙하지 않은 사람도 쉽게 익힐 수 있는 방식으로 프로토타입 기능을 제공합니다. 디자인을 기반으로 직관적인 프로토타이핑을 제공하기 때문에, 툴에만 익숙하다면 간단히 컴포넌트를 변경하고 애니메이션을 적용할 수 있죠.
프레이머의 경우 코드 기반의 툴이기 때문에 비교적 러닝커브가 높습니다. 특정 수준 이상을 구현하기 위해선 코드에 대한 이해도가 바탕이 되어야 하죠. 저희 팀에서도 Framer site 로 프로토타입을 제작 했던 경험이 있는데요. 처음 툴을 다뤘을 때, Primary(기준이 되는 컴포넌트) 컴포넌트에서 파생된 컴포넌트의 구조를 변경하려 했지만 마음대로 삭제하거나 넣을 수 없어 어려웠던 기억이 있습니다. 그에 비해 XD와 피그마는 구성이 자유로운 편이죠.
프레이머 : 디테일한 인터랙션 시점 설정
프레이머는 Load 와 Scroll 두 가지 타입의 인터랙션 시점 설정을 제공합니다. XD와 피그마는 하나의 컴포넌트에 하나의 인터랙션만 적용 가능한 반면, 프레이머는 컴포넌트가 ‘등장할 때'와 ‘스크롤 될 때' 로 나누어 2개의 인터랙션을 동시에 적용할 수 있어요!
또 시점을 정할 수 있다보니, 랜딩페이지에서 유저가 해당 섹션 위치에 도달했을 때에 인터랙션이 시작되도록 설정할 수도 있죠. 피그마와 XD는 Click 등의 액션이 아닌 이상, load 시에는 한번에 인터랙션이 실행되다 보니, 스크롤 맨 아래에 이미지가 있는 경우 새로고침해서 다시 보여줘야 하는 등의 단점이 있습니다. 프레이머 너 정말… 너무 멋져… 대단해..
XD, 피그마, 프레이머 삼형제 : 기술의 발전 참 좋다… 짜릿해
셋 모두 프로토타입을 링크 형태로 외부에 보내거나 모바일 디바이스로 실행할 수 있습니다.
클라이언트에게 공유하거나 UT(유저테스트)가 필요할 때, 실제 출시된 제품과 유사하게 직접 디바이스 안에서 보여주고 피드백을 받을 수 있죠.
Auto-Animate, Auto layout 등의 짜릿한 기능
셋 모두 프로토타이핑에 있어 ‘Auto-Animate’ 라는 기능을 제공하고 있습니다. 일일히 키프레임을 잡아주지 않아도, A화면과 B화면을 프로토타입으로 이어주면 자연스럽게 전환되는 애니메이션을 보여주는 기능이죠! 이 기능이 생각보다 활용도가 높고 편리해서, 종종 오토 애니메이팅 된 화면을 녹화해 프로젝트 포트폴리오에 사용하기도 합니다. 어떤 점에서는 애프터이펙터보다 더 모션을 잡기도 쉽고 구현 범위와 활용 방안이 높다고 느껴요!
3. 각 툴의 차별점
Adobe XD
이미지에 3D 및 공간감 효과를 주는 인터랙션 가능!
프로토타입 제작에서 XD만의 차별점이 있다면 포토샵처럼 3D 변형이 가능하다는 점인데요. 포토샵을 이용하지 않고 XD 내의 기능을 통해 이미지의 변형이 가능해 다이나믹한 프로토타이핑 구현이 가능해졌습니다.
클릭 또는 마우스 호버 시, 카드 모서리가 휙휙 움직인다든지 하는 형태의 프로토타이핑이 가능한거죠!
프레이머의 경우에도 유사한 기능을 제공하긴 합니다만, 다음과 같은 차이가 있습니다.
프레이머 : 움직이는 ‘인터랙션’에 3D Rotate 등의 효과 적용. 이미지 및 컴포넌트 자체에는 적용 X
XD : ‘이미지 및 컴포넌트’ 자체에 3D 변환 효과 적용 Auto animte 를 통한 인터랙션 구현.
관련해서 XD 3D 기능의 조금 더 자세한 사용법은 다음 아티클을 추천드려요!
Adobe XD Auto-Animate 어느새 이런 것까지 준비한 어도비의 성실함
출처: Adobe XD Auto-Animate 어느새 이런 것까지 준비한 어도비의 성실함피그마(Figma)
인터랙티브 컴포넌트 기능 (Interactive Components) > 자세히보기
피그마에서는 컴포넌트 단위의 프로토타이핑을 할 수 있습니다. 각 컴포넌트 단위로 프로토타이핑이 가능하다는 것은, 페이지가 넘어가지 않아도 하나의 페이지 안에서 탭을 누른다거나 모달이 띄워지는 등 다양한 움직임을 프로토타입으로 보여줄 수 있다는 것입니다.
2021년 베타버전으로 등장했던 인터랙티브 컴포넌트 기능은, 갈 수록 업데이트되고 발전하고 있어서 앞으로 더 다양한 프로토타이핑이 가능해질지 기대되네요.
프레이머(Framer)
인터랙션도 컴포넌트화해서 적용이 가능!
피그마나 XD도 디자인 영역에 대해 어느정도의 CSS 코드를 제공하긴 하지만 아직 완전하진 않습니다. (사용성이나 코드 최적화 측면에서 말이죠)
그런데 프레이머는 매우 개발 친화적인 툴이다보니 이미지, 텍스트 스타일뿐만 아니라 ‘인터렉션’의 경우에도 중복되는 CSS 코드를 Class로 지정하듯 컴포넌트화가 가능해 동일한 인터렉션도 디자인시스템처럼 손쉽게 적용 할 수 있습니다.
Framer sites (Beta) > 자세히보기
프레이머는 Framer sites 라는 베타서비스를 출시했습니다.
프로토타입을 넘어서, 디자인과 프로토타입 그 자체를 배포할 수 있게 해주는 서비스입니다. 도메인 설정도 가능한 모양이더라고요.
랜딩페이지에 국한되어 있긴 하지만 개발자 없이! 디자이너 혼자만으로도 디자인-인터랙션-개발과 배포까지 가능하다니 놀랄 노자를 열 번 외쳐도 모자랍니다.
실제로 저희도 내부에서 운영하는 T-POD 공간에 대한 소개 페이지를 Framer sites로 구현했었는데요. > 구경오세요!
아무래도 프로토타입으로 구현되기 때문에 어느 정도 한계점이 있긴 했지만 큰 어색함 없이 생각한 범위의 인터랙션을 적용한 웹사이트를 디자이너 혼자서도!! 구현하고 배포할 수 있었습니다.
최근에는 토스에서 토스 이모지를 소개하는 Toss Face 웹페이지를 이 Framer Sites로 제작했다고 해 이슈가 되었었죠.
> Framer site 서비스로 만든 사이트 > 구경가기
4. 프로토타입이 왜 중요한가요?
프로토타입은 눈에 보이지 않는 것을 실체화시켜 보여줄 수 있다.
디자이너 입장에서 프로토타입은, 디자인 된 화면만으로 표현하기 어려운 세세한 인터랙션이나 화면 전환을 비교적 정확하게 표현할 수 있는 수단입니다.
인터랙션에 대한 부분을 개발자에게 설명할 때 저도 모르게 “이 화면이 이렇게 샤샥 움직이게 해주세요" 라고 말하게 되곤 하는데요. (마치 디자이너에게 화려하면서 심플하게 해달라고 말하는 것과 비슷하달까요..)
카카오톡 이모티콘 [무리한 요구를 하는 클라이언트]그럴 때 프로토타입을 활용하면, 보다 원활하게 팀원들 그리고 개발자 분들과 소통할 수 있습니다.
실제로 어떤 인터랙션으로 보여지는지 구체적으로, 시각적으로 상상하게 할 수 있고, 때로는 개발자 분들로부터 더 좋은 인터랙션 아이디어나 구현 방법을 전달받게 되기도 하죠!
팀원을 설득하고 이해시키는 시간을 단축하는 데에도 큰 몫을 합니다.
마찬가지로 클라이언트를 설득하거나 새로운 방향을 제안할 때도 보다 긍정적인 반응을 끌어낼 수 있습니다.
실체가 있는 느낌을 어필함으로써 더 좋은 반응과 피드백을 이끌어 낼 수 있고, 완성도에 대한 기대감을 가질 수 있게 할 수 있는거죠!
프로토타입만으로도 제품의 완성도를 보여주고 상상하게 할 수 있다.
앞서 이야기 한 ‘실체화'와 연결되는 내용이기도 합니다만, 프로토타입 만으로도 내가 가진 제품의 아이디어와 완성도를 효과적으로 어필할 수 있습니다.
실제로 ‘타입드(https://typed.do/)'라는 서비스는 ‘프로토파이’라는 툴로 만든 프로토타입만으로 투자를 받을 수 있었다고 해요.
많은 스타트업의 UT(유저테스트)에서도 피그마를 활용한 프로토타입 등을 적극 활용하고 있습니다.
가설을 검증하고 싶을 때, 개발까지 진행하지 않아도 빠르게 유저들에게 보여주고 테스트 할 수 있는 것이죠.
저희 똑개 팀도 최근 ‘고위드’ 서비스의 유저로서 UT에 참여했던 적이 있는데요. ‘제작자'가 아닌 ‘유저'의 입장에서 피그마를 통한 프로토타입으로 UT를 경험했을 때, 생각보다 자연스럽게 인터랙션이나 화면 전환 등이 이뤄져 새로웠던 기억이 납니다.
UX 관점에서도 빠진 플로우 체크에 프로토타입은 유용하다.
단순히 인터랙션이나 개발자와의 소통 뿐 아니라도, UX 관점에서 프로토타입은 유용합니다. 하나의 대지에 펼쳐진 화면 프레임 만으로는 아무리 꼼꼼하게 플로우를 짜고 IA를 그렸어도 종종 놓치는 화면들이 생기기 마련인데요. 이럴 때 프로토타입을 미리 연결해보면 빠진 플로우나 어색한 UX를 미리 확인할 수 있어 큰 도움이 되곤 합니다.
이처럼 시각적으로 보여줄 수 있는 프로토타입의 전달력은 강력합니다.
프로토타입 제작에 공수가 더 들어간다고 생각할 수 있지만 초기 단계에서 프로토타입을 통해 오해와 설득의 시간을 줄일 수 있다면 오히려 효율적인 제안 방법이라고 할 수 있습니다.
우리 팀엔 어떤 프로토타입이 적합할지, 어떤 툴이 또 가장 효율적일지 생각해보고 적용해보는 것도 좋겠네요!
무엇보다 내가 만든 디자인과 화면이 직접 움직이는 것을 보는 건, 그리고 그 움직임을 개발자에게만 맡기는 것이 아닌 내가 기획하고 만들어 볼 수 있다는 건, 디자이너에게도 아주 멋지고 흥미로운 경험이니까요.
