메뉴 바로가기 검색 및 카테고리 바로가기

한빛미디어

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

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

한빛미디어

집필서

판매중

  • 저자 : 김영삼
  • 출간 : 2021-08-30
  • 페이지 : 404 쪽
  • ISBN : 9791162244685
  • 물류코드 :10468
초급 초중급 중급 중고급 고급
5점 (6명)
좋아요 : 0

이것이 진짜 모바일 앱 디자인이다!

좋은 디자인을 만드는 모바일 앱 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 서비스 예제를 통해 실제 모바일 앱을 디자인하고 프로토타이핑으로 인터랙션을 구현할 수 있게 구성하여 실무 경험치를 높이기에 안성맞춤이다.

 

 

어떤 독자를 위한 책인가?

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

 

이 책의 특징

 

UX 시나리오로 모바일 앱 디자인 실무 흐름 완전 정복!

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

 

어디서도 듣지 못한 10년차 선배 디자이너의 멘토링이 가득!

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

 

실력을 향상시켜줄 운영체제별 디자인 가이드라인 제공!

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

 

 

상세페이지_모바일 UXUI 디자인 강의 with Adobe XD_700px.jpg

저자

김영삼

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

 

저서

《이모티콘으로 돈벌기》(한빛미디어, 2019)

《눈길을 사로잡는 스마트폰 앱 UX/UI 디자인》(위키북스, 2014)

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 다운로드하기  

앱 아이콘 다운로드하기  

폰트 다운로드하기  

LESSON 03. Android 앱 주요 가이드라인    

Android 앱 가이드라인  

툴 바의 버튼과 가장자리의 마진  

콘텐츠와 콘텐츠 사이 마진   

전체 화면 마진  

상태 바와 아이콘   

오른쪽 끝 마진   

버튼의 터치 영역  

툴 바, 플로팅 버튼, 오버레이 마진 

리스트 목록 

LESSON 04. iOS 앱 주요 가이드라인 

iOS 앱 디자인 전 체크 사항 

iOS 앱 주요 가이드라인 

상태 바 

내비게이션 바

큰 타이틀 바 

마진 

탭 바  

홈 표시

내부 디자인 아이콘의 터치 영역 

LESSON 05. 나인패치와 스트레칭 이미지 

나인패치(Draw9patch) 

Android에 맞는 나인패치 제작 

iOS 스트레칭 이미지 제작 

 

CHAPTER 05. 모바일 앱 디자인에 필요한 XD 핵심 기능 익히기 

LESSON 01. 아트보드 편집하고 저장하기 

아트보드 편집하기   

아트보드 크기 변경하기 

데스크톱 화면 미리 보기   

문서 설정하기  

문서 저장하고 열기    

외부 디자인 파일 열기(PSD, AI, Sketch)  

[디자이너의 비밀노트] XD 주요 단축키  

LESSON 02. 기본 도구 활용하기   

기본 도형 만들기

속성 관리자에서 도형 변형하기 

펜과 선을 이용해 드로잉하기 

텍스트 입력하고 편집하기 

텍스트 찾기 

오브젝트 정렬과 결합 

LESSON 03. 외부 파일 불러오고 편집하기  

일러스트레이터(AI) 파일 불러오기 

비트맵 파일 불러오기 

LESSON 04. XD 핵심 기능 익히기  

플러그인 활용하기 

UI-Kit 활용하기 

문서 에셋 활용하기 

구성 요소 등록하고 활용하기 

문자 스타일 등록하고 활용하기

색상 스타일 등록하고 편집하기 

구성 요소 내부 인스턴스(Instance) 활용하기 

반복 그리드

반응형 크기 조정 

아트보드 안내선과 그리드 시스템 

[디자이너의 비밀노트] 앱 디자인 색상 사용 시 주의사항


 

PART 02. 모바일 UX/UI 디자인 프로젝트

 

PROJECT 01. 젬픽 모바일 앱 로그인, 회원 가입 페이지 디자인_iOS 

STEP 01. 로그인 및 회원 가입 디자인 준비하기 

새 아트보드 만들어 기본 레이아웃 안내선 적용하기   

로고, 아이콘, 색상을 문서 에셋에 등록하기   

STEP 02. 로그인 페이지 디자인하기   

login_01 페이지에 로고, 이메일, 비밀번호, 로그인 버튼 제작하기 

SNS 로그인 버튼과 회원 가입 버튼 만들기 

login_02 페이지 디자인하기 

아이콘을 문서 에셋에 등록하기

STEP 03. 회원 가입 페이지 디자인하기 

signup_01 페이지 디자인하기 

signup_02 페이지 디자인하기

STEP 04. 자연스러운 효과의 프로토타입 제작하기 

런치 스크린에서 로그인과 회원 가입 연결하기 

Skip, SNS 로그인, CREATE 버튼과 메인 화면 연결하기 

 

 

PROJECT 02. 스크롤 기능을 이용한 메인 페이지 디자인_Android

 

STEP 01. 메인 페이지 UI 디자인 준비하기  

새 아트보드 만들어 기본 레이아웃 안내선 적용하기  

아이콘, 색상을 문서 에셋에 등록하기  

STEP 02. 상단 툴 바와 하단 메뉴 탭 바 디자인하기  

main_01 페이지의 상단 툴 바 디자인하기  

내부 인스턴스를 활용해 하단 메뉴 탭 바 디자인하기  

메인 아이콘의 구성 요소를 활용해 내부 인스턴스 추가하기  

STEP 03. 인터랙션 기능으로 숨김 메뉴 만들기  

숨김 메뉴 구성 요소로 내부 인스턴스 추가하기  

인터랙션 숨김 메뉴의 프로토타입 만들기  

STEP 04. 뉴스 피드형 콘텐츠 디자인하기   

섬네일을 이용한 사용자 리스트 제작하기   

사진 크기 조절하고 뉴스 피드 콘텐츠 디자인하기   

이미지 컨트롤 아이콘 디자인하기  

스크롤 기능의 메인 페이지 디자인하기 

STEP 05. 오버레이 팝업 페이지의 프로토타입 제작하기    

팝업 페이지 제작하기 

오버레이 효과의 프로토타입 제작하기 

 

 

PROJECT 03. 슬라이드 효과의 메인 페이지 디자인_iOS

 

STEP 01. 메인 페이지 디자인하기

새 아트보드 만들어 기본 레이아웃 안내선 적용하기

아이콘, 색상을 문서 에셋에 등록하기 

STEP 02. 상단 툴 바와 하단 메뉴 탭 바 디자인하기

main_01 페이지의 상단 내비게이션 영역 디자인하기

내부 인스턴스를 활용해 하단 메뉴 탭 바 디자인하기 

메인 버튼 구성 요소로 내부 인스턴스 추가하기 

STEP 03. 슬라이드 페이지의 콘텐츠 구성하기 

슬라이드 페이지에 콘텐츠 배치하기 

카테고리 버튼 아이콘 배치하기

카테고리 버튼 구성 요소로 내부 인스턴스 추가하기 

STEP 04. 슬라이드 효과의 프로토타입 제작하기 

아트보드 복사하여 각 화면 구성하기 

슬라이드(스냅) 효과의 인터랙션 적용하기 

STEP 05. 자동 스크롤 효과의 프로토타입 제작하기 

sub_01 상세 페이지 제작하기 

자동 스크롤 효과의 프로토타입 제작하기

 

 

PROJECT 04. 시작 애니메이션 효과의 메인 페이지 디자인_Android 

 

STEP 01. 시작 애니메이션 디자인 준비하기  

새 아트보드 만들어 기본 레이아웃 안내선 적용하기  

아이콘, 색상을 문서 에셋에 등록하기 

STEP 02. 상단 툴 바와 메인 메뉴 디자인하기  

main_start 페이지의 상단 툴 바 디자인하기  

내부 인스턴스를 활용한 메인 메뉴 디자인하기  

STEP 03. 내부 아이콘 및 슬라이드 버튼 디자인하기 

내부 아이콘 만들기 

원형 그래프 만들기  

데이터 수치 입력하기 

정보 표시 입력하기 

슬라이드 버튼 디자인하기   

STEP 04. 시작 애니메이션과 슬라이드 효과의 프로토타입 제작하기  

main_01 아트보드 페이지 디자인하기 

메인 아트보드에 시작 애니메이션 연결하기  

슬라이드 버튼 인터랙션 제작하기    

STEP 05. 숨김 메뉴 디자인하고 프로토타입 제작하기   

메뉴 배경과 섬네일 디자인하기    

메뉴 아이콘과 리스트 디자인하기  

메뉴 슬라이드 효과의 프로토타입 제작하기  

[디자이너의 비밀노트] 앱 UI 디자인의 메뉴(Menu)

 

 

PROJECT 05. 그리드 시스템을 이용한 반응형 UI 디자인_web

 

STEP 01. 메인 페이지 UI 디자인 준비하기 

새 아트보드 만들기   

그리드 시스템 적용하기  

STEP 02. 반응형 UI 툴 바와 메뉴 디자인하기  

숨김 메뉴 구성 요소로 내부 인스턴스 추가하기(mobile_UI)  

주요 메뉴에 마우스 오버 상태 추가하기  

구성 요소 인터랙션을 이용해 모바일 메뉴 디자인하기  

인터랙션 숨김 메뉴의 프로토타입 만들기  

메뉴 구성 요소로 펼침 메뉴 만들기(tablet_UI)  

메뉴 구성 요소로 메인 툴 바 만들기(web_UI)   

STEP 03. 반응형 UI 내부 콘텐츠 디자인하기  

내부 콘텐츠 디자인하기(mobile_UI)   

내부 콘텐츠 디자인하기(tablet_UI)    

내부 콘텐츠 디자인하기(web_UI)  

 

 

PROJECT 06. 공유 기능을 이용한 개발자 협업 

 

STEP 01. XD 공유 기능 활용하기 

공유 링크 만들기  

공유 링크 업데이트하고 관리하기  

공유 페이지 관리하기   

