스마트폰 앱 UX/UI 디자인

  

전문 앱 디자이너가 전하는 
 실무 중심의 아이폰/안드로이드폰 앱 UX/UI 디자인 핵심 바이블
 

 스마트폰 앱 UX/UI 디자인

앱스디자인 이종원 저 ｜26,000원｜영진닷컴

:: 책 소개

아이폰 · 안드로이드폰 앱 디자인의 UX/UI에 대한 모든 것!

현재 비즈니스와 개인의 삶에서 스마트폰은 24시간 떨어지지 않는 제품입니다.
이러한 스마트폰의 보급과 함께 다양해 진 것이 바로 ‘앱’입니다. 이러한 스마트폰 앱에서 점차 디자인의 중요성은 커져가고 있습니다.
하지만, 앱 디자인은 단순히 포토샵을 잘한다고 뛰어난 디자인 결과물을 만들 수 있는 것이 아닙니다.
아이폰, 안드로이드폰의 각 운영체제인 iOS, 안드로이드 OS의 특징 및 제약, 디자인 가이드에 대해서 숙지해야 하며, 앱의 사용자 경험
또한 무시할 수 없습니다.

이 책에서는 이러한 앱 디자인에 필요한 다방면의 정보를 살펴보고 이해하여 앱 디자인을 하는데 있어 단순히,
‘디자인만 잘하는 것’이 아닌 앱의 특성과 타깃, 운영체제별, 디바이스별 특징 등을 모두 담고 있는,
그야말로 REAL한 앱 디자인이 가능하도록 다양한 내용들로 구성하였습니다. 

 
:: 도서 특징 

전문 앱 디자이너인 저자의 다양한 경험과 노하우를 정리해서 이 책에 담았습니다.
초보자들은 쉽게 이해하고 배울 수 있도록 구성하였으며, 디자이너는 스마트폰 앱 디자인에 대해 다시 한 번 되새김질하며 스킬 업을
할 수 있도록 구성하였습니다. 직접 앱 아이콘과 페이지 디자인을 따라하기식 예제로 진행하여 독자들은 실제적인 결과물을 얻을 수 있으며,
이 결과물들은 부록 CD로 제공되기 때문에 파일들을 수정, 활용하여 또 다른 결과물을 만들어 낼 수도 있습니다.

또한 국내는 물론 해외 개발사들과도 연락을 직접 취하고 인터뷰를 하여, 인기 앱의 작업 과정, 성공 노하우 등을 살펴보며 성공 요인을
분석해 볼 수도 있습니다. 아울러 디지털 작업에 더욱 특화된 포토샵 CS6를 기준으로 튜토리얼을 진행하였으며 영문판과 한글판의
동시 사용이 가능하도록 영문과 한글 표기를 병행하였습니다.

아이폰 5 및 다양한 안드로이드폰에 대한 해상도 대응 방법도 저술하여 실무적인 관점에서의 디자인 스킬 향상이 되도록 포커스를 두었습니다.
마지막으로 업무 외적인 부분에서 실무의 효율을 높일 수 있는 다양한 팁과 어드바이스를 수록하였습니다. 

 

:: 도서의 구성

Part 1. 스마트폰 앱의 이해

앱 디자인에 뛰어들기에 앞서 스마트폰이란 무엇인지 간단히 알아봅니다. 우리의 스마트폰이 정확히 어떠한 운영체제를 사용하고 

어떠한 앱 마켓을 사용할 수 있는지, 전 세계적으로 어떠한 운영체제들이 강세를 보이고 있는지 간단히 스마트폰의 생태계에 대해 살펴봅니다.

Part 2. 앱 디자인과 UX의 이해

앱 디자인이 무엇이며 사용자 경험 UX와 앱의 니즈 & 솔루션이 무엇인지 알아봅니다. 스마트폰 앱은 컴퓨터 프로그램과는 굉장히 

다른 환경과 특징, 사용자들 또한 다른 행동 양상을 보이고 있기에 Part 2에서는 이러한 부분들을 이해하고 앱을 개발, 디자인할 수 있도록 

스마트폰 사용환경, 하드웨어적 특징, 운영체제의 차이점 등을 살펴봅니다.

Part 3. 앱 개발의 이해

앱 개발을 위해 필요한, 조직 구성 및 제작 프로세스를 이해하고 앱을 제작하는 실질적인 프로그램에 대해 알아봅니다. 조직 구성에 필요한 

