『10년차 디자이너에게 1:1로 배우는 모바일 UX/UI 디자인 강의 with Adobe XD』는 제목 그대로 10년차 선배의 모바일 앱 디자인의 실무 노하우가 고스란히 들어 있는 모바일 UX/UI 디자인 활용서이다. PART 1에서는 국내 실정에 맞는 꼼꼼한 UX, UI 이론 설명과 실무 워크플로우를 살펴보고 각 운영체제에 맞는 디자인 가이드라인을 확인한다. PART 2에서는 실제 서비스 중인 트렌디한 프로젝트 예제 실습을 통해 모바일 UX/UI 디자인 실무를 제대로 파악할 수 있게 구성했다. 특히 iOS, Android, Web 서비스 예제를 통해 실제 모바일 앱을 디자인하고 프로토타이핑으로 인터랙션을 구현할 수 있게 구성하여 실무 경험치를 높일 수 있다.
대학에서 패션 디자인을 전공하였으며 국내 IT 시장 초창기 때부터 지금까지 모바일 UX/UI 디자인과 이모티콘 제작 및 강의를 진행하고 있습니다. 현재 카카오톡, 라인, 아이 메시지&페이스북 메신저에 다양한 이모티콘을 서비스하고 있습니다. 한국 매크로미디어 MAX(모바일 게임 부분 대상), 아이리버(모바일 플래시 게임 부분 특별상), 친환경상품진흥원(게임 부분 3위), 보건복지가족부(UCC 애니메이션 부분 장관상) 수상 경력이 있습니다.
· 소프트캠퍼스 디자인 팀장(앱 개발 및 UX/UI 디자인) 이프 프로젝트, 모히톡 디자인 매니저(이모티콘 제작 및 교육 담당)
· SK Tacademy, 삼성SDS멀티캠퍼스, 삼성 sGen Club, KT 에코노베이션 스마트 스쿨, 서울대학교 드림 포지, 제주대학교, 서울예술대학교에서 UX/UI 디자인 강의
· 전주정보문화산업진흥원, 디노마드, 경기여성능력개발원, 부산정보산업진흥원, 충북지식산업진흥원, 부천만화영상진흥원, 콘텐츠코리아랩에서 UX/UI 디자인 및 이모티콘 제작 강의
· 카카오톡, 라인, 아이 메시지&페이스북 메신저 이모티콘 서비스
· 다코타, AZ웨더, UX UI Color/MockUp/Calculator 등 다수 앱 개발 및 디자인
Email cafelove33@hanmail.net
Facebook facebook.com/032cafe
Cafe cafe.naver.com/032cafe
Blog blog.naver.com/032cafe
YouTube youtube.com/김영삼032cafe
PART 01. 모바일 UX/UI 디자인 </br>CHAPTER 01. 모바일 앱 UX의 시작 </br>LESSON 01. 모바일 앱과 UX 디자인의 발전 </br>UX 디자인의 등장 </br>화면 크기의 변화와 UX의 발전</br>실무에서 말하는 모바일 UX 디자인</br>LESSON 02. UX 디자인을 완성하는 세 가지 요소</br>UX(User Experience) 이해하기</br>하나. UX는 발명이 아닌 발견이다</br>둘. UX는 편리함보다 익숙함을 따른다</br>셋. UX는 제품이 아닌 가치를 제공한다</br>LESSON 03. 직관적인 UX 디자인 요소</br>BX(Brand Experience)</br>UI(User Interface)</br>GUI(Graphical User Interface)</br>인포그래픽(Infographics)</br>인터랙션(Interaction)</br></br>CHAPTER 02. 모바일 UX 시나리오</br>LESSON 01. 모바일 UX 시나리오 의미와 과정</br>모바일 UX 시나리오 과정</br>LESSON 02. 서비스 구분하고 제작 방향 설정하기</br>모바일 서비스 구분하기</br>네이티브 앱 (Native App) </br>모바일 웹앱 (Mobile WebApp) </br>반응형 웹앱(RWD : Responsive Web Design) </br>적응형 웹앱(AWD : Adaptive Web Design) </br>하이브리드 앱(Hybrid App)</br>LESSON 03. 태스크 분석을 통한 주요 UI 설계하기 </br>태스크 분석(Task Research) 과정 </br>LESSON 04. 카테고리 분석을 통한 디자인 포지션 찾기 </br>1단계. 유사 카테고리 서비스 찾아 분석하기 </br>2단계. 동일 사용자층 서비스 찾아 분석하기 </br>3단계. 디자인 포지션(Design Position) 확정하기 </br>예시로 알아보는 디자인 포지션 과정 </br>LESSON 05. 디자인 리서치를 통한 디자인 방향 설정하기 </br>무드보드(Moodboard) </br>컬러 스와치(Color Swatch)</br>[디자이너의 비밀노트] 컬러 시뮬레이션 서비스 활용하기</br>LESSON 06. 런처 아이콘과 런치 스크린 디자인하기</br>런처 아이콘(Launcher Icon) </br>운영체제 규격에 맞게 디자인하기 </br>사용자에게 동일한 BX 아이콘 제공하기 </br>BX가 제대로 드러나게 디자인하기 </br>모바일 웹 런처 아이콘 </br>런치 스크린(Launch Screen) </br>시각 보정을 이용해 로고 배치하기</br>다양한 기능을 담은 런치 스크린 </br>LESSON 07. 와이어 프레임 형식의 UI 구조 설계하기 </br>UI 구조 설계(UI Structure) </br>페이퍼 프로토타입(Paper Prototype)과 UI 설계하기 </br>동일한 구조의 UI 설계하기 </br>UI 뎁스(Depth)와 GUI 표시하기 </br>정확한 화면 이름과 파일명 표기하기</br>포지티브 와이어(Positive Wire)와 네거티브 와이어(Negative Wire) 표시하기</br></br>CHAPTER 03. 모바일 해상도 및 제작 방법 </br>LESSON 01. 모바일 해상도와 72dpi 이해하기 </br>모바일 해상도 </br>72dpi </br>72dpi의 표현 해상도 </br>LESSON 02. Android의 DP 해상도 및 제작 방법 </br>Android DP 해상도 이해하기 </br>Android DP에 따른 표현 방식 알아보기 </br>Android DP에 따른 이미지 제작 방식 알아보기</br>LESSON 03. iOS의 Point 해상도와 제작 방법 </br>iOS Point 해상도 이해하기 </br>iOS Point에 따른 이미지 제작 방식 알아보기 </br>[디자이너의 비밀노트] 모바일 운영체제 디자인 가이드</br>LESSON 04. 모바일 웹과 Viewport 적용하기 </br>Viewport </br>Viewport를 적용한 모바일 뷰어 사용하기 </br>Viewport에 따른 모바일 웹 이미지 제작 방식 알아보기 </br> </br>CHAPTER 04. 모바일 앱 GUI 디자인 및 레이아웃 </br>LESSON 01. 모바일 앱 GUI 디자인 </br>태스크 분석을 통한 GUI 디자인 </br>탭(Tap) GUI 구조 </br>플로팅(Floating) GUI 구조 </br>갤러리(Gallery) GUI 구조 </br>숨김 메뉴 GUI 구조 </br>순차적 GUI 구조 </br>LESSON 02. UI-Kit 활용하기 </br>XD에서 UI-Kit 다운로드하기 </br>앱 아이콘 다운로드하기 </br>폰트 다운로드하기 </br>LESSON 03. Android 앱 주요 가이드라인 </br>Android 앱 가이드라인 </br>툴 바의 버튼과 가장자리의 마진 </br>콘텐츠와 콘텐츠 사이 마진 </br>전체 화면 마진 </br>상태 바와 아이콘 </br>오른쪽 끝 마진 </br>버튼의 터치 영역 </br>툴 바, 플로팅 버튼, 오버레이 마진 </br>리스트 목록 </br>LESSON 04. iOS 앱 주요 가이드라인 </br>iOS 앱 디자인 전 체크 사항 </br>iOS 앱 주요 가이드라인 </br>상태 바 </br>내비게이션 바</br>큰 타이틀 바 </br>마진 </br>탭 바 </br>홈 표시</br>내부 디자인 아이콘의 터치 영역 </br>LESSON 05. 나인패치와 스트레칭 이미지 </br>나인패치(Draw9patch) </br>Android에 맞는 나인패치 제작 </br>iOS 스트레칭 이미지 제작 </br> </br>CHAPTER 05. 모바일 앱 디자인에 필요한 XD 핵심 기능 익히기 </br>LESSON 01. 아트보드 편집하고 저장하기 </br>아트보드 편집하기 </br>아트보드 크기 변경하기 </br>데스크톱 화면 미리 보기 </br>문서 설정하기 </br>문서 저장하고 열기 </br>외부 디자인 파일 열기(PSD, AI, Sketch) </br>[디자이너의 비밀노트] XD 주요 단축키 </br>LESSON 02. 기본 도구 활용하기 </br>기본 도형 만들기</br>속성 관리자에서 도형 변형하기 </br>펜과 선을 이용해 드로잉하기 </br>텍스트 입력하고 편집하기 </br>텍스트 찾기 </br>오브젝트 정렬과 결합 </br>LESSON 03. 외부 파일 불러오고 편집하기 </br>일러스트레이터(AI) 파일 불러오기 </br>비트맵 파일 불러오기 </br>LESSON 04. XD 핵심 기능 익히기 </br>플러그인 활용하기 </br>UI-Kit 활용하기 </br>문서 에셋 활용하기 </br>구성 요소 등록하고 활용하기 </br>문자 스타일 등록하고 활용하기</br>색상 스타일 등록하고 편집하기 </br>구성 요소 내부 인스턴스(Instance) 활용하기 </br>반복 그리드</br>반응형 크기 조정 </br>아트보드 안내선과 그리드 시스템 </br>[디자이너의 비밀노트] 앱 디자인 색상 사용 시 주의사항</br></br>PART 02. 모바일 UX/UI 디자인 프로젝트</br>PROJECT 01. 젬픽 모바일 앱 로그인, 회원 가입 페이지 디자인_iOS </br>STEP 01. 로그인 및 회원 가입 디자인 준비하기 </br>새 아트보드 만들어 기본 레이아웃 안내선 적용하기 </br>로고, 아이콘, 색상을 문서 에셋에 등록하기 </br>STEP 02. 로그인 페이지 디자인하기 </br>login_01 페이지에 로고, 이메일, 비밀번호, 로그인 버튼 제작하기 </br>SNS 로그인 버튼과 회원 가입 버튼 만들기 </br>login_02 페이지 디자인하기 </br>아이콘을 문서 에셋에 등록하기</br>STEP 03. 회원 가입 페이지 디자인하기 </br>signup_01 페이지 디자인하기 </br>signup_02 페이지 디자인하기</br>STEP 04. 자연스러운 효과의 프로토타입 제작하기 </br>런치 스크린에서 로그인과 회원 가입 연결하기 </br>Skip, SNS 로그인, CREATE 버튼과 메인 화면 연결하기 </br></br>PROJECT 02. 스크롤 기능을 이용한 메인 페이지 디자인_Android </br>STEP 01. 메인 페이지 UI 디자인 준비하기 </br>새 아트보드 만들어 기본 레이아웃 안내선 적용하기 </br>아이콘, 색상을 문서 에셋에 등록하기 </br>STEP 02. 상단 툴 바와 하단 메뉴 탭 바 디자인하기 </br>main_01 페이지의 상단 툴 바 디자인하기 </br>내부 인스턴스를 활용해 하단 메뉴 탭 바 디자인하기 </br>메인 아이콘의 구성 요소를 활용해 내부 인스턴스 추가하기 </br>STEP 03. 인터랙션 기능으로 숨김 메뉴 만들기 </br>숨김 메뉴 구성 요소로 내부 인스턴스 추가하기 </br>인터랙션 숨김 메뉴의 프로토타입 만들기 </br>STEP 04. 뉴스 피드형 콘텐츠 디자인하기 </br>섬네일을 이용한 사용자 리스트 제작하기 </br>사진 크기 조절하고 뉴스 피드 콘텐츠 디자인하기 </br>이미지 컨트롤 아이콘 디자인하기 </br>스크롤 기능의 메인 페이지 디자인하기 </br>STEP 05. 오버레이 팝업 페이지의 프로토타입 제작하기 </br>팝업 페이지 제작하기 </br>오버레이 효과의 프로토타입 제작하기 </br></br>PROJECT 03. 슬라이드 효과의 메인 페이지 디자인_iOS </br>STEP 01. 메인 페이지 디자인하기</br>새 아트보드 만들어 기본 레이아웃 안내선 적용하기</br>아이콘, 색상을 문서 에셋에 등록하기 </br>STEP 02. 상단 툴 바와 하단 메뉴 탭 바 디자인하기</br>main_01 페이지의 상단 내비게이션 영역 디자인하기</br>내부 인스턴스를 활용해 하단 메뉴 탭 바 디자인하기 </br>메인 버튼 구성 요소로 내부 인스턴스 추가하기 </br>STEP 03. 슬라이드 페이지의 콘텐츠 구성하기 </br>슬라이드 페이지에 콘텐츠 배치하기 </br>카테고리 버튼 아이콘 배치하기</br>카테고리 버튼 구성 요소로 내부 인스턴스 추가하기 </br>STEP 04. 슬라이드 효과의 프로토타입 제작하기 </br>아트보드 복사하여 각 화면 구성하기 </br>슬라이드(스냅) 효과의 인터랙션 적용하기 </br>STEP 05. 자동 스크롤 효과의 프로토타입 제작하기 </br>sub_01 상세 페이지 제작하기 </br>자동 스크롤 효과의 프로토타입 제작하기</br></br>PROJECT 04. 시작 애니메이션 효과의 메인 페이지 디자인_Android </br>STEP 01. 시작 애니메이션 디자인 준비하기 </br>새 아트보드 만들어 기본 레이아웃 안내선 적용하기 </br>아이콘, 색상을 문서 에셋에 등록하기 </br>STEP 02. 상단 툴 바와 메인 메뉴 디자인하기 </br>main_start 페이지의 상단 툴 바 디자인하기 </br>내부 인스턴스를 활용한 메인 메뉴 디자인하기 </br>STEP 03. 내부 아이콘 및 슬라이드 버튼 디자인하기 </br>내부 아이콘 만들기 </br>원형 그래프 만들기 </br>데이터 수치 입력하기 </br>정보 표시 입력하기 </br>슬라이드 버튼 디자인하기 </br>STEP 04. 시작 애니메이션과 슬라이드 효과의 프로토타입 제작하기 </br>main_01 아트보드 페이지 디자인하기 </br>메인 아트보드에 시작 애니메이션 연결하기 </br>슬라이드 버튼 인터랙션 제작하기 </br>STEP 05. 숨김 메뉴 디자인하고 프로토타입 제작하기 </br>메뉴 배경과 섬네일 디자인하기 </br>메뉴 아이콘과 리스트 디자인하기 </br>메뉴 슬라이드 효과의 프로토타입 제작하기 </br>[디자이너의 비밀노트] 앱 UI 디자인의 메뉴(Menu)</br></br>PROJECT 05. 그리드 시스템을 이용한 반응형 UI 디자인_web </br>STEP 01. 메인 페이지 UI 디자인 준비하기 </br>새 아트보드 만들기 </br>그리드 시스템 적용하기 </br>STEP 02. 반응형 UI 툴 바와 메뉴 디자인하기 </br>숨김 메뉴 구성 요소로 내부 인스턴스 추가하기(mobile_UI) </br>주요 메뉴에 마우스 오버 상태 추가하기 </br>구성 요소 인터랙션을 이용해 모바일 메뉴 디자인하기 </br>인터랙션 숨김 메뉴의 프로토타입 만들기 </br>메뉴 구성 요소로 펼침 메뉴 만들기(tablet_UI) </br>메뉴 구성 요소로 메인 툴 바 만들기(web_UI) </br>STEP 03. 반응형 UI 내부 콘텐츠 디자인하기 </br>내부 콘텐츠 디자인하기(mobile_UI) </br>내부 콘텐츠 디자인하기(tablet_UI) </br>내부 콘텐츠 디자인하기(web_UI) </br></br>PROJECT 06. 공유 기능을 이용한 개발자 협업 </br>STEP 01. XD 공유 기능 활용하기 </br>공유 링크 만들기 </br>공유 링크 업데이트하고 관리하기 </br>공유 페이지 관리하기 </br>댓글을 이용해 의견 나누기 </br>STEP 02. 프로젝트 공유하고 실무에 활용하기 </br>운영체제별 프로젝트 공유하기 </br>에셋, 색상, 문자 스타일 확인하기 </br>디자인 가이드, 인터랙션 확인하기 </br>웹사이트 제작에 필요한 변수 CSS 다운로드 </br>[디자이너의 비밀노트] 제플린을 활용해 프로젝트 공유하기 </br></br>INDEX</br></br>
