03 디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ③

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

https://ditoday.com/design/%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88%EB%A5%BC-%EC%9C%84%ED%95%9C-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9D%B4%ED%95%91-%ED%88%B4-%ED%94%84%EB%A1%9C%ED%86%A0%ED%8C%8C%EC%9D%B4-%EB%A6%AC%EB%B7%B0-2/

① 팁

①-① 투명 버튼

프로토타이핑은 빠르게 작업하고 테스트/수정을 반복해야 하기 때문에 제작에 너무 오랜 시간이 걸려서는 안 된다. 그게 쉽고 빠르게 작업할 수 있는 툴을 사용하는 이유이기도 하다. 그래서 어떠한 버튼에 트리거를 줄 때 버튼 이미지를 따로 떼어 저장한 뒤 불러오는 것은 굉장히 번거로운 일이다.

아직 포토샵 임폴트를 지원하지 않기 때문에 이미지를 저장하여 따로 삽입해야 한다(문의해보니 포토샵 임폴트는 추후에 지원 예정이라 함). 버튼이 한두 개도 아니고 수십 개의 버튼 이미지를 관리하기 쉽지 않을뿐더러 프로토타입이라 디자인이 바뀔 가능성도 높아 그때마다 업데이트하기란 보통 일이 아니다.

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

①-② 투명 버튼 위치가 겹쳐서 오류가 생길 때

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

메인과 메뉴의 화면상 투명 버튼 위치가 비슷할 땐(햄버거 버튼 btn_1, 세팅 버튼 btn_2) 투명 버튼 레이어의 위치를 이동해주는 것으로 해결이 가능했다. 메뉴 이미지 위로 btn_1 레이어를 이동하고, 메인 화면의 btn_2 레이어는 메인 이미지 바로 위로 배치했다.

①-③ 씬(Scene)으로 화면 분리

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

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

①-④ 토글 버튼

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

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

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

①-⑤ 클라이언트에게 파일 전달

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

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

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

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

② 프로토파이 정식 버전에 추가된 항목(2017년 3월 31일 기준 V. 3.2.3)

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

마치며

나름 필자가 느낀 점을 바탕으로 적어봤는데 프로토파이를 처음 시작하시는 분에게 작은 도움이라도 됐으면 한다. 툴이 어렵지 않아 초보자도 몇 번 사용하다 보면 금방 익숙해질 거라 생각한다. 얼마 전에는 프로토파이 윈도우 버전도 출시됐는데, 맥용 또한 꾸준한 개선 작업과 업데이트가 진행 중인 듯해 앞으로가 더 기대가 된다.

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

• 디자이너
• 모바일
• 앱
• 웹사이트
• 프로토타이핑
• 프로토타입