brunch

You can make anything
by writing

C.S.Lewis

by 황다은 Oct 22. 2017

Sketch 입문하기 1

UX / UI 디자이너를 위한 스케치 완전정복 Review

더 늦지 않게 스케치를 배워야겠다 생각하게 됐던 계기는 이직을 결심하게 된지 얼마 안됐을 때였다. 2년전 스케치 리뷰 세미나를 들렀을 때 어리둥절했던 때완 다르게 ui 디자이너를 뽑는 대부분의 회사들에서 스케치, 제플린, 인비전을 유연하게 사용할 줄 아는 사람을 원했고 실제로 ui ux 디자인협업에 유용하게 쓰이고 있었기 때문이다.

2년전 알게됐을 때부터 공부했음 될 걸.. 과거의 나 반성중.

아무튼 각설하고, 때마침 스케치에 대한 두가지의 책이 나왔는데 그 중에서 일명 '노란책'이라 불리는 것 부터 살펴보기로 했다. 제목은 UX/UI 디자이너를 위한 스케치 완전정복.

이 책이 입문자에게 좋다고 생각했던 이유는 -

모르는 때에 쉽게 찾아볼 수 있도록 툴에 대한 상세한 설명과 함께 예제를 함께 수록해 놓았는데 책을 보고 예제를 따라해보다보면 자연스럽게 스케치가 이런 툴이구나, ui 디자이너들이 좋아하는 이유가 있네 라고 생각할 수 있게 해주었기 때문이다.

실제로 목차부터 어렵지 않게 되어있다.

Chapter 1. 스케치, 시작 전 몸풀기

- 화면구성과 인터페이스, 기본도형을 그려보며 스케치의 기본기능을 익힐 수 있게 하였다.

Chapter 2. 스타일 입히기의 기본

- 오브젝트에 border, shadow, fill 등 다양한 인스펙터 기능을 소개했다. 뿐만 아니라 스타일을 저장하고 활용하는 방법도 알려준다.

Chapter 3. 앱 화면 디자인으로 본격 시작하기

- 작업에 필요한 디자인 탬플릿과 함께 이 책의 핵심이라 할 수 있는 Google Material Design Guide 를 활용한 화면 만들기 예제를 따라 해볼 수 있다. 또한 심볼에 대한 것도 살펴볼 수 있다.

Chapter 4. 앱 화면에 스타일 추가하기

- 앞서 배운 스타일 입히기를 만들어본 예제에 넣어봄으로써 스케치에 익숙해질 수 있도록 해준다.

Chapter 5. 디자인 공유하기

- 스케치에서 Asset 생성, 제플린에서 Design Guide 생성 / 버전관리 및 커뮤니케이션을 하는 방법을 상세히 알려준다.

Chapter 6. Prototype & Wireframe

- Invision Sync에 대한 사용법, Invision Craft를 활용하는법 등. Asset 생성과 간단한 인터렉션, 커뮤니케이션하는 것을 직접 해볼 수 있다. 또한 스케치에서 Wireframe 작성하는 방법도 설명하고 있다.

Chapter 7. 스케치 더욱 고급스럽게 활용하기

- 스케치 확장 플러그인, Craft by Invision 기능 파악하기, 단축키 등 기타 내용들이 수록되어 있다.

Sketch 에서 인상깊었던 것 -

1. command / alt

레이어에 이름을 설정하는 것의 중요함, 그룹설정의 중요함과 함께 레이어가 그룹에 종속되어 상세오브젝트 선택시 command 를 눌러 선택할 수 있다는 것과 (중복선택은 shift!) psd에서 일일이 가이드를 잡아줘야했던 불편함을 한번에 해결해줬던 alt의 기능. 선택된 오브젝트에 alt를 누르고 배경오브젝트에 마우스 hover를 하면 간편하게 오브젝트 사이간의 거리를 확인 할 수 있게 해준다!

2. Google Material Design 템플릿을 활용한 디자인작업

