올 초, 2017년 디자이너들에게 사랑받은 툴에 대한 글을 발행한 적 있는데요! (자세히보기) 그 중 대표적인 내용은 ‘The 2017 Designer’s Toolkit’ 으로 디자이너들이 분야별로 어떤 툴을 많이 활용했는지에 대한 내용이었습니다. 총 8개 분야에 대한 결과가 있었는데, 와이어프레임 제작과 인터페이스 디자인에는 스케치(Sketch), 프로토타이핑 작업에는 인비전(Invision), 파일 관리는 구글 드라이브(Google Drive)를 많이 활용한다는 사실을 알 수 있었습니다. 8개 항목 중, 스케치는 3개 분야에서 인비전은 2개분야에서 디자이너들의 선택을 받았죠. 스케치를 잡기 위해 어도비에서 야심차게 준비한 ‘XD’는 아직 영향력이 미미했습니다.
물론 이는 작년 기준 결과이기에 이미 10월로 접어든 2018년의 지금에는 또 결과가 달라질 수 있겠지만 스케치와 인비전의 영향력은 이미 어도비의 여러 툴을 넘어섰다고 봐도 무방한 결과이기도 합니다. 저는 기본 뼈대와 구조만 관여를 하기에 스케치 보다는 XD를 더 선호하지만, 제가 일하는 팀에서도 디자이너분들은 이미 오랫동안 스케치를 활용하고 있는데요. 그래서 오늘은 제가 직접 활용해본 것과 주변 디자이너분들에게 추천을 받은 스케치와 함께 쓰기 좋은 ‘스케치 플러그인’을 몇 개 정리해보려고 합니다.
1.Canvasflip(visual-inspector)
첫 번째로 소개드릴 스케치 플러그인은 ‘Canvasflip(visual-inspector)’입니다. 제가 요즘 기획업무를 진행하며 가장 관심있는 부분이 사용자 경험 관점에서의 ‘글쓰기’인데요. 마음을 움직이는 문장 한 줄과 같이 사용자의 특정 행동을 유도하거나, 긍정적인 사용자 경험을 제공하는데 있어 개별 화면의 전반적인 UI 구성도 중요하지만, 텍스트 역시 적지 않은 역할을 하기 때문입니다. 그래서 기획 시, 설계되는 화면에 샘플이 아닌 실제 문구들을 포함시키곤 하지만 디자인과 개발이 빠르게 진행되어야 하는 경우 간략하게 텍스트를 입력한 뒤, 업데이트 전 다시 한 번 확인을 하고 있습니다. 이 경우, 개발자와 협의해 스트링을 바로 수정하는 경우도 있지만 언어에 따라 화면에 표현되는 방식이 다를 수 있기에 디자이너와도 문구 수정 전 많은 이야기를 주고 받게 됩니다. 그럼 다시 여러 단계를 거쳐야 하는 상황이 발생할 수 있는데, ‘Canvasflip(visual-inspector)’은 이런 번거로움을 줄여주는 스케치 플러그인 중 하나입니다.
사용방법도 어렵지 않습니다. Sketch, Adobe XD, Figma를 통해 디자인된 내용을 발행한 뒤 URL을 통해 공유합니다. 이 URL을 기획 또는 마케터가 전달 받아 특정 영역에 포함된 텍스트를 수정할 수 있죠. 클라우드 방식으로 작업이 진행되기에 수정된 텍스트는 디자이너가 바로 확인할 수 있습니다. 이 점이 ‘Canvasflip(visual-inspector)‘를 더욱 매력적으로 느끼게 하는 기능이죠.
가격대는 1개월 기준 9달러부터 시작되는데요. 작은 규모의 스타트업이라면 디자이너 1명에 프로젝트를 무제한으로 생성가능한 ‘PRO’ 계정으로 먼저 시작해보시는 것도 좋을 것 같습니다. 제 기준에서는 이 정도 기능에 부담스러운 가격은 아니라고 생각되지만! 자세한 내용은 이 곳에서 확인해보신 후 활용 여부를 판단해보시면 될 것 같네요. 기본 계정인 ‘PRO’에서는 슬랙, 지라, 트렐로 등과의 연동도 지원됩니다.
2.Animaapp
반응형 웹이 아니더라도 디바이스에 따른 해상도 최적화는 앱서비스를 운영에 필수라고 할 수 있는데요! 모든 사용자들이 하나의 화면 해상도를, 디바이스를 쓴다면 정말 편하겠지만.. iOS 하나만 하더라도 지원가능한 디바이스가 여러개다 보니 신경써야 할 부분이 많습니다. 사이즈에 따라 레이아웃도 조금씩 변경될 수 있고요. 타이틀과 같은 텍스트 길이 등의 정책도 달라질 수 있습니다. 두 번째로 소개드릴 스케치 플러그인은 이런 과정을 간소화 해주는 ‘Animaapp’입니다. (위 영상은 전체 튜토리얼을 담고 있기에 스킵하면서 보시는게 더 좋아요!)
‘Animaapp’은 무료로 제공되는 스케치 플러그인으로 화면 사이즈에 따른 자동 레이아웃(Auto Layout for Sketch)을 지원합니다. 하나의 해상도에 맞춰 작업한 화면을 다양한 디바이스와 해상도에 맞춰 위의 이미지와 같이 자동으로 레이아웃을 잡아주는 것이 주요 기능이자 역할이죠. 이 작업을 별도로 진행해본 분들이라면..이 플러그인이 얼마나 편리하고 중요한 역할을 하는지 잘 아실 것 같습니다 🙂
현재 스케치 플로그인 내 제공되는 화면 사이즈는 위의 이미와 같은데요. 오픈 소스로 제공되고 있기에 플러그인을 제작한 사람들은 물론 사용자들이 자발적으로 제작한 사이즈가 포함되어 있었습니다. 자세한 내용 확인 및 다운로드는 이 곳을 참고해주세요!
3.Launchpad for Sketch
세 번째로 소개드릴 스케치 플러그인은 스케치로 작업한 내용을 별도의 코딩 작업없이 HTML 형태로 구현해주는 ‘Launchpad for Sketch’입니다. 스케치 내 모든 작업이 이뤄지며, 반응형으로 확인이 가능하고, 작업 완료 후 커스텀 도메인을 쉽게 적용할 수 있다는 장점이 있습니다. 최근 서비스 소개 또는 주요 업데이트 정보를 별도의 페이지로 구성해 공개하는 경우가 많은데요. 한 페이지로 구성된 페이지를 쉽게 제작할 수 있는 빌더들도 여럿 나와있고요. 이런 서비스들을 활용하지 않고도 스케치에 익숙하다면 별도의 작업 과정없이 웹 버전을 제작할 수 있다는 점이 ‘Launchpad for Sketch’의 장점이자 매력이 아닐까 싶습니다. (자세히보기)
4.UI Gradients Free Template for Sketch
‘Gradients’는 다소 밋밋할 수 있는 화면에 생기를 불어넣을 수 있는 좋은 방법 중 하나입니다. 여러개의 컬러를 활용한 것 같은 느낌을 주는 것도 가능하죠! 네 번째로 소개드릴 스케치 플러그인은 UI Gradients Style을 쉽게 생성할 수 있도록 도와줍니다. 기본 설정되어 있는 280여개 이상의 조합을 스케치에서 바로 활용할 수 있으며, 설정을 언제든 변경할 수 있으니 실제 활용 가능한 조합은 훨씬 많아지겠죠~? (자세히보기)
5.Iconscout
다섯번째 소개드릴 스케치 플러그인은 아이콘, 일러스트레이션, 사진을 쉽게 불러와 작업물에 활용할 수 있는 ‘Iconscout’입니다.
하나의 플러그인으로 모든 디자인 리소스를 경험할 수 있다는 내용과 같이, 플러그인을 설치하면 위의 이미지처럼 쉽게 원하는 리소스를 찾고, 활용할 수 있는데요! 영역을 지정, 플러그인에서 아이콘, 일러스트, 사진 중 하나를 선택하면 바로 삽입이 되어 확인 할 수 있습니다. 최근 알게된 플러그인 중 가장 잘 활용하고 있는 플러그인! 스케치 49 이상의 버전에서만 사용이 가능합니다. (자세한 내용은 이 곳을 확인해주세요)
이 외에도 매력적인 스케치 플러그인이 많지만, 글이 길어질 것 같아 오늘은 제가 꾸준히 쓰고 있는 플러그인 5개를 먼저 정리해봤습니다. 추가로 활용해보거나 테스트 중인 플러그인의 경우 다시 한 번 글을 작성하여 소개 드릴테니 기다려주세요!
*함께 보면 좋은 내용 : 스케치(SKETCH)를 즐겨 쓰는 디자이너를 위한 보물창고 ‘SKETCH FOR DESINGER’
