emocon 2015 - sketch3로 기획서 관리하기

22
Sketch3 로 기획서 관리하기 @minieetea @minieetea

Post on 14-Jan-2017

436 views

Category:

Design


4 download

TRANSCRIPT

Sketch3 로 기획서 관리하기

@minieetea@minieetea @minieetea

그냥 흔한 기획자입니다.개발자 아닙니다 + 디자이너는 더더욱 아닙니다개발자 아닙니다 + 디자이너는 더더욱 아닙니다

나만의 템플릿을 만들자

Sketch3 template - File > New from template > …

- iOS의 경우, 1x 기준으로 되어 있습니다.

- 기준해상도는 4.7inch (375px)

Free Resource - sketchappsources.com (말고도 많아요)

- @2x 고해상도가 많습니다.

- 기준해상도는 4.7inch (750px)

Document Color - 비쥬얼 디자인이 아니니 배색은 신경쓰지 말자

Icon / Componet SET - 자주 쓰는 아이콘이나, 컴포넌트들을 정리 - File > Save as Template…

아트보드만 잘 다뤄도..

Artboard - GUI 디자인을 위한 기본 해상도 지원

- 최근에 Material도 추가됨!

Arrange - 오브젝트 1개는 Artboard 기준으로 정렬

- 오브젝트 2개 이상은 오브젝트끼리 정렬

- Backward 오브젝트 기준으로 정렬

Artboard - iOS 는 320*568 기준 (@1x)

- Android는 360*640 기준 (720dp)

- 원하는 사이즈는 직접 조절가능

Export option - 배경색을 지정

- Export 할 때 배경색을 포함할지 선택

반복되는 UI 그리기

Group - 자세한 설명은 생략한다

Symbol - 프로그래밍 언어의 포인터 같은 ... (아마도?)

- 도큐먼트 전체에서 자주 사용되는 오브젝트를 정의

- 원래 심볼 == 복붙한 심볼

- 같은 심볼을 수정하면 전부 바뀜

Detach Symbol (Symbol 해제) - Create Symbol : Symbol1

- Copy Symbol : Symbol1 copy

- Symbol1 == Symbol1 copy

- Detach from Symbol : Symbol1

- Create Symbol : Symbol1

- Symbol1 != Symbol1 copy

잠궜다 풀었다 하면 너는 이미 안드로메다….

Text Style - 키노트, 파워포인트… 등 - 흔한 텍스트 스타일과 동일

플러그인 사용하기

Plugin - Javascript로 되어 있음

- 남들이 짜놓은거 찾아서 쓰자

추천 - Measure master

- Content Generator Sketch Plugin

- Sketch Notebook

Export

Export option - Sketch의 꽃

- 모바일 멀티 해상도에 최적

- @1x 기준 ::: 2x = @2x

- 만약 @2x를 기준으로 작업했다면 ::: 2x = @4x

- @2x를 내보낼땐 ::: 0.5x = @1x / 1.5x = @3x

플러그인은 많지만, 불완전하므로 직접하는 것이 나음

Object Path - 오브젝트, 레이어, 아트보드 이름을 지정하면 그대로 export

- / 로 이름을 구분해두면, 동일 경로의 폴더가 생성됨