인비전 invision 쉐어 도구 – 아이폰 프로토타입 공유 및 커뮤니케이션 방법

<프로토타입 URL 접속 화면 중 '코멘트 모드'>

 

인비전으로 만든 프로토타입을 공유하는 방법은 크게 2가지다. 소셜미디어 계정에 공유하는 방법과 URL 또는 EMBED 코드를 통한 공유 방법이다.

 

현재 공유 가능한 소셜미디어는 슬랙과 드리블이다. 향후 비핸스도 추가될 모양이다. 여기서는 소셜미디어 공유 방법은 소개하지 않는다. 

 

여기서는 URL로 프로토타입을 공유하고, PC 브라우저로 접속해서 테스트하는 방법 위주로 소개한다. 

프로토타입을 URL로 공유하면 PC나 스마트폰 등 어떤 디바이스에서든 브라우저를 통해 접속해서 테스트 할 수 있다. 그런데 스마트폰 브라우저에서 접속할 경우 코멘트를 작성할 수는 없다. 

코멘트를 주고받으며 커뮤니케이션 하려면 PC 브라우저에서 접속해야 한다.

 

 

PC 브라우저로 접속한 모습

URL로 접속하면 처음 상태는 테스트 모드다. 프로토타입을 테스트하다가 화면 하단에서 Comments ON하면 코멘트를 작성할 수 있다. 

<좌 - 테스트 모드 / 우 - 코멘트 모드>

 

 

아이폰6 사파리 브라우저로 접속한 모습

코멘트 모드는 없고, 테스트만 해볼 수 있다. 

 

*참고

아이폰용 프로토타입을 아이폰6 사파리 브라우저에서 URL로 접속해서 테스트 했을 때 작동이 불안정한 느낌을 받았다. 특히 Screen as Overlay로 띄운 액션시트 팝업이 정해진 위치에 나타나지 않고, 나타났다 바로 사라지는가 하면, 화면이 한번 스크롤된 다음에는 아예 제대로 작동하지 않는 현상이 있었다. (테스트 환경 iPhone6 / iOS 9.3.2)

크롬 브라우저에서 접속했을 때는 비교적 안정적으로 작동했다. 

아이폰 프로토타입을 테스트하려면 브라우저에서 URL로 접속하는 방법보다 인비전 모바일앱을 설치하고 인비전 앱에서 테스트하기를 권한다. 

 

 

쉐어 도구 5가지

화면 하단에서 SHARE 버튼을 눌러보면 다음과 같은 팝업이 나타난다.

 

5가지 메뉴가 보인다.

• URL
• EMAIL
• SMS
• EMBED
• DOWNLOAD

URL메뉴에서 테스트 URL을 생성한다. URL을 이메일로 전달하거나, 휴대폰번호를 입력해 문자메시지로 전달 가능하다. 앞서 말한 이유로 아이폰 프로토타입을 폰에서 직접 테스트하기 위해 문자메시지로 전달하는 것은 추천하지 않는다. 

URL 관련 옵션은 아래에서 자세히 살펴볼 것이다.

 

EMAIL

이메일주소를 콤마(,)로 구분해서 여러 명에게 보낼 수 있다. Add personal note를 클릭하면 메시지를 입력할 수 있다. 

 

이렇게 이메일로 전송된다.

 

SMS

 

 

문자메시지의 URL을 탭하면 기본 브라우저가 실행된다.
나는 아이폰을 사용하기 때문에 사파리 브라우저가 실행됐다.

 

EMBED

웹 문서에 삽입할 수 있는 EMBED 코드를 생성해준다. 

 

코드를 복사해서 삽입하면 다음과 같은 모양으로 웹 문서 내에 보여지고, 프로토타입을 작동시켜 볼 수 있다. 코멘트 작성은 안 된다. 

아래 글에서 샘플 프로토타입을 임베드 코드로 삽입해 놓았으니 참고하기 바란다. 

☞ 인비전 invision 제스처 및 트랜지션 정리

 

DOWNLOAD

ZIP파일로 다운로드 할 수 있다. 인터넷이 불가능한 곳에서 테스트 할 경우 사용할 수 있다.

 

압축파일이 생성되기를 기다렸다가 다운로드 받는다.

 

압축을 해제하고 index.html을 실행시켜서 테스트한다. 코멘트 작성은 안 된다.

 

 

URL 상세 옵션 

