추가 적립 안내

혼란스러운 UX/UI 개념을 정립하고 실무 디자인 프로세스와 함께 스케치(55버전)를 마스터합니다.

디자이너 구인 공고를 보면 알 수 있듯이 스케치가 대세라는 것은 부인할 수 없다. 이 책은 기획부터 디자인, 출시까지 진행했던 앱 프로젝트를 중심으로 스케치 55버전의 기능을 하나씩 익혀가는 과정으로 구성됐다. 즉, 현업에서 사용하듯 스케치 툴을 배우고 디자인 프로세스를 경험한다. 또한 디자인 프로세스에서 가장 중요한 팀원과 소통하는 방식도 자세히 일러둔다. 더불어 작업 효율을 극대화하는 스케치 플러그인 제플린까지 상세히 알아본다.

Chapter 1
스케치를 실행하기 전에
1. 스케치를 써야 하는 이유
2. UX/UI 디자이너는 무슨 일을 하나
3. 문제정의와 기능정의 간단 예시

Chapter 2
와이어프레임 설계하기
1. 와이어프레임이란
__와이어프레임을 그려야 하는 이유
__스케치로 와이어프레임 그리기
__실습 미리보기
2. 스케치 실행하기
__스케치 설치하기
__스케치 인터페이스 살펴보기
__페이지와 필터
__아트보드 만들기
__아트보드 복사하기
__아트보드 선택하기
__핸드와 줌으로 이동하기
__아트보드 이름 변경하기
__레이어명 표기 규칙 정하기
__레이어 순서 변경하기
__레이어에서 레이어로 포커스 이동하기
__+ 레이어+
3. 스플래시 스크린 와이어프레임 그리기
__스플래시 스크린이란?
__사각형을 그려서 영역 잡기
__키보드로 도형 크기 조정하기
__되돌리기
__로고 영역 잡기
__도형 컬러 변경하기
__도형 보더 삭제하기
__도형 기본 스타일 설정하기
__+ 보더+
__스마트가이드
__레이어 간격 재기
__키보드 방향 키로 도형 위치 잡기
__영역 이름을 텍스트로 입력하기
__텍스트 정렬하기
__폰트 스타일과 크기 변경하기
__레이어 이름 변경하기
__레이어 리스트에서 원하는 레이어 선택하기
__레이어 그룹 짓기
__캔버스에서 원하는 레이어 선택하기
__겹쳐진 레이어 중에서 레이어 선택하기
4. 웰컴 스크린 와이어프레임 그리기
__웰컴 스크린이란?
__웰컴 스크린 와이어프레임을 만드는 순서
__좌표를 이용하여 버튼 위치 잡기
__텍스트, 로고, 배경 영역 위치잡기
__기준 그리드
__그리드 설정하기
__+  Point 그리드 시스템+
__정렬하기
__레이어 간격 맞추기
__전체 간격 조정하기
__+ 단축키+
5. 사인업 스크린 와이어프레임 그리기
__사인업 스크린이란?
__배경 설정하고 레이어 잠그기
__상태표시줄·내비게이션 바·셀 영역 만들기
__+ 키보드를 고려한 UI+
6. 메인 스크린 와이어프레임 그리기
__메인 스크린이란?
__메인 스크린에 뒤로가기가 없는 이유
__사인업 스크린 재활용하기
__카드뷰 만들기
__하단 탭 만들기

