맛있는 스케치

통통 튀는 예제로 배우는 스케치 앱 디자인의 A to Z

김수재 지음

비제이퍼블릭 2019년 03월 20일 출간 종이책 : 2018년 04월 30일 출간

작품소개

책소개

통통 튀는 예제로 배우는 스케치 앱 디자인의 A to Z

통통 튀는 예제로 배우는 스케치 앱 디자인의 A to Z
최근 다양한 스타트업 기업들이 창업하고 새로운 모바일 서비스를 개발하면서 높아진 소비자의 눈높이에 맞춰 더 나은 인터렉션과 디자인을 만들기 위해 노력하고 있습니다. 서비스 자체의 퀄리티 또한 중요하지만 클라이언트에게 시각적으로 세련된 디자인을 제공하는 것 자체도 이제는 기본적인 일이 되었습니다.

스케치는 기존의 포토샵에 비해 가볍고 앱을 디자인하는 데 최적화된 툴로서, 앱 서비스에서 모든 영역의 디자인 업무를 스케치를 통해 이루어낼 수 있습니다. 기존의 디자인 툴에 대해 한계성을 느껴 가볍고 앱 서비스 개발에 최적화된 툴을 사용해보고자 하는 디자이너, 그리고 1인 개발자나 중, 소규모 프로젝트를 진행하는 스타트업에서 앱 디자인을 하려는 분들 모두 이 책을 통해 여러 가지 영감과 테크닉을 얻을 수 있을 것입니다.

이 책의 특징
- 디자인을 모르는 사람도 앱 디자인이 가능하도록 쉽게 만들어져 있다.
- 스케치 앱 디자인의 Symbol기능을 더욱 깊이 있게 다루었다.
- 스케치와 연동되는 프로토타이핑 툴 중 Flinto를 함께 익힐 수 있다.

이 책이 필요한 독자
- 스타트업에서 디자인을 담당해야 하는 초보자
- 포토샵 외의 새로운 디자인 툴에 대해 관심 있는 디자이너
- 1인 개발자로서 혼자 개발과 디자인을 해야 하는 개발자

목차

Chapter 1 디자인 트렌드
1 콘텐츠에 집중시키다
2 섬세한 움직임을 주는 마이크로 인터렉션
3 플랫 디자인
4 카드 디자인의 유행은 지속된다
5 시인성 높은 단순한 내비게이션과 높은 해상도의 이미지 활용
6 Design Why, How, What
7 사용자에게 새로운 경험을 제공하다, UX 디자인

Chapter 2 스케치 쉽고 빠르게 시작하기
1 스케치 설치
2 스케치 인터페이스 이해
3 툴 바 커스터마이징
4 상단 메뉴

Chapter 3 스케치 활용 디자인 기초
1 아트보드 개념과 이해
2 아트보드를 선택하는 방법
3 아트보드 내보내기
4 아트보드 복사하기
5 캔버스 내 이동
6 페이지의 개념
7 아트보드 관련 속성

Chapter 4 도형
1 라인 그리기와 속성
2 라인을 화살표로 만들기
3 라인 엣지 디자인 수정
4 Ractangle 그리기
5 Ractangle 관련 속성
6 Rounded 그리기
7 Star 그리기
8 Polygon 그리기

Chapter 5 도형에 스타일을 적용해보자
1 Fills로 색 채우기
2 도형에 그라데이션 효과 주기
3 그라데이션 활용 팁
4 그라데이션 반투명 효과
5 여러 가지 그라데이션 겹치기
6 그라데이션 겹치기를 활용한 인스타그램 로고 그리기
7 스타일 만들기

Chapter 6 아이콘 디자인
1 아이콘 디자인 시 주의사항
2 스케치 아이콘 디자인 가이드
3 날씨 앱 아이콘 디자인
4 컴포넌트 디자인을 위한 아이콘 개발
5 텍스트 디자인

Chapter 7 스케치로 디자인하는 반응형 웹 ? 회원 가입 페이지 디자인

Chapter 8 작업의 효율성을 높이는 스케치 기능의 이해 ? 인스타그램 UI 디자인
1 Symbol 기능
2 도형에 이미지 채우기

Chapter 9 스케치에서 제공하는 컴포넌트를 활용한 모바일 디자인
1 기본 iOS 컴포넌트를 활용한 이메일 앱 UI 개발
2 안드로이드 매터리얼 디자인을 활용한 맛집 앱 서비스 디자인하기

Chapter 10 따라 그리면서 배우는 스케치 ? iOS 취침 시간 앱 UI 디자인

Chapter 11 Symbol 기능을 활용한 컴포넌트 디자인 ? 의사 추천 앱 만들기

Chapter 12 Zeplin을 활용한 협업의 시작
1 Zeplin 사용 준비
2 Zeplin 프로젝트 만들기
3 공유
4 Zeplin에 스케치 디자인 옮기기
5 세부적인 내용 확인해보기
6 Zeplin으로 스타일 가이드 만들기

Chapter 13 몇 가지 유용한 플러그인 소개
1 Map generator
2 Icon drop
3 스케치 매터리얼
4 Image Reinvented
5 Move Layers half pixel
6 Skatter
7 Counter Text
8 스케치 캐시 관리

Chapter 14 Finto를 활용한 프로토타이핑 디자인
1 Finto 소개
2 Finto의 기본 UI
3 기본 화면 움직임 만들기
4 트렌지션 편집
5 x, y, z값을 활용한 로테이션 조절
6 동작 - ‘좋아요’ 클릭
7 동작 - iOS on-off 버튼
8 동작 - 웹 버튼
9 인스타그램 ‘좋아요’ UI 구현
10 walkthrough 페이징 효과

Chapter 15 스케치 49.0
1 Link로 아트보드 연결하기
2 Hotspot 기능으로 아트보드 연결하기
3 연결된 아트보드의 트렌지션 편집

출판사 서평

디자인을 전공한 사람이라고 하더라도 스케치 앱을 사용하는 사람은 극히 드물다는 사실에 전공자가 아닌 실무자로서 놀랐던 경험이 있습니다. 이미 해외에서는 대부분의 스타트업을 비롯한 기업들은 대부분의 디자인과 프로토타입 개발을 위해서 스케치 앱을 사용하고 있습니다.
스케치 앱을 사용하는 것이 좋은 포지션과 취업의 기회를 비롯한 많은 경험적 차이를 제공한다는 것을 알 수 있습니다.
스케치 앱은 이러한 시대에 발맞추어 시기적절하게 개발된 디자인 툴로 모바일 앱 서비스를 디자인하고 관리하는데 최적화되어 있는 솔루션으로 각인되어 가고 있습니다.
모바일 앱 서비스의 디자인을 보다 퀼리티 있게 만들어주고, 개발자와의 협업과 클라이언트와의 원활한 커뮤니케이션이 가능하게 하는 것. 그것이 바로 우리가 지금부터 알아볼 스케치 앱입니다.

작가정보

저자(글) 김수재

저자 : 김수재
메디어즈 대표와 옐로모바일 헬스케어사업부 총괄본부장을 거쳐 현재 바이앤어스 대표를 맡고 있으며, 리메인, 인프런, 웨런 등 온라인 강의 사이트에서 스케치 디자인 강의를 꾸준히 진행하고 있다.
베리뷰티, 찾았닥, 벤자민무어 페인트, JARVIS, 그레이스 성형외과 등 다수의 기업에서 홈페이지 및 앱 서비스의 UI를 디자인했다.