모바일 UX/UI 디자인 강의 with Adobe XD

10년차 디자이너에게 1:1로 배우는

김영삼 지음

한빛미디어 2021년 09월 02일 출간 종이책 : 2021년 08월 30일 출간

작품소개

책소개

이것이 진짜 모바일 앱 디자인이다!
좋은 디자인을 만드는 모바일 앱 UX/UI 디자인 퍼펙트 가이드!

모바일 기기에 사용하는 모바일 웹앱 서비스에 생명력을 불어넣기 위해서는 UX 디자이너의 역할이 크다. 하지만 UX 디자이너가 수행해야 하는 과정을 정확하고 체계적으로 다루기는 쉽지 않다. 최근 들어 모바일 웹앱 서비스에 필요한 UX, UI, 기획, 디자인 쪽으로 감성과 철학이 담긴 트렌드가 생겨나고 있으며, 앱 개발을 단순한 프로그래밍과 운영체제의 조합이 아닌 사용자 경험과 인터랙션으로 접근하는 방식, 즉 UX를 기반으로 한 접근 방식이 대두되고 있다. 좋은 모바일 앱 디자인을 만들기 위해서는 단순히 보기 좋게 디자인해서는 안 된다. 매력적인 디자인에 사용자가 편리하게 조작할 인터랙션을 적용해야 하고, 이를 위해서는 UX 시나리오에 맞춘 업무 수행과 운영체제별 정확한 디자인 가이드라인을 지켜 디자인해야 한다.

《10년차 디자이너에게 1:1로 배우는 모바일 UX/UI 디자인 강의 with Adobe XD》는 제목 그대로 10년차 선배의 모바일 앱 디자인의 실무 노하우가 고스란히 들어 있는 모바일 UX/UI 디자인 활용서이다. PART 1에서는 국내 실정에 맞는 꼼꼼한 UX, UI 이론 설명과 실무 워크플로우를 살펴보고 각 운영체제에 맞는 디자인 가이드라인을 확인한다. PART 2에서는 실제 서비스 중인 트렌디한 프로젝트 예제 실습을 통해 모바일 UX/UI 디자인 실무를 제대로 파악할 수 있게 구성했다. 특히 iOS, Android, Web 서비스 예제를 통해 실제 모바일 앱을 디자인하고 프로토타이핑으로 인터랙션을 구현할 수 있게 구성하여 실무 경험치를 높이기에 안성맞춤이다.

목차

PART 01. 모바일 UX/UI 디자인
CHAPTER 01. 모바일 앱 UX의 시작
LESSON 01. 모바일 앱과 UX 디자인의 발전
UX 디자인의 등장
화면 크기의 변화와 UX의 발전
실무에서 말하는 모바일 UX 디자인
LESSON 02. UX 디자인을 완성하는 세 가지 요소
UX(User Experience) 이해하기
하나. UX는 발명이 아닌 발견이다
둘. UX는 편리함보다 익숙함을 따른다
셋. UX는 제품이 아닌 가치를 제공한다
LESSON 03. 직관적인 UX 디자인 요소
BX(Brand Experience)
UI(User Interface)
GUI(Graphical User Interface)
인포그래픽(Infographics)
인터랙션(Interaction)

CHAPTER 02. 모바일 UX 시나리오
LESSON 01. 모바일 UX 시나리오 의미와 과정
모바일 UX 시나리오 과정
LESSON 02. 서비스 구분하고 제작 방향 설정하기
모바일 서비스 구분하기
네이티브 앱 (Native App)
모바일 웹앱 (Mobile WebApp)
반응형 웹앱(RWD : Responsive Web Design)
적응형 웹앱(AWD : Adaptive Web Design)
하이브리드 앱(Hybrid App)
LESSON 03. 태스크 분석을 통한 주요 UI 설계하기
태스크 분석(Task Research) 과정
LESSON 04. 카테고리 분석을 통한 디자인 포지션 찾기
1단계. 유사 카테고리 서비스 찾아 분석하기
2단계. 동일 사용자층 서비스 찾아 분석하기
3단계. 디자인 포지션(Design Position) 확정하기
예시로 알아보는 디자인 포지션 과정
LESSON 05. 디자인 리서치를 통한 디자인 방향 설정하기
무드보드(Moodboard)
컬러 스와치(Color Swatch)
[디자이너의 비밀노트] 컬러 시뮬레이션 서비스 활용하기
LESSON 06. 런처 아이콘과 런치 스크린 디자인하기
런처 아이콘(Launcher Icon)
운영체제 규격에 맞게 디자인하기
사용자에게 동일한 BX 아이콘 제공하기
BX가 제대로 드러나게 디자인하기
모바일 웹 런처 아이콘
런치 스크린(Launch Screen)
시각 보정을 이용해 로고 배치하기
다양한 기능을 담은 런치 스크린
LESSON 07. 와이어 프레임 형식의 UI 구조 설계하기
UI 구조 설계(UI Structure)
페이퍼 프로토타입(Paper Prototype)과 UI 설계하기
동일한 구조의 UI 설계하기
UI 뎁스(Depth)와 GUI 표시하기
정확한 화면 이름과 파일명 표기하기
포지티브 와이어(Positive Wire)와 네거티브 와이어(Negative Wire) 표시하기

CHAPTER 03. 모바일 해상도 및 제작 방법
LESSON 01. 모바일 해상도와 72dpi 이해하기
모바일 해상도
72dpi
72dpi의 표현 해상도
LESSON 02. Android의 DP 해상도 및 제작 방법
Android DP 해상도 이해하기
Android DP에 따른 표현 방식 알아보기
Android DP에 따른 이미지 제작 방식 알아보기
LESSON 03. iOS의 Point 해상도와 제작 방법
iOS Point 해상도 이해하기
iOS Point에 따른 이미지 제작 방식 알아보기
[디자이너의 비밀노트] 모바일 운영체제 디자인 가이드
LESSON 04. 모바일 웹과 Viewport 적용하기
Viewport
Viewport를 적용한 모바일 뷰어 사용하기
Viewport에 따른 모바일 웹 이미지 제작 방식 알아보기

CHAPTER 04. 모바일 앱 GUI 디자인 및 레이아웃
LESSON 01. 모바일 앱 GUI 디자인
태스크 분석을 통한 GUI 디자인
탭(Tap) GUI 구조
플로팅(Floating) GUI 구조
갤러리(Gallery) GUI 구조
숨김 메뉴 GUI 구조
순차적 GUI 구조
LESSON 02. UI-Kit 활용하기
XD에서 UI-Kit 다운로드

출판사 서평

어떤 독자를 위한 책인가?
ㆍ모바일 앱 디자인 프로세스를 A부터 Z까지 경험해보고 싶은 예비 디자이너(디자인 전공 대학생)
ㆍ취업, 이직을 위해 포트폴리오를 준비하는 주니어 디자이너
ㆍ웹 디자인에서 모바일 디자인으로 넘어가는 현직 디자이너
ㆍ스타트업 관련자, 혹은 자사 서비스 앱 디자인/제작 담당자 등
ㆍ모바일 앱 디자인에 관심 있고 빠르게 배우고 싶은 분

이 책의 특징
ㆍUX 시나리오로 모바일 앱 디자인 실무 흐름 완전 정복!
좋은 모바일 앱 디자인은 사용자가 편리하게 사용할 수 있도록 UX 시나리오를 통한 단계별 프로세스를 거쳐야 한다. ‘서비스 기획 ? UI 설계(스토리보드) ? 프로토타입 제작 ? 운영체제별 최적화 및 공유, 협업’ 과정이 원활하게 진행되어야 개발자와도 효율적으로 협업할 수 있다. 이 책에서는 저자가 직접 경험한 국내 모바일 앱 디자인 프로세스를 단계별로 나누어 꼼꼼히 소개한다. 그런 다음 Adobe XD를 활용해 디자인과 프로토타입(인터랙션)을 적용할 수 있게 구성했다. 단계별로 이어진 실습만 따라 해도 UX/UI 실무 워크플로우를 익히고 완성도 높은 모바일 앱 디자인까지 학습할 수 있을 것이다.

ㆍ어디서도 듣지 못한 10년차 선배 디자이너의 멘토링이 가득!
저자는 10여 년 이상 모바일 앱 디자인을 하며 차곡차곡 쌓은 경험과 노하우를 이 책에 가득 담았다. UX/UI 및 실무 프로세스에 관한 꼼꼼한 설명과 현장감 넘치는 다양한 실습 예제를 구성하여 모바일 UX/UI 디자인을 경험하지 못한 예비(신입) 디자이너라도 미리 실무를 경험할 수 있게 도와준다. 다섯 개의 iOS, Android, Web 앱 실습 프로젝트와 10년차 선배 디자이너의 멘토링까지 제대로 익힌다면 초보 디자이너에게 벗어나 좋은 모바일 앱 디자인을 만들 수 있을 것이다.

ㆍ실력을 향상시켜줄 운영체제별 디자인 가이드라인 제공!
좋은 모바일 앱 디자인을 만들기 위해서는 ‘운영체제에 맞는 디자인 가이드라인’이 가장 중요하다. 모바일 앱 디자인은 자유롭게 이루어지지만 앱 규격화를 위해 정해진 규칙이나 테마, 디자인 가이드라인을 따라야 한다. 이 책에서는 iOS, Android에서 제공하는 디자인 가이드라인에 대해 꼼꼼하게 설명하고 UI-Kit를 활용해 더 효율적으로 디자인할 수 있는 방법을 제시한다. 다양한 예시 이미지와 상황에 맞는 디자인 가이드라인을 참고한다면 모바일 앱 디자인을 공부하는 데는 물론이고 디자인 작업에 필요한 시간을 줄여주는 데 큰 도움이 될 것이다.

작가정보

저자(글) 김영삼

저자 : 김영삼
대학에서 패션 디자인을 전공하였으며 국내 IT 시장 초창기 때부터 지금까지 모바일 UX/UI 디자인과 이모티콘 제작 및 디자인을 해왔다. 한국 매크로미디어 MAX(모바일 게임 부분 대상), 아이리버(모바일 플래시 게임 부분 특별상), 친환경상품진흥원(게임 부분 3위), 보건복지가족부(UCC 애니메이션 부분 장관상) 등 수상 경력이 있다. 현재는 대학교 및 다양한 교육기관에서 모바일 UX/UI 디자인과 이모티콘 관련 강의를 진행하며, 다수의 앱 개발 및 디자인을 병행하고 있다.

저서
《이모티콘으로 돈벌기》(한빛미디어, 2019)
《눈길을 사로잡는 스마트폰 앱 UX/UI 디자인》(위키북스, 2014)