추가 적립 안내

[일러스트레이터로 배우는 UI 디자인]은 UI와 어도비 일러스트레이터 초심자들이 차근차근 따라해볼 수 있는 기초적인 지침서다. 그래픽 디자이너들이 포토샵과 함께 가장 많이, 널리 사용하는 그래픽 프로그램인 어도비 일러스트레이터를 사용해 기본적인 웹사이트와 모바일 애플리케이션의 사용자 인터페이스를 디자인하는 방법이 담겨있다.

★ 이 책에서 다루는 내용 ★

■ 벡터를 활용한 작업 속도와 유연성 제고
■ UI 디자인에 유용한 툴, 패널, 기법 활용
■ 빠르고 효율적이면서도 창의성을 발휘할 수 있는 작업 공정 설계
■ 사이트맵 구성, 와이어프레임 제작, 최종 목업 디자인
■ 자신의 작업 스타일에 맞춘 일러스트레이터 설정

★ 이 책의 대상 독자 ★

여러분 중에는 노련한 디자이너도, 포토샵의 귀재도, 학교를 갓 졸업한 새내기 디자이너도, 예술적 안목을 키우고 싶어하는 사람도 있을 것이다. 이 책에서는 누구나 매우 빠르고 효율적인 방법으로 뛰어난 목업(mock up)을 만드는 방법을 소개한다. 중간에 드로잉 기술과 UI 요소 제작 요령을 다루기도 하지만 삽화 디자인을 심도 있게 다루지는 않는다. 대신 디자인 요소들을 조화롭게 구성해서 경험을 창조하는 데 초점을 맞췄기 때문에 누구나 유용한 정보를 얻을 수 있을 것이다.

★ 옮긴이의 말 ★

요즘은 바야흐로 소프트웨어의 전성시대다. 현대인의 생활 속 일부가 된 스마트폰을 필두로 TV, 컴퓨터, 심지어는 손목시계에 이르기까지 우리는 크기와 종류만 다른 여러 가지 모니터를 통해 업무를 하고, 친구들과 대화하고, 정보를 찾고, 여가를 즐긴다. 인간의 삶에서 디지털의 지분이 커져가는 만큼 이런 디지털 세상을 일구는 한 축인 UX와 UI 디자인 분야도 나날이 성장하고 있다.
이 지면에 무슨 이야기를 써야 할까 고민하다 문득 인터넷 서점에서 ‘UI 디자인’이라는 용어를 검색해보았다. 당연히 수백 종의 책이 우수수 나오리라 기대하는 동시에 수많은 책들 사이에서 괜히 기만 죽지 않을까 하는 걱정도 하면서. 하지만 이게 웬걸, UI 디자인에 대한 책은 생각처럼 ‘널리고 깔려’있지 않았다. 물론 훌륭한 책들이 자리를 지켜주고 있기는 하지만, 내가 ‘사용자 인터페이스’라는 개념도 낯설고 그래픽 프로그램에도 문외한이지만 나날이 중요해지는 이 UI 디자인을 어떻게든 해내야 하는 초심자라면 무슨 책을 골라야 할지 막막할 것 같았다.
솔직하게 말하자면 시각디자인을 정식으로 배우고 실무에서 디자이너로 일해 온 사람들에게는 이 책이 시시하게 느껴질 수도 있겠다. 그러나 요즘은 꼭 디자이너가 아니라도 나날이 발전하는 디지털 세상을 잘 이해하고 업무 경쟁력을 높이고자 디자인에 대한 기본기를 갖추려는 사람들에게는 이런 책이 오히려 가뭄에 단비 같은 존재로 책장에서 빛을 발하지 않을까 싶다. 이 책이 모쪼록 많은 초심자들에게 UI 디자인을 시작하기 위한 길을 터주길 바란다.

1 어도비 일러스트레이터와 함께 하는 UI 디자인: 미리보기
__벡터를 알아보자
__타이포그래피+색체=힘
____UI 디자인을 위한 타이포그래피
____강력한 색상 도구
__디자인의 일관성 유지
__정확한 레이아웃
__정리

2 툴과 패널
__툴 선택
__선택 툴
____선택 툴(V)
____직접 선택 툴(A)
____그룹 선택 툴
____매직완드 툴(Y)
____라쏘 툴(Q)
__드로잉
____펜 툴(P)
____선과 면
__타이포그래피
____타입 툴(T)
__변형 툴
____리플렉트 툴(O)
____프리 트랜스폼 툴(E)
__색상
____그래디언트 툴(G)
____아이드로퍼 툴(I)
____필과 스트로크
__작업공간 설정 툴
__모드
____드로잉 모드
____스크린 모드
__패널
____컨트롤 패널
____패널 펼치기와 접기
__워크스페이스
____맞춤형 워크스페이스 사용
__정리

3 일러스트레이터 워크스페이스
__픽셀 작업용 환경설정
____단위 선택
____컬러 스페이스 최적화
____애플리케이션 프레임
__아트보드 설정
____새 파일 열기
____아트보드 생성
____아트보드 정리
__정리

4 UI 디자인 빌딩블록
__가이드를 오브젝트로 변환
____가이드 생성
____오브젝트를 가이드로 변환
____정렬 툴 사용
__스마트 가이드
____정렬 가이드
____앵커/패스 라벨
____오브젝트 하이라이팅
____측정 라벨
____변형 툴
____콘스트럭션 가이드
__손쉬운 그리드
____그리드 생성
____그리드 선 맞추기
____여러 개의 아트보드에 그리드 적용
__픽셀로 작업
____Pixel Preview 모드
____픽셀 그리드에 맞춰 오브젝트 정렬
____좌표와 기준점
__레이아웃 시작
__UI를 위한 타이포그래피
____화면에서 보기 좋은 디자인
____글자 앉히기
____마지막 헤드라인 추가
__정리

5 그래픽으로 모양내기
__Appearances 패널에 스타일 추가
____Appearance 패널 사용
____Appearance 패널에서 속성 나열
____그래픽 스타일 만들고 편집
__심볼 사용
____심볼 생성
____심볼 활용
__픽셀 그리드에서 벗어나기
____애플리케이션 로고 제작
____계층구조 다듬기
__레이어를 사용한 오브젝트 정리
____Layers 패널
____화면 표시 옵션
____레이어 생성
____다른 레이어로 오브젝트 옮기기
____레이아웃 다듬기
__정리

6 마무리 작업
__고급 Appearances 기능 사용
____Illustrator Effects와 Photoshop Effects
____페이지 헤더에 올드스쿨 스타일 적용
____스타일 첨가
__글자 표현 기법 더 알아보기
____일러스트레이터로 문안 불러오기
____Area Type Options
____이미지 주변으로 텍스트 감싸기
____Find and Replace 사용
__이미지 다루기
____이미지를 불러오기 위한 준비 작업
____이미지 불러오기
__정리

7 똑똑하게 작업하자
__UI 디자인 계획
____사이트맵 생성
____와이어프레임 생성
__디자인 의도 설명
____스토리보드로 상호작용 보여주기
____노트 추가
__스타일 라이브러리
____컬러스킴 제작
____Portable Colors, Symbols, Styles
____템플릿
__일러스트레이터로 작업
____프리젠테이션 모드
____파일 형식 바꾸어 추출
____PDF로 저장
____웹용으로 저장
__정리