디자이너를 위한 프로토타이핑 툴, 프로토파이 리뷰 ②
실무에서 프로토파이 툴을 사용해 모바일 앱 프로토타이핑을 작업하면서 배웠던 것들을 나눈다.
이번 글에서는 실무에서 프로토파이 툴을 사용해 모바일 앱 프로토타이핑을 작업하면서 배웠던 것들을 나누려 한다. 쉽게 배울 수 있는 툴이어서 배움에 큰 어려움은 없을 줄 알았는데 몇몇 예제들은 이해하는 데 시간이 걸렸다. 몇 개월 전만해도 공식 웹사이트에서 한국어 지원을 하지 않아서 더 시간이 걸린 것도 있다(지금은 한국어 웹사이트가 오픈한 상태). 나름 몇 가지 팁이 생겼고, 필자가 잘 기억하기 위해 적어두었는데 아직 프로토파이에 대한 예제가 많지 않아서 공유해야겠다는 생각이 들어 글을 쓰게 됐다.
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/
① 프로토파이의 인터랙션 개념
지난 글에서 언급했듯이 프로토파이는 O(오브젝트) + T(트리거) + R(리스펀스)의 조합으로 인터랙션을 만든다. 식탁 위의 사과(오브젝트)를 손으로 움직여(트리거) 접시에 올리는(리스펀스) 것과 같은 원리다. 이 세 가지는 다양한 경우의 수로 조합될 수 있다.
①-① 가장 일반적인 경우는 A라는 하나의 오브젝트에 하나의 트리거를 주었을 때, A의 상태가 변하는 인터랙션이 있다(ex. 버튼을 눌렀을 때 눌린 버튼 형태가 바뀜).
①-② A라는 오브젝트에 트리거를 주었을 때, 다른 오브젝트인 B의 리스펀스로 출력될 수도 있다(ex. 버튼을 눌렀을 때 토스트 팝업이 나온다).
①-③ A라는 오브젝트에 트리거를 줬을 때 두 개 이상의 오브젝트가 동시에 바뀌거나(ex. 버튼을 눌렀을 때 버튼과 배경이 동시에 바뀜), 하나의 오브젝트에 두 개 이상의 트리거(Tap/Drag)를 동시에 적용해 리스펀스가 일어나게 할 수도 있다.
①-④ 때론 트리거된 오브젝트는 가만히 있고 그 외의 다른 오브젝트들이 반응하기도 한다.
이렇듯 오브젝트, 트리거, 리스펀스의 개수나 연결 방법에 따라 수많은 조합의 인터랙션을 만들 수 있다. 앞서 설명한 것보다 훨씬 다양한 경우의 조합이 가능하다. 왠지 위와 같이 모형을 만들어 설명하니 더 어렵게 느껴지기도 한데 막상 작업하다 보면 정말 편리한 개념이라고 생각될 것이다. 트리거와 리스펀스의 이해를 돕기 위해 개념을 몇 가지 예제로 준비했다.
② 예제
②-① 좋아요 버튼 컬러 바꾸기
가장 일반적인 인터랙션이다. ‘좋아요 버튼’을 눌렀을 때 블랙 컬러가 오렌지로 바뀌는 예제를 만들어보겠다. 원래라면 버튼을 눌렀을 때 아이콘 컬러가 바뀌는 리스펀스를 주면 간단하다. 그런데 프로토파이에서는 툴 안의 오브젝트가 아닌 외부의 png/svg 이미지의 컬러를 바꾸는 것이 불가능하다. 어쩔 수 없이 컬러 상태가 다른 두 개의 png 이미지를 이용해서 컬러가 바뀌는 듯한 인터랙션을 주었다.
②-①-① ‘좋아요 버튼’의 상태가 다른 두 장의 이미지를 준비한다. 버튼이 눌렸을 때 이미지(Img_on)를 레이어 밑으로 배치한다.
②-①-② 좋아요 버튼 위에 가상의 투명 버튼을 만든다. 투명 버튼은 사각형 오브젝트를 꺼내서 fill 값을 0으로 하면 된다.
②-①-③ 투명 버튼에 Tap 트리거를 주고 Opacity 리스펀스를 준다. 이때 Tap 트리거엔 투명 버튼이, Opacity에는 Img_off 이미지가 연결돼야 한다(타이틀 옆에 작은 썸네일은 트리거와 리스펀스가 어떤 이미지에 연결돼 있는지 보여준다).
②-①-④ 속성창에서 Change to와 Duration 값을 0으로 준다. Change to는 최종으로 변화될 알파값을 의미하고 Duration은 기간을 말한다. Duration을 0으로 했을 땐 누르는 즉시 컬러가 변할 것이다. 서서히 변하게 하고 싶으면 수치를 늘려주면 된다. 프리뷰 창에서 잘 작동되는지 확인한다.
②-② 팝업
버튼을 눌렀을 때 해당 버튼이 아닌 다른 이미지가 변하는 인터랙션이다. 버튼을 눌렀을 때 메뉴가 슬라이딩 되는 예제를 만들어보려 한다. 아래와 같이 이미지를 준비한다.
②-②-① 마찬가지로 아이콘 위에 투명 버튼을 올려준다.
②-②-② 이미지(Img_menu.png)를 추가하고 위치를 화면 밖으로 이동시킨다(y=-667).
②-②-③ Tap 트리거에 Move 리스펀스를 준다. 탭을 하면 y=-667이었던 popup 이미지 위치가 y=0으로 이동하게 된다. 프리뷰 창에서 잘 작동되는지 확인한다.
②-③ 버튼과 영역
이미지 하나에 두 개의 트리거가 같은 하나의 결과를 도출하는 인터랙션이다. 좌측 버튼을 눌렀을 때와 좌측 영역을 스와이프했을 때 동일하게 메뉴 창이 등장하도록 하는 예제다.
②-③-① 메인 이미지 위에 투명 버튼 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 이미지를 레이어 상 앞에 놓는다.
②-④-② 리뷰 버튼 위에 투명 버튼을 올린다.
②-④-③ 투명 버튼에 Tap 트리거를 준다. Tap이 됐을 때 나타나는 리스펀스는 1)Img_review가 올라오는 것, 2)배경 알파값 변화다. 먼저, 이미지의 y값을 이동하기 위해 Move 리스펀스를 주겠다. 이미지는 아래에서 위로, y축만 바뀌기 때문에 속성 창의 y값을 최종값(0px)으로 바꿔준다. 버튼을 누르면 y값이 667 -> 0px로 바뀌면서 이미지가 움직이게 된다.
②-④-④ 버튼을 누르면 Img_review가 나오는 동시에 배경이 어두워지게 하기 위해 사각형 오브젝트(Dim)를 만든다. 탭하기 전에는 알파값이 0인 상태이기 때문에 Opacity를 0으로 두고 Tap 트리거에 Opacity 리스펀스를 하나 더 추가해 버튼이 눌렸을 때 알파값이 70으로 바뀌도록 설정한다. 완료 후에는 프리뷰 창에서 잘 작동되는지 확인해 본다.
* 이어지는 내용은 디아이 매거진 2월호 지면을 통해 확인하실 수 있습니다.
