스마트폰 앱 UX UI 디자인

이종원 지음

영진닷컴 2016년 09월 21일 출간 종이책 : 2013년 04월 24일 출간

작품소개

책소개

모바일 폰 앱 디자인의 UX/UI에 대한 모든 것!

『스마트폰 앱 UX UI 디자인』은 전문 앱 디자이너인 저자의 다양한 경험과 노하우를 정리하여 담고 있다. 초보자들은 쉽게 이해하고 배울 수 있도록 구성하였으며, 디자이너는 스마트폰 앱 디자인에 대해 다시 한 번 되새김질하며 스킬 업을 할 수 있도록 구성하였다. 직접 앱 아이콘과 페이지 디자인을 따라하기식 예제로 진행하여 독자들은 실제적인 결과물을 얻을 수 있다.

국내는 물론 해외 개발사들과도 인터뷰를 하여, 인기 앱의 작업 과정, 성공 노하우 등을 살펴보며 성공 요인을 분석해 볼 수 있다. 아울러 디지털 작업에 더욱 특화된 포토샵 CS6를 기준으로 튜토리얼을 진행하였으며 영문판과 한글판의 동시 사용이 가능하도록 영문과 한글 표기를 병행하였다. 아이폰 5 및 다양한 안드로이드폰에 대한 해상도 대응 방법도 저술하여 실무적인 관점에서의 디자인 능력이 향상이 되도록 집중하였다.

목차

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. 앱스디자인 페이스북

출판사 서평

니다. 다양한 부분의 컴포넌트를 직접 디자인해 보며 앱 디자인에 대한 감을 익힐 수 있습니다. 카메라 앱 아이콘과 카메라 촬영 페이지, 북 디자인, 게임 캐릭터 디자인을 따라하기 방식으로 구성하여 독자들이 직접 예제 진행을 할 수 있도록 구성하였습니다. 또한 예제 완성 파일도 부록 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 등 다수의 프로젝트 진행