자료검색

책소개

이 책은 포토샵을 사용해 모바일 앱 디자인을 하기 위한 이론과 방법들을 고퀄리티의 예제를 중심으로 소개하고 있다. 본문은 앱 디자인을 잘 모르거나 처음 접하는 독자들부터 모바일 앱 디자인의 기초를 다지고 한 단계 발전하길 원하는 주니어 디자이너까지 누구나 쉽게 따라할 수 있도록 크게 이론, 실습 예제, 팁과 용어 정리로 구성되어 있다. 먼저 이론 파트에서 앱 디자인을 시작하기 전 기본적으로 알아둬야 할 GUI 디자인 이론과 모바일 환경의 특성을 파악해 기초를 쌓은 후, 실전 파트에서는 그 이론을 토대로 UI 컴포넌트 디자인과 앱 디자인 예제들을 따라하면서 각 컴포넌트의 특성과 쓰임새를 알고 앱의 성격의 따른 다양한 디자인 스타일 등을 익힐 수 있다. 그리고 앱 디자인과 관련된 여러 팁과 프로젝트 파일/폴더 관리하는 방법, 이미지 처리 방법 등의 유용한 디자인 노하우들도 함께 소개하여 효율적인 작업 방법을 안내하고 있다.

목차

Part Ⅰ. GUI 디자인

1장. GUI 디자인이란?
Step 01. 의미와 유래
Step 02. GUI 디자인의 분야
Step 03. 디자이너의 역할
Step 04. 디자인 프로세스

2장. 스마트폰과 GUI 디자인
Step 01. 모바일 디바이스의 특징
Step 02. Application
Step 03. 해상도
Step 04. UI 컴포넌트

3장. 컴퓨터 그래픽
Step 01. Vector와 Bitmap
Step 02. Color bit & System
Step 03. 이미지 최적화
Step 04. 파일 포맷
Step 05. 마스크mask

4장. Basic Rendering
Step 01. 빛의 흐름
Step 02. 질감

Part Ⅱ. 실전 따라하기

1장. UI Component design

Exercise 01. 입체감 있는 버튼 Standard Button
Exercise 02. 텍스쳐 버튼 Texture Button
Exercise 03. 게임 컨트롤러 버튼 Game Controller Button
Exercise 04. 다크 스타일 버튼 Radio Button Check Box
Exercise 05. 형광등 스위치 Toggle Switch Button
Exercise 06. 비디오 플레이어 위젯 Slider
Exercise 07. 사이트 로딩 아이콘 Loading Bar
Exercise 08. 드롭다운 메뉴 Dropdown Menu
Exercise 09. 탭 메뉴 Tab Menu
Exercise 10. 잠금 화면 Lock Screen

2장. Application design

Exercise 01. 형태에서 기초한 앱 아이콘 Bus Card Reader App Icon
Exercise 02. 사실적인 질감을 가진 앱 아이콘 Speaker App Icon
Exercise 03. 채팅 어플리케이션 Chat App
Exercise 04. 계산기 어플리케이션 Calculator App
Exercise 05. 카메라 어플리케이션 Camera App
Exercise 06. 세계 시간 어플리케이션 World Clock App

Part 3 Tip & 용어정리

Chapter 1. 앱을 완성하는 18가지 Tip

1. 포토샵 퍼포먼스를 높여보자
2. Global Light는 신중하게!
3. Smart Object를 사용하라
4. Perfect Radius
5. Full Name 보다는 가독성을 우선시해라
6. 앱 아이콘은 브랜드 파워를 가지고 있다
7. 앱 아이콘은 일관된 Look을 가져야한다
8. 부드러운 그림자 처리를 하라
9. 수치는 짝수로 만들어라
10. 개발자와 이야기하라
11. 이미지 소스들은 한 곳에 모아 관리하라
12. 모든 픽셀은 정확히 맞아야한다
13. 사이즈는 큰 해상도에서 작은 해상도로 제작하라
14. 폴더 정리를 하자
15. 파일 용량은 줄일 수 있으면 줄여라
16. 디자인과 개발 간의 차이를 좁혀라
17. 플랫폼에서 제공하는 디자인 가이드를 존중하라
18. 무드 보드mood board를 만들어라

Chapter 2. 용어정리: 모바일 앱 디자인 관점에서 풀어본 용어 정리

1. IA (Information Architecture)
2. UX (User eXperience)
3. UI (User Interface)
4. Native App
5. Mobile Web
6. Hybrid App
7. Portrait view 와 Landscape view
8. Modal view
9. Ticker
10. Action sheet
11. toasts
12. Splash screen
13. Alert
14. Tool bar
15. Badge
16. Page indicator
17. Loading indicator