지난 포스팅에선 스케치에 대해 소개를 해보았는데요, 이번에는 스케치의 가장 큰 장점이자 작업 효율을 높여주는 플러그인에 대해서 소개해보려고 합니다. 화면을 디자인하면서 필요한 이미지, 아이콘 등등을 찾는데에 걸리는 시간은 어마어마하고, 요소들을 정렬시켜야 하고, 복사하고 붙여넣는 반복적인 작업을 하는 경험들을 한번쯤은 다 해보셨을거라고 생각됩니다. 스케치를 사용한지 4개월이 되어가는데, 플러그인이라는 유용한 기능에 대해서는 최근에서야 알게 되었습니다. 플러그인의 활용가치에 대해서 잘 몰랐었는데, 직접 사용을 해보니까 작업에 시간을 단축시켜주고, 디자인에 큰 효율을 가져다 주는 기능인것같습니다.
플러그인(Plugin)?
플러그인 이라는게 생소하게 들리시는 분들이 있을 것이라 생각합니다. 플러그인이란 기존 응용 소프트웨어에 특정 기능을 추가하기 위한 소프트웨어 요소인데, 간단히 말씀드리자면 스케치 프로그램 자체에는 없는 기능들을 외부에서 추가하여 사용한다고 생각하시면 됩니다. 문서 작업을 할때 필요한 서체를 네트워크상에서 다운받아 프로그램에서 사용하는것과 비슷한 맥락이지 않나 싶습니다. 그래도 잘 모르실 것 같은 분들을 위해 제가 생각하기에 괜찮은 플러그인 몇가지를 소개해드리겠습니다.
인비전은 스케치에서의 디자인 결과물을 빠르고 효율적으로 프로토타이핑하고 그 결과물을 디자이너와 개발자,그리고 사용자간에 공유하기 위한 플러그인이라고 볼 수 있습니다. 스케치나 포토샵에서 작업한 화면들을 이미지파일로 드래그해서 불러 올 수 있지만, 크래프트를 통해 내보내면 더욱 간편하고 빠르게 화면을 인비전에 불러 올 수 있습니다. 화면을 불러오게되면 하단에 5가지의 모드가 있는데, 이 모드들 중에서 주목해야 할 모드는 Build Mode 와 Comment Mode 입니다. 이 두가지 모드는 실질적으로 가장 많이 사용하고 화면간의 이동, 팝업, 스크롤 등 간단한 인터렉션을 정의하고 링크를 통해 동료들과 공유하며 의견을 주고받습니다. 동료뿐만 아니라 작업물을 미리 공개하여 사용자 테스트를 받는 것도 가능합니다. 또한 인비전 어플리케이션을 통해서 자신의 디바이스에서도 화면간의 인터렉션을 확인해 볼 수 있습니다.
2.크래프트(Craft)
크래프트는 프로토타이핑에 있어서 사용자와 밀접도가 굉장히 높다는 것이 강점인것 같습니다. 다른 플러그인과는 다르게 툴바가 생겨서 스케치에서 벗어나지 않고 편하게 자주 사용할 수 있습니다. 크래프트의 큰 기능은 Sync, LIbrary, Data, Duplicate, Freehand, Stock으로 크게 6가지로 나누어집니다. 간략하게 설명드리자면, Sync는 디자인 프로토타이핑을 인비전으로 불러오는 기능을 담당하고, Library는 문서의 컬러, 폰트,스타일을 쉽게 바꾸어 비교해볼 수 있고, Data는 다양한 소스에서 임의적인 컨텐츠를 가져와서 생각할 필요없이 이미지나 텍스트를 사용할 수 있습니다. Duplicate는 똑같은 구성을 반복해야하지만, 다른 요소들이 들어가야 할때 사용합니다. Freehand는 작업화면을 다른사람들과 온라인상에서 공유하며 의견을 나눌 수 있는 기능이고, Stock은 iStock과 Getty images에서 제공하는 이미지를 유료로 사용할 수 있습니다.
3.제플린(Zeplin)
스케치에서 작업한 프로젝트 화면을 제플린 프로그램으로 내보내서 화면에 대한 수치정보를 간단한 조작으로 쉽게 볼 수 있습니다. 제플린은 웹사이트(http://zeplin.io)에서 무료로 사용할 수 있습니다. 예전에는 디자이너와 개발자사이에 작업물을 두고 디자인 가이드를 설정하기 위해 번거로운 작업들이 많이 필요했었는데, 제플린은 작업화면 요소들의 위치, 크기, 색깔, 폰트등을 쉽게 자동으로 정리해주어 시간절약에 효율적입니다. 요소들이 CSS코드로 정리되기도 하는데, 그대로 사용하면 본인이 생각했던 코딩방식과 다를 경우가 있으니, 참고만 하는것을 추천합니다. 또한 제플린은 스케치뿐만아니라 어도비XD, 피그마(FIGMA), 포토샵등에서도 사용할 수있어서 호환성이 좋습니다.
4. Map Generator
웹디자인에서의 Contact목록, 네비게이션기능을 포함한 화면에는 지도가 들어가는 경우가 많은데, Map Generator는 디자인에 맵뷰를 넣어야 할 때, 구글맵 이미지를 쉽게 사용할 수 있게 도와주는 플러그인입니다. 또한 스내지맵 (https://snazzymaps.com)에서 맵 스타일 코드를 적용시켜 다양한 스타일의 지도를 사용하실 수 있습니다. 사용법도 대단히 간단합니다. 맵 이미지를 넣을 오브젝트를 선택후 Map Generator플러그인에서 지역명을 입력하고 확대값만 설정해주면 바로 지도가 생성됩니다.
이미지출처 https://medium.com/sketch-app-sources
5. Auto Layout
어떤 디바이스에 맞춰 디자인해야할지 정해지지 않았을 때, 다양한 크기의 아트보드에 일일이 수작업으로 작업물 크기를 맞출 필요없이, Auto Layout은 간단한 기준점 설정을 통해 아트보드의 크기에 맞춰 화면 구성요소들이 늘어나기도하고 줄어들기도 하여, 디바이스별 화면에 어떤식으로 보이는지 비교해야하면서 보아야 할 때 사용하면 좋습니다. 누가 어떤 목적으로 사용하느냐에 따라서 활용가치에 차이가 생길것 같은 플러그인입니다.
디자인 작업을 완성한 뒤에 코딩을 해야하는 경우나 개발자에게 수치화된 파일을 줘야 할 경우에 필요한 플러그인입니다. Measure는 작업한 아트보드를 html형식으로 내보내서 컨텐츠의 위치나 크기 색깔 등을 표시해줍니다. 이러한 부분에서 제플린과 비슷한 기능을 수행하는데, 다른점은 스케치상에서 Measure플러그인을 툴바처럼 사용할 수 있다는 점입니다. 가벼운 구동과 깔끔한 디스플레이가 돋보이는것 같습니다.
디자인 작업을 하다보면, 로딩화면이라던지 간단한 구동화면을 표현해야 할 경우가 있습니다. 저 같은 경우에는 영상만드는 작업을 하기위해 어도비의 에프터 이펙트를 공부하고 있는데, 잘 다뤄보지 않았고 전문성이 높은 프로그램이다 보니까 괜히 복잡해보이고 단순한 작업에도 어려움이 많습니다. 하지만 Animate Mate는 스케치상에서 간단한 애니메이션을 제작하고 내보낼 수 있는 플러그인입니다. 메인 키 프레임을 만들기만하면 중간 키프레임을 자동적으로 처리해줍니다. 정밀한 애니메이션을 만들기에는 기능이 부족하지만, 사용법이 단순해서 가벼운 작업을 하기에 좋습니다.
7.Animate Mate
디자인 작업을 하다보면, 로딩화면이라던지 간단한 구동화면을 표현해야 할 경우가 있습니다. 저 같은 경우에는 영상만드는 작업을 하기위해 어도비의 에프터 이펙트를 공부하고 있는데, 잘 다뤄보지 않았고 전문성이 높은 프로그램이다 보니까 괜히 복잡해보이고 단순한 작업에도 어려움이 많습니다. 하지만 Animate Mate는 스케치상에서 간단한 애니메이션을 제작하고 내보낼 수 있는 플러그인입니다. 메인 키 프레임을 만들기만하면 중간 키프레임을 자동적으로 처리해줍니다. 정밀한 애니메이션을 만들기에는 기능이 부족하지만, 사용법이 단순해서 가벼운 작업을 하기에 좋습니다.
8.Icon Font
저는 디자인을 할때 아이콘을 필요로 하는 작업이 많습니다. 특히나 라인 아이콘을 사용해야 할 경우가 많은데, 그럴 때 마다 일일이 온라인상에서 아이콘을 찾아 많은 시간을 소비 할 때가 많습니다. 원하는 아이콘이 없으면 직접 만드는 경우도 있는데, IconFont는 서체화 된 수많은 아이콘을 선택할 수 있기 때문에 글꼴 아이콘을 쉽게 삽입하고 관리 할 수 있으며, 텍스트 스타일 편집으로 컬러와 사이즈 편집이 쉽습니다. 저에게는 너무나도 필요한 플러그인이라고 소개하고 싶습니다.
지름길로 가는법
각자의 목적에 따라서 다르겠지만, 스케치를 쓰면서 플러그인을 사용하지 않는것은 스케치를 똑똑하게 사용하지 못하는것이라고 생각합니다. 그렇다면 자신에게 주어진 도구를 모두 사용하여 작업물을 만들어 내는것이 스마트한것일까요? 그것도 아닌것같습니다. 스케치와 연동되는 수많은 플러그인중, 몇몇 플러그인은 자신에게 별로 도움이 안 될수도 있고, 어떤 플러그인은 자신의 디자인에 큰 영향을 끼치는 플러그인도 있을것입니다. 어떤 사람은 망치가 못을 박는 용도로 쓰이지만, 누군가에겐 못을 뽑는 도구이듯이 누가 어떻게 쓰느냐에 따라서 달라지는것이 플러그인인것 같습니다. 어떻게 하면 본인에게 가장 효율적으로 디자인을 할 수 있을지, 어떻게 하면 가장 빠른 지름길로 갈수 있을지에 대해서 생각하며 자신에게 가장 적합한 도구를 찾아 스마트한 디자이너가 되시길 바랍니다.
0 개의 댓글: