brunch

You can make anything
by writing

C.S.Lewis

by ProtoPie Jan 08. 2021

[못사]
게임 기획자의 프로토타이핑 툴

uiux 디자인, uiux 디자인 툴, 프로토타이핑 툴, 게임 기획


Free Your Ideas, ProtoPie


게임기획자로서 많은 사람들에게 유익한 정보를 공유하고 있는 못사님의 네이버 포스트 채널에 ProtoPie가 소개되었습니다. 기존에 Adobe Xd를 사용하고 계셨던 못사님의 글에는 보다 솔직한 사용 후기가 담겨 있는데요. 못사님은 ProtoPie가 Adobe Xd와 지향하는 방향이 다른 새로운 프로토타이핑 툴이라고 표현했습니다. 
 
게임 기획자가 바라본 ProtoPie, 아래는 못사님의 글을 발췌하여 정리한 것입니다.


 




Adobe Xd와 ProtoPie



ProtoPie 공식 홈페이지에서 가장 먼저 소개되는 내용은 객체, 트리거, 반응입니다. 프로그래밍을 접해본 사람이라면 ProtoPie가 로토타입의 디자인보다는 인터랙션에 조금 더 힘을 주고 있다는 것을 알 수 있습니다. ProtoPie와 Adobe Xd와의 근본적인 차이는 object와 interaction을 꼽을 수 있는데요.
       
Adobe Xd는 네모, 동그라미, 삼각형 선, 펜 툴이 있어 다양한 오브젝트를 쉽게 그릴 수 있습니다. 그리고 특정 오브젝트와 아트 보드를 링크해서 페이지 넘김 방식의 인터랙션을 만들 수 있습니다.
  

 

ProtoPie가 제공하는 트리거(좌)와 액션(우)


반면 ProtoPie는 네모, 동그라미를 그릴 수 있으며 위의 이미지처럼 다양한 트리거와 트리거에 반응하는 액션을 제공합니다. 심지어 조건문도 걸 수 있죠.
 


"이 정도면 거의 프로그래밍 하겠다는 소리지."


        

 

   



ProtoPie 시작하기

 

  
ProtoPie의 운영체제는 맥 OS와 윈도우 64비트 그리고 윈도우 32비트를 지원합니다. 이용 가격은 개인 사용자 기준으로 월 $11입니다. 그러므로 전문적으로 일을 하는 사람에게 더욱 추천합니다.


"그래도 체험판 기간이 30일이나 되기 때문에 충분히 사용해본 후 구매 결정을 할 수 있다."


언어는 영어, 중국어와 일본어를 지원하고 있습니다.
    

   

 
디바이스 프리셋은 iOS와 Android, Desktop 그리고 커스텀을 지원합니다. 스마트폰의 경우 세로 모드만 지원하지만 커스텀에서 가로, 세로 픽셀을 정해 가로 모드를 만들 수 있습니다.
 

"제일 좋은 건 씬 별로 가로 모드와 세로 모드 둘 다 디자인하고, 그걸 디바이스에서 테스트할 수 있는 것인데... 아 디바이스에서 디자인된 것을 보고 인터랙션 해볼 수 있는 앱도 지원한다."


        


"이게 기본 인터페이스다. 익숙한 향기가 난다. 익숙한 건 좋은 거다."


 


ProtoPie는 다른 툴에서 작업하던 사람들도 손쉽게 넘어올 수 있도록 Adobe Xd, Figma 그리고 Sketch 작업물을 임포트 할 수 있습니다. Adobe Xd 프로젝트에 속한 아트 보드 1개를 ProtoPie의 씬 1개로 임포트 하는 방식입니다.
      

    


ProtoPie를 처음 실행하면 5개의 예제를 제공합니다. 더 많은 기능들을 제공하지만 이렇게 다섯 가지만 있어도 웬만한 앱 프로토타입의 제작이 가능하죠.


 

  


Basics


모든 오브젝트는 Move 액션을 걸어놨습니다. 오브젝트 이름이 트리거인데요. Start(시작하자마자), Tap(탭 하면), (Long Press) 길게 누르면 지정된 위치로 이동합니다. Drag(드래그)는 사용자가 원하는 임의의 위치로 오브젝트를 이동시킬 수 있습니다.


"이렇게 4가지 기능만 가지고도 무궁무진한 가능성이 떠오른다."

  

   


Scroll 


보통 프로토타이핑 툴에서 스크롤은 스크롤 되어야 하는 긴 컨텐츠를 만들고, 스크롤 프레임을 정해서 그 영역 내에서 스크롤이 될 수 있도록 합니다. Adobe Xd와 ProtoPie 둘 다 쉽게 만들 수 있다는 건 동일하지만, Adobe Xd는 스크롤 영역을 정하는 게 아니라 아트 보드 전체가 스크롤 되는 방식이라는 것이 다르죠.


"주변에 스크롤 되지 말아야 하는 오브젝트들과 엮일 경우 ProtoPie가 좋은 것 같다."

 
   


Conditional


조건문은 단순한 예제가 만들어져 있습니다. 스위치 모양을 하나 만든 후, 짙은 원의 x 좌표에 따라 탭 했을 때 어디로 이동할지 정의해 뒀습니다.

   


Formula


단순한 수식을 이용해서 +를 누르면 1씩 증가하고, -를 누르면 1씩 감소하도록 했습니다.

  


Input


텍스트 입력 필드가 있어 키보드가 자동으로 올라옵니다. 키보드는 Look and feel이 용도입니다.
 
  


 



게임 기획자가 본 ProtoPie

 

 
프로토타이핑의 목적에 따라 다르겠지만 UI보다는 UX에 집중해서 보고 싶을 때 유용한 도구라고 생각됩니다. 말로 설명하지 않고 마우스 클릭 몇 번으로 만들어서 보여줄 수 있다는 것은 엄청난 장점이죠.

기획자가 말로 설명하면 다들 이해할 것 같지만 그렇지 않습니다. 각자 머릿속에서 다른 생각을 하고 있습니다. 그게 결국 결과물에서 차이로 나타나고, 기획자가 그렇게 말했으니 그렇게 만들었다는 말을 들을 뿐입니다.


"내가 원하는 것이 정확히 무엇인지 눈으로 보여주자."


    


3일 정도 사용하면서 드러난 단점들도 있습니다. 인터랙션 위주로 설계된 툴이라서 그런지 오브젝트 컨트롤이 꽤 어렵습니다. 마그넷은 너무 강해서 원하는 크기로 오브젝트의 사이즈를 조정하기 어렵고, 심지어 리사이즈 할 때 엄청 버벅거립니다.


"그럼에도 불구하고 파워포인트 애니메이션으로 뭔가를 만드는 게 너무 거지 같고, Adobe Xd의 부족한 인터랙션 기능에 불만이 있던 사람들은 한 번쯤 다운로드해서 돌려볼 만한 툴이다."


  


ProtoPie 평생 무료로 사용하기





▼ 못사 네이버 포스트 본문 바로 가기


 


매거진의 이전글 [아폴로 그래픽] 어도비XD 호환되는 ProtoPie

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari