<주간 UIUX 디자인 : ux 스케치>
ux 디자인을 위한 필수 툴, ux 스케치(Sketch) 완전 정복!
제로베이스 UIUX 디자인 스쿨
-
UXUI 디자인을 시작하려고 하는데 어떤 툴을 써야 할까요? Adobe XD부터, 피그마 그리고 스케치까지. 낯선 툴로 인해 ux 디자인과 친해지기 어려웠다면, 이 아티클에 주목해주세요! ux 디자인을 위한 다양한 툴을 소개해드리고, 특히 ux 디자이너가 사랑한 툴 ux 스케치(Sketch)에 대해서 자세히 알아보는 시간을 가져보려고 해요. 스케치(Sketch)의 탄생 배경과 실무 활용법은 지난 시간에도 소개드린 적이 있었는데요. 이번 시간에는 ux 스케치(Sketch) 툴의 장단점과 이를 더 공부할 수 있는 자료까지 만나보세요!
잠깐, UIUX 디자인 스쿨이 궁금하다면? 자세히보러가기 >
UX 디자인을 위한 툴, 어떤 것이 있나요?
UXUI 디자인 툴들은 공통적인 특징이 있습니다. 바로 1) 벡터 기반의 디자인 툴이며 2) 가볍고 3) 프로토타입이 가능하다는 점인데요.
그 이유는 웹 사이트의 특성을 떠올려보면 금방 알 수 있습니다. 1) 다양한 크기의 화면에서 적용할 수 있어야하고, 2) 여러 페이지와 다양한 버튼, 많은 정보를 담아내야 합니다. 또한 3) 웹 페이지 제작을 위해 개발자, 디자이너 등 다양한 직군과 원활한 협업이 이루어져야 하기 때문이죠.
UXUI 디자인 툴로 유명한 것은 Adobe사의 XD와 피그마, 스케치 이렇게 3가지가 있는데요. 지금부터 하나씩 알아볼게요!
1) Adobe XD
Adobe XD 로고 이미지 / 출처: Unsplash의 Rubaitul Azad
XD는 포토샵과 일러스트레이터를 만든 Adobe사에서 출시한 프로토타입 소프트웨어입니다. Adobe에서 제작된 프로그램인 만큼 포토샵과 일러스트레이터를 사용해 본 사람이라면 적응하기 쉽고, 연동이 편리하다는 장점이 있습니다.
2) 피그마
피그마 이미지 / 출처: Unsplash의 Shubham Dhage
피그마는 3가지 툴 중 ‘협업’을 강조한 ux 디자인 툴입니다. 여러 디자이너가 동시에 작업할 수 있어 업무의 효율성을 높일 수 있습니다. 또한 웹 브라우저 기반으로 언제, 어디서든 접근이 가능하다는 특징도 있습니다. 무료 UI 설계 툴이라는 점도 매력적이죠!
3) 스케치(Sketch)
스케치(sketch) 로고 이미지
스케치(Sketch)는 3가지의 디자인 툴 중 가장 먼저 세상에 등장한 만큼 다양한 업계의 ux 디자이너들이 대중적으로 사용하는 툴입니다. mac OS 플랫폼에 최적화된 디자인 툴로, 다른 플랫폼에서 호환이 안된다는 단점이 있었으나 최근 모든 운영 체제의 웹 브라우저에서 작동할 수 있도록 업그레이드 되었습니다.
스케치(sketch)의 개발자 협업 도구 / 출처: Sketch
스케치에는 700개가 넘는 플러그인(Plug-in)이 있어 개발자와의 협업도 용이한데요! ux 디자인 채용 시 스케치 사용 여부를 확인할 만큼 수요가 높은 프로그램이기 때문에, ux 디자인을 위한 필수 툴이라고 볼 수 있습니다.
* 플러그인(Plug-in)이란? 소프트웨어에 추가하여 기능을 확장하거나 사용자 경험을 개선하는 데 사용되는 소프트웨어 구성 요소입니다. 디자인 툴에서는 다양한 플러그인을 사용해 작업 효율을 높이거나 다양한 기능을 추가할 수 있습니다.
스케치(sketch)의 웹 사이트 작업 / 출처: Sketch
그렇다면 현업 ux 디자이너들에게 가장 많은 사랑을 받고 있는 ux 스케치(Sketch) 툴에 대해 좀 더 자세히 알아볼까요?
스케치(Sketch) 툴의 장점
1) 개발자와 협업 용이
스케치(sketch)의 피드백 / 출처: Sketch
스케치에는 다양한 플러그인이 존재합니다. 이의 장점은 개발자와의 협업에 도움을 준다는 것인데요! UXUI 디자인을 실제 어플리케이션으로 구현하기 위한 디자인 속성값, 리소스 등의 가이드 작업을 도와주는 제플린(Zeplin) 플러그인 설치가 가능하기 때문에 개발자와의 협업이 용이하게 이루어질 수 있습니다.
2) 다양한 디자인 요소 제공
스케치(sketch)의 디자인 요소 / 출처: Sketch
스케치에서는 UXUI 디자인 툴의 선두주자답게, 다양한 아이콘을 제공해주는 플러그인과 리소스가 있습니다. 이를 활용해 처음 사용해보는 사람도 웹 UI 디자인을 좀 더 쉽게 작업할 수 있습니다.
3) 디자인 시스템 관리
스케치(sketch)의 디자인 시스템 / 출처: Sketch
스케치에서는 라이브러리 기능, 스타일/컴포넌트 관리 등을 통해 디자인 시스템을 효과적으로 관리할 수 있습니다. 일관된 디자인 유지와 작업 효율 상승에 꼭 필요하다고 볼 수 있습니다.
스케치(Sketch) 툴의 단점
1) 업그레이드로 인해 다소 무거워진 툴
물론 포토샵이나 일러스트레이터와 같은 디자인 툴에 비해서는 훨씬 가볍다는 사실은 변하지 않습니다. 그러나 시간이 지나면서 업데이트가 진행되고, 다양한 기능이 추가되면서 초기에 비해 다소 무거워졌다는 평가가 들리고 있습니다.
2) 다양한 파일의 호환성 문제
스케치는 원래 mac OS 최적화로, 오직 mac에서만 사용이 가능한 툴이었습니다. 기존 mac OS에서 파일 호환이 어려운 것처럼, 업데이트가 진행되며 개선되고 있지만 아직 다양한 파일 간의 호환성 문제가 발생하고 있습니다.
3) 이미지 작업의 어려움
UI 디자인을 할 때 벡터 기반이라는 점은 장점이면서 단점이 되기도 합니다. 포토샵이나 일러스트레이터만큼 사진 편집, 정교한 작업은 진행하기 어렵습니다.
디자인 효율을 200% 높일 스케치(Sketch) 단축키
스케치(sketch) 단축키 / 출처: Sketch
효율의 민족, 한국인에게 단축키는 빼놓을 수 없죠! 그래서 찾아왔습니다. Sketch Shortcuts에 들어가면 스케치에서 사용하는 모든 단축키를 확인해볼 수 있습니다.
스케치 앱 용 단축키 / 출처: Sketch Shortcuts
Sketch Shortcuts 사이트에서 모든 단축키를 확인하실 수 있습니다.
스케치 앱 용 단축키 >
사이트 바로가기
스케치(Sketch) UXUI 교육을 위한 유튜브 채널 추천
1) 디자인베이스
출처: 디자인베이스
디자인베이스는 스케치를 비롯한 UXUI 디자인 툴 뿐만 아니라 포토샵, 디자이너를 위한 웹 코딩까지 알려주는 콘텐츠를 제공하고 있습니다. 입문자를 대상으로 UXUI 교육을 진행하고 있어 입문자라면 한 번 보시는 걸 추천드려요!
2) Joseph from LearnSketch.com
출처: Joseph from LearnSketch.com
Joseph from LearnSketch.com은 스케치를 중심으로 다양한 UX 디자인 툴 정보를 제공하는 유튜버입니다. 다양한 기능과 활용 방법을 자세히 설명해주고 있습니다. 더불어 한글 자막까지 제공된다는 점!
3) 오픈패스 OPENPATH
출처: 오픈패스 OPENPATH
오픈패스(OPENPATH)는 디자이너를 위한 강의를 제공하는 플랫폼인데요. 유튜브 채널을 통해 스케치 강의를 제공하고 있습니다. UI 디자인 시스템이나 UX 디자이너 인터뷰와 같은 다양한 콘텐츠도 볼 수 있습니다.
이제서야 스케치(Sketch)를 알았는데, ux 디자이너 할 수 있을까?
비전공자, 취준생이라면 스케치 툴과 같은 UXUI 디자인 툴을 혼자 공부하는 것이 쉽지는 않은 것이 현실입니다. 또한 기업마다 쓰는 툴이 다르고, 실무에서는 스케치 뿐만 아니라 Adobe XD, 피그마 등을 써야하는 경우도 많기 때문에, 기초부터 튼튼히 쌓아가는 작업이 필요하죠.
취업 준비부터 이후까지 반드시 필요한 UXUI 디자인 툴! UIUX 디자인 스쿨에서는 이 모든 툴 익힐 수 있습니다. 비전공자도 취업할 수 있도록 확실하게 알려주는 UIUX 디자인 스쿨에서 제대로 배우고, 제대로 취업해 보세요!
UIUX 디자인 스쿨은 '취업'까지 단 4개월,
새로운 여정을 함께할 분들을 기다립니다.
추천 컨텐츠
