brunch

You can make anything
by writing

C.S.Lewis

by MJ Aug 16. 2018

Sketch 디자인툴에서 Invision Studio

UI 디자인툴 포토샵에서 XD 또는 스케치로 진화하는 새로운 툴

요즘은 Invision Studio에 꽂혀서 공부를 하다보니 이런 저런 정보들을 보고 드는 생각은

아직까지는 디자인툴의 과도 기간이라 지금은 포토샵에서 스케치툴로 많이 갈아탔지만

디자인 툴이 앞으로도 점점 많은 변화들이 찾아올수도 있어서 또 다른 툴로 갈아탈수있다고 생각한다.


작은 인원의 팀 단위이면 더 더욱 변화에 발 빠르게 적응할수 있을 것이고

인원이 많은 조직 팀 단위이면 빠르게 변화에 적응하기란 쉽지 않을 것이다.


좀 더 효율적이고 좋은 방법을 찾기 위해서는 먼저 새로운 경험하고 시도하고 판단해야할 것이다.

Sketch, Studio, Framer, Principle, Flinto, XD, Figma, Kite, Protopie, Facebook Origami ....


많은 프로토타입툴들이 있는데 요즘 새롭게 업데이트 된 스튜디오와 프레이머X가 일단 많은 발전 가능성이 보인다. 프레이머X는 아직 출시 전이라 스튜디오만 사용을 해봤는데 스케치와 굉장히 유사하게 되어있고 스케치 파일 불러오기도 가능하다. 앞으로 슬랙, 크래프트, 제플린 등 같은 확장형 앱들을 준비하고 있는거 처럼 보인다.


현재 해외에 다른 디자이너들은 반응이 어떠한지 궁금하여 미디엄 포스팅 글에서 찾아보던 글 중

흥미로운 글들이 있어서 찾아보고 구글번역의 도움을 받아 번역을 좀 하다보니 알게되었다 몇개월이나 

지난 글이라는 걸... 그렇지만 이왕 한거 공부할겸 정보도 공유하면 좋겠다 라는 취지로 글을 올리게 되었다.




출처: 

https://uxdesign.cc/invision-studio-is-out-but-are-designers-migrating-to-a-new-tool-again-102949210aeb



InVision Studio는 출시되었지만 디자이너가 새로운 툴로 다시 갈아탈까?


디지털 디자인 세계는 최근에 포토샵에서 스케치 툴로 집단 이주 하는 것을 볼 수 있었습니다. 이것은 디자인 워크 플로우를 구조화 하는 방식을 크게 바꿔 놓았다. 업계에서 과연 다른 이주를 준비하고 있을까? 


Studio는 지금 모두가 말하고 있는 그 툴 이다. InVision의 사람들이 만든 Studio는 아직 베타 버전이지만 이번 달에 공식적으로 공개가 된다. 



마케팅에서 본것 만큼 좋은 제품일까?


Studio는 “세계에서 가장 강력한 스크린 디자인 툴” 이라고 주장한다. 

그 프로모션 영상은 Sleek UI 와 혁신적인 기능을 판매에 매우 효과적이었지만 지금은 디자인 커뮤니티에서 실제로 작동하는 지 증명할 때이다. 


Invision Studio 홍보용 광고 영상

https://youtu.be/YXNk4gQCPSY


제가 아는 대부분의 디지털 디자이너는 스케티툴을 사용하여 스크린을 디자인 하는데 스케치만으로도 많은 것을 할 수 있다. 디자인을 클릭 가능한 

프로토타입으로 바꾸려면 InVision, Principle, Framer 로 전환하거나 다른 플러그인 / 툴 을 사용해야 한다. 그리고 한번 애니메이션이 된 프로토타입이면 스케치에서는 원상태로 되돌릴수가 없다. 적어도 기본적인 형태는 아니다. 


어도비XD는 Aki Fukai가 지적한 바와 같이 “Webflow와 Macaw가 도입 된 후 오랜 시간” 이 문제를 해결하기 위한 첫 번째 도구중 하나였다. 


“웹사이트, 모바일 앱 등을 설계하기 위해서 올 인 원 UX / UI 솔루션 인 어도비XD를 사용하여 컨셉에서 프로토타입까지 더 빠르게 이동한다” 이 시점까지 통합은 가장 큰 가치를 제안하고 차별화 하는 요소였다. 


몇년이 지난 지금, InVision이 동일한 문제를 해결하기 위해 자체적으로 착수해야 할 때라고 하였다. InVision Studio가 Product Hunt에서 2800개 이상의 Upvote를 받았고 이와 같은 솔루션을 얼마나 기다리고 있는지를 보여주는 지표가 되었다. 


Studio의 인터페이스는 구조면에서 스케치와 매우 유사하다. 사용자에게 친숙함을 만드는 것과 신선한 생각을 테이블에 적용하는 것 그리고 Studio가  안전한 측면에서 분명하게 오류를 범하는것 사이에 적절한 경계가 있다. 


