이 책은 완전히 새로워진 스케치 49~51 버전의 새로운 기능을 수록하여 기본 기능을 익히고 함께 갤러리 앱을 만들어본다. 팀원 간의 협업을 위해 디자인 시스템을 관리하고 다양한 플러그인(제플린, 플린토, 인비전 등)을 활용해서 작업 시간을 단축시키도록 한다. 또한 실무 프로세스에 따라 UX/UI 디자인부터 효율적인 업무 개선을 위한 개발자와의 소통 방법을 알려준다. 스케치를 처음 접하거나 알고 있지만 효과적으로 이용하기 어려운 사람들을 위해 함께 사용하면 좋은 플러그인, 스케치 커뮤니티와 단축키도 소개한다.
UX/UI 디자이너
다양한 미디어 기반의 경력을 바탕으로 스타트업 기업의 전반적인 디자인 컨설팅 및 커뮤니케이션 작업을 진행하고 있다.
: 경력
웹액츄얼리코리아 실장
계원조형예술대 시간디자인학과 겸임교수
디자인하우스 디지털미디어 디자이너
삼성 SDS UI 디자이너
BBC London
Dundee University Graphic 학사
: 프로젝트
캐시슬라이드, LG 생활건강 MCN 플랫폼, 삼성전자 뉴스룸, 한국암웨이 모바일 커뮤니케이션 사이트 등
: 수상
D&AD Student Award 수상
ISTD(International Society of Typographic Designers) Awards 수상
: 번역 감수
우리 회사 디지털로 리셋하기 : 웹 액츄얼리 코리아, 2015년 :
감성 디자인 : 웹 액츄얼리 코리아, 2013년 :
P A R T 01 {기능} 프로토타이핑에 최적화된 스케치 알아보기
Section 01 / 디자인 프로세스의 변화
[이론] 개발 프로세스의 변화
[이론] UI/UX 디자이너에게 필수 역량이 된 프로토타이핑 툴
[이론] 작업에 따른 프로토타이핑 툴 선택
Section 02 / 최적의 아이디어 구현 툴, 스케치
[이론] 벡터 기반의 가벼운 인터페이스 디자인
[이론] 편리한 인스펙터 옵션
[이론] 자동으로 오브젝트 간격을 측정하는 스마트 가이드
[이론] 스타일 코드와 일치하는 텍스트 박스
[이론] 간편하게 지정하는 텍스트 스타일
[이론] 심볼로 만드는 라이브러리
[이론] 다양한 템플릿
[이론] 플러그인을 더해 강력해진 확장성
Section 03 / 스케치 작업 화면 살펴보기
Section 04 / 툴바 기능 알아보기
[이론] 삽입 기능
[이론] 그룹/심볼 지정 및 확대/축소 기능
[이론] 도형 편집 기능
[이론] 마스크와 크기 조절 기능
[이론] 부울 연산 기능
[이론] 레이어 목록 기능
[이론] 인터랙티브 프로토타입 기능
[이론] 보기와 내보내기 기능
Section 05 / 레이어 목록 이해하기
[이론] 페이지 다루기
[이론] 레이어 다루기
Section 06 / 이미지와 오브젝트 다루기
[이론] 이미지 추가하기
[이론] 이미지 교체하기
[이론] 이미지 편집하기
[이론] 이미지 파일 크기 줄이기
[이론] 이미지 색상 보정하기
[이론] 벡터 오브젝트 이해하기
[이론] 오브젝트 편집 옵션 살펴보기
[이론] 오브젝트 정렬하기
Section 07 / 심볼 알아보기
[이론] 심볼(Symbol)이란?
[이론] 심볼 수정 및 해제하기
[이론] 심볼 이름 지정하기
Section 08 / 텍스트 추가하기
[이론] Text Style 살펴보기
[이론] 텍스트 옵션 더 알아보기
Section 09 / 기준 가이드 만들기
[이론] 눈금자(Ruler)를 이용해 안내선 만들기
[이론] 그리드(Grid) 표시하기
[이론] 레이아웃(Layout) 설정하기
Section 10 / 기본 요소 설정하기
[이론] 템플릿 파일 설정하기
[이론] 컬러 팔레트 설정하기
Section 11 / 프로토타이핑 기능 살펴보기
[이론] 프로토타이핑 도구 알아보기
[이론] 인스펙터의 Prototyping 항목 살펴보기
[실습] 링크(Link) 지정하기
[실습] 핫스팟(Hotspots) 지정하기
[이론] 시작점(Start Points) 지정하기
[이론] 미리 보기(Preview)
Section 12 / 디자인 내보내기
[이론] 내보내기(Export) 옵션 살펴보기
[이론] Slice 도구로 이미지 일부분만 내보내기
[이론] Slice 영역의 원하는 오브젝트만 그룹에 넣기
[이론] Slices 옵션 살펴보기
[이론] Make Exportable과 Slice 도구의 차이점
[이론] 슬라이스 영역 복제하기
[이론] 여백 없이 자르기
Section 13 / 스케치의 새로운 기능 이해하기
[이론] 스케치의 프로토타이핑
[이론] 공유 라이브러리
[이론] 내장 라이브러리 - 애플 iOS UI
Section 14 / 스케치 클라우드 기능 살펴보기
[실습] 스케치 클라우드 계정 만들기
[이론] 스케치 클라우드에 파일 업로드하기
[이론] 공유 설정하기
[이론] 파일 다운로드하기
[이론] 공유 파일 업데이트하기
[이론] 업데이트된 라이브러리 다운로드하기
[이론] 공유 파일 삭제하기
P A R T 02 {실전} 스케치에서 갤러리 앱 화면 디자인하기
Section 01 / 스플래시 화면 디자인하기
[이론] 새 문서 만들기
[실습] 아트보드 만들기
[이론] 파일 저장하기
[실습] 레이어 만들기
[실습] 텍스트 입력하기
[실습] Mirror 기능으로 디자인 확인하기
Section 02 / 홈 화면 디자인하기
[실습] 헤더(Header) 영역 디자인하기
[실습] 이미지 슬라이딩 영역 디자인하기
[실습] 폰트 어썸 - 아이콘 폰트 사용하기
[실습] 리스트 영역 디자인하기
[실습] 리스트 영역 복제 및 수정하기
P A R T 03 {실전} 플러그인을 이용해 앱 디자인하기
Section 01 / 플러그인 알아보기
[이론] 플러그인이란?
[이론] 플러그인 내려 받기
[이론] 플러그인 설치하기
Section 02 / 카테고리 화면 디자인하기
[실습] 헤더와 목록 디자인하기
[실습] Craft 플러그인을 이용해 목록 디자인하기
Section 03 / 스케줄 카테고리 화면 디자인하기
[실습] 타이틀 복제 및 수정하기
Section 04 / 슬라이딩 메뉴 화면 디자인하기
[실습] 그리드로 메뉴 영역 디자인하기
Section 05 / 세부 화면 디자인하기
[실습] 상세 화면 디자인하기
[실습] 심볼 편집하기
[실습] 텍스트 편집하기
[실습] 텍스트 스타일 등록하기
Section 06 / 아이콘 편집하기
[실습] IconJar를 활용해 아이콘 추가하기
[실습] Vector 도구를 이용해 아이콘 만들기
[실습] 부울 연산을 이용해 오브젝트 편집하기
[실습] 아이콘 정렬하기
[실습] 지도 영역 디자인하기
Section 07 / 화면 해상도에 대응하는 그래픽 설정하기
[이론] Resizing Constraint 기능 알아보기
[실습] Resizing Constraint 적용하기
[실습] 앱 화면에 적용하기
Section 08 / 협업을 위해 디자인 에셋 공유하기
[실습] 디자인 공유를 위한 에셋 만들기
[실습] 개별 이미지 에셋 내보내기
[실습] Slice 도구로 슬라이스 영역 지정하기
[실습] 아트보드 내보내기
[실습] PDF로 아트보드 내보내기
[실습] 코드로 내보내기
[이론] 모든 이미지 에셋 내보내기
P A R T 04 {활용} 디자인 시스템 구축하기
Section 01 / 디자인 시스템의 기초 구성하기
[이론] 기준색(Base Colors) 설정하기
[실습] 레이어 스타일로 기준색 지정하기
[이론] 텍스트 스타일 설정하기
[실습] 텍스트 스타일로 기준 텍스트 설정하기
[이론] 구글 폰트 알아보기
Section 02 / 심볼 만들기
[실습] 색상 심볼 만들기
[실습] 텍스트 심볼 만들기
[실습] 아이콘 심볼 만들기
[실습] 버튼 상태 설정하기
[실습] 버튼 형태(Fill) 설정하기
[실습] 버튼 형태(Border) 설정하기
[실습] 인풋(Input) 상태 설정하기
Section 03 / 컴포넌트 설정하기
[실습] 기본 버튼 만들기
[실습] 아이콘만으로 이루어진 버튼 만들기
[실습] 아이콘이 왼쪽에 있는 텍스트 버튼 만들기
[실습] 아이콘이 오른쪽에 있는 텍스트 버튼 만들기
Section 04 / 폼 양식 설정하기
[실습] Input 심볼 만들기
[실습] 메시지(Message) 심볼 만들기
[실습] 제목(Label) 심볼 만들기
P A R T 05 {실전} 스케치와 외부 플러그인 연동하기
Section 01 / 제플린 연동하기
[이론] 제플린 이해하기
[실습] 제플린 설치하기
[실습] 제플린으로 스케치 파일 내보내기
[이론] 제플린 화면 살펴보기
[이론] 제플린 화면 세부 구성 살펴보기
[이론] 이미지/텍스트 요소 디자인 가이드 확인하기
[실습] 버전 관리 기능으로 팀과 협업하기
[이론] 노트 기능으로 팀과 협업하기
Section 02 / 플린토로 인터랙션 만들기
[이론] 플린토 이해하기
[이론] 플린토 설치하기
[이론] 플린토 살펴보기
[이론] 플린토 문서 속성 살펴보기
[실습] 플린토에서 스케치 파일 불러오기
[실습] 화면 간 링크 연결하기
[실습] 홈 화면에서 링크 연결하기
[실습] 스크롤 영역 지정하기
[이론] 트랜지션 디자이너 이용하기
[실습] 레이어 트랜지션과 애니메이션 만들기
[실습] 동작 디자이너(Behavior Designer) 이용하기
[실습] 스크롤 동작(Scroll Behavior)하기
[실습] 레이어 연결(Connected layer)하기
[이론] 미리보기 화면 녹화하기
{부록}
플러그인 알아두기
스케치 커뮤니티
단축키
