이번 글에서는 실무에서 프로토파이 툴을 사용해 모바일 앱 프로토타이핑을 작업하면서 배웠던 것들을 나누려고 합니다. 쉽게 배울 수 있는 툴이어서 배우는 데 큰 어려움은 없을 줄 알았는데 몇몇 예제들은 이해하는데 시간이 걸렸습니다. 몇 개월 전만해도 공식 웹사이트에서 한국어 지원을 하지 않아서 더 시간이 걸린 것도 있습니다. (지금은 한국어 사이트가 오픈한 상태!)
나름 몇가지 팁이 생겼고 제가 잘 기억하기 위해 메모해 두었는데 아직 프로토파이에 대한 예제가 많지 않아서 공유해야겠다는 생각이 들어 글을 쓰게 되었습니다.

1. 프로토파이의 인터랙션 개념

지난 글에서 언급했듯이 프로토파이는 O(오브젝트) + T(트리거) + R(리스펀스)의 조합으로 인터랙션을 만듭니다. 현실세계에서 식탁 위의 사과를 접시에 올리기 위해선 사과(오브젝트)를 손으로 움직여야 하고(트리거) 접시에 올라간(리스펀스) 것과 같은 원리입니다. 이 세 가지는 다양한 경우의 수로 조합될 수 있습니다.

1) 가장 일반적인 경우는 A라는 하나의 오브젝트에 하나의 트리거를 주었을 때, A의 상태가 변하는 인터랙션이 있습니다. 예) 버튼을 눌렀을 때 눌린 버튼 형태가 바뀜

2) A라는 오브젝트에 트리거를 주었을 때, 다른 오브젝트인 B의 리스펀스로 출력될 수도 있습니다.
예) 버튼을 눌렀을 때 토스트 팝업이 나옴

3) A라는 오브젝트에 트리거를 줬을 때 두 개 이상의 오브젝트가 동시에 바뀌거나 (예, 버튼을 눌렀을 때 버튼과 배경이 동시에 바뀜)  하나의 오브젝트에 두개 이상의 트리거 (Tap/Drag) 동시에 적용하여 리스펀스가 일어나게 할 수도 있습니다.

4) 때론  트리거된 오브젝트는 가만히 있고 그 외의 다른 오브젝트들이 반응하기도 합니다.

이렇듯 오브젝트, 트리거, 리스펀스의 개수나 연결방법에 따라 수많은 조합의 인터랙션을 만들 수 있습니다. 앞서 설명한 것보다 훨씬 다양한 경우의 조합이 가능하죠. 왠지 저렇게 모형을 만들어 설명하니 더 어렵게 느껴지기도 한데 막상 작업하시다 보면 정말 편리한 개념이라고 생각하실 거에요. 트리거와 리스펀스에 이해를 돕기 위해 개념을 몇 가지 예제를 준비했습니다.

2. 예제
   

   2-1.  좋아요 버튼 컬러 바꾸기

가장 일반적인 인터랙션입니다. ‘좋아요 버튼’을 눌렀을 때 블랙 컬러가 오렌지로 바뀌는 예제를 만들어보겠습니다. 원래라면 버튼을 눌렀을 때 아이콘 컬러가 바뀌는 리스펀스를 주면 간단합니다. 그런데 프로토파이에서는 툴 안의 오브젝트가 아닌 외부의 png/svg 이미지의 컬러를 바꾸는 것이 불가능 합니다.ㅠ.ㅠ 어쩔 수 없이 꼼수(?)로 컬러 상태가 다른 두 개의 png 이미지를 이용해서 컬러가 바뀌는 것 같은 인터랙션을 주었습니다.

1) ’좋아요 버튼’의 상태가 다른 두 장의 이미지를 준비합니다. 버튼이 눌렸을 때 이미지(Img_on)를 레이어 상 밑으로 배치합니다.

   
Img off                                                       Img on

2) 좋아요 버튼 위에 가상의 투명 버튼을 만듭니다. 투명 버튼은 사각형 오브젝트를 꺼내서 fill값을 0으로 하면 됩니다.

3) 투명 버튼에 Tap 트리거를 주고 Opacity 리스펀스를 줍니다. 이때 Tap 트리거엔 투명 버튼이, Opacity에는 Img_off 이미지에 연결되어야 합니다. (타이틀 옆에 작은 썸네일은 트리거와 리스펀스가 어떤 이미지에 연결되어있는지 보여줍니다)