클릭가능한 프로토타입을 통해 플로우가 결합되거나 아트보드들의 반응을 처리 할 때 그것이 아름답고 신선하다는 생각이 든다. 


다음은 Studio에서 제공하는 일부 기능을 다른 도구와 비교할 때 차별화 된 기능입니다. 

    반응형 디자인을 손쉽게 사용할 수 있는 적응 형 레이아웃 엔진   

그리고 Studio는 무료입니다~! 



생태계는 툴보다 더 가치가 있나?


“스케치는 사람들을 더 단순하게 끌어내는데 훌륭한 역할을 했습니다. 기회가 다시 존재한다고 생각합니다. 오늘날 생태계는 산산이 부서지며 불가능 하게 될 것이다” - InVision CEO인 Clark Valberg는 FastCompany와의 인터뷰 에서 


InVision의 Studio 출시 전략에 대해 흥미롭고 유망한 점은 특정 소프트웨어에 너무 많은 노력을 기울이기보다는 디자이너를 중심으로 서비스의 툴 과 생태계를 구축하는 것에 대해서 전체적인 접근하는 방식이라는 점이다. 


Studio는 이전 부터 InVision 디자이너들과 협력하는 방법을 검토하면서 디자이너의 워크 플로우를 보다 전체적으로 개선하는데 주력 했다. 

2017년 InVision은 디자이너를 위해 보다 통합된 워크 플로우를 만들기 위해서 지속적으로 노력해 왔다 - Studio 출시 등, Design System Manager, Freehand, Inspect, Craft, DesignBetter의 출시와 Trello, Confluence, Dropbox,  Paper, UserTesting 과 Slack. 


만드는 과정

https://twitter.com/DannPetty/status/958757757401817088?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E958757757401817088&ref_url=https%3A%2F%2Fuxdesign.cc%2Fmedia%2F0eedc14129acc22d33c2da1d8098f463%3FpostId%3D102949210aeb

"내가 디자인을 시작할 때엔, 포토샵 플래시 애프터이펙트가 필요하고 1000달러가 넘게 필요하고 하루종일 작업을 해야했다. 이 무료 소프트웨어에서는 1/8 시간으로 만들었다" 


최근 InVision은 InVision의 새로운 API를 통해 타사 개발자가 Studio 용 제품 및 서비스를 개발할 수 있는 Studio Platform 발표와 함께 한 단계 더 나아갔습니다. 


“이것은 또한 InVision이 최근에 발표 한 Design Forward Fund와 관련이 있으며,  디자인 분야의 신생 기업에 5백만 달러를 투자할 계획이다. 이 회사는 이미 200개가 넘는 신청서를 받았으며 그 중 많은 부분이 Studio Platform을 통해 통합 될 것 입니다.” 출처 : TechCrunch 



왜 누가 스케치툴에서 

InVision Studio로 전환 하겠습니까?


이 질문에 대답하기 위해서 나는 온라인상 커뮤니티에서 이야하는 것을 보기로 결정했다. Quora에서 찾은 답변 중 일부는 다음과 같다. 의견은 꽤 분열 된 것 같았다. 




"그것은 성능에 달려 있다. 스케치는 매우 간단하며 추가 기능을 위한 많은 플러그인이 있다. 그러나 때로는 여러 소프트웨어 공급자를 사용해야하고 ( 여러번 멤버쉽 비용을 지불해야 하는 경우 ) 단점이 될 수 있다. InVision Studio가 마케팅에 나와있는 것 ( 기본적인 프로토타입,애니메이션, Code export, 반응형 디자인 등 ) 처럼 가장 유용한 기능을 포함 할 수 있고 대용량 파일로 자주 충돌 할 수 있는 스케치보다 안정적이라면 점프 할 수 있다. — Hans-Martin Erlandsen, UX Designer. 





“스케치는 학생에게 1년에 50달러가 아닌 100달러 비용이 든다.InVision Studio 는 월 22달러 대신에 0달러의 비용이 소비되며 스케치 대안뿐만 아니라 워크 플로우를 더 간단하고 저렴하게 만드는 프로토 타이핑 도구도 포함한다.” - amokrane tamine, Student at Université Paris X La Défense 



    "나는 그렇게 생각하지 않는다. 사실 나는 클라우드 툴이 전혀 마음에 들지 않는다. 그러나 궁극적으로 파이어폭스, 크롬 등의 브라우저에서 작업을 하는데 우아하고 풍부한 기능을 가지고 있는 툴이다. 프로젝트가 발전하지 못하면 어떤 상태에서 되돌릴수없는 문제가 나타나기 시작한다. InVision 에는 그와 같은 문제가 있다. 나는 소프트웨어 불법 복제를 피하기 위해 기업들이 클라우드 환경으로 옮겨가고 있다고 생각한다. 하지만 여전히 독립형 도구가 훨씬 더 안정적이라고 생각한다. 그리고 작업을 완료하는데 걸리는 시간을 항상 계산할 수 있다. 만약 클라우드라면? 우리는 할수 없어”  - Bala Murugan, UX Designer at Juniper Networks.  


