스케치 무작정 따라하기

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)하기
[이론] 미리보기 화면 녹화하기

{부록}
플러그인 알아두기
스케치 커뮤니티
단축키

찾아보기