#06. Prototyping tools (4)
인비전(InVision) & 슬랙(Slack).
01. 자신에게 가장 유용한 도구를 찾기 위한 기준
02. 스케치 (+제플린 및 몇몇 유용한 플러그인)
03. 인비전 / 슬랙
04. 인터랙션 프로토타이핑 툴 오버뷰 (2016.7)
InVision, collaboration & workflow platform.
Design Better, Faster, 'Stronger' and Together with InVision.| 01. Basic Information
이름: InVision
요약: 디자이너들과 동료들을 위한 빠르고, 가볍고, 쉬운 협업 / 워크플로우 / 프로토타이핑 도구
제작사: InVision
운영체제: Web (Mac/Windows, Photoshop/Sketch 가리지 않습니다), 프로토타이핑 확인을 위한
Mobile app 운영
가격: 1개의 프로젝트에 대해선 Free. 프로젝트의 갯수, 혹은 팀의 규모에 따라 다른 가격정책운영.
(http://www.invisionapp.com/plans)
홈페이지: http://www.invisionapp.com/
공식소개영상:
웹과 스마트폰, 타블렛, TV 등 다양한 플랫폼을 만족시키는 최근의 서비스들은 필연적으로 혼자보다는 여러 명의 디자이너/ 기획자 / 개발자가 팀을 이루어 만들어집니다. 이러한 환경을 충분하게 서포트하기 위해 다양한 도구들이 출시되어 왔지요. 그 중에서 인비전(InVision)은 슬랙(Slack)과 더불어서 현재 UI 디자인 필드에서 가장 많이 쓰이고 있는 협업 도구일 것입니다.
인비전은 프로젝트의 워크플로우(workflow) 관리*와 로우 피델리티 프로토타이핑(Low fidelity Prototyping)*을 지원하고 이를 바탕으로 디자이너와 개발자, 기획자 간의 원만한 협업 진행을 도와줍니다. 또한 협업을 돕기 위한 소소한 추가 기능들을 많이 마련해놓았습니다. 아래 Feature 부분에서 조금 정리를 해보도록 하지요.
워크플로우: 일반적으로는 '작업 흐름'을 의미합니다. 풀어쓰자면 한 팀 안에서 일어나는 각종 업무들의 성격과 기간, 인원들을 구분짓고 정해진 시간 안에 일이 진행되는 일련의 과정을 뜻합니다.
로우 피델리티 프로토타이핑: 낮은 수준의 정확도를 가진 프로토타이핑. 통상적으로는 전체 서비스의 흐름이나 넓은 범위의 시나리오를 확인해보고자 할 때 제작하는 프로토타이핑을 뜻합니다. 복잡한 인터랙션/애니메이션이 들어가기보다는 스크린샷과 스크린샷을 연결하고 그 연결 부분의 발화동작(ex.터치, 스와이프)과 간단한 인터랙션(ex.디졸브, 플립)적용 정도로 진행합니다.
| 02. Features
*Features 내용을 확인하시기 전에 Basic Information의 공식 소개 영상을 미리 보시는 것을 추천드립니다.
인비전에 로그인하면 보게 되는 첫 화면.a. 기본 화면 구성
위 화면이 인비전의 기본 화면입니다.
상단에는 Prototypes / Boards / Activity / People / Learn 으로 구분되어 있습니다.
Prototypes: 작업한 프로토타입 프로젝트들이 모아져 있습니다.
Boards: 작업에 필요한 서체, 이미지, 컬러, 아티클, 노트 등 각종 리소스를 보관/공유합니다.
(인비전 보드 소개영상: https://youtu.be/CBCAAvKtpCI)
Activity: 인비전으로 작업한 내용의 히스토리들을 볼 수 있습니다.
People: 자신과 인비전을 함께 사용하는 사람들의 리스트를 보여줍니다.
Learn: 인비전의 기본적인 사용법과 팁들이 정리되어 있습니다.
b. Prototypes
인비전의 주 작업은 Prototypes 에서 이루어집니다.
작업한 Prototype Project를 선택하면 아래처럼 화면이 펼쳐집니다.
작업할/작업 중인 Prototype을 선택하여 들어갔을 때의 화면. (Screens가 선택된 상태)
Prototype Project 제목 하단에 Screens / Workflow / Activity / Comments / Assets 항목이 생긴 걸 확인할 수 있습니다.Screens: 작업한 화면들의 스크린샷을 나열합니다.
(작업한 PSD / JPEG / PNG / Sketch 파일 등을 드래그 & 드롭하면 자동으로 나열됩니다.)
나열된 스크린샷 중 하나를 선택하면 아래와 같이 디테일 확인 모드로 진입합니다.
이 부분에서 디자이너와, 함께 일하는 동료들은 시안을 확인하고 로우 피델리티 프로토타이핑을 진행해보고 시안에 대해 코멘트를 남기는 등의 활동(Activity)을 할 수 있습니다.
디테일 확인 모드 (Preview / Build -로우 피델리티 프로토타이핑 만드는 모드- / Comment / History)Workflow: 진행상황을 On Hold / In Progress / Needs Review / Approved로 구분하여 관리합니다.
팀원들과 함께 Workflow를 관리하고 진행상황을 확인할 수 있습니다.Activity: 선택한 Prototype project 범위 안에서 인비전으로 작업한 히스토리를 보여줍니다.
Comments: 팀원들이 코멘트한 상황들을 한 눈에 정리하여 보여줍니다.
Assets: 작업에 사용된 Assets을 모아놓는 곳입니다.
그 밖에 User Test 를 위한 기능과 각종 Share를 위한 기능들이 포함되어 있습니다.
| 03. Videos
이해를 돕기 위해, 인비전 측에서 정리한 영상을 몇 개 보여드리는 편이 좋을 것 같습니다.
인비전을 사용한 기본적인 프로젝트 진행
인비전으로 간단한 프로토타입 만들기
인비전으로 팀원들과 협업하기
Slack, a messaging app for teams.
| 01. Basic Information
이름: Slack
요약: 팀원들간의 협업을 위한 간편하고 쉬운 메세징/파일교환 서비스
제작사: Slack
운영체제: Web / Mobile
가격: 작은 팀에서 사용할 경우 무료. 팀의 규모에 따라 다른 가격정책운영.
(https://slack.com/pricing)
홈페이지: https://slack.com/
공식소개영상:
인비전이 프로토타이핑 작업 과정과 워크 플로우에 치중되어 있다면 슬랙은 팀원간에 커뮤니케이션 트랙킹에 집중하는 느낌이 강합니다. 인비전에 비해 좀 더 간단하고 가벼운 인상이죠. 팀원간의 커뮤니케이션을 위해서 만들어졌지만 커뮤니티 성격으로 운영하는 모습들도 많이 볼 수 있습니다.
슬랙을 어떤 식으로 사용하는지는 아래 영상으로 간단히 확인하실 수 있을 것 같습니다.
https://www.youtube.com/watch?v=9RJZMSsH7-g
Summary
인비전과 슬랙은 협업을 위한 도구라는 말이 무색하지 않게 여럿이서 함께 일할 때 그 탁월함을 발휘합니다.
서비스를 디자인하는 과정은 실제로 디자인을 하는 시간보다 함께 작업하는 사람, 유관 부서와의 커뮤니케이션에 쓰는 시간이 훨씬 많다고들 하죠. 그 정도로 다양한 사람들과의 대화, 설득이 차지하는 비중이 큽니다.
그런 과정에서 생기는 미스 커뮤니케이션, 오해, 상상력만으로 대화함에 따라 만들어지는 불필요한 상황들을 해소하는데 도움을 줄 수 있다는 점에서 큰 가치가 있다고 생각되네요.