역할 구분 및 조직 구성 방법, 앱 개발 프로세스, 제작 단계, 앱의 등록부터 폐기까지 단계에 따른 저자의 조언, 제작 프로그램 등으로 

구성하였습니다.

Part 4. 운영체제별 디바이스와 디자인 스타일

iOS와 안드로이드, 두 운영체제 디바이스별 특징과 디자인 특징에 대해 알아봅니다. 디바이스가 달라지면서 디자인해야 하는 요소들도 각기

라지기 때문에 운영체제별 지원 터치 제스처, 디자인의 컴포넌트 구성 등에 대해 살펴봅니다.

Part 5. 카테고리별 앱 리뷰

수십만 개의 앱들이 있는 레드 오션인 앱 마켓에서 입지를 단단히 구축하고 있는 다양한 앱들에 대해 알아봅니다. 

다양한 카테고리의 앱들을 리뷰하며 앱의 실제 사례와 개발사의 생생한 경험담이 녹아있는 인터뷰를 구성하였습니다. 

개발사들과 직접 진행한 인터뷰 내용을 통해 성공하는 앱의 디자인 노하우를 엿볼 수 있습니다.

Part 6. 앱 디자인 실전 프로세스

실제 실무에서 진행되는 프로세스와 그에 필요한 내용들을 정리해봅니다. 프로세스를 총 6단계로 구성하여 기획, 디자인 구체화, 컨버팅 등 

실제 전문 앱 디자이너들이 진행하는 방법을 해당 Part에 녹여냈습니다. 또한, 이 책의 부록으로 제공되는 스케치 노트, 커뮤니케이션 문서, 

와이어프레임 키트, 탭 바 아이콘 세트, 아이폰 템플릿 등의 사용 방법과 활용 방법에 대해서도 상세히 다루고 있어 부록 CD의 템플릿들을 

실제 업무에서 100% 활용할 수 있도록 도움을 줍니다.

Part 7. 앱 디자인 튜토리얼

여러 가지 컴포넌트의 디자인을 통해 다양한 디자인 스타일을 배워봅니다. 다양한 부분의 컴포넌트를 직접 디자인해 보며 앱 디자인에 대한 

감을 익힐 수 있습니다. 카메라 앱 아이콘과 카메라 촬영 페이지, 북 디자인, 게임 캐릭터 디자인을 따라하기 방식으로 구성하여 독자들이 

직접 예제 진행을 할 수 있도록 구성하였습니다. 또한 예제 완성 파일도 부록 CD로 제공하고 있어 완성 파일을 수정하여 또 다른 콘텐츠로 

변경하여 사용할 수도 있습니다.

Part 8. Tips and Advices

앱 디자인에 직·간접적으로 도움을 줄 수 있는 다양한 노하우와 앱, 장비 등에 대해 알아봅니다. 작업 화면을 실시간으로 스마트폰에서 

확인할 수 있는 프리뷰 앱, 프로토타이핑 앱과 서비스, 모니터 색 교정에 사용되는 장비 등 앱 디자인 스킬 업에 도움이 될 팁과 어드바이스로 

구성하였습니다. 

:: 저자 소개

이 종 원

모바일 앱 UX/UI 디자인 스튜디오

‘앱스디자인 Apps Design’ 대표

•모바일 웹 UX/UI 디자인-컨설팅-강의-저술

•글로벌 모바일 앱 디지털 프로토타이핑 툴 공인 인증

-Fluid UI Certified Expertise

-App Cooker Certified Expert

•데이터컬러 컬러매니지먼트 Certified Expert

•’스마트폰 앱 UX/UI 디자인 워크샵’, ‘웹 스페셜리스트’, ‘앱 디자인 원데이 속성 세미나’, ‘앱 디자인 실무 프로세스 완전 정복’ 등 아카데미 정글, 온오프믹스 세미나 강의

•고양지식정보산업진흥원 소프트웨어융합센터 지원 인증 기업 선정

•한국 대표 일러스트레이터 100인 선정[Korean Illustration Now]

•스페이스 노아 / 프로젝트 노아 파트너사 선정

• Save the Children 국내 빈곤아동 구호 캠페인

‘Change the Future’ BI, 앱 디자인 재능 기부

•카카오톡, LG 테마박스, GO런처EX 콘텐츠 프로바이더

•삼성, LG, SK 등 다수의 프로젝트 진행

•웹 사이트 : appsdesign.co.kr

•이메일 : appsdesign@naver.com

•앱스디자인 페이스북 : www.facebook.com/appsdesignstudio

:: 목차

 

PART 01. 스마트폰 앱의 이해

Chapter 01. 스마트폰이란?

01. 스마트폰의 구성요소

02. 피처폰 > PDA폰 > 스마트폰

Chapter 02. 스마트폰의 운영체제

01. 스마트폰 운영체제의 현재 진행 방향

02. 전 세계 스마트폰 운영체제 점유율

03. 나라별 스마트폰 운영체제 점유율

Chapter 03. 애플 iOS vs 구글 안드로이드

01. 애플 iOS : 스티브 잡스와 애플

02. 안드로이드 Android OS : 구글과 오픈 핸드셋 얼라이언스

Chapter 04. 앱 = 어플 = 애플리케이션

01. 스마트폰 앱과 그 특징

Chapter 05. 앱의 등록과 판매, 앱 마켓

01. 애플 iOS : 애플 앱 스토어

02. 구글 안드로이드 : 다양한 앱 마켓

PART 02. 앱 디자인과 UX 이해

Chapter 01. 앱 디자인과 UX

01. 앱 디자인의 정의

02. 사용자 경험 UX의 구성 요소 및 정의

Chapter 02. 스마트폰 UX의 이해

01. 스마트폰의 하드웨어적 특징

02. 운영체제의 이해 : iOS와 안드로이드

03. 스마트폰 앱의 특징

04. 사용자의 특징

05. 사람의 행동 방식 이해

Chapter 03. 니즈와 솔루션의 원칙

01. 운영체제와 앱의 관계

02. 니즈와 솔루션의 원칙

PART 03. 앱 개발의 이해

Chapter 01. 앱 개발의 역할 구분과 조직의 구성

01. 역할 구분하기 : 기획자 / 마케터, 디자이너, 개발자

02. 조직 구성하기

Chapter 02. 앱 개발 프로세스

01. 준비 및 기획 단계

02. 본격적인 제작 단계

03. 앱 마켓 : 등록 > 유지 / 보수 / 개선 > 폐기

Chapter 03. 제작 프로그램

01. 운영체제별 앱 개발 프로그램·

02. 디자인 프로그램

PART 04. 운영체제별 디바이스와 디자인 스타일

Chapter 01. 애플 iOS - 아이폰 시리즈 76

01. iOS와 아이폰

02. 아이폰 사양 및 주요 기능 정리

03. 디자인 가이드 참조

04. 터치 제스처

05. 아이폰 UI 구성의 이해

06. 아이폰 앱 아이콘 디자인

07. 런치 이미지

08. 아이폰 5, 아이폰 4S/4 해상도의 이해 및 변환

09. 아이폰 탑재 폰트

Chapter 02. 구글 - 안드로이드

01. 안드로이드 운영체제 스마트폰의 특징

02. 안드로이드 레퍼런스폰

03. 갤럭시 넥서스 사양 및 주요 기능 정리

04. 안드로이드 디자인 가이드

05. 크리에이티브 비전과 디자인 원칙

06. 터치 제스처

07. 오픈 소스 제공

08. 안드로이드 UI 구성

09. 런처 아이콘(Launcher Icon)

10. 멀티 디바이스와 멀티 해상도에 대한 대응

Part 05. 카테고리별 앱 리뷰

Special Page 들어가는 말

Chapter 01. 게임

01. 버즐 / Birzzle by Enfeel Inc.

02. 메가 점프 / Mega Jump by Get Set Games

Chapter 02. 소셜 네트워크 서비스

01. 스내피 / Snapeee by Mind Palette Co., Ltd.

Chapter 03. 유틸리티

01. 원더리스트 / Wunderlist by 6WunderKinder

02. 그리드 렌즈 / Grid Lens by Bucket Labs

Part 06. 앱 디자인 실전 프로세스

Chapter 01. 1 단계 - 기획

01. 사전 준비 및 아이디어 클라우드 노트 활용

02. 통합 커뮤니케이션 문서 활용

Chapter 02. 2단계 - 디자인 구체화

01. 레이아웃 스케치 : 앱 디자인 노트의 활용

02. 와이어 프레임

Chapter 03. 3단계 - 앱 프로토타이핑

01. 앱 프로토타이핑

02. 디지털 앱 프로토타이핑

Chapter 04. 4단계 - 앱 디자인

01. 런치 이미지 = 스플래시 이미지 = 로딩 이미지

02. 레이아웃 디자인

03. 아이콘 디자인

04. 컴포넌트 디자인

05. 앱 아이콘 디자인

Chapter 05. 5단계 - 슬라이스 가이드 작성, 이미지 컷팅 242

01. 프로세스 01 : 페이지별 이미지 붙여넣기

02. 프로세스 02 : 네이밍 룰에 따라 파일명 입력하기

03. 프로세스 03 : PSD 파일에 슬라이스 작업하기

04. 프로세스 04 : 추가 정보 입력하기

05. 프로세스 05 : 포토샵의 ‘웹용으로 저장’

Chapter 06. 6단계 - 컨버팅 & 멀티 디바이스 해상도 대응

01. iOS 아이폰 시리즈 해상도별 컨버팅

02. 안드로이드 해상도별 컨버팅

03. iOS 아이폰 & 안드로이드 / 멀티 OS 개발 시 대응 방법

Part 07. 앱 디자인 튜토리얼

Chapter 01. 아이콘 디자인 - 카메라 앱

01. 렌즈 바디

02. 렌즈 부분

03. 카메라 바디

04. 마무리 작업

Chapter 02. 페이지 디자인 - 카메라 촬영

01. 앱 레이아웃 스케치

02. 컨트롤 바

03. REC 라이트

04. 카메라 촬영 버튼

05. 뷰어 버튼

06. 카메라 회전 버튼 / 플래시 버튼

07. 펜 도구, 직접 선택 도구, 패스 선택 도구

08. 카메라 아이콘

09. 비디오 아이콘

10. 카메라 회전 아이콘 / 플래시 아이콘

11. 컴포넌트 디자인 : 카메라 줌 조절 바

12. 컴포넌트 디자인 : 설정 아이콘

13. 마무리 작업

Chapter 03. 리딩 북 앱 - 북 디자인

01. 작업 문서 만들기

02. 책 펼침면 디자인하기

03. 레이어 스타일 적용하기

04. 디테일한 묘사하기

05. 레이어 스타일 적용하기

06. 책 등 상단부 표현하기

07. 책 등 하단부 표현하기

08. 펼침면의 좌측 페이지 디자인하기

09. 펼침면의 우측 페이지 디자인하기

10. 마무리 작업

11. 아이폰 5 해상도 변환 작업

Chapter 04. 게임 캐릭터 디자인

01. 캐릭터 스케치

02. 작업 준비

03. 원화 스케치에 맞추어 패스 선 그리기

04. ‘세부 영역’ 패스 선 그리기

05. 얼굴 패스 선 그리기

06. 배와 꼬리 디테일 살리기

07. 캐릭터 채색 및 선 굵기 적용

08. 캐릭터의 응용 작업

Part 08. Tips and Advices

Chapter 01. 작업 화면 스마트폰에서 실시간 프리뷰하기

01. 안드로이드 : ‘디자인 프리뷰’

02. 아이폰 : ‘스칼라 뷰’

03. ‘드롭박스(Dropbox)’로 디자인 프리뷰하기

Chapter 02. 프로그래밍 없이 만드는 앱 프로토타이핑 디자인

01. ‘앱 쿠커’로 만드는 iOS 앱 프로토타입

02. ‘플루이드 UI’로 만드는 앱 프로토타입

03. ‘앱 쿠커’와 ‘플루이드 UI’ 비교

Chapter 03. 모니터의 색 교정, 컬러 캘리브레이션

01. 모니터 캘리브레이션의 중요성

02. 데이터컬러 ‘스파이더 4’를 사용한 모니터 캘리브레이션

03. 아이폰과 아이패드 컬러 캘리브레이션

Chapter 04. 작업의 효율을 높여주는 타블렛

01. 펜과 터치로 디자인하는 와콤 인튜어스 5, 뱀부 펜 & 터치

02. 타블렛의 다양한 기능

Chapter 05. 관련 정보 습득으로 스킬 업

01. 아카데미 정글

02. 월간 컴퓨터 아트 CA

03. 블로터닷넷

04. 스페이스 노아

05. 앱스디자인 페이스북