댓글을 이용해 의견 나누기   

STEP 02. 프로젝트 공유하고 실무에 활용하기   

운영체제별 프로젝트 공유하기    

에셋, 색상, 문자 스타일 확인하기   

디자인 가이드, 인터랙션 확인하기  

웹사이트 제작에 필요한 변수 CSS 다운로드  

[디자이너의 비밀노트] 제플린을 활용해 프로젝트 공유하기  

 

INDEX

  • 디자인 20년차인 디자이너인 나는 요즘 핫하다는 UX/UI 디자인에 대해 유자도 모르는 초보이다.

    그래서 요즘 트렌디한 디자인 스킬인 UX/UI 디자인에 대해 나도 좀 공부해야겠다는 마음으로 책을 펼친다.

    UX/UI 디자인에 대한 기초적인 이론부터 어도비 XD를 활용하는 실제까지 한권에 다 다룬 책이다.

    그런데 이 책을 보고 나서는 나도 도전해볼 수 있겠다는 용기가 생겼다.

    눈에 익은 이모티콘을 많이 제작한 김영삼 작가님을 통해 실제적이고 정말 궁금한 것들에 대한 답이 이 책에 있었다.

     

    이 책은 크게 두 파트로 나뉜다. 

    모바일 UX/UI 디자인에 대해 전반적인 이론과 기획에 대한 부분, 그리고 어도비 XD의 핵심기능까지 파트1에서 다루고 있고,

    두번째 파트2에서는 ios나 안드로이드, 웹에서 만들어지는 실제적인 예시로 앞에서 배운 기능들을 적용해보는 내용으로 구성되어있다.

     

    모바일 UX와 UI에 대해 전혀 기초 지식이 없는 나에게는

    첫번째 파트에서 아주 기초적인 용어부터 UX를 구상하는 기획과 과정들이 구체적으로 나와있어서 너무 좋았다.

    웹디자인과 인쇄물 디자인을 하는 나에게는 너무 생소한 분야라서

    이렇게 구체적으로 알려주는 상세설명부분이 있어서 기본을 단단히하며 공부할 수 있어 좋았다.

     

    중간중간에 나오는 10년차 선배의 멘토링에서는 좀더 구체적인 설명이 필요한 부분이나

    공부하다가 궁금할만한 실무적인 내용들에 대해 선배 저자의 팁이 나와있다.

    개인적으로 이 부분은 소소하지만 너무 큰 꿀팁같은 내용들이어서 감사하게 읽었다.

     

    챕터별로 마지막 부분에 "디자이너의 비밀 노트"로 챕터와 관련된 좀더 심화된 내용들이

    정말 비밀노트처럼 핑크 페이지로 나와있다.

    이 부분만해도 정말 디자인적으로 중요한 노하우들을 만날 수 있는 페이지이다.

     

    한빛미디어 컴퓨터 관련 도서에는 정말 공통적으로 나오는 디자인요소인데

    이렇게 빨간동그라미로 표시되어있고 그 아래 구체적으로 그 번호와 매칭된 설명들이 있어서

    내용이나 과정을 놓치지 않고 잘 따라갈 수 있게 되어있다.

    사랑해요 빨간숫자 동그라미~~~~ ^^

     

    디자이너로 어도비 서비스 전체를 구독하고 있는 나는 당연히 어도비 XD도 설치할 수 있으나..

    지금까지 사용할 줄 몰라 설치하지 않고 사용하지 않았던 툴인데

    이제 이 책을 통해 공부했으니 나도 XD를 사용할 수 있겠다~~!!!

     

    두번째 파트에서는 이제 본격적인 프로젝트가 시작된다.

    앞에서 배운 이론과 과정들을 이제 실전으로 사용할 수 있도록 프로젝트성으로 따라하며 공부할 수 있다.

    ios 기반이 되는 프로젝트는 젬픽 모바일 앱 로그인,회원가입 페이지와 슬라이드 효과의 메인 페이지 디자인 

    두가지를 과정과정 따라하며 실습해 볼 수 있다.

     

    단계별로 그리고 그 단계 안에서도 과정별로 아주 구체적으로 설명이 되어있어서

    순서대로 따라하다보면 어느새 프로젝트 하나를 완성하게 된다.

    특히 노란박스에 친절하게 설명이 되어있는 각 옵션에 넣을 숫자들이 정리 되어있어서

    실습을 하며 따라하기에 너무 편하고 좋았다.

     

    프로젝트에서 안드로이드 기반으로 실습할 수 있는 것은

    스크롤 기능을 이용한 메인 페이지 디자인과 시작 애니메이션 효과의 메인 페이지 디자인 

    두가지를 따라하며 완성해볼 수 있다.

     

    또한 앱 디자인 말고도 홈페이지를 디자인하는 웹디자인에도 활용할 수 있는 프로젝트도 있다.

    전 웹디자인을 다 포토샵으로 디자인했었던.. 라떼 디자이너라서...

    이렇게 XD로 웹디자인을 할 수 있다는게 얼마나 편하고 좋은지...

    반응형 홈페이지에 대한 디자인을 할 수 있어 더욱 좋은것 같다... 그동안 안쓴게 후회될 정도...

     

    마지막 파트에는 개발자와 협업하는데 있어 꼭 필요한 공유 기능에 대해 나와있다.

    항상 이미지 파일로 주고 받고 설명을 다시 들어야하는 시간이 필요했는데

    이렇게 공유하기 편하게 되어있어서 서로 소통하는데 시간이 훨씬 단축될것 같다.

     

    항상 책 뒷부분에 단축키와 같은 유용한 굿즈(?)를 넣어주던 한빛미디어 도서인데

    이번에는 단축키가 아닌 책 주제와 딱 맞게 ios와 안드로이드 화면이 떡하니 있어

    작업할때 두가지 화면을 고려할 수 있도록 세워두는 굿즈가 있었다.

    삼각형으로 접어서 세워둘 수 있는데 난 책상이 지져분해서 안만들었다. ㅋㅋㅋ

  • 기초부터 차근히 설명되어있고 용어설명도 잘되어있어서 초보도 하기 좋은 책입니다 모바일 앱을 만드는 것이라서 학생들과 같이 하기도 좋은 듯 합니다 책이 두껍지만 천천히 따라하다보면 어느새 완성됩니다~

  • 프론트 개발하면서 모바일 화면, PC 화면, 다양한 뷰포트로 작업할 일이 많다.

    그때마다 해상도에 관해 단순히 모바일은 2배수, 3배수로 작업하면 되고 viewport는 device-width를 습관적으로 사용했다.

    정확하게 어떤식으로 작동되는지 감으로만 알고 있고 이론은 정확히 파악을 못했었다.

    이 책을 통해 이런 부분들을 많이 알 수 있었다.

     

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

     

    책 소개

    우선 프론트개발자인 내가 이 책의 표지만 봤을 때는 끌리지는 않았다.

    하지만 목차를 보고 흥미를 느꼈고 Adobe XD 실습하기 전에 모바일 UX/UI 에 대한 자세한 설명이 도움이 되었다.

    UX를 단순히 사용자 편의성이라고 생각했는데 책에서 사용자 편의성보다는 경험에서 나온 익숙함을 분석하여 그에 맞는 서비스를 기획하고 디자인 하는것이라고 설명을 해준다.

     

    모바일 앱 UX를 설명하면서 모바일 IOS, Android에 대한 기기에 대한 자세한 설명, 태스크 분석을 통한 UI 설계, 모바일 UX 시나리오 등 디자이너뿐 아니라 기획, 개발자들이 알고 있으면 도움이 되는 내용들도 많다.

    책 목차

    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 다운로드하기
    앱 아이콘 다운로드하기
    폰트 다운로드하기
    LESSON 03. Android 앱 주요 가이드라인
    Android 앱 가이드라인
    툴 바의 버튼과 가장자리의 마진
    콘텐츠와 콘텐츠 사이 마진
    전체 화면 마진
    상태 바와 아이콘
    오른쪽 끝 마진
    버튼의 터치 영역
    툴 바, 플로팅 버튼, 오버레이 마진
    리스트 목록
    LESSON 04. iOS 앱 주요 가이드라인
    iOS 앱 디자인 전 체크 사항
    iOS 앱 주요 가이드라인
    상태 바
    내비게이션 바
    큰 타이틀 바
    마진
    탭 바
    홈 표시
    내부 디자인 아이콘의 터치 영역
    LESSON 05. 나인패치와 스트레칭 이미지
    나인패치(Draw9patch)
    Android에 맞는 나인패치 제작
    iOS 스트레칭 이미지 제작

    CHAPTER 05. 모바일 앱 디자인에 필요한 XD 핵심 기능 익히기
    LESSON 01. 아트보드 편집하고 저장하기
    아트보드 편집하기
    아트보드 크기 변경하기
    데스크톱 화면 미리 보기
    문서 설정하기
    문서 저장하고 열기
    외부 디자인 파일 열기(PSD, AI, Sketch)
    [디자이너의 비밀노트] XD 주요 단축키
    LESSON 02. 기본 도구 활용하기
    기본 도형 만들기
    속성 관리자에서 도형 변형하기
    펜과 선을 이용해 드로잉하기
    텍스트 입력하고 편집하기
    텍스트 찾기
    오브젝트 정렬과 결합
    LESSON 03. 외부 파일 불러오고 편집하기
    일러스트레이터(AI) 파일 불러오기
    비트맵 파일 불러오기
    LESSON 04. XD 핵심 기능 익히기
    플러그인 활용하기
    UI-Kit 활용하기
    문서 에셋 활용하기
    구성 요소 등록하고 활용하기
    문자 스타일 등록하고 활용하기
    색상 스타일 등록하고 편집하기
    구성 요소 내부 인스턴스(Instance) 활용하기
    반복 그리드
    반응형 크기 조정
    아트보드 안내선과 그리드 시스템
    [디자이너의 비밀노트] 앱 디자인 색상 사용 시 주의사항

    PART 02. 모바일 UX/UI 디자인 프로젝트
    PROJECT 01. 젬픽 모바일 앱 로그인, 회원 가입 페이지 디자인_iOS
    STEP 01. 로그인 및 회원 가입 디자인 준비하기
    새 아트보드 만들어 기본 레이아웃 안내선 적용하기
    로고, 아이콘, 색상을 문서 에셋에 등록하기
    STEP 02. 로그인 페이지 디자인하기
    login_01 페이지에 로고, 이메일, 비밀번호, 로그인 버튼 제작하기
    SNS 로그인 버튼과 회원 가입 버튼 만들기
    login_02 페이지 디자인하기
    아이콘을 문서 에셋에 등록하기
    STEP 03. 회원 가입 페이지 디자인하기
    signup_01 페이지 디자인하기
    signup_02 페이지 디자인하기
    STEP 04. 자연스러운 효과의 프로토타입 제작하기
    런치 스크린에서 로그인과 회원 가입 연결하기
    Skip, SNS 로그인, CREATE 버튼과 메인 화면 연결하기

    PROJECT 02. 스크롤 기능을 이용한 메인 페이지 디자인_Android
    STEP 01. 메인 페이지 UI 디자인 준비하기
    새 아트보드 만들어 기본 레이아웃 안내선 적용하기
    아이콘, 색상을 문서 에셋에 등록하기
    STEP 02. 상단 툴 바와 하단 메뉴 탭 바 디자인하기
    main_01 페이지의 상단 툴 바 디자인하기
    내부 인스턴스를 활용해 하단 메뉴 탭 바 디자인하기
    메인 아이콘의 구성 요소를 활용해 내부 인스턴스 추가하기
    STEP 03. 인터랙션 기능으로 숨김 메뉴 만들기
    숨김 메뉴 구성 요소로 내부 인스턴스 추가하기
    인터랙션 숨김 메뉴의 프로토타입 만들기
    STEP 04. 뉴스 피드형 콘텐츠 디자인하기
    섬네일을 이용한 사용자 리스트 제작하기
    사진 크기 조절하고 뉴스 피드 콘텐츠 디자인하기
    이미지 컨트롤 아이콘 디자인하기
    스크롤 기능의 메인 페이지 디자인하기
    STEP 05. 오버레이 팝업 페이지의 프로토타입 제작하기
    팝업 페이지 제작하기
    오버레이 효과의 프로토타입 제작하기

    PROJECT 03. 슬라이드 효과의 메인 페이지 디자인_iOS
    STEP 01. 메인 페이지 디자인하기
    새 아트보드 만들어 기본 레이아웃 안내선 적용하기
    아이콘, 색상을 문서 에셋에 등록하기
    STEP 02. 상단 툴 바와 하단 메뉴 탭 바 디자인하기
    main_01 페이지의 상단 내비게이션 영역 디자인하기
    내부 인스턴스를 활용해 하단 메뉴 탭 바 디자인하기
    메인 버튼 구성 요소로 내부 인스턴스 추가하기
    STEP 03. 슬라이드 페이지의 콘텐츠 구성하기
    슬라이드 페이지에 콘텐츠 배치하기
    카테고리 버튼 아이콘 배치하기
    카테고리 버튼 구성 요소로 내부 인스턴스 추가하기
    STEP 04. 슬라이드 효과의 프로토타입 제작하기
    아트보드 복사하여 각 화면 구성하기
    슬라이드(스냅) 효과의 인터랙션 적용하기
    STEP 05. 자동 스크롤 효과의 프로토타입 제작하기
    sub_01 상세 페이지 제작하기
    자동 스크롤 효과의 프로토타입 제작하기

    PROJECT 04. 시작 애니메이션 효과의 메인 페이지 디자인_Android
    STEP 01. 시작 애니메이션 디자인 준비하기
    새 아트보드 만들어 기본 레이아웃 안내선 적용하기
    아이콘, 색상을 문서 에셋에 등록하기
    STEP 02. 상단 툴 바와 메인 메뉴 디자인하기
    main_start 페이지의 상단 툴 바 디자인하기
    내부 인스턴스를 활용한 메인 메뉴 디자인하기
    STEP 03. 내부 아이콘 및 슬라이드 버튼 디자인하기
    내부 아이콘 만들기
    원형 그래프 만들기
    데이터 수치 입력하기
    정보 표시 입력하기
    슬라이드 버튼 디자인하기
    STEP 04. 시작 애니메이션과 슬라이드 효과의 프로토타입 제작하기
    main_01 아트보드 페이지 디자인하기
    메인 아트보드에 시작 애니메이션 연결하기
    슬라이드 버튼 인터랙션 제작하기
    STEP 05. 숨김 메뉴 디자인하고 프로토타입 제작하기
    메뉴 배경과 섬네일 디자인하기
    메뉴 아이콘과 리스트 디자인하기
    메뉴 슬라이드 효과의 프로토타입 제작하기
    [디자이너의 비밀노트] 앱 UI 디자인의 메뉴(Menu)

    PROJECT 05. 그리드 시스템을 이용한 반응형 UI 디자인_web
    STEP 01. 메인 페이지 UI 디자인 준비하기
    새 아트보드 만들기
    그리드 시스템 적용하기
    STEP 02. 반응형 UI 툴 바와 메뉴 디자인하기
    숨김 메뉴 구성 요소로 내부 인스턴스 추가하기(mobile_UI)
    주요 메뉴에 마우스 오버 상태 추가하기
    구성 요소 인터랙션을 이용해 모바일 메뉴 디자인하기
    인터랙션 숨김 메뉴의 프로토타입 만들기
    메뉴 구성 요소로 펼침 메뉴 만들기(tablet_UI)
    메뉴 구성 요소로 메인 툴 바 만들기(web_UI)
    STEP 03. 반응형 UI 내부 콘텐츠 디자인하기
    내부 콘텐츠 디자인하기(mobile_UI)
    내부 콘텐츠 디자인하기(tablet_UI)
    내부 콘텐츠 디자인하기(web_UI)

    PROJECT 06. 공유 기능을 이용한 개발자 협업
    STEP 01. XD 공유 기능 활용하기
    공유 링크 만들기
    공유 링크 업데이트하고 관리하기
    공유 페이지 관리하기
    댓글을 이용해 의견 나누기
    STEP 02. 프로젝트 공유하고 실무에 활용하기
    운영체제별 프로젝트 공유하기
    에셋, 색상, 문자 스타일 확인하기
    디자인 가이드, 인터랙션 확인하기
    웹사이트 제작에 필요한 변수 CSS 다운로드
    [디자이너의 비밀노트] 제플린을 활용해 프로젝트 공유하기

    책 후기

    최근 포토샵을 이용한 작업보다 제플린, 피그마, adobe XD 등을 이용해 웹, 앱 디자인을 하는 경우가 많아졌다.

    이 책은 UI/UX 디자인을 위해 1부터 100까지 세세하게 설명해준다.

    경험이 없는 신입이라면 필수고 기본을 다지고 싶은 디자이너도 필수로 읽어야 할 것 같다.

    개발자, 기획자도 Adobe XD를 이용해 디자인 실습하기 전 챕터까지는 알고 있으면 좋을 것 같다.

    애매하게 알고 있던 디자인 관련 지식들을 정리할 수 있어 좋았다.

     

    한빛미디어에서 <나는 리뷰어다>를 통해 책을 지원받아 작성한 리뷰입니다.

  • 1631495846597.jpg

     

    이것이 진짜 UX/UI 디자인이다!

    좋은 모바일 앱을 만드는

    UX/UI 디자인 가이드

    Adobe XD

    1631495848915.jpg

    요즘 웹퍼블리셔 수업중

    디자인수업을 하러가면

    혹시 XD 수업까지 가능할까요?

    질문을 받는다..;;;

    음..ㅡ.,ㅡ;;;

    난 그저 디자이너니..

    디자인프로그램만 안다고

    하기에는 한계가 있는거 같아서

    도대체 어떤 프로그램인지

    알아보고 싶어서...

    책을 읽어보기로!!!!

    xd.JPG

     

     

    모바일 UX/UI 디자인 강의

    with Adobe XD

    SE-55c7f4b3-96a5-44f4-a738-b433f7694775.jpg

    Adobe XD 드디어 첫만남!!

    같은 어도비니까 비슷하겠지?

    하단에 템플릿이 있는데..

    원하는 사이즈 입력할 수 있는 칸도 있음

     

     

     

    Adobe 가입해서 XD 다운로드

    받으면 사용할 수 있으니..

    딱히 구매는 안하셔도 될거 같아요!

    ^^

     

    1631495847312.jpg

     

     

    앞에는 모바일 트랜드라던지

    UX/UI에 대한 설명이 나와있고

    웹퍼블리셔를 시작하는 사람들은

    무조건 읽어봐야 하는 내용이

    들어있는거 같다!!!

    PART 02부터 예제 시작!!

     

    xd7.JPG

    다음날 제 계정으로

    프로그램 설치 후 열었더니

    소스파일이 2021에서는

    아주 깔끔하게

    열리더라구요..^^

    1631495848140.jpg

     

    와우...이런 효과..

    모바일에서 많이 봤는데

    클릭하면 숨겨진 메뉴

    나오는거 XD에서 하니

    매우 간단하다아

    코드로 짜려면 진짜

    복잡할텐데 대박

    정말 디자이너를 위한

    여러사람의 협업프로그램

    너무 좋은듯!!

     

    xd21.JPG

    스크롤 시 위치 고정!!

    신기함..

    이왕이면 저 사이즈 후로 안보이는

    기능까지했음 더 좋았겠당!!

    히히

    xd22.JPG

    이렇게 디자인해서

    기획자, 디자이너, 퍼블리셔, 개발자

    공유하면 누가 저랬니 이랬니

    소리없이 확인가능하니 넘 좋네요

    왜 Adobe XD 쓰는지 알겠어요!!!

  • 도서명 : 모바일 UX/UI 디자인 강의 with Adobe XD

    저자 : 김영삼


     

     

    IMG_9573.jpeg

     

     이번 한빛리뷰어 도서는 『10년차 디자이너에게 1:1로 배우는 모바일 UX/UI 디자인 강의 with Adobe XD』 입니다. 제목그대로 10년 차 선배의 모바일 앱 디자인 실무 노하우가 들어있습니다.

    이 책은 2개 파트로 나눠져있는데요, PART 1에서는 국내 실정에 맞는 꼼꼼한 UX, UI 이론 설명과 실무 워크플로우를 살펴보고 각 운영체제에 맞는 디자인 가이드라인을 확인하고 PART 2에서는 실제 서비스 중인 트렌디한 프로젝트 예제 실습을 통해 모바일 UX/UI 디자인 실무를 제대로 파악할 수 있게 구성되어 있습니다.

     

    IMG_9574.jpeg

     

     

    파트 1

    파트 1. 모바일 UX/UI 디자인에서는 아래 내용이 담겨 있습니다.

    • 모바일 앱과 UX의 시작 (UX 용어 설명, 변천사 등)
    • 모바일 UX 시나리오 (모바일 서비스 구분하기, 태스크 분석 과정, 카테고리 분석, 디자인 방향 설정 등)
    • 모바일 해상도 및 제작 방법
    • 모바일 앱 GUI 디자인 및 레이아웃
    • 모바일 앱 디자인에 필요한 XD 핵심 기능 익히기

    모바일 UX부터 해상도까지 전체적인 설명을 다루고 있는 부분으로, 모바일 "앱"에 국한되지 않고 "모바일 UX"를 중점으로 내용이 담겨 있습니다.

    저도 iOS 앱 개발자이지만 UX나 모바일웹과 앱의 차이를 자세하게 알진 못하는데 이 책을 통해 두 개의 차이를 제대로 알 수 있어서 좋았습니다.

    또 UX/UI를 위한 서비스 분석, 디자인 방향을 어떻게 잡아야 하는지 상세한 설명과 참고 사이트까지 제공하고 있어 디자인 전공이 아니어도 사이드 프로젝트에 충분히 활용할 수 있는 내용들이 담겨있습니다.

    Android, iOS, 모바일 웹에 해상도가 어떻게 되어있는지 각 차이가 어떤 건지 알 수 있어 큰 도움이 될 것 같습니다.

     

    IMG_9575.jpeg

     

     

    파트 2

    파트 2. 모바일 UX/UI 디자인 프로젝트는 저자의 설명과 함께 다양한 화면을 디자인하는 내용이 담겨 있습니다.

    • 젬픽 모바일 앱 로그인, 회원 가입 페이지 디자인_iOS
    • 스크롤 기능을 이용한 메인 페이지 디자인_Android
    • 슬라이드 효과의 메인 페이지 디자인_iOS
    • 시작 애니메이션 효과의 메인 페이지 디자인_Android
    • 그리드 시스템을 이용한 반응형 UI 디자인_web
    • 공유 기능을 이용한 개발자 협업

    다양한 프로젝트를 실습하며 UX/UI 디자인을 제대로 맛볼 수 있는 내용이 담겨 있는 파트 2는 한 OS의 디자인만 배우는 게 아닌 iOS, Android, Web까지 골고루 경험할 수 있어서 내가 어떤 디자인을 하게 되더라도 대응할 수 있을 것 같습니다.

    최신 유행하는 디자인으로 실습을 하기 때문에 이 프로젝트로 다른 프로젝트에 충분히 활용을 할 수 있을 것 같습니다.

    총평

    기획자부터 디자이너, 개발자까지 모바일앱과 관련된 일을 하는 사람이라면 꼭 읽으라고 권해드리고 싶습니다. 10년 차 디자이너 선배가 주는 다양한 노하우를 이 책 한 권으로 들어보세요!

    "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

     

  • 

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

    모바일 UX/UI 디자인 강의

    with ADOBE XD

     

    

     

    KakaoTalk_20210906_135825992_09.jpg

     

     

    나는 인터넷으로 물건을 판매하고 있다.

    5년전엔 PC와 모바일의 상품 구매 비율이 5:5였다.

    그런데 갈수록 모바일의 구매 비율이 높아지더니 현재는 9:1 정도 되는 것 같다.

    비단 우리 회사만 그런 것은 아닐 것이다.

     

    그만큼 모바일의 비중이 높아지고 있다.

     

     

    KakaoTalk_20210906_135825992_08.jpg

     

     

    이 책은 모바일 UX/UI 디자인 강의다.

     

    UX는 User Experience의 약자로 사용자 경험을 뜻한다.

    UX는 한 개인이 특정한 제품이나 서비스,

    그리고 그것의 전달 과정을 설계된 방식대로 상호작용하면서 가지는 모든 경험과 결과를 의미한다. <위키디피아>

     

    KakaoTalk_20210906_135825992_07.jpg

     

     

     

    UX 요소 중에서 꼭 알아두어야 할 중요한 것은 화면 크기 변화와 사용자(Interaction)의 발전이다.

     

    이 책은 UX와 UI의 기원과 현재 상황에 대해 설명해 주고 그게 왜 중요한지 얘기해준다.

     

     

    모바일 UX시나이로을 작성하고 여러 과정을 통해 모바일 설계하는 방법까지 알려준다.

    디자이너가 알아야 할 기초적인 지식부터 개발자 사이트에서 아이콘을 다운로드 하는 방법까지 친절하게 알려준다.

     

    KakaoTalk_20210906_135825992_04.jpg

     

     

     

    그리고 어도비 XD의 핵심 기능을 익혀 모바일 앱 디자인에 필요한 기초적인 부분을 설명해준다.

    처음 이용하는 디자이너들도 쉽게 알아 들을 수 있게 그림을 기반으로 보기 쉽게 설명해준다.

    파트1에서 모바일 UX와 UI의 설명 및 주요 기능을 설명해 주었다면

     

    파트2에서는 UX/UI 디자인 및 프로젝트를 따라한다.

    젬픽 모바일 앱에 로그인, 회원가입 페이지를 디자인해본다.

     

    이후 스크롤, 슬라이드 등을 활용한 효과적인 디자인을 제작하는 연습을 한다.

    그리고 애니메이션 효과로 페이지 진입 시 그래프와 정보의 변화를 나타낼 수 있게 해줄 수 있는 연습을 진행한다.

     

    KakaoTalk_20210906_135825992_02.jpg

     

     

     

     

     

    사용자 메뉴화면으로 넘어가는 인터랙션도 제작한다.

     

     

    이후 반응형 디자인을 통해 모바일 뿐만 아니라 웹에서도 볼 수 있게 연습해 본다.

     

    이 책은 좋은 모바일 앱을 만드는 UX/UI 디자인 가이드이다.

    기획부터 서비스구분 카테고리 분석 테스크 리서치 주요 UI/GUI 설계 그리고 프로토타입 앱 디자인까지

    자연스럽게 이어지는 모바일 UX 시나이로을 통해 모바일 앱 디자인 실무를 제대로 파악할 수 있다.

     

    KakaoTalk_20210906_135825992_01.jpg

     

     

     

    그냥 눈으로 보기 좋은 디자인이 아닌 사용자의 성향을 파악하고 분석하는 사용자의 환경을 고려한 디자인에 대한 기본적인 지식을 잘 안내해 준 책입니다. 웹 디자이너라면 모바일 UX와 UI를 파악하고 익혀 개념을 잡는데 도움이 될 수 있고 쉽게 따라할 수 있을거라 생각합니다.

     

     

    KakaoTalk_20210906_135825992.jpg

     

     

     

     

    

