uiux 디자인, uiux 디자인 툴, 프로토타이핑 툴, 게임 기획
게임기획자로서 많은 사람들에게 유익한 정보를 공유하고 있는 못사님의 네이버 포스트 채널에 ProtoPie가 소개되었습니다. 기존에 Adobe Xd를 사용하고 계셨던 못사님의 글에는 보다 솔직한 사용 후기가 담겨 있는데요. 못사님은 ProtoPie가 Adobe Xd와 지향하는 방향이 다른 새로운 프로토타이핑 툴이라고 표현했습니다.
게임 기획자가 바라본 ProtoPie, 아래는 못사님의 글을 발췌하여 정리한 것입니다.
Adobe Xd와 ProtoPie
ProtoPie 공식 홈페이지에서 가장 먼저 소개되는 내용은 객체, 트리거, 반응입니다. 프로그래밍을 접해본 사람이라면 ProtoPie가 프로토타입의 디자인보다는 인터랙션에 조금 더 힘을 주고 있다는 것을 알 수 있습니다. ProtoPie와 Adobe Xd와의 근본적인 차이는 object와 interaction을 꼽을 수 있는데요.
Adobe Xd는 네모, 동그라미, 삼각형 선, 펜 툴이 있어 다양한 오브젝트를 쉽게 그릴 수 있습니다. 그리고 특정 오브젝트와 아트 보드를 링크해서 페이지 넘김 방식의 인터랙션을 만들 수 있습니다.
반면 ProtoPie는 네모, 동그라미를 그릴 수 있으며 위의 이미지처럼 다양한 트리거와 트리거에 반응하는 액션을 제공합니다. 심지어 조건문도 걸 수 있죠.
ProtoPie 시작하기
ProtoPie의 운영체제는 맥 OS와 윈도우 64비트 그리고 윈도우 32비트를 지원합니다. 이용 가격은 개인 사용자 기준으로 월 $11입니다. 그러므로 전문적으로 일을 하는 사람에게 더욱 추천합니다.
언어는 영어, 중국어와 일본어를 지원하고 있습니다.
디바이스 프리셋은 iOS와 Android, Desktop 그리고 커스텀을 지원합니다. 스마트폰의 경우 세로 모드만 지원하지만 커스텀에서 가로, 세로 픽셀을 정해 가로 모드를 만들 수 있습니다.
ProtoPie는 다른 툴에서 작업하던 사람들도 손쉽게 넘어올 수 있도록 Adobe Xd, Figma 그리고 Sketch 작업물을 임포트 할 수 있습니다. Adobe Xd 프로젝트에 속한 아트 보드 1개를 ProtoPie의 씬 1개로 임포트 하는 방식입니다.
ProtoPie를 처음 실행하면 5개의 예제를 제공합니다. 더 많은 기능들을 제공하지만 이렇게 다섯 가지만 있어도 웬만한 앱 프로토타입의 제작이 가능하죠.
모든 오브젝트는 Move 액션을 걸어놨습니다. 오브젝트 이름이 트리거인데요. Start(시작하자마자), Tap(탭 하면), (Long Press) 길게 누르면 지정된 위치로 이동합니다. Drag(드래그)는 사용자가 원하는 임의의 위치로 오브젝트를 이동시킬 수 있습니다.
보통 프로토타이핑 툴에서 스크롤은 스크롤 되어야 하는 긴 컨텐츠를 만들고, 스크롤 프레임을 정해서 그 영역 내에서 스크롤이 될 수 있도록 합니다. Adobe Xd와 ProtoPie 둘 다 쉽게 만들 수 있다는 건 동일하지만, Adobe Xd는 스크롤 영역을 정하는 게 아니라 아트 보드 전체가 스크롤 되는 방식이라는 것이 다르죠.
조건문은 단순한 예제가 만들어져 있습니다. 스위치 모양을 하나 만든 후, 짙은 원의 x 좌표에 따라 탭 했을 때 어디로 이동할지 정의해 뒀습니다.
단순한 수식을 이용해서 +를 누르면 1씩 증가하고, -를 누르면 1씩 감소하도록 했습니다.
텍스트 입력 필드가 있어 키보드가 자동으로 올라옵니다. 키보드는 Look and feel이 용도입니다.
게임 기획자가 본 ProtoPie
프로토타이핑의 목적에 따라 다르겠지만 UI보다는 UX에 집중해서 보고 싶을 때 유용한 도구라고 생각됩니다. 말로 설명하지 않고 마우스 클릭 몇 번으로 만들어서 보여줄 수 있다는 것은 엄청난 장점이죠.
기획자가 말로 설명하면 다들 이해할 것 같지만 그렇지 않습니다. 각자 머릿속에서 다른 생각을 하고 있습니다. 그게 결국 결과물에서 차이로 나타나고, 기획자가 그렇게 말했으니 그렇게 만들었다는 말을 들을 뿐입니다.
3일 정도 사용하면서 드러난 단점들도 있습니다. 인터랙션 위주로 설계된 툴이라서 그런지 오브젝트 컨트롤이 꽤 어렵습니다. 마그넷은 너무 강해서 원하는 크기로 오브젝트의 사이즈를 조정하기 어렵고, 심지어 리사이즈 할 때 엄청 버벅거립니다.
▼ 못사 네이버 포스트 본문 바로 가기