brunch

You can make anything
by writing

C.S.Lewis

by 김지홍 Dec 23. 2016

2017년 디자이너들이 주목해야 할 디자인 도구들

수많은 도구들 중에서 빛이 나는 몇몇들.



2016년에는 정말 다양한 디자인 도구들이 시장에 등장했고, 기존 도구들도 속속 새로운 기능들을 선보였습니다. 디자이너들은 도구들의 풍족함과 그에 수반되는 선택의 어려움을 모두 느꼈을 것이라는 생각이 드네요. 2017년을 맞이하는 시점에서 내년에 더욱 더 기대가 되는 디자인 도구들을 선정해 보았습니다. 디자이너 커뮤니티에서 자주 언급되는 것들을 위주로 선정했어요.  물론 이 리스트에 포함되지 않은 도구들도 많을 것이라고 생각합니다. 가볍게 참고한다는 느낌으로 읽어주시면 감사하겠습니다.





01. Figma


https://www.figma.com


Sketch가 점점 보편화되면서 벡터기반의 드로잉 도구들이 대세가 되어가는 듯 합니다. Figma는 여기에 실시간 협업이라는 기능을 더했습니다. 마치 개발자들이 원격으로 같은 화면을 보면서 코딩하듯이, 디자이너들도 원격으로 협업이 가능해질 것으로 보입니다. 실제 프로젝트에서 두 명 이상의 디자이너가 동시에 디자인할 일이 얼마나 많을까 싶으면서도, 디자인 크리틱을 하거나 회의 중 함께 디자인을 수정하는 용도라면 새로운 경험을 줄 수 있는 선택지가 될 것 같습니다.


Official site: https://www.figma.com

More info: https://medium.com/figma-design

Community: https://www.facebook.com/figmadesign/






02. Adobe XD


http://www.adobe.com/products/experience-design.html


후발주자로 인식되고 있지만 Adobe도 꽤 오랜기간 프로타이핑 도구에 대한 고민을 해왔었습니다. 2012년에 Edge Tools을 런칭했지만 안타깝게도 2015년에는 서비스 개발을 중단 선언했었죠. 하지만 이러한 노력들이 2016년에 본격적으로 선보인 XD에 많은 영향을 주지 않았을까 생각합니다. XD는 벡터 기반의 드로잉 기능을 기본으로하고 여러 개의 Artboard로 Click-through 프로토타입을 쉽게 만들도록 지원해줍니다. 아직까지 많은 사람들이 Sketch의 카피캣 혹은 Sketch + InVision 혹은 + Craft(구 Silverflow) 조합이라고 얘기하기도 하지만, 지속적으로 선보이는 기능이나 Adobe 제품군간의 연계는 앞으로 더 많은 가능성을 보여줄 것이라고 기대합니다. 또한 맥만을 지원하는 Sketch와는 다르게 윈도우 버전을 지원하는 점도 큰 강점으로 작용합니다.


Official site: http://www.adobe.com/products/experience-design.html

More info: https://blogs.adobe.com/creativecloud/tag/xd-product-updates/?segment=design

Community: https://www.facebook.com/AdobeExperienceDesign/






03. Sketch & Plugins

https://www.sketchapp.com/


2016년 11월 릴리즈한 Sketch 41버전은 Nested Symbol Overrides와 같은 다양한 기능들을 선보였습니다. 요즘 디자이너가 얘기하는 Sketch는 Sketch만을 따로 언급하기 보다는 Sketch와 그 플러그인들의 조합을 얘기하는 경우가 많죠. Measure, Content Generator, Icon Stamper와 같은 플러그인들은 디자이너들의 업무 효율에 많은 도움을 줍니다. 2017년에는 더욱 멋진 Sketch의 기능과 더욱 다양한 플러그인들이 등장하길 기대하고 있습니다.


Official site: https://www.sketchapp.com/

Plugins: https://speckyboy.com/plugins-sketch-app/

More info: https://medium.com/sketch-app

Community: https://www.facebook.com/sketchapp/






04. Zeplin


https://zeplin.io


Zeplin은 Sketch의 가장 잘 알려진 Plugin 중 하나로 Artboard에 있는 레이어들의 UI Spec을 쉽게 확인할 수 있도록 해줍니다. 더 나아가 각 Artboard에 코멘트를 남기거나 개발에 필요한 Asset들을 Zeplin상에서 직접 다운로드할 수 있습니다. 디자이너는 예전 방식대로 UI Spec을 일일이 그리지 않아도 되고, 개발자는 더이상 디자이너가 실수로 빠뜨린 Spec이나 Asset을 따로 요청하지 않아도 됩니다. 이런 장점 때문에 Zepin이 출시되었을 때 큰 반향을 불러일으켰고 지금까지 많은 사람들이 애용하고 있습니다.  


Offcial site: https://zeplin.io

More info: https://medium.com/zeplin-gazette

Community:https://www.facebook.com/zeplin.io/






05. Stage & Gallery


https://material.io/stage/, https://material.io/gallery/


Pixate와 Form이 구글에 인수되고 나서 두 팀이 한데 모여 새로운 도구를 만들고 있습니다. 인수되고 나서 많은 기대를 했었는데 이제야 살짝 모습을 드러냈습니다. (참고로 Pixate는 2016년 10월부로 서비스가 종료되었습니다.) Stage는 인터랙션 프로토타이핑 도구, Gallery는 디자이너를 위한 협업 도구라고 하는데, 구체적인 기능을 확인하려면 아직 조금 시간이 필요한 것 같습니다. 아마도 구글 클라우드를 십분활용한 무엇인가가 아닐까 싶은데, 내년에 선보인다고 하니 무척 기대가 되네요.


Official sites: https://material.io/stage/, https://material.io/gallery/






06. Framer


https://framerjs.com/


Framer는 디자이너를 위한 기타 다른 프로토타이핑 도구들과는 달리 직접 Code(Coffee script)를 다뤄 프로토타입을 만듭니다. 그렇기에 지금 여기서 소개하는 도구들 중에선 가장 높은 러닝커브를 가지고 있습니다. 기존에는 정말 순수히 Coffee script 기반의 코드를 하나하나 짜야했으나, 디자이너가 좀 더 쉽게 다가갈수 있도록 2016년 여름 대규모 업데이트를 통해 UI 개선 및 다양한 컴포넌트들이 추가되었습니다.


Official site: https://framerjs.com/

More info: https://blog.framerjs.com/

Community: https://www.facebook.com/groups/framerjs/






07. ProtoPie


https://www.protopie.io/


ProtoPie는 코딩 한 줄 없이 microinteraction prototype을 쉽게 만들 수 있습니다. 코드프리를 표방하는 일부 다른 도구들이 프로그래밍을 억지로 시각화해놓은 느낌이 있었다면 ProtoPie는 디자이너 관점에서 인터랙션을 재해석하는 명확한 개념모델을 가지고 있습니다. 많은 프로토타이핑 도구들이 모바일 화면에서 보여지는 것에만 집중하는 것과 달리 ProtoPie는 멀티핑거 제스처, 센서, 디바이스간 통신을 지원하는 등 스마트 디바이스를 활용하는 전반적인 프로토타이핑을 다루고 있습니다. 최근에는 조건에 따른 인터랙션 기능이 추가되었고 조만간 윈도우 버전도 나온다고 하네요. 대부분의 코드프리 도구들을 다뤄보았는데(Pixate, Principle, Flinto 등) 개인적으로는 가장 기대하고 있는 도구입니다.


Official site: https://www.protopie.io/

More info: https://blog.protopie.io/

Community: https://www.facebook.com/protopie/






초기의 매력을 잃은 일부 도구들은 사라지고 새로운 도구들이 그만의 강점을 가지고 모습을 보이고 있습니다. 사용하는 디자이너 입장에선 좋은 도구들이 지속적으로 발전해 나가길 기대하고 있죠. 기존에 쓰던 도구를 연마하는 것도 좋지만 2017년에는 다른 경험을 선사해줄 새로운 도구들을 체험해보는 것도 좋은 선택이라 생각됩니다. 여기 설명드린 도구들이 그 시작점이 될 수도 있을 것 같네요.

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