#05. Prototyping tools (3)
스케치(Sketch), UI Designer's Tool.
01. 자신에게 가장 유용한 도구를 찾기 위한 기준
02. 스케치 (+제플린 및 몇몇 유용한 플러그인)
03. 인비전 / 슬랙
04. 인터랙션 프로토타이핑 툴 오버뷰 (2016.7)
이번 회부터 약 3회 정도 각종 도구들에 대한 소개를 드리려고 합니다.
어떤 식으로 말씀을 드릴까 고민하다가 가장 기본적인 부분 및 공식 홈페이지에 명시되어 있는 내용 위주로, 간단히 말씀드리는 편이 좋겠다고 생각했습니다. 각 공식 홈페이지들을 꼼꼼히 보신 분들에겐 별로 새로울 것이 없는 내용이겠지만, 처음 접하신 분들께는 도움이 되리라 생각합니다.
Sketch 3, UI Designer's Tool.
Sketch 3, Professional Digital Design Tool for Mac. | 01. Basic Information
이름: Sketch 3
요약: 디자이너를 위한 빠르고, 가벼운 와이어프레임 / 비주얼 / UI 디자인 도구
제작사: 보헤미안 코딩 (Bohemian Coding)
운영체제: Mac only (Mac OS X 10.9+)
가격: 99 $
홈페이지: http://www.sketchapp.com/
공식소개영상:
스케치는 현재 UI 디자인 필드에서 포토샵(Adobe Photoshop)으로 작업하던 부분을 상당부분 대체하고 있습니다. 네덜란드 헤이그의 보헤미안 코딩(Bohemian Coding)이라는 작은 회사(총 직원 10명 남짓)에서 개발한 이 도구는 UI 디자인에 집중한 기능의 간편함, 도구 자체의 빠른 속도, 유저들의 피드백을 적극 반영한 업데이트 등으로 호평받고 있습니다.
| 02. Features
스케치를 오픈하게 되면 처음 보게 되는 화면. a. 기본 화면 구성
위 화면은 스케치의 기본 화면입니다.
상단에는 아트보드 / 벡터 쉐입 / 텍스트 삽입, 네비게이션, 컨트롤, 뷰에 관련된 기능들을 모아놓았습니다.
왼쪽에는 페이지/레이아웃/그룹 컨트롤을 할 수 있는 공간을,
오른쪽에는 선택한 개체에 따른 각종 속성들을,
가운데에는 여러개의 아트보드들을 펼칠 수 있는 캔버스 공간으로 구성되어 있습니다.
b. 주요 특징들
Precision
스케치는 픽셀이 아닌 벡터로 모든 오브젝트를 그립니다. 이는 포토샵에서 자주 겪던 픽셀 관련 모든 문제들에서 자유로워짐을 의미합니다. 그리고 다양한 디바이스 / 다양한 해상도들을 훨씬 쉽게 대응할 수 있습니다.
The Inspector
도구의 오른쪽 부분에서 대부분의 속성 컨트롤들이 가능합니다.
1. 각종 포지션, 사이즈, 변형, Radius 값들을 조정합니다. 수식으로도 값 입력이 가능합니다.
2. 자신이 작업한 내용을 레이어 스타일 / 심볼 등으로 지정하여 다른 오브젝트나 화면에도 일괄 적용할 수 있습니다.
3. 다수의 필(Fill), 블렌드 모드 등을 중복 적용할 수 있습니다.
4. 가우시안(Gaussian), 줌, 모션, 백그라운드 블러를 지원합니다.
5. 파일 Export 기능입니다. 한꺼번에 여러가지 옵션으로 Export가 가능합니다. (1x, 2x, 3x...)
Multiple pages & artboards
여러 개의 페이지와 각종 디바이스들에 맞춘 아트보드들을 지원합니다. 이로 인해 디자이너는 도구의 가운데 공간에 다수의 아트보드들을 늘어놓고 전반적인 UI 플로우를 보면서 디자인 작업을 진행할 수 있습니다.
대략 보여드리자면 이런 식...iOS Mirror
애플 앱스토어의 iOS Mirror 프로그램을 통해서 현재 작업하고 있는 스케치 파일이 실제로 디바이스에서 어떻게 보여지는지 체크하며 작업할 수 있습니다. 스케치에서 작업하고 있는 내용들이 실시간으로 반영됩니다. 저같은 경우는 아예 디바이스들을 미러에 연결해놓은 상태에서 작업합니다.
그 외도 스케치의 주요 기능들이 많으나 하나하나 설명드리기엔 글이 너무 길어질 것 같네요. 더 자세한 내용은 아래 공식 홈페이지 링크에서 확인하실 수 있습니다.
http://www.sketchapp.com/features/
| 04. Plugins
스케치가 사랑받는 큰 이유 중 하나는 작업에 유용한 다양한 플러그인들이 있다는 점인데요, 포토샵이 주로 표현을 위한 플러그인을 지원한다면 스케치는 대부분 UI 디자인 가이드 / 에셋 제작을 위한 플러그인 등을 지원합니다.
아래 링크에서 여러가지 플러그인들을 검색 해보실 수 있습니다.
http://www.sketchapp.com/plugins/
대표적인 플러그인으로는,
Zeplin (스케치에서 제작한 디자인의 가이드를 자동으로 만들어주는 플러그인, https://zeplin.io/)
Marvel (스케치에서 디자인한 여러 개의 페이지를 간단히 프로토타이핑 할 수 있도록 도와주는 플러그인. 손쉽게 화면들의 플로우를 가늠해볼 수 있습니다. https://marvelapp.com/prototype-with-sketch/)
Sketch Palettes (스케치에서 컬러 팔레트 관리)
SketchSquares (인스타그램에서 사진들을 가져와서 UI 오브젝트에 Fill해주는 플러그인)
Content Genarator (더미 이미지, 더미 이름 등 각종 더미 데이터들을 생성해주는 플러그인)
등등이 있습니다.
플러그인들이 워낙 종류가 많습니다. 본인이 필요한 플러그인을 찾기 위해서는 위에서 말씀드린 스케치 플러그인 사이트에서 키워드로 검색해보시는 것이 좋은 방법이 될 수 있습니다.
| 05. Basically good, however...
현재 많은 UI 디자이너들에게 스케치가 사랑받고 있고, 충분히 많은 장점을 가지고 있지만 아직 부족한 점들도 많습니다.
2015년 12월 20일 기준 스케치의 최신 버전은 3.4.4 입니다. 스케치가 버전 3로 업데이트 된 이후 현재의 버전 3.4.4 가 되기까지 몇 번의 메이저 업데이트와 잦은 수의 마이너 업데이트들이 이루어졌는데요, 아직도 자잘한 버그들이 꽤 있습니다.
특히 텍스트 관련 여러 서체에서 Align이 안맞거나 Transform box가 제 규격에 들어맞지 않는 문제라던가, 오브젝트를 컨트롤 할때 Auto-Snap 관련하여 Shift키가 가끔 제대로 동작하지 않는 등 디자인 작업을 진행하다보면 이따끔씩 아쉬운 상황들에 마주치곤 합니다. 또한 다른 디자이너와 스케치 파일을 교환하는 과정에서 분명 서로 같은 서체를 가지고 있음에도 불구, 제대로 적용되지 않는 경우가 발생하기도 합니다. 보헤미안 코딩 측에서도 해당 문제들을 커뮤니티를 통해서 인지하고 있고 그에 대해서 빠르게 해결하려고 노력 중이라 하니 이런 부분들은 조속히 해결되었으면 좋겠네요.
| 06. Summary
스케치는 훌륭한 UI 디자인 도구이지만 artwork making 도구는 아닙니다. 즉 자신이 작업하고자 하는 오브젝트가 복잡한 형태를 가지고 있거나, 여러가지 효과들이 필요한 디자인이라면 디자인 과정 중에서 스케치만을 사용하는 것은 적합하지 않은 선택일 확률이 큽니다.
저 또한 UI 디자인 작업을 할때 스케치와 포토샵, 일러스트레이터를 병행 사용합니다. 사진 에디팅과 리터칭은 포토샵에서, 복잡한 오브젝트 메이킹은 일러스트레이터에서, 그리고 작업된 사진들과 오브젝트들을 배치하고 와어어프레임을 짜는 건 스케치에서 하는 식이지요.(물론 간단한 오브젝트들은 스케치에서 모두 작업합니다.)
다만, 이 후에 설명드릴 인비전 및 여러 인터랙션 프로토타이핑 도구와의 Integration(통합 작업)에 있어서 스케치는 훌륭한 출발점으로 기능합니다. 많은 프로토타이핑 도구들이 스케치의 파일 포맷을 그대로 지원하기 때문에 일관된 흐름으로 디자인 작업을 진행할 수 있습니다.
본인이 그동안 UI 디자인을 하면서
포토샵으로 작업함에 있어서 답답함을 느꼈다거나,
단순히 정지된 화면뿐이 아닌 간단히라도 구동되는 프로토타이핑을 해보고 싶은 욕심이 있거나,
여러 명의 디자이너 혹은 개발자와 협업을 해야하는 환경이라면
한 번쯤 스케치를 시도해 보시는 것을 추천합니다.
P.s: 스케치는 내년 초에 어떤 식으로라도 변화가 생길 것으로 생각됩니다. 이는 제 브런치의 두번째 글 '#02. Prototyping with Adobe'에서도 언급했던 어도비(Adobe)의 프로젝트 코멧(Project Comet)때문입니다.
스케치와 인비전에게 본래 자신들이 가지고 있던 자리를 빼앗긴 어도비는 Adobe Max 2015 행사에서 '프로젝트 코멧을 2016년 초에 출시하겠다'고 공표했습니다. 그리고 해당 행사에서 개발 중인 프로젝트 코멧을 잠시 선보였는데 스케치와 인비전의 장점을 고루고루 섞어놓은 것으로 보였지요.
이에 스케치가 어떤 식으로 대응하며 발전하느냐에 따라서 다시 한 번 UI 디자인 도구의 판도가 바뀔 수 있을 것 같습니다.