처음에는 3가지 옵션과 URL 복사하기가 보이고, More Options을 클릭하면 5가지가 더 나타난다.
옵션을 ON/OFF 하면 아래 URL이 바뀐다. 이미 공유한 URL의 옵션을 변경하면 새로 생성된 URL을 다시 공유해야 한다. 

 

기본 옵션

• Allow commenting on screens 코멘트 작성 허용 여부
• Allow access to all screens in prototype 프로토타입 내 화면이미지 모두보기 허용 여부 
• Password Protect 비밀번호 설정

 

비밀번호 설정 ON

 

접속 시 다음과 같이 비밀번호를 입력 받는다. 

 

옵션 기본설정 상태일 때 URL로 접속하면 화면 하단 우측에 다음과 같은 도구들이 보일 것이다. 

• 문자메시지로 프로토타입 URL 전송하기
• 프로토타입 화면이미지 모두보기
• 코멘트 개수 (신규/전체)
• 코멘트 모드 ON/OFF

 

코멘트 모드일 때

 

코멘트 작성 비허용 시

 

화면이미지 모두보기 비허용 시
바둑판 모양의 아이콘이 없다.

 

화면이미지 모두보기는 프로토타입 내 전체 화면이미지를 보는 기능이다.

 

*참고

테스트 URL로 접속한 화면에서 문자메시지 전송으로 URL을 보내는 것은 비추다.
공유 옵션에서 시작 화면 설정한 것이 반영되지 않는다. 전화번호를 입력 할 때 국가 선택하기가 매우 불편하다. 좁은 영역에서 스크롤링이 어렵다. 다행히 South Korea의 첫 글자 S를 입력하니 S로 시작하는 첫번째 국가로 포커스를 이동해주긴한다. 

인비전 쉐어 도구 팝업에서 SMS 보낼 때 처럼 접속 국가가 기본으로 선택되어 있다면 좋을텐데 이곳은 그렇지가 않다.

 

More Options

• Force "Add to Home Screen" on iOS and Android
  스마트폰에서 접속한 경우 프로토타입 화면을 열기 전에 홈화면에 바로가기 아이콘을 설치하라는 메시지가 나온다.
  전에는 홈화면에 바로가기 설치가 거의 강제로 이루어졌는데 최근에는 정책이 바뀌었는지 바로가기 설치를 하지 않고 그냥 브라우저에서 테스트해 볼 수 있게 되었다. 

• Start the share link at 
  우측의 화면목록 리스트에서 선택한 화면이 테스트 URL의 첫 화면으로 표시된다.

• Hotspots enabled 
  이 옵션을 끄면 반응영역 설정한 것을 반영하지 않는다. 좌우 스와이프를 통해 프로토타입 상의 화면 이미지를 이전, 다음으로 넘겨보기만 가능하다.

• Prevent hotspot hinting
  기본적으로 화면에서 반응영역이 아닌 부분을 클릭(탭)하면 반응영역이 설정된 곳을 파란색으로 잠깐 동안 표시해주는데 이 옵션을 활성화하면 그 기능을 끈다. 즉 탭 할 수 있는 곳이 어디인지 힌트를 주지 않는다. 

• Require user identification 
  프로토타입 화면을 열기 전에 이름과 이메일을 입력받는다. 코멘트를 입력할 때 작성자를 구분하기 위해서 이 옵션을 활성화하는 것도 좋을듯하다. 

 

 

코멘트 모드

화면 하단 우측의 코멘트 모드를 ON하면 아래와 같은 화면이 된다. 이때 화면 이미지 위에 마우스를 올려보면 클릭해서 코멘트를 남기라는 도움말이 나온다.

 

이미지 위를 클릭하면 다음과 같이 궁금한 점이나 의견을 작성할 수가 있다. 

 

Add a new comment를 클릭해서 답변을 작성하거나 다른 의견을 추가할 수 있다. 

  

완료된 것은 Mark as resolved를 체크하면 화면에서 표시가 사라진다. 

 

완료된 것을 다시 보고 싶으면 화면 상단 우측의 Show Resolved를 체크하면 된다.

 

답변이 달리면 메일로 알림을 준다. 화면의 어느 부분에 관한 것인지 이미지 표시까지 함께.

 

여기까지 인비전 쉐어 도구를 사용해서 프로토타입 공유 및 커뮤니케이션 방법을 살펴보았다. 

지금까지 아이폰 사례를 가지고 인비전에 관한 내용을 작성했는데 앞으로는 웹사이트 프로토타입에 관한 것을 살펴보려고 한다.