바로 뽑아 쓰는 팝업 스마트폰 앱 UX & 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