4) 속성창에서 Change to와 Duration 값을 ‘0’으로 줍니다. Change to는 최종으로 변화될 알파값을 의미하고 Duration은 기간을 말합니다. Duration을 ‘0’으로 했을 땐 누르는 즉시 컬러가 변하겠죠? 서서히 변하게 하고싶으면 수치를 늘려주면 됩니다.

5) 프리뷰 창에서 잘 작동되는지 확인합니다.

2-2.  팝업

버튼을 눌렀을 때 해당 버튼이 아닌 다른 이미지가 변하는 인터렉션입니다. 버튼을 눌렀을 때 메뉴가 슬라이딩되는 예제를 만들어보겠습니다.

Img BG                                                      Img menu

1) 마찬가지로 공유 아이콘 위에 투명 버튼을 올려줍니다.

2) 이미지(Img_menu.png)를 추가하고 위치를 화면 밖으로 이동시킵니다.(y=-667)

3) Tap 트리거에 Move 리스펀스를 줍니다. 탭을 하면 y=-667이었던 popup 이미지의 위치가 y=0으로 이동하게 됩니다

4) 프리뷰 창에서 잘 작동되는지 확인합니다.

2-3. 버튼과 영역

이미지 하나에 두개의 트리거가 같은 하나의 결과를 도출하는 인터랙션입니다. 좌측 버튼을 눌렀을 때와 좌측 영역을 스와이프 했을 때 동일하게 메뉴 창이 등장하도록 하는 예제입니다.

Img Main                       Img menu                             Img BG

1) 메인 이미지 위에 투명 버튼 A (햄버거 버튼 Tap), B(영역 Fling)을 배치합니다. 메인이미지 좌측에는 슬라이딩 될 때 나오는 메뉴 이미지를 배치합니다

2) A버튼은 Tap, B버튼은 Fling 트리거를 줍니다.

3) Tap의 리스펀스로 메인, 메뉴 이미지가 동시에 우측으로 움직이게끔 합니다(Img_main은 x=0 ->60,Img_menu는 x= -110 -> 30).  트리거는 달라도 결과는 같기 때문에 두개의 Move 리스펀스를 복사해 Fling에도 적용합니다.

4) 프리뷰에서 확인합니다.

2-4. 선택창 + 비활성화된 배경

 버튼을 눌렀을 때 새로운 창이 등장함과 동시에 나머지 영역이 어두워지는 결과물을 만들어보겠습니다. 버튼(오브젝트)에 tap(트리거)을 주었을 때 새 창의 위치와 배경의 알파값 또한 변하게(리스펀스) 됩니다.

1) Img_main, Img_review 이미지를 준비하고 Img_main 이미지를 레이어 상 앞에 놓습니다.

Img                                                    선택창(Popup)

2) 리뷰 버튼 위에 투명 버튼을 올립니다.

3) 투명 버튼에 Tap 트리거를 줍니다. Tap이 되었을 때 나타나는 리스펀스는 1) Img_review가 올라오는 것 2) 배경 알파값 변화 입니다. 먼저 이미지의 y값을 이동하기 Move 리스펀스를 주겠습니다. 이미지는 아래에서 위로, y축만 바뀌기 때문에 속성 창의 y값을 최종값(0px)으로 바꿔줍니다. 버튼을 누르면 y값이 667 -> 0px로 바뀌면서 이미지가 움직이게 됩니다.

4) 버튼을 누르면 Img_review가 나오는 동시에 배경이 어두워지게 하기 위해 사각형 오브젝트(Dim)를 만듭니다. 탭하기 전에는 알파값이 0인 상태이기 때문에 Opacity를 0으로 두고 Tap 트리거에 Opacity 리스펀스를 하나 더 추가해 버튼이 눌렸을 때 알파값이 70으로 바뀌도록 설정합니다.

5) 프리뷰 창에서 잘 작동되는지 확인합니다.

** 예제파일  다운로드

3. 팁

   3-1. 투명 버튼

프로토타이핑은 빠르게 작업하고 테스트/수정을 반복해야 하기 때문에 제작에 너무 오랜 시간이 걸려서는 안 됩니다. 그게 쉽고 빠르게 작업할 수 있는 툴을 사용하는 이유이기도 하구요. 그래서 어떠한 버튼에 트리거를 줄 때 버튼 이미지를 따로 떼어 저장한 뒤 불러오는 것은 굉장히 번거로운 일입니다. 아직 포토샵 임폴트를 지원하지 않기 때문에 이미지를 저장하여 따로 삽입해야 합니다.(문의해보니 포토샵 임폴트는 추후에 지원 예정이라고 하네요) 버튼이 한두 개도 아니고.. 수십개의 버튼이미지를 관리하는 것도 쉽지 않을뿐더러 프로토타입이기 때문에 디자인이 바뀔 가능성이 더 많아서 그때마다 업데이트하는 것은 보통 일이 아닙니다.

