#1 Sketch 입문_2020-02-21

0. Sketch / Photoshop 비교

<Sketch 의 장점>

a) 자체 용량이 차이가 크다 -> Photoshop은 1.74GB로 굉장히 무겁다. 반면 스케치는 46.7MB로 가볍다. 간단한 UI 디자인 진행했 을 때 파일의 용량은 거의 8배 가깝게 차이가 난다. - 가볍기 때문에 관리와 유지보수가 수월하다.

b) 둘다 아트보드 기능이 있지만, Sketch는 아트보드가 무제한으로 사용 가능하다. Photoshop에서는 보딩페이지가 4~5개 정도 됐을 때 무거워서 사용하기가 힘들다. 반면 Sketch는 UI 전체를 한 파일로 관리해도 무겁지가 않다. 또한, 스케치에서 작업하면 한눈에 들어오기 때문에 유저 플로우나 전체적인 톤 앤 매너를 유지하는 데 더 좋다.

c) Sketch는 벡터 기반의 툴이기 때문에 x1 배율로 작업이 가능하다.

d) Sketch는 반응형 기능을 지원한다.

e) Photoshop에도 플러그인이 있지만, 사용하는 사람이 거의 없다. 반면 양질의 플러그인을 보유하고 있는 Sketch는 작업 능률에 굉 장한 도움을 준다.

f) 스타일 저장 기능 - UI를 템플릿화 하거나 WSG(Web Style Guide)만들기에 최적화된 기능.

g) Symbol 기능 -> Sketch의 넘사벽 기능. -> Overide 기능이 있어 텍스트 값만 교체하거나 심볼에 심볼을 더 추가해서 상황별 UI 를 손쉽게 구현이 가능하다.

i) 프로토타입 제작 기능 ->

<Sketch의 단점>

a) 맥 OS에서만 구동되는 툴이다.

b) 프로젝트 팀원 모두가 스케치를 이해하고 사용해야 협업이 가능하다.

c) 가격이 비싸다

[스케치의 특징]

1. 스케치는 인풋 창에서 간단한 연산이 가능하다.

2. 협업 기능 - 라이브러리 - 공유해서 함께 사용하는 심볼(Symbol) : 심볼화된 공통요소를 모은 파일을 스케치 클라우드나 드롭박스 같은 특정 저장소에서 공유하고 이것을 다른 디자이너가 작업하고 있는 페이지로 불러와 사용하는 방식이다.

사용 방법 : [Preferences > Libraries]에서 등록 / 삭제가능하고, 등록된 라이브러리는 심볼을 불러오는 것과 같은 방법으로 사용 가능.

3. 제플린을 설치하면, 제플린으로 산출물을 Export가 가능하다.

-> 아래 그림과 같이 상단 Plugins 탭을 이용하여 제플린으로 산출이 가능

4. 텍스트의 투명도를 조절하는 방법

-> Opacity로 투명도 조절하는 방법 - 제플린에서 원본색상과 투명도가 분리되어 보여진다.

-> Color Picker의 ALPHA 값을 이용해 투명도를 조절하면 제플린에서 색상값과 투명도가 함께 보여진다.

개발자의 혼동을 줄이기 위해서는 -> Color Picker의 ALPHA값으로 투명도를 조절하는 것을 추천한다.