플러그인을 사용해야 하는 이유

스케치를 사용하는데 스케치만 사용하는 것은

앙꼬없는 잉어빵과 같다.

플러그인을 적절히 사용하면 작업에 있어 능률이 올라가는데 그 정도가 GUI 디자인을 쉽고 가볍게하는 수준에 그치지 않는다.  30일 동안 할 일을 15일, 반토막으로 줄여준다. 또한, 유지보수 차원에서 혹은 협업에서 엄청난 빛을 발한다. 내 스케치에 깔려있는 플러그인은 7개 정도 된다. 그러나 자주 사용하는 것은 3개 정도밖에 없다. 요즘 플러그인이 너무 많아서 다 익혀서 사용하기도 벅차다. 그래서 꼭 필요한 스케치 플러그인 3가지를 소개한다. (더 좋은게 발견되면 계속 업데이트…)

나를 반성하게 하는 그림…

알면 좋은 플러그인 3가지 제플린, 심플리, 크래프트


사실 제플린과 심플리는 스케치에서 완성된 GUI에 대한 가이드라인을 쉽게 문서화해준다. 예전에 일일이 가이드 문서 작업하던것과 비교하면 정말 일이 반으로 줄어든다.(자동화의 힘…) 좀 더 자세히 말하면 GUI 컴포넌트들의 사이즈와 위치, 컬러 등의 속성값을 자동으로 측정하여 개발이 들어가기 전에 확인할 수 있도록 시각화해주고 디자인 소스(Icon, Image 등)들을 내려받을 수 있도록 해주는 서비스이다. 심플리는 실제 코드로 변환도 가능하다. 포토샵으로 가이드라인 작업을 해본 디자이너라면 저게 얼마나 대단한 혁명인지 바로 체감할 것이다.

시각화된 가이드라인 문서를 PNG나 PDF로 저장이 안되고 웹브라우저에서만 확인이 가능한데 이것은 제플린이 지닌 장점이나 단점이 될 수 있다. 그러나 요즘같이 와이파이없는 곳을 찾기 어려운 시대에 인터넷 연결이 안되 문서를 확인 못하는 것에 대해서는 크게 걱정할 필요는 없을 것 같다.

크래프트는 더미 데이터를 쉽게 불러올 수 있으며, 인비전(Invision)이라는 프로토타입 툴 서비스 회사에서 만든 플러그인으로 손쉽게 인비전과 연동이 가능하다.

제플린과 심플리에 대한 자료는 브런치에 많이 있고, 사용법은 설명 영상을 보면 쉽게 이해가 가기때문에 따로 설명은 안해도될 것 같다. 크래프트에 대한 부분은 어떻게 효율적으로 사용이 가능한지 다음 글에서 가볍게 설명할 예정이다.

제플린(Zeplin) 플러그인


제플린은 디자인 가이드라인 문서를 쉽게 도와주는 플러그인이다. 플러그인의 꽃이다. 디자인 가이드라인 작업을 포토샵으로 사용해본 디자이너라면 저게 얼마나 대단한 도구인지 공감할 것이다.

단점으로는 PDF로 출력이 안되고, 웹 기반 서비스라 인터넷이 연결되어 있어야 사용할 수 있는 제약이 존재하지만 인터넷 강국인 우리나라에서 큰 제약으로 느껴지진 않는다.

https://zeplin.io/

제플린 기능

사실 사용해보면 대단한 것은 따로 없다. 일단 스케치에 플러그인 설치 후 회원가입하면 된다. 그리고 제플린으로 Export하고자 하는 아트보드를 선택하고 OS에 맞게 업로드하면 된다.업로드한 GUI 파일에 대한 속성 값이 상세히 나온다. x, y 좌표값, width, height 값, 컬러, 폰트 사이즈 등을 볼 수 있고 콘텐츠 복사, 아이콘 내려받기, 멤버 추가 등의 기능이 있다. 아이콘은 해당 페이지에서 바로 내려받을 수 있다. 그러나 스케치상에서 아이콘을 Export해논 상태에서 제플린에 올려야 받을 수 있다. 웹사이트 디자인 가이드인 경우에는 CSS 코드값을 제공한다.

심플리(Sympli) 플러그인

심플리 역시 제플린과 비슷하게 디자인 가이드라인 문서를 쉽게 도와주는 플러그인이다. 실제 네이티브 코드로 변환해주는 기능까지 제공한다. 프런트 앤드 개발은 세부적인 부분만 따로 잡아주면 될 정도로 간편해졌다. 그러나 스케치 46.2버전에서 불안한 상태다. 빨리 업데이트가 되길…

https://sympli.io/

크래프트(Craft) 플러그인

크래프트는 더미 데이터를 쉽게 불러올 수 있으며, 인비전 프로토타입툴 서비스 회사에서 만든 플러그인이다. 크래프트에서 istock, Getty images 사진 불러오기, 프리핸드, 프로토타입(인비전) & 인비전 sync, 데이터(더미), 라이브러리, 복제 기능 제공한다. 사이트 내에 있는 소개 영상을 보면 더욱 이해가 잘 간다.