그래서 저는 이미지 위에 가상의 버튼을 만들어서 작업했습니다. 가상 버튼은 쉽고 빠르게 만들 수 있고 나중에 수정하는데도 쉬워서 편리했습니다. 만드는 방법은 앞선 예제에서 설명했듯이 도형의 fill 값을 ‘0’으로 한 뒤 버튼 이미지 위에 올리면 됩니다. (opacity를 ‘0’으로 하면 버튼이 아예 인식되지 않는다는 차이가 있어요)

3-2. 투명 버튼 위치가 겹쳐서 오류가 생길 때

투명 버튼을 사용하면 이미지 위에 가상의 버튼의 위치가 겹치는 경우가 있습니다. 예를 들면 햄버거 버튼을 눌렀을 때 화면에 덮이는 사이드 메뉴의 버튼 위치가 그 뒤에 있는 메인 화면의 위치와 겹치는 경우입니다. 실제로 모바일에서 확인했을 때 메뉴버튼을 눌렀을 때 메인화면에서 연결되는 페이지로 이동하는 경우가 있었습니다.

메인과 메뉴의 화면상 투명 버튼 위치가 비슷할 때 (햄버거버튼 btn_1, 세팅버튼 btna_2)

이럴 땐 투명버튼 레이어의 위치를 이동해주는 것으로 해결이 가능했습니다. 메뉴 이미지 위로 btn_1 레이어를 이동하고, 메인화면의 btn_2레이어는 메인 이미지 바로 위로 배치했습니다. 이렇게 하니까 오류가 없어지더라구요.

3-3. 씬(Scene)으로 화면 분리

여러 페이지가 있는 프로토타이핑을 할 때 화면을 씬(Scene)으로 관리하는 게 편리합니다. 씬을 분리하면 현재 작업하는 페이지를 더 단순하게 관리할 수 있고 또 씬과 씬 사이의 플로우를 연결하는데 수월합니다. 또 한 화면에 레이어가 쌓이는 캔버스 구조에서 오브젝트끼리 부딪히는 것을 방지할 수 있습니다. 단순한 프로토타이핑이어도 꼭꼭 씬을 나눠서 작업하세요!

씬은 Jump 트리거를 사용하여 이동하는데요, 속성 창에서 어느 씬으로 이동할지, 어떤 효과를 적용할지 설정할 수 있습니다. 또 화면을 씬으로 분리해서 작업할 경우 유사한 화면을 복제해서 사용할 수 있다는 장점도 있습니다.

3-4. 토글버튼

컨디션이라는 리스펀스로 만드는 토글버튼. 요건 팁이라기 보단 처음에 이해하기 좀 어려웠던 부분이라 공유합니다. 컨디션은 “트리거를 하는 순간에 그 하위에 있는 리스펀스를 실행하게 하는 조건”을 말합니다. 예를 들어 보통 토글버튼은 탭하면 흰색 동그라미의 위치가 바뀝니다. x값이 140이었을때 탭하면 230위치로 가고 230이었을 때 탭하면 140의 위치로 가죠.

X=140                                                   X=230

이런 경우 ‘흰색 동그라미의 x값이 140이었을 때’를 조건(Condition)으로 두고 그 하위에 ‘동그라미를 230 위치로 옮긴다(Move)’라는 리스펀스를 주는 것입니다.

Condition : x값이 140일 때

Move : x값위치를 230으로

그렇게 했을 때 동그라미를 Tap하면 원의 위치가 140에 있을 때 230으로 움직이게 되겠죠. 다시 반대로 230에 있던 동그라미를 140의 위치로 옮기고 싶을 때는 반대로 적용한 컨디션을 추가하면 됩니다. 컨디션이라는 리스펀스는 상태에 따라 다른 조건을 줄 수 있어서 하나의 트리거로 여러 가지 리스펀스를 도출할 수 있습니다.

 3-5. 클라이언트에게 파일 전달

프로토타이핑에서는 파일을 어떻게 공유하는 것도 중요한 것 중 하나입니다. 특히 외부에 있는 클라이언트에게 직접 시연할 수 없을 때, 받는 쪽에서 너무 번거롭거나 어려운 방법으로 작업물을 확인하면 안 되겠죠. 보통 프로토타이핑 툴에서 가장 쉽게 사용하는 방법은 url 공유인데요, adobe xd에서는 프리뷰를 할 때 url을 사용하기도 해서 웹으로 접근이 가능하게 합니다. 반면 프로토파이는 모바일에서 시안을 확인하려면 앱을 설치해야 합니다. 처음엔 이 점이 번거롭다고 생각했었는데 몇 번 사용해보고 나니 그 방법이 훨씬 편리하고 안정적이었습니다.

프로토파이에서 파일을 전달하는 방법은 원본 파일을 그냥 메신저나 메일로 보내면 됩니다. .pie확장자를 가진 원본파일은 데스크탑에서는 프로토파이 툴로 열리지만 모바일에서 바로 앱(뷰어)으로 연결됩니다. 작업물을 확인하는데 앱을 설치하는 것 말고는 다른 번거로운 부분이 없었습니다.

웹이 아닌 앱으로 확인했을 때 제가 생각한 장점은 디자인한 화면 그대로를 볼 수 있다는 점입니다. url주소를 받아 브라우저로 여는 것은 따로 앱을 설치하지 않아도 된다는 점에서는 간편하지만 브라우저에 따라 상하단에 주소창, 표시줄이 보이기 때문에 디자인을 그대로 보는데 제약이 있습니다.

또한 여러 개의 파일을 관리하는데 편리했습니다. 프리뷰에서 두손가락으로 화면을 터치를 하면 프리뷰 모드에서 나올 수 있는데 파일 리스트를 한 번에 보거나 삭제할 수 있습니다. 다만 모바일 말고 웹작업을 확인하려면 -데스크탑용 뷰어는 따로 없기 때문에- 툴을 설치해서 확인하는 방법밖에 없습니다.

4. 프로토파이 정식버전에 추가된 항목 (3.31일 기준 V. 3.2.3)

베타버전에서 아쉽게 느꼈던 부분이 정식 버전에서 많이 보완되었습니다. 정식 출시 이후 꾸준히 업데이트되고 있어서 앞으로가 더 기대됩니다.

-프리뷰 기능 : 모바일에서만 확인 가능했던 프리뷰 기능이 추가 됨. (중요! 이제 웹작업도 데스크탑에서 확인할 수 있어요)

-플레이어 세팅 : 모바일 플레이어에서 터치 포인트 노출/숨기기를 설정할 수 있음.

-비디오 임폴트 지원

-레이어 정렬 패널 

-인터랙션 스위치 : 적용된 인터랙션을 잠시 꺼둘 수 있음

-클립보드 : 포토샵이나 스케치에서 복사하기/ 붙여넣기 가능

-이미지 교체 가능 (짱편리!!) 

-스케치 레이어 힌번에 임폴트 가능

(*바라는 점 : 레이어를 겹쳤을 때 구분을 위해 레이어를 끄고 켤 수 있는 기능이 있었으면 좋겠어요. 이미지가 많이 쌓이면 구분하기가 여럽더라구요. 또 데스크탑용 프리뷰에 녹화기능이 있었으면 좋겠어요.)

마치며

나름 제가 느낀 점을 바탕으로 사용기를 정리하였습니다. 프로토파이를 처음 시작하시는 분에게 작은 도움이라도 되었으면 좋겠습니다. 툴이 어렵지 않아서 초보자분들도 몇 번 사용하시다 보면 금방 익숙해지실 거라고 생각합니다. 얼마전에는 프로토파이 윈도우버전도 출시 되었는데, 맥용 또한 꾸준한 개선 작업과 업데이트가 진행중인 것 같아서 앞으로가 더 기대됩니다.

프로토파이를 사용하면서 트리거, 리스펀스로 인터랙션을 만드는 것에 큰 매력을 느꼈습니다. 오브젝트, 트리거, 리스펀스를 잘 조합하면 실제 모바일 앱에서 사용되는 거의 모든 인터랙션을 만들어낼 수 있었습니다. 무엇보다 프로토파이는 프로토타이핑이라는 툴의 목적에 맞게 배우기 쉽고 바로 빠르게 테스트할 수 있는 장점이 있는 툴이었습니다. 프로토파이의 개념만 잘 이해한다면 Lo-Fi는 물론이고 얼마든지 훌륭한 Hi-Fi 프로토타이핑을 만들어낼 수 있을 것입니다.

* 프로토파이 리뷰 1부 다시보기

– 가치디자인그룹 한승현

[관련글]
디자이너를 위한 프로토타이핑툴 프로토파이 리뷰 – 1부
디자이너를 위한 프로토타이핑툴 프로토파이 리뷰 – 2부
디자이너를 위한 프로토파이 팁 1 – Chain 트리거
디자이너를 위한 프로토파이 팁 2 – Range 트리거
디자이너를 위한 프로토파이 팁 3 – 범위값 확인하기