Notification

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인
한승현 라이트브레인 가치디자인그룹

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

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

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

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

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

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

①-② A라는 오브젝트에 트리거를 주었을 때, 다른 오브젝트인 B의 리스펀스로 출력될 수도 있다(ex. 버튼을 눌렀을 때 토스트 팝업이 나온다).

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

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

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인 디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

 

①-④ 때론 트리거된 오브젝트는 가만히 있고 그 외의 다른 오브젝트들이 반응하기도 한다.

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

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

② 예제

②-① 좋아요 버튼 컬러 바꾸기

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

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

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인
Img_off
디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인
Img_on

②-①-② 좋아요 버튼 위에 가상의 투명 버튼을 만든다. 투명 버튼은 사각형 오브젝트를 꺼내서 fill 값을 0으로 하면 된다.

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

②-①-③ 투명 버튼에 Tap 트리거를 주고 Opacity 리스펀스를 준다. 이때 Tap 트리거엔 투명 버튼이, Opacity에는 Img_off 이미지가 연결돼야 한다(타이틀 옆에 작은 썸네일은 트리거와 리스펀스가 어떤 이미지에 연결돼 있는지 보여준다).

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

②-①-④ 속성창에서 Change to와 Duration 값을 0으로 준다. Change to는 최종으로 변화될 알파값을 의미하고 Duration은 기간을 말한다. Duration을 0으로 했을 땐 누르는 즉시 컬러가 변할 것이다. 서서히 변하게 하고 싶으면 수치를 늘려주면 된다. 프리뷰 창에서 잘 작동되는지 확인한다.

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

②-② 팝업

버튼을 눌렀을 때 해당 버튼이 아닌 다른 이미지가 변하는 인터랙션이다. 버튼을 눌렀을 때 메뉴가 슬라이딩 되는 예제를 만들어보려 한다. 아래와 같이 이미지를 준비한다.

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인
Img_BG
디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인
Img_Menu

②-②-① 마찬가지로 아이콘 위에 투명 버튼을 올려준다.

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

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

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

②-②-③ Tap 트리거에 Move 리스펀스를 준다. 탭을 하면 y=-667이었던 popup 이미지 위치가 y=0으로 이동하게 된다. 프리뷰 창에서 잘 작동되는지 확인한다.

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

②-③ 버튼과 영역

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인
Img_main

 

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인
Img_menu
디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인
Img_BG

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

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

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

②-③-② A버튼은 Tap, B버튼은 Fling 트리거를 준다.

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

②-③-③ Tap의 리스펀스로 메인, 메뉴 이미지가 동시에 우측으로 움직이게 한다(Img_main은 x=0 -> 60, Img_menu는 x= -110 -> 30). 트리거는 달라도 결과는 같기 때문에 두 개의 Move 리스펀스를 복사해 Fling에도 적용한다. 프리뷰 창에서 잘 작동되는지 확인해 본다.

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

②-④ 선택창 + 비활성화된

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

②-④-① Img_main, Img_review 이미지를 준비하고 Img_main 이미지를 레이어 상 앞에 놓는다.

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인
Img_main
디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인
Img_review

 

②-④-② 리뷰 버튼 위에 투명 버튼을 올린다.

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

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

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

②-④-④ 버튼을 누르면 Img_review가 나오는 동시에 배경이 어두워지게 하기 위해 사각형 오브젝트(Dim)를 만든다. 탭하기 전에는 알파값이 0인 상태이기 때문에 Opacity를 0으로 두고 Tap 트리거에 Opacity 리스펀스를 하나 더 추가해 버튼이 눌렸을 때 알파값이 70으로 바뀌도록 설정한다. 완료 후에는 프리뷰 창에서 잘 작동되는지 확인해 본다.

디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②-프로토파이, 프로토타이핑, 라이트브레인

* 이어지는 내용은 디아이 매거진 2월호 지면을 통해 확인하실 수 있습니다.

Digital Agency AD

비닷크리에이티브-