https://www.invisionapp.com/craft

크래프트 기능 – 싱크(Sync)와 라이브러리(Library)

크래프트 플러그인을 설치하면 우측에 있는 속성 조절 창 옆에 생성된다.맨 위부터 살펴보면 인비전(Invision)서비스와 싱크(Sync) 맞추는 기능이다. 인비전을 사용해본 사람에게는 추천할 만한 강력한 기능이다. 따로 png 나 jpg로 출력해서 사이트 들어가서 업로드하지 않아도 알아서 업데이트해준다.

두 번째에 있는 라이브러리(Library) 기능은 스케치에서 제공하는 심벌과 비슷하다. 디자인 된 데이터를 바탕으로 타이포그래피, 컬러 파레트 스타일 가이드를 자동으로 생성해준다.

(업데이트 내용 – iStock & Getty images 추가하는 기능이 추가됨)

크래프트 기능 – 더미 데이터 제공 (Dummy Data)

세 번째는 더미 텍스트를 제공해주는 기능인데 Type 과 Photos 두 가지 형식을 제공한다. 텍스트 레이어가 선택된 상태에서 Type을 클릭하고 원하는 성향의 카테고리를 누르면 그 내용에 맞는 더미 텍스트로 바뀐다. 아쉽게도 한국어는 제공을 안 하는 단점이 있다. 그러나 Photos는 유용한 기능이다. 무료 사진 이미지 사이트인 Unsplash에서 선택한 카테고리에 맞는 사진을 랜덤으로 가져와준다. 로컬 폴더(Local folder)에서도 가져올 수 있어 샘플 이미지 폴더를 만들고 연결하면 랜덤으로 가져온다.

이 기능은 스케치에서 심벌로 설정한 목록에서 사용하면 유용하다.

크래프트 기능 – 복제(Duplicate)

네 번째, 복제(Duplicate)는 말그대로 선택한 엘리먼트를 수직방향, 수평방향으로 반복 복제하는 기능이다. 반복되는 콘텐츠 레이아웃이나 카드 형식의 레이아웃에 활용해보면 좋다.

크래프트 기능 – 프리핸드(Freehand)

마지막에 있는 프리핸드(Freehand)는 최근에 생긴 기능으로 인비전에서 제공하는 서비스로 디자인에 대한 피드백을 쉽게 이뤄질 수 있다. 여러명과 동시에 시안 피드백이 가능하다. 외주 작업을 맡아 디자인 작업하면 소통하기 위해서 이메일로 주고받는데 클라이언트나 기획자, 개발자 혹은 같이 작업하는 디자이너들과의 소통에서 저 프리핸드 기능을 사용하면 간편해질 것 같다. 애자일(Agile) 개발 방식에 유용할 듯 하다.

크레프트 기능 – 프로토타입(Prototype)

그리고 맨 하단에 혼자 자리잡고 있는 번개아이콘, 스케치 내에서 인비전 프로토타입 제작이 가능하도록 돕는 기능이다. 어도비 XD에서 프로토타입과 비슷한 기능이다.번개 아이콘을 누르고 원하는 엘리먼트(실제 개발에서 링크 기능이 있는 버튼)를 선택 후 C를 누르면 어디로 이동할지 연결할 수 있다. 따로 인비전 사이트 들어가서 만들지 않아도 쉽게 프로토타입을 만들 수 있다.



플러그인에 대한 설명이 잘되어 있는 사이트가 많이 있으니 더 자세히 알고싶으면 들어가서 참고하는 것도 좋을 것 같다.
https://medium.com/sketch-app-sources

https://www.sketchapp.com/learn/documentation/plugins/

https://brunch.co.kr/@pliossun/45

그 외에 유용한 플러그인들

Slinky

HTML 이메일 템플릿으로 출력해주는 플러그인
https://finchalyzer.github.io/slinky/

LogoDrop

각종 로고들을 쉽게 불러올 수 있는 플러그인
https://github.com/Iconscout/logodrop

Cssketch

css를 스케치에 붙일 수 있는 플러그인. 코드로 디자인하는 것을 해보고 싶다면 이 플러그인을 이용해봐도 좋을 것 같다.
https://github.com/JohnCoates/CSSketch

Measure

디자인 가이드문서를 자세히 만들어주는 플러그인. 예전 AssistorPS랑 비슷한 느낌이다.
https://github.com/utom/sketch-measure

디자인을 위한 툴은 항상 발전한다.
도구는 어디까지나 도구일뿐,
디자인을 잘하는 디자이너가 되자.

#Design#Gui#Plugins#Sketch
신연석

디자인, 개발, 기획, 비즈니스에 관심이 많은 디자이너입니다.
값진 경험과 그 경험에서 깨달은 것을 기록한 공간입니다.

Send Email