효과적인 모바일 UX 만들기 (디자인 + 코딩)

Name: 효과적인 모바일 UX 만들기 (디자인 + 코딩)
Price: 79200 KRW

Photoshop과 Adobe XD 프로그램을 활용해 다양한 디바이스의 웹, 앱 레이아웃을 디자인해 본 뒤 간단한 코딩 기술을 학습해 직접 구현해볼 수 있게 됩니다.

(4.5) 수강평 46개

수강생 106,957명

유용한IT학습

HTML/CSS jQuery XD

초급자를 위해 준비한
[웹 개발, 웹 퍼블리싱] 강의입니다.

이런 걸 배울 수 있어요

Adobe XD를 활용한 모바일 UX 디자인
HTML, CSS, jQuery를 활용한 모바일 UX 코딩

웹은 물론, 모바일 앱까지!
UX 디자인 구현의 기초 📲

효과적인 UIUX를 위한 XD 사용법

🗒 강의소개

(이 강의는 강사의 답변이 제공되지 않습니다. 참고하시기 바랍니다.)

이 강의에서는 Adobe Photoshop과 XD 두 프로그램을 활용해 모바일, 태블릿, 데스크톱 등 다양한 디바이스에서 구현 가능한 UX 레이아웃을 디자인해봅니다.

또한 디자인뿐만 아니라 모바일 디바이스 구현에 적합한 코딩 방식을 함께 익힘으로써 실제 구현 가능한 웹, 앱 디자인 기술을 학습할 수 있도록 합니다.

디자인 툴을 활용해 다양한 디바이스의 레이아웃을 디자인해볼 수 있습니다.
모바일 디바이스에 적절한 코딩 방식을 학습합니다.

🌈 강의 맛보기

🙌 여기서 다루는 툴

Adobe Photoshop CC (2018)
Adobe XD CC (2018)
Atom 1.24.0
Google Chrome

본 강의에서는 Adobe Photoshop 및 XD CC 2018 버전과 Atom 1.24를 사용하고 있습니다. 따라서 해당 버전 이상의 최신 포토샵 및 XD를 사용하시길 권장합니다.

아톰과 구글 크롬은 모두 공식 홈페이지에서 무료로 다운로드받아 이용할 수 있습니다. 어도비 툴의 경우, 공식 홈페이지에서 프로그램을 구매하거나 기간제한형 체험판 등을 이용할 수 있습니다. 공식 사이트 링크(1) (2) (3)

🙋🏻‍♂️ 강의 관련 예상 질문

Q. 비전공자, 입문자도 들을 수 있나요?
A. 이 강의는 UX 디자인을 위한 기초 지식을 학습하므로, Adobe XD와 HTML, CSS, jQuery 등을 기초부터 빠르게 학습하도록 이루어져 있습니다. 다만, Photoshop의 선수 지식이 있는 상태에서 수강하셔야 수월하게 학습할 수 있음을 알려드립니다.

Q. 강의 교안이 포함되어 있나요?
A. 네, 강의 교안이 파트별 두 번째 강의에 첨부되어 있습니다. 파트 1의 경우, 교안 파일의 용량이 커 화면에 표기된 드라이브 링크로 들어가시면 교안 파일 다운로드가 가능합니다. 파트 2의 경우, 강의 재생 화면의 왼쪽 탭에 있는 구름 모양 아이콘 또는 우측 상단의 녹색 [자료] 아이콘을 클릭하시면 예제 압축파일 다운로드가 가능합니다. (진도율 100%를 위해 하단 중앙의 [봤어요]를 클릭해주세요.)

이런 분들께
추천드려요!

학습 대상은
누구일까요?

웹을 공부하는 학생들
웹 업무를 하는 실무자

선수 지식,
필요할까요?

기본적인 Photoshop 활용 능력

안녕하세요
유용한IT학습입니다.

8,250,394

명

수강생

5,946

개

수강평

4.6

점

강의 평점

189

개

강의

