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

Sketch로 디자인하고 Zeplin, InVision으로 협업하기

조정옥 지음

한빛미디어 2017년 08월 26일 출간 종이책 : 2017년 08월 15일 출간

작품소개

책소개

UX/UI 디자인에 최적화된 Sketch! Sketch를 더욱 강력하게 보완해 주는 각종 Plugin을 한 권에 담았다.

이미 많은 회사에서 스케치의 장점을 알고 스케치 활용을 적극적으로 고려하고 있다. 하지만 이렇다 한 활용서가 없어 인터넷 동영상이나 블로그 자료를 찾아보는 것이 대부분이며, 이마저도 해외 자료가 많아 학습에 어려움을 겪고 있다. 이 책은 해외 파견 근무 이후 스케치를 접하고 그 매력에 빠진 저자가 사내 강의를 진행하게 되면서 쌓은 실무 경험을 함께 나누고자 시작되었다. 해외 사례가 아닌 국내 실정에 실질적인 도움을 될 수 있도록 현업 프로세스에 따라 디자인부터 프로토타이핑, 와이어프레임까지 직접 실습해 볼 수 있으며, 책 곳곳에서 저자의 다년간의 노하우를 엿볼 수 있다.

이 책은 하나의 저작 도구를 설명하는 매뉴얼이 아닌 UX/UI 실무자들의 업무 효율 개선을 위한 가이드라고 할 수 있다. 단순히 스케치를 소개하는 것이 아니라 스케치를 세계적인 UX/UI 도구의 최강자 반열에 올라올 수 있게 한 원동력인 각종 플러그인을 활용하여 업무 효율성을 높이는 방법을 소개하고 있기 때문이다. 스케치 기본 활용부터 제플린, 인비전 등 효율성을 극대화할 수 있는 다양한 플러그인 활용 방법을 이 책 한 권으로 끝낼 수 있다.

목차

[Chapter 01 스케치, 시작 전 몸풀기]
Lesson 1 스케치, 왜 열광할까요?
Lesson 2 스케치 구입 및 설치하기
Lesson 3 스케치 화면 구성과 인터페이스
Lesson 4 스케치 기본 기능 익히기
파일 생성, 열기 및 저장하기
[간단 실습] 새로운 파일을 만들고 저장하기
Auto Save와 버전 컨트롤
Lesson 5 Page, Artboard, Layer
Page
Canvas와 Artboard
Layer
Lesson 6 선과 다각형 그리기
Ruler, Guide, Grid
직선 그리기
화살표 그리기
기본 도형 그리기
[간단 실습] 정삼각형 그리기
다양한 형태 그리기
Lesson 7 오브젝트 편집하기
Lesson 8 회전과 변형 및 정렬하기
회전하기 - Rotate
변형하기 - Transform
[간단 실습] 입체 표현을 위한 각 부위 만들기
정렬하기 - Arrange
Lesson 9 다양한 화면 해상도에 빠르게 대응하기 _ 89

[Chapter 02 스타일 입히기의 기본]
Lesson 1 스타일 적용하기
인스펙터 영역 길들이기
스타일을 추가하고 삭제하기
색상 값 조정하기
Blending
Lesson 2 오브젝트 채우기, Fill 옵션의 팝업 창 파헤치기
채우기 옵션 선택하기
그러데이션 채우기 사용하기
패턴 및 이미지 채우기 사용하기
텍스처 채우기 사용하기
Lesson 3 오브젝트 테두리, Borders 항목 파헤치기
테두리 기본 옵션 살펴보기
테두리 고급 옵션 살펴보기
Lesson 4 그림자 효과로 입체감 살리기
그림자 추가하기
Lesson 5 오브젝트 흐림 효과 적용하기
Lesson 6 텍스트 입력부터 스타일 적용까지
텍스트 오브젝트를 추가하고 내용 입력하기
텍스트 오브젝트의 인스펙터 영역 살펴보기
Lesson 7 스타일을 저장하고 활용하기
Shared Style 을 저장하고 적용하기
Text Style 을 저장하고 적용하기
Lesson 8 비트맵 이미지 다루기

[Chapter 03 앱 화면 디자인으로 본격 시작하기]
Lesson 1 작업에 필요한 재료 갖추기
[간단 실습] 디자인 템플릿 준비하기
[간단 실습] 폰트 설치하기
Lesson 2 앱 화면 기본 프레임 만들기
Google Material Design Guide 및 만들 화면 살펴보기
안드로이드 화면 프레임 만들기
상태 표시줄 추가하기
Lesson 3 Map 화면 만들기
Floating Search bar 만들기
Bottom bar 만들기
지도 배경 및 액션 버튼 만들기
Lesson 4 Store Detail 화면 만들기
Guide Line 및 상단 이미지 영역 만들기
매장 이름과 간단한 정보 영역 만들기
CALL / SAVED / SHARE / WEBSITE 버튼 영역 만들기
매장 소개 영역 만들기
매장 상세 정보 영역 및 마무리
Lesson 5 Store Detail의 스크롤 화면 만들기
기본 레이아웃 완성하기
카드 컴포넌트 만들기
카드 컴포넌트 채우기
카드 컴포넌트의 별점 개수 변경하기

[Chapter 04 앱 화면에 스타일 추가하기]
Lesson 1 스타일 적용하기
Map 화면에 색상 적용하기
Store Detail, Store Detail_ Scroll 화면에 색상 적용하기
Lesson 2 이미지 추가하기
Pattern Fill로 채우기
Symbol 이미지 채우기