Invision Studio에 대한 생각 by webflow

https://youtu.be/3RiVGh8dZA8



Studio 너무 늦은걸까?


지난 몇 년 동안 디지털 디자이너는 포토샵에서 스케치로 대규모로 이전했으며 새로운 플랫폼으로 이전하면서 다시 묻는 경우가 너무 많았다. 


팀에서 스케치 라이센스를 구입하는데 재무팀을 납득 시켜야만 했다. 


제품 관리자가 컴퓨터에서 스케치를 설치하여 파일을 볼 수 있게 만들어야 했다. 


디자인과 개발 간의 통합을 보다 원활하게 하는 일련의 보조 플러그인과 도구를 비롯하여 개발자가 스케치를 워크 플로우에 통합 할 수 있도록 인내심을 가지고 확신하게 되었다. 


이제 ... InVision Studio에서 다시 같은 작업을 할까? 


"디자이너로서 우리는 얼마나 많은 사용자가 변화에 저항 하는지 알고 있다. 우리가 사용자 일 때 도 전혀 다르지 않다. 특히 하루에 몇 시간 씩 사용 되는 툴에 대해 말하고 있으며 사용자에게 배우고 익숙해지기 까지 최소한 몇 주 ( 최소한 몇달은 아니더라도 ) 의 시간이 필요하다.” 


제품 전략에 대한 스케치의 집중적인 접근법은 일부 사람들에게 차별화 요소로 볼 수 있다. 회사는 소프트웨어를 커뮤니티에서의 요청을 포함하도록하고 자주 업데이트 하면서 정말 지금까지 좋은 일을 해왔으며 디자이너의 워크 플로우의 특정 단계에 초점을 맞추고 있다. InVision의 보다 전체적인 제품 전략은 열정적이고 까다로운 고객에 의해서 “분산형” 또는 “집중형”으로 간주 될 수 있다. 



이 싸움에서 이기려면 무엇을 해야하나?


이 이야기가 어떻게 전개되는지 궁금하다. 그러나 InVision Studio의 성공은 특정 제품의 기능들 보다는 제품 전략에 대해 더 말해야하는 요소에 달려 있다. 


위험을 감수하고 몇가지 이름을 지정한다: 


잦은 제품 업데이트 ( 스케치보다 더 자주 )

제품을 더 강력하게 만들뿐만 아니라 InVision이 특정 제품에 실제로 어떻게 투자되는지 커뮤니티에 보여주기때문


커뮤니티 의견 듣기 ( 어도비XD가 해왔던 것 이상 )

그리고 디자이너들과 대화 나누기. 우리는 사용자 중심 디자인에 관해 많은 것을 설교하지만 때로는 자신들의 툴은 사일로(위혐물질지하저장고) 형태로 디자인 되기도 한다.  InVision은 이를 바꾸기에 좋은 위치에 있다


오픈 에코 시스템 ( 스케치보다 훨씬 정교하게 )

디자이너와 개발자가 서로 복돋울수있게하고 인센티브까지도 ,  더 특정 사용 사례를 제공하고 인접한 시스템을 사용하는 디자이너의 동료를 연결해주는 툴을 만들어주는 플러그인과 통합을 생성한다. 


컨텐츠 마케팅 및 영향력있는 전략 (InVision 자체에서 수행 한 것보다 더 나은)

 InVision은 디자이너의 뉴스 피드에 일주일에 몇 번 (또는 브라우저 extension을 사용하는 경우 하루에 여러 번) 나타나는 전형적인 회사다. 그들의 블로그는 업계에서 가장 훌륭한 기업 블로그 중 하나이며, 뉴스 레터는 꽤 유명하며 최근에는 영향력있는 사람들과 소셜 미디어에서 발의한 홍보를 위해 파트너십을 유지해 왔다. 작년에 그들은 디자인 혁신에 초점을 맞춘 로드쇼 - 다큐멘터리를 발표했으며 전 세계에 큰 반향을 일으켰다. 컨텐츠 마케팅에 대한 현대적인 접근법은 Adobe와 Sketch와의 차별화의 열쇠가 될 수 있다.   



뭐 이런 정보들을 떠나 공부할겸 요즘 인비전 스튜디오를 하나씩 해보고 동영상도 찾아보고 있는데

흥미로운 부분이 많은거 같다.


1. 제플린 플러그인은 필요가 없다

2. 애니메이션을 컨트롤 할수있다

3. 같은화면을 보면서 실시간으로 원격으로 피드백을 주고 받을 수 있다.

4. 플러그인이 나오면 더 괜찮은 툴이 될듯 크래프트도 인비전 플러그인이기도하니 기대가 된다.

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