스케치에서 기본적으로 제공하는 material design 템플릿 파일을 열면 구글에서 직접 배포한 안드로이드 앱의 표준 가이드가 나오며 이것 또한 마찬가지로 오브젝트를 선택한 후 alt 를 눌러 손쉽게 가이드를 확인할 수 있게 해줬다. 또한 스케치소스(https://www.sketchappsources.com/) 에서 'Material icon'을 검색하여 소스를 찾는 방법과 다운로드한 템플릿을 저장하여 언제든지 활용 할 수 있도록 해주는 방법. 그리고 https://material.io/guidelines/ 에서 가이드와 폰트를 살펴볼 수 있는 방법까지 소개해주었다.

3. zoom & focus

단축키로 내가 수정하고자 하는 화면에 대해 즉각적으로 보여주는 기능이 좋았다.

command+0 (Actual Size) : 실제 화면에 맞추기

command+1 (Center Canvas) : 캔버스의 모든 오브젝트가 한 화면에 들어오도록 조정

command+2 (Zoom Selection) : 선택한 오브젝트를 화면 중앙에 가득차게 표시하기

command+3 (Center Selection) : 현재 배율을 유지한 채로 선택한 오브젝트를 화면 중앙에 표시하기

4. 스타일을 가져오고, 저장하고, 입히기.

다른 아트보드에서 오브젝트를 복사, 붙여넣기 하는 것만으로도 스타일을 복사해 올 수 있다는 것과 오브젝트에 스타일을 입혀 손쉽게 수정할 수 있는것, 그리고 수정시에 새로운 스타일로 저장 혹은 업데이트 할 수 있는 것을 상세하게 설명해주었다.

5. Symbol 안의 Symbol

심볼 안에 별점표시와 같은 동일하지만 다른 값을 표시하고자 하는 경우 심볼 편집모드로 진입 후 command+d를 이용해 동일한 심볼 아트보드를 추가, 편집하는 기능을 설명해주었는데 많은 값의 심볼을 Detach from symbol 할 수 없는 경우에 유용하게 쓰일 것 같단 생각이 들었다.

6. Export 방법 및 세부기능

psd로 Asset 생성시 사이즈마다 일일이 다르게 수정, 저장을 반복하여야 했는데 스케치에선 자동적으로 Export 옵션을 지정해 해상도에 맞는 사이즈와 이미지 포맷을 생성해 주었다. 또한 모바일 OS에 따른 Prefix / Suffix를 활용하는 방법도 상세히 알려주었다. 예를들어 psd에서 iOS 화면 Asset을 생성할 시엔 @2x 와 같은 접미사를 일일이 지정해줘야 했는데 스케치에선 자동생성(!)이 된다. 그리고 코드로의 Export기능. psd에선 가이드페이지에 일일이 css값을 써줬어야 했는데 오브젝트-우측마우스클릭-Copy CSS Attributes 또는 Copy SVG Code를 클릭하면 손쉽게 코드를 생성해주어 개발자에게 전달이 용이할 것 같았다.

Invision 에서 인상깊었던 것 -

1. Invision sync를 통한 프로토타입

설치 후 폴더 생성 > 진행중인 스케치파일을 삽입하는 것만으로도 자동적으로 assets과 screens 폴더를 생성하여 Export 해준다. 이것을 invision 웹에서 바로 확인 할 수 있는데 파일을 클릭한 후 바로 각 화면의 prototyping을 할 수 있도록 해준다.

2. Invision Craft를 활용하여 더욱 간단하게

Craft를 설치하고 스케치를 다시 열어보면 인스펙터 영역 좌측에 Craft가 추가되는데 프로토타입을 진행할 파일이 열린 상태에서 인비젼에 로그인을 하고 프로토타입을 생성하면 동기화가 진행되며 이후 단축키 c를 눌러 스케치에서 프로토타입을 바로 진행 할 수 있으며 인비젼웹에서 확인할 수 있도록 해준다. 이런 방법에 대한 상세한 설명이 수록되어 있어 실습을 해보는데에 어려움이 없었다.

3. Inspect mode에서 디자인가이드 확인 및 커뮤니케이션하기

Inspect – InVision Support

위 영상에서 볼 수 있듯이 오브젝트를 클릭하여 다른오브젝트에 hover 하는 것만으로도 거리값을 알 수 있으며 css코드를 추출할 수 있도록 해주는 것이 놀라웠다. 또한 css를 xml코드로 보여줘 개발자에게 유용할 것 같단 생각이 들었다.

4. 화면공유 기능

커뮤니케이션하고자 하는 사람들을 초대하는 기능과 함께 url만으로도 invision화면을 확인 할 수 있는 기능을 갖고있었다. inspect모드에서 share버튼을 클릭하면 초대하고자 하는 사람들을 선택할 수 있는데 그 외에도 public share link를 클릭하면 손쉽게 url을 얻을 수 있다. 아래 생성한 url은 내가 실습한 예제파일을 공유한 링크로, 간단한 프로토타입을 확인할 수 있다. (https://invis.io/VJE2JX9AF#/259615445_StoreDetail)