[Chapter 05 디자인 공유하기:Design Guide&Asset]
Lesson 1 디자인 공유를 위한 Deliverable 파악하기
Lesson 2 디자인 Asset 생성의 기본
로컬 폴더로 Export하기
Export 상세 설정 변경하기
Slice 로 Export할 영역 지정하기
코드로 Export하기
Lesson 3 Zeplin으로 Design Guide 자동 생성하기
서비스 가입 및 설치하기
Export 및 Design Guide 생성하기
Export 후 Zeplin 화면 구성 살펴보기
화면별 가이드 살펴보기
컴포넌트별 디자인 가이드 확인하기
Lesson 4 Zeplin을 이용한 버전 관리 및 커뮤니케이션
Version Control 확인하기
Note로 커뮤니케이션하기

[Chapter 06 Prototype & Wireframe]
Lesson 1 InVision 사용 준비하기
서비스에 가입하고 InVision Sync 설치하기
스케치 파일을 저장하고 Asset 추출하기
InVision 웹 사이트에서 Sync 내용 확인하기
Lesson 2 InVision 웹 사이트에서 Prototyping하기
Prototyping 작업화면 구성 살펴보기
각 화면 Prototyping 설정하기
인터랙션 결과 확인하기
Lesson 3 InVision Craft로 모든 과정을 더욱 간단하게!
InVision Craft 설치 및 디자인 파일 연동하기
InVision Craft 로 빠르게 Prototyping 하기
Lesson 4 InVision에서 Design Guide 확인 및 커뮤니케이션하기
Design Guide 생성 및 버전 컨트롤
커뮤니케이션 및 프로젝트 매니지먼트
Comment 로 의견 교류하기
Work Flow로 프로젝트 매니지먼트하기
LIVESHARE 로 실시간 커뮤니케이션하기
Lesson 5 스케치 프로그램에서 Wireframe 작성하기
아트보드 재구성하기
Symbol 화면 배치하기
Flow & Description 표현하기
문서 서식을 만들고 Export하기
Lesson 6 디바이스 미리보기 및 실시간 공유
Mirror 기능으로 iOS 기기에서 미리보기
Local Sharing 으로 웹에서 미리보기

[Chapter 07 스케치 더욱 고급

출판사 서평

① 현업의 업무 프로세스에 따른 프로젝트 실습
단지 스케치 기능을 배우는 것이 아니라 스케치의 주요 기능이 실제 현업에서 어떻게 사용되는지 파악할 수 있는 프로젝트 실습을 진행한다. 대표적인 글로벌 서비스인 구글 맵을 실습 대상으로 삼아 세 가지 화면을 디자인하고 스타일을 적용해 본다. 이어서 원활한 협업을 위한 디자인 가이드 생성, 와이어 프레임 제작까지 스케치를 활용한 업무 프로세스를 제대로 배울 수 있다.

② 기본 기능도 꼼꼼하게, 단계별 구성
스케치를 처음 접하는 디자이너, 혹은 이미 사용하고 있지만 인터넷 정보 등으로 정리되지 않은 스케치 매뉴얼로 어려움을 겪고 있는 이들도 활용할 수 있도록 스케치 기본 기능까지도 꼼꼼하게 담았다. 스케치에서 기본 오브젝트를 삽입하고 편집하는 것부터, 스타일을 적용하는 등 지금 바로 스케치를 현업에서 사용해도 부족함이 없도록 기본기를 탄탄하게 다질 수 있다.

③ 스케치 프로그램과 연동되는 주요 플러그인까지 한 번에
스케치는 플러그인을 얼마나 잘 활용하느냐에 따라 더욱 완벽한 UX/UI 도구로 거듭날 수 있습니다. 이 책에는 스케치와 최고의 궁합을 자랑하는 InVison, Zeplin 등을 함께 활용합니다. Zeplin을 이용하여 Design Guide를 생성하고, InVison을 이용하여 Asset 추출 및 Prototyping 작업까지 진행해 봅니다. 이외에도 InVision Craft, Sketch Plugin Manager, Runner, Sketch Measure, BaseAlign 등 알아두면 도움이 될 플러그인을 함께 소개합니다.

▶ 이 책이 필요한 독자
- 작업 효율 극대화를 기대하는 UX/UI 디자이너
- 스케치는 알지만 플러그인 활용이 서툰 디자이너
- 디자이너와 원만한 소통이 필요한 개발자
- UX/UI 디자이너를 준비하는 취업준비생

작가정보

저자(글) 조정옥

저자 조정옥은 누구나 편하고 쉽게 쓸 수 있는 감성적인 휴대폰을 만들고 싶다는 생각으로 홀린 듯 UX의 세계로 흘러들어 온 지 벌써 십여 년이 되었습니다. 서울대학교에서 인지과학으로 석사 학위를 받은 후 LG전자 단말연구소에서 주로 북미향 휴대폰의 사용자 경험을 디자인하였습니다. SK플래닛에서 시럽월렛과 OK캐쉬백 등 모바일 커머스 서비스 UX 디자이너로 다년간 일하였으며, 사내 강사 제도를 통해 스케치 강습을 진행해 왔습니다. UX 디자인은 머리와 손을 부지런히 움직여야 하는 힘든 과정이지만, 다양한 문제에 맞서 해결하는 과정에서 배움과 성취감을 얻을 수 있는 일이라 믿습니다.