brunch

You can make anything
by writing

- C.S.Lewis -

by 김지홍 Dec 27. 2015

#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/


공식소개영상:

https://youtu.be/0qisGSwZym4


웹과 스마트폰, 타블렛, 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


이해를 돕기 위해, 인비전 측에서 정리한 영상을 몇 개 보여드리는 편이 좋을 것 같습니다.


인비전을 사용한 기본적인 프로젝트 진행 

https://youtu.be/qpTNy-hu3pg



인비전으로 간단한 프로토타입 만들기

https://youtu.be/zNoBmjg-NnQ



인비전으로 팀원들과 협업하기

https://youtu.be/J09zw08ihw4







Slack, a messaging app for teams. 


|   01. Basic Information


    이름: Slack

    요약: 팀원들간의 협업을 위한 간편하고 쉬운 메세징/파일교환 서비스

    제작사: Slack

    운영체제: Web / Mobile

    가격: 작은 팀에서 사용할 경우 무료. 팀의 규모에 따라 다른 가격정책운영.
             (https://slack.com/pricing)

    홈페이지: https://slack.com/


공식소개영상:

https://youtu.be/W8_tGC8pNvI

 슬랙 소개 영상


인비전이 프로토타이핑 작업 과정과 워크 플로우에 치중되어 있다면 슬랙은 팀원간에 커뮤니케이션 트랙킹에 집중하는 느낌이 강합니다. 인비전에 비해 좀 더 간단하고 가벼운 인상이죠. 팀원간의 커뮤니케이션을 위해서 만들어졌지만 커뮤니티 성격으로 운영하는 모습들도 많이 볼 수 있습니다. 

슬랙을 어떤 식으로 사용하는지는 아래 영상으로 간단히 확인하실 수 있을 것 같습니다.

https://www.youtube.com/watch?v=9RJZMSsH7-g

슬랙에 대한 기본적인 설명.








Summary


인비전과 슬랙은 협업을 위한 도구라는 말이 무색하지 않게 여럿이서 함께 일할 때 그 탁월함을 발휘합니다. 

서비스를 디자인하는 과정은 실제로 디자인을 하는 시간보다 함께 작업하는 사람, 유관 부서와의 커뮤니케이션에 쓰는 시간이 훨씬 많다고들 하죠. 그 정도로 다양한 사람들과의 대화, 설득이 차지하는 비중이 큽니다. 


그런 과정에서 생기는 미스 커뮤니케이션, 오해, 상상력만으로 대화함에 따라 만들어지는 불필요한 상황들을 해소하는데 도움을 줄 수 있다는 점에서 큰 가치가 있다고 생각되네요. 

매거진의 이전글 #05. Prototyping tools (3)

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
브런치 시작하기

카카오계정으로 간편하게 가입하고
좋은 글과 작가를 만나보세요

카카오계정으로 시작하기
페이스북·트위터로 가입했다면