스마트폰 앱 UX UI 디자인(바로 뽑아 쓰는)(CD1장포함)(팝업 시리즈 1)

이 책은 포토샵을 사용해 모바일 앱 디자인을 하기 위한 이론과 방법들을 고퀄리티의 예제를 중심으로 소개하고 있습니다. 본문은 앱 디자인을 잘 모르거나 처음 접하는 독자들부터 모바일 앱 디자인의 기초를 다지고 한 단계 발전하길 원하는 주니어 디자이너까지 누구나 쉽게 따라할 수 있도록 크게 이론, 실습 예제, 팁과 용어 정리로 구성되어 있습니다. 먼저 이론 파트에서 앱 디자인을 시작하기 전 기본적으로 알아둬야 할 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

김재식 저자 김재식은 서울대학교에서 시각디자인 석사 수료를 하고, Wit studio에서 UI 디자인툴 개발에 참여했습니다. 현재는 GUI 디자인 프리랜서 겸 Viva Republica에서 CDO로 근무하면서 모바일 앱 서비스를 디자인하고 있습니다.