모바일 UX/UI 디자인 강의 with Adobe XD (10년차 디자이너에게 1:1로 배우는)

김영삼

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

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

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

CHAPTER02.모바일UX시나리오
LESSON01.모바일UX시나리오의미와과정
모바일UX시나리오과정
LESSON02.서비스구분하고제작방향설정하기
모바일서비스구분하기
네이티브앱(NativeApp)
모바일웹앱(MobileWebApp)
반응형웹앱(RWD:ResponsiveWebDesign)
적응형웹앱(AWD:AdaptiveWebDesign)
하이브리드앱(HybridApp)
LESSON03.태스크분석을통한주요UI설계하기
태스크분석(TaskResearch)과정
LESSON04.카테고리분석을통한디자인포지션찾기
1단계.유사카테고리서비스찾아분석하기
2단계.동일사용자층서비스찾아분석하기
3단계.디자인포지션(DesignPosition)확정하기
예시로알아보는디자인포지션과정
LESSON05.디자인리서치를통한디자인방향설정하기
무드보드(Moodboard)
컬러스와치(ColorSwatch)
[디자이너의비밀노트]컬러시뮬레이션서비스활용하기
LESSON06.런처아이콘과런치스크린디자인하기
런처아이콘(LauncherIcon)
운영체제규격에맞게디자인하기
사용자에게동일한BX아이콘제공하기
BX가제대로드러나게디자인하기
모바일웹런처아이콘
런치스크린(LaunchScreen)
시각보정을이용해로고배치하기
다양한기능을담은런치스크린
LESSON07.와이어프레임형식의UI구조설계하기
UI구조설계(UIStructure)
페이퍼프로토타입(PaperPrototype)과UI설계하기
동일한구조의UI설계하기
UI뎁스(Depth)와GUI표시하기
정확한화면이름과파일명표기하기
포지티브와이어(PositiveWire)와네거티브와이어(NegativeWire)표시하기

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

CHAPTER04.모바일앱GUI디자인및레이아웃
LESSON01.모바일앱GUI디자인
태스크분석을통한GUI디자인
탭(Tap)GUI구조
플로팅(Floating)GUI구조
갤러리(Gallery)GUI구조
숨김메뉴GUI구조
순차적GUI구조
LESSON02.UI-Kit활용하기
XD에서UI-Kit다운로드하기
앱아이콘다운로드하기
폰트다운로드하기
LESSON03.Android앱주요가이드라인
Android앱가이드라인
툴바의버튼과가장자리의마진
콘텐츠와콘텐츠사이마진
전체화면마진
상태바와아이콘
오른쪽끝마진
버튼의터치영역
툴바,플로팅버튼,오버레이마진
리스트목록
LESSON04.iOS앱주요가이드라인
iOS앱디자인전체크사항
iOS앱주요가이드라인
상태바
내비게이션바
큰타이틀바
마진
탭바
홈표시
내부디자인아이콘의터치영역
LESSON05.나인패치와스트레칭이미지
나인패치(Draw9patch)
Android에맞는나인패치제작
iOS스트레칭이미지제작

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

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

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

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

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

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

PROJECT06.공유기능을이용한개발자협업
STEP01.XD공유기능