CHAPTER 3
와이어프레임에 디자인 입히기
1. 디자인 입히기 사전준비
__어느 분야의 디자이너가 되고 싶은가?
__와이어프레임과 디자인 입히기를 나눈 이유
__키워드 잡기
__키워드 시각화하기
__핀터레스트에서 무드보드 만들기
__무드보드 참고하여 컬러 정하기
__접근성을 고려하여 컬러 사용하기
__자주 사용하는 컬러 등록하기
2. 로고 만들기
__나는 어떤 생각을 갖고 로고를 만들었나?
__참고할 아이콘 다운로드하기
__그리드·합치기·나누기를 활용한 아이콘 만들기
__그리드 설정하기
__그리드 위에 아이콘 그리기
__아이콘 레이어 정리하기
__아이콘을 합쳐서 정리하기
__+ 불리언 연산+
__완전히 합치기
__크기 조정하기
__모양을 대고 그리기
__만든 아이콘 조합하기
__아이콘에 텍스트 추가하기
__텍스트를 이미지로 변경하기
__도형의 소수점 없애기
__로고 마무리하기
__+ 자간·행간·행폭과 가독성+
__텍스트 옵션 설정하기
__스타일 복사하기
__자주 쓰는 컬러 스타일 설정하기
3. 스플래시 스크린에 디자인 입히기
__스크린 가운데에 로고 배치하기
__디바이스로 확인하기
4. 웰컴 스크린에 디자인 입히기
__이미지 다운로드하여 스케치에 불러오기
__이미지 불러와서 설정하기
__아트보드에서 아트보드로 복사하기
__이미지 용량 줄이기와 편집 전으로 되돌리기
__그레이디언트 설정하기
__마스크로 이미지 설정하기
__폰트 다운로드하기
__버튼의 텍스트 설정하기
__버튼 모서리 둥글게 하기
__텍스트 박스 마진 설정하기
__텍스트 스타일 설정하기
__텍스트 스타일 설정 취소·삭제하기
__+ 텍스트 박스 자동·수동 설정+
5. 사인업 스크린에 디자인 입히기
__아트보드에 있는 폰트 한 번에 바꾸기
__iOS 라이브러리 활용하기
__내비게이션 바 만들기
__Next와 Cancel 버튼 만들기
__터치영역 설정하기
__마스터 심볼 만들기
__오버라이드 기능으로 버튼 관리하기
__레이블 만들기
__오버라이드로 심볼 컨트롤하기
__인풋 영역에 플레이스 홀더 넣기
__템플릿 활용하여 디자인하기
6. 메인 스크린에 디자인 입히기
__힌트를 주는 UI
__임시 데이터 넣기
__로렘 입숨
__레이어 재활용하기
__그림자 넣기
__그림자와 디자인 트렌드
__+ 블러+
__중첩 심볼 만들기
__하단 탭의 홈 아이콘 만들기
__아이콘보다 큰 도형으로 감싸야 하는 이유
__삼각형을 그리는 또 다른 방법
__툴 바 커스터마이징 하기
__중첩 심볼을 이용하여 탭 바 완성하기
__+ 하단 탭 순서의 심리적 효과+

CHAPTER 4
디자인 결과물 전달하기
1. 내보내기
__내보내기
__다양한 크기로 내보내기
__에셋을 여러 가지 크기로 전달해야 하는 이유
__1배수로 디자인해야 하는 이유
__+ PPI와 해상도+
__+ 파일명의 접두어와 접미어+
__+ 내보내기 포맷의 종류+
__아트보드 내보내기
__아트보드 여러 개 내보내기
__레이어를 드래그로 내보내기
2. 제플린으로 전달하기
__제플린 다운로드와 회원가입하기
__제플린 인터페이스 살펴보기
__PX·DP·SP·PT 살펴보기
__+ 가변 영역과 고정 영역+
__리사이징으로 고정, 가변 영역 실습하기
__제플린 프로젝트 생성하기
__스케치에서 제플린으로 업로드하기
__제플린 설정하기
__제플린 링크 공유하기와 멤버 초대하기
__제플린에 코멘트 달기
__제플린으로 에셋 내보내기
__스케치로 프로토타입을 만들어 제플린에 업로드하기
3. 앱 아이콘 전달하기
__iOS 아이콘 전달하기
__안드로이드 아이콘 전달하기
__파비콘 전달하기
4. 디자인 결과물 전달하기를 마치며

CHAPTER 5
스케치 더 잘 사용하기
1. 나를 위한 라이브러리 만들기
__내 라이브러리에 심볼 추가하기
__라이브러리에 있는 심볼 수정하기
2. 모두를 위한 라이브러리 만들기
__ 공용 라이브러리에 심볼 추가하기
3. 디자인 시스템
__디자인 시스템 시작하기
4. 반응형 웹 디자인
__모바일이 우선?
5. 다크 모드
6. 픽셀을 정수로 맞추는 방법
7. 플러그인
__오버플로
__스케치 러너
__언스플래시
__애니마
8. 폰트가 없을 때!

부록
__스케치 Q&A
__이제 막 시작한 디자이너를 위한 조언
__키보드 단축키 모음
__에필로그 내 인생을 바꾼 툴, 스케치