툴 :: Invision Craft prototype beta (v1.2.9)_리뷰

베타를 설치 후 직접 프로토타이핑 툴을 사용해 보았다. (자세한 영상은 링크 먼저 참고)

 

1. 초기화면

인비전 크래프트 프로토타이핑 툴을 사용하기 위해서는 앱스토어에서  InVisionApp을 다운 받아야한다.

그리고 와이파이 혹은 USB로 연결을 하고 앱을 실행시키면 연동을 할 수 있다. 스케치에서 새로운 파일을 만들면 앱에서 파일 생성이 된다. 이를 클릭하면 된다.

 

2. Fixed Header/Footer 

파일을 생성하고나면 기본 액션 4가지를 선택 할 수 있는 버튼이 나타난다. 비활성화 상태로 보이지만, 액션을 주고 싶은 레이어를 선택하면 활성화가 된다.

우선 1번과 2번 헤더와 푸터를 고정해보자. 

긴 컨텐츠 파일에서 헤더와 푸터를 픽스시켜주고 앱뷰어에서 확인을 하면 지정한 헤더와 푸터는 고정되고 컨텐츠만 스크롤이 된다.

매우 간단하다. 하지만 난 여기서 오류가 발생했다. 헤더는 잘 고정 되지만, 푸터는 고정시키면 뷰어에서 사라져 버린다. 

간단한 테스트에서는 되는 것 같지만, 안되는 경우가 나말고 다른 이도 있는 거 보니 버그인 것 같다.  

3. Web View 

우측 크래프트바에서도 액션을 지정할 수 있지만 레이어에서도 가능하다. 레이어에 마우스 오버를 하면 좌측에 플러스버튼이 생기는데 이를 클릭하면 원하는 액션을 지정할 수 있다. 이 중에서 웹뷰의 두가지 기능 살펴보자.  

1. Website URL - 해당 링크로 이동

2. Embed -  유튜브, 비메오, 구글지도등의 소스코드 입력시 해당 화면 출력

나는 여기서 또 다른 오류가 발생한다. 미디움 영상에서는 삽입시킨 리스트영역을 누를시 해당 화면으로 이동된다. 

하지만 나는  URL 또는 embed 방식 모두 입력화면이 그대로 노출되어버린다. 혹시나 해서 영상과 똑같은 아이프레임 링크 삽입까지 했는데도 실패. 왜 그런걸까...

그리고 링크를 제거하는 기능도 발견 못했다. 주소를 지우면 저장이 안된다.

왼쪽 : 적용 전, 오른쪽 : 임베드 적용 후

4. Input Field

인풋 필드는 가장 선택옵션이 많다. 우선 원하는 텍스트를 클릭하고 인풋필드 버튼을 클릭한다.

인풋박스의 용도를 선택해주고 해당 옵션들을 선택하면 다양한 액션이 구현된다.   

나는 플레이스홀드를 간단하게 주소입력 이라고 적어놓았다. 그리고 뷰어에서 실행해보니 입력영역 width값이 너무 좁아서 메일주소를 작성할 수가 없었다. 원인을 살펴보니 플레이스홀드의 길이만큼만 입력이 되는 것이었다. 그래서 주소입력 위드값을 픽스드(fixed)로 해서 늘려주었더니 문제가 해결되었다.

다른거는 디폴트로 놔둬도 문제가 없지만, Return Key Action 은 설정해야한다. 그래야 키패드가 사라지고 다음 액션을 취할 수 있다.

5. Linking Up Artboard

이제  아트보드끼리 연동이다. 액션을 줄 레이어를 선택하고 C를 누르면 파란색 라인이 레이어와 마우스커서 사이에 생긴다. 이 떄 이동할 아트보트를 선택해주면 자동으로 제스처, 행동, 애니메이션등을 설정할 수 있는 팝업이 뜬다. 여기서 원하는 액션을 선택해주면 끝이다.  

아트보드 뿐만 아니라 스마트폰의 기본 기능들과 연결하여 사용할 수 있다.

기타로 모든 액션들은 한꺼번에 삭제도 가능하다.

후기

현재 발생한 몇몇 버그들만 빼면 다른 프로토타이핑 툴과 비교하였을 때 확실히 간편하다고 느꼈다. 프레이머처럼 인터랙션을 화려하게 줄 수는 없지만, 스케치 안에서 모든 인터랙션을 만들 수 있기 때문에 레이어가 꼬이거나 하는 문제는 없을 것 같다. 뷰어로 보는 것 말고는 공유기능은 아직 없다. 다만 한 번 실행한 파일은 연동 없이 내 기기에서 볼 수 있다. 기타등등의 많은 개선이 필요하겠지만, 큰 문제들은 아니라고 본다! 정식 버전 출시가 기다려진다.

---

참고

https://medium.com/