[TOOL] 프로토파이(ProtoPie) - 웹/앱 인터랙션 만들기 무중력지대 대방동

 

프로토파이는 명칭 그대로 프로토타입을 만들어 보는 데 아주 유용한 툴이다.

2시간동안의 짧은 강의를 들으면서 배웠던 내용을 남겨놓고 싶어서 기록해 둔다.


전체적인 ui는 피그마와 흡사했다.
(끝날 때 여쭤보고 알았는데 피그마와 연동도 된다. 아직 해보진 않았지만 흡사 포토샵 파일과 일러스트파일 호환되는 느낌처럼 사용가능한 듯 하다)

 

왼쪽 상단의 import로 들어가면 된다

피그마도 그렇고 오늘 배운 프로토파이도 그렇고 기본적인 화면구성이나 동작 방식을 사전에 알고 있다면 더 학습하기 좋은 툴인 것 같다.

특히 개발이나 노코딩툴을 사용해서 화면을 구성해봤다면 어떤 점이 더 편하고 어떤 점이 더 불편한지 쉽게 와닿을 것 같다.

 

익히기 쉬운 UI

일단 모든 노코딩 툴이 그러하듯이 아주 사용하기 편하다. 사용자를 위한 ui화면만 잘 숙지해두고 기본적인 방식만 안다면 쉽게 응용까지 할 수 있다.
개발할 때 요구되는 언어마다의 문법을 알아야할 필요가 없으며 클릭 몇번만으로 원하는 기능을 빠르게 툭툭 구현해 낼 수 있다.

아직 화면에 익숙해지지 못한 탓도 있겠지만 키보드 입력으로 원하는 기능을 만들어 내는 것만 해봐서 그런지 자유도가 상대적으로 떨어지는 느낌을 받긴 했다.
하지만 모르는 기능을 따로 구글이나 공식문서에 검색해 필요없이 드롭박스에서 구현할 수 있는 모든 기능을 확인해 볼 수 있으니 그 점은 참 좋았다.

프로토파이 작업환경

 

 

작업창 

기능들이  아래의 사진처럼 하나의 박스로 표시되기 때문에 넣고 빼고 순서를 변경하는 일련의 과정이 참 편했다.
프론트 할 때마다 느끼는 건데 내가 구현하는 기능들이 포토샵 작업창처럼 볼 수 있었으면 좋겠다. 그게 가능하다면 z-index가 헷갈리는 일이 생기지도 않을테고 레이어가 뒤죽박죽되어 골치아픈 경우가 많이 줄어질텐데..

 

 

기능별 토글

토글을 이용해 기능을 껐다 켰다 할 수 있다는 점도 매력적이었다. 박스를 누르면 오른쪽에 토글버튼이 활성화 된다. 

 

 

핸드폰과 연동가능

핸드폰에 프로티파이 어플을 설치하면 QR코드 스캔을 통해 정말 간단하게 지금 보고 있는 화면을 핸드폰에서 동작시켜볼 수 있다.
이 기능은 사용중인 계정이 달라도 가능하다.
수업중 강사님의 노트북에 띄워진 코드를 내가 스캔에서 볼 수도 있었다.

오른쪽 상단의 Device를 클릭하면 QR코드가 나온다

웹에서 올바르게 동작하는지 확인해보기 어려운 pinch 같은 기능을 사용할 때 활용하면 좋다고 설명해 주셨다.

 

publish 가능

오른쪽 상단의 cloud에 저장하면 url이 생성되어 이를 통한 공유도 가능하다. 

 

 

손가락 갯수에 따른 동작 설정 가능.

이 부분은 웹만 해보고 앱은 개발해 본적이 없기에 신기했다.

웹과 달리 앱은 손가락으로 터치하여 사용하기에 단순한 드래그, 클릭, 더블클릭 뿐만 아니라 pinch같은 기능도 활용할 수 있다. 그렇기에 손가락 몇개를 사용하는지에 따라 다른 동작을 실행시킬 수 있다. 

맥북의 트랙패드가 손가락 갯수에 따른 동작이 감지되기에 실험해봤는데 트랙패드로는 갯수 인식이 제대로 되지 않았다. 

 

 

숫자가 아닌 개체 선택으로 원하는 크기, 위치 지정가능

 

 

숫자영역에서 formula가 활성화 되면 클릭 후 값을 지정해 줄 수 있다. 

 

 

 

 

다운로드 및 더 다양한 기능 학습은 공식 홈페이지에서 가능하다. 

 

공식홈페이지 주소 

https://www.protopie.io/

ProtoPie | High-Fidelity Prototyping for Mobile, Desktop, Web & IoT

 

다운로드 링크

https://www.protopie.io/download

Download ProtoPie | Free Plan | High-Fidelity Prototyping

 

사용법

https://www.protopie.io/learn

Tips and Tutorials | Learn | ProtoPie

 

 

학생인증을 하면 플랜을 무료로 사용가능하다. 

관련 글을 구글에 검색해보면 자세한 설명을 확인할 수 있다. 

아래는 내가 참고한 글. 일단 학교 메일 계정이 살아있어 신청은 해봤는데 될런지는 하루이틀 지나서 답장이 와야 알 수 있을 것 같다. 

https://waitingpaper.tistory.com/1

프로토파이(Protopie) 학생 라이센스 얻는 법

 

 

 

시간이 부족해서 더 많은 기능을 학습해보진 못했다. 

강사님께서 예시로 음성인식 기능도 추가할 수 있다고 보여주셨는데 혼자 학습을 원한다면 공식홈페이지를 통해 가능하다고 알려주셨다. 

 

 

 

나중에 기회가 된다면 조금 더 많은 기능을 직접 구현해보고 하나의 근사한 프로토타입을 만들어보고 싶다. 

 

개발하면서 엄청 무식한 방법(나의 전용 포토샵인 ppt)으로 설계도를 작성하고 구상안을 만들었다. 

그렇기에 모든 기능을 담지 못했고, 구현을 어떻게 하겠다는 자세한 설명을 기록하기 어려웠다. 

모든 프로젝트가 다 끝난 뒤에야 외부 강의를 통해 피그마를 제대로 학습해 나갈 수 있었다.

피그마도 그렇고 오늘 배운 프로토파이도 미리 알았다면 더 잘 활용해 볼 수 있었을 것 같고, 내가 만든 사이트가 어떻게 구동할지 완벽하게 구상해보는 기회도 있었을 것 같다. 

 

늦게나마 알게되었지만 다음에 또 프로젝트를 진행하거나 혼자서 무언갈 만들게 될 때 프로토타입을 제대로 만들어 두고 시작해보고 싶다.