이토록 쉬운 스케치 > 웹사이트

이토록 쉬운 스케치



도서명:이토록 쉬운 스케치
저자/출판사:서한교/루비페이퍼
쪽수:352쪽
출판일:2019-07-20
ISBN:9791186710500

목차
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
__이제 막 시작한 디자이너를 위한 조언
__키보드 단축키 모음
__에필로그 내 인생을 바꾼 툴, 스케치