유용한 IT 강의를 통해 여러분의 성장을 돕겠습니다.

커리큘럼

전체

46개 ∙ (22시간 13분)

해당 강의에서 제공:

수업자료

섹션 1. 효과적인 모바일 UX 만들기 Part.1 (디자인)

22개 ∙ (10시간 33분)

1. 효과적인 모바일 UX를 만들기 위한 UX 규칙
29:37
2. 자료 파일 다운로드
3. 기초 모바일 그리드 작성 방법
29:55
4. 웹 용 아이콘 제작
43:24
5. 기초 템플릿 디자인 작성1 / Start Page
27:51
6. 기초 템플릿 디자인 작성2 / Feed Page
27:00
7. 템플릿1에 관련된 기초 아이콘 작성과 그리드 작성
25:38
8. 템플릿1 디자인 작성1 / Start Page
22:42
9. 템플릿1 디자인 작성2 / Profile Page, News Main Page
37:14
10. 템플릿1 디자인 작성3 / Works Page
23:36
11. 템플릿1 디자인 작성4 / Message Page
23:49
12. 템플릿2 디자인 작성1 / Index Page
25:10
13. 템플릿2 디자인 작성2 / Side Menu Page
23:35
14. 템플릿2 디자인 작성3 / Board Page
41:52
15. Adobe XD 설치 및 기본 기능1
25:30
16. Adobe XD의 기본 기능2
35:47
17. Adobe XD의 기본 기능3
33:48
18. Adobe XD를 이용한 기초 템플릿 디자인 작성1
34:29
19. Adobe XD를 이용한 기초 템플릿 디자인 작성2
26:26
20. Adobe XD를 이용한 템플릿 디자인 작성1
37:19
21. Adobe XD를 이용한 템플릿 디자인 작성2
29:07
22. Adobe XD를 이용한 템플릿 디자인 작성3
29:12

섹션 2. 효과적인 모바일 UX 만들기 Part.2 (코딩)

24개 ∙ (11시간 40분)

23. 기본 HTML 문서 형식의 완성
35:48
24. CSS display 속성에 대한 이해1 (교안 포함)
25:07
25. CSS display 속성에 대한 이해2
33:24
26. CSS position 속성에 대한 이해
23:38
27. GNB 형식에 대한 스타일 분석
38:40
28. PC와 Mobile 코딩에 따른 스타일 분석
33:12
29. Flexbox 레이아웃 모듈을 이용한 Mobile 스타일 작성1
34:33
30. Flexbox 레이아웃 모듈을 이용한 Mobile 스타일 작성2
20:00
31. 동적인 인터렉션을 위한 jQuery의 기초1
33:28
32. 동적인 인터렉션을 위한 jQuery의 기초2
31:11
33. Mobile 아코디언 형식의 메뉴의 제작
13:32
34. 시간의 흐름에 따른 동작의 구현1
33:08
35. 시간의 흐름에 따른 동작의 구현2
19:52
36. Mobile 폼 요소의 커스터마이징
27:25
37. Mobile 갤러리 제작을 위한 플러그인의 활용1
28:45
38. Mobile 갤러리 제작을 위한 플러그인의 활용2
30:47
39. Mobile GNB 제작의 기초
39:25
40. Flexbox 레이아웃 모듈을 이용한 레이아웃 활용
14:57
41. 샘플 페이지1 Start 페이지 작성
32:17
42. 샘플 페이지2 Feed 페이지 작성
35:59
43. 샘플 페이지2 Start 페이지 작성
27:12
44. 샘플 페이지2 Profile 페이지 작성
25:22
45. 샘플 페이지2 News Main 페이지 작성
20:46
46. 샘플 페이지2 Works 페이지 작성
41:40

강의 게시일: 2020. 03. 02.

마지막 업데이트일: 2020. 03. 03.

수강평

아직 충분한 평가를 받지 못한 강의입니다.

모두에게 도움이 되는 수강평의 주인공이 되어주세요!