부록/예제소스
자료명 등록일 다운로드
Google Drive 예제소스(From Google Drive) 2021-09-10 다운로드
DOWNLOAD 예제소스(From CDN) 2021-09-10 다운로드
결제하기
• 문화비 소득공제 가능

배송료 안내

  • 책, 아이템 등 상품을 1만원 이상 구매시 무료배송
  • 브론즈, 실버, 골드회원이 주문하신 경우 무료배송

무료배송 상품을 포함하여 주문하신 경우에는 구매금액에 관계없이 무료로 배송해 드립니다.

닫기

도서판매처

리뷰쓰기

닫기
* 도서명 :
모바일 UX/UI 디자인 강의 with Adobe XD
* 제목 :
* 별점평가
* 내용 :

* 리뷰 작성시 유의사항

글이나 이미지/사진 저작권 등 다른 사람의 권리를 침해하거나 명예를 훼손하는 게시물은 이용약관 및 관련법률에 의해 제재를 받을 수 있습니다.

1. 특히 뉴스/언론사 기사를 전문 또는 부분적으로 '허락없이' 갖고 와서는 안됩니다 (출처를 밝히는 경우에도 안됨).
2. 저작권자의 허락을 받지 않은 콘텐츠의 무단 사용은 저작권자의 권리를 침해하는 행위로, 이에 대한 법적 책임을 지게 될 수 있습니다.

오탈자 등록

닫기
* 도서명 :
모바일 UX/UI 디자인 강의 with Adobe XD
* 구분 :
* 상품 버전
종이책 PDF ePub
* 페이지 :
* 위치정보 :
* 내용 :

도서 인증

닫기
도서명*
모바일 UX/UI 디자인 강의 with Adobe XD
구입처*
구입일*
부가기호*
부가기호 안내

* 인터넷 서점에서 구입한 도서를 인증하면 마일리지 500점을 드립니다.

* 한빛 웹사이트에서 구입한 도서는 자동 인증됩니다.

* 도서인증은 일 3권, 월 10권, 년 50권으로 제한되며 절판도서, eBook 등 일부 도서는 인증이 제한됩니다.

* 구입하지 않고, 허위로 도서 인증을 한 것으로 판단되면 웹사이트 이용이 제한될 수 있습니다.

닫기

해당 상품을 장바구니에 담았습니다.이미 장바구니에 추가된 상품입니다.
장바구니로 이동하시겠습니까?

자료실