Thumbnail
디자인 UX/UI

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

(4.5)
46개의 수강평 ∙  106,281명의 수강생
79,200원

월 15,840원

5개월 할부 시
지식공유자: 유용한IT학습
총 46개 수업 (22시간 13분)
수강기한: 
12개월
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변: 미제공
폴더에 추가 공유

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

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

✍️
이런 걸
배워요!
Adobe XD를 활용한 모바일 UX 디자인
HTML, CSS, jQuery를 활용한 모바일 UX 코딩

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

🗒 강의소개

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

이 강의에서는 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학습 입니다.
유용한IT학습의 썸네일

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

커리큘럼 총 46 개 ˙ 22시간 13분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 효과적인 모바일 UX 만들기 Part.1 (디자인)
효과적인 모바일 UX를 만들기 위한 UX 규칙 미리보기 29:37
자료 파일 다운로드
기초 모바일 그리드 작성 방법 29:55
웹 용 아이콘 제작 43:24
기초 템플릿 디자인 작성1 / Start Page 27:51
기초 템플릿 디자인 작성2 / Feed Page 27:00
템플릿1에 관련된 기초 아이콘 작성과 그리드 작성 25:38
템플릿1 디자인 작성1 / Start Page 22:42
템플릿1 디자인 작성2 / Profile Page, News Main Page 37:14
템플릿1 디자인 작성3 / Works Page 23:36
템플릿1 디자인 작성4 / Message Page 23:49
템플릿2 디자인 작성1 / Index Page 25:10
템플릿2 디자인 작성2 / Side Menu Page 23:35
템플릿2 디자인 작성3 / Board Page 41:52
Adobe XD 설치 및 기본 기능1 25:30
Adobe XD의 기본 기능2 35:47
Adobe XD의 기본 기능3 33:48
Adobe XD를 이용한 기초 템플릿 디자인 작성1 34:29
Adobe XD를 이용한 기초 템플릿 디자인 작성2 26:26
Adobe XD를 이용한 템플릿 디자인 작성1 37:19
Adobe XD를 이용한 템플릿 디자인 작성2 29:07
Adobe XD를 이용한 템플릿 디자인 작성3 29:12
섹션 1. 효과적인 모바일 UX 만들기 Part.2 (코딩)
기본 HTML 문서 형식의 완성 미리보기 35:48
CSS display 속성에 대한 이해1 (교안 포함) 25:07
CSS display 속성에 대한 이해2 33:24
CSS position 속성에 대한 이해 23:38
GNB 형식에 대한 스타일 분석 38:40
PC와 Mobile 코딩에 따른 스타일 분석 33:12
Flexbox 레이아웃 모듈을 이용한 Mobile 스타일 작성1 34:33
Flexbox 레이아웃 모듈을 이용한 Mobile 스타일 작성2 20:00
동적인 인터렉션을 위한 jQuery의 기초1 33:28
동적인 인터렉션을 위한 jQuery의 기초2 31:11
Mobile 아코디언 형식의 메뉴의 제작 13:32
시간의 흐름에 따른 동작의 구현1 33:08
시간의 흐름에 따른 동작의 구현2 19:52
Mobile 폼 요소의 커스터마이징 27:25
Mobile 갤러리 제작을 위한 플러그인의 활용1 28:45
Mobile 갤러리 제작을 위한 플러그인의 활용2 30:47
Mobile GNB 제작의 기초 39:25
Flexbox 레이아웃 모듈을 이용한 레이아웃 활용 14:57
샘플 페이지1 Start 페이지 작성 32:17
샘플 페이지2 Feed 페이지 작성 35:59
샘플 페이지2 Start 페이지 작성 27:12
샘플 페이지2 Profile 페이지 작성 25:22
샘플 페이지2 News Main 페이지 작성 20:46
샘플 페이지2 Works 페이지 작성 41:40
강의 게시일 : 2020년 03월 03일 (마지막 업데이트일 : 2020년 03월 03일)
수강평 총 46개
수강생분들이 직접 작성하신 수강평입니다.
4.5
46개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Yuni thumbnail
4
강의명을 보고 디자인 트렌드라던가 상황에 따라 어떤 UX를 적용하는 게 효율적인지와 같은 내용을 기대했는데 실제적으로는 모바일 UX 케이스 스터디 같은 느낌이라 아쉬웠습니다. 또한 코딩이 원래 오류를 정정하면서 작업하는 것이 자연스러운 작업 방식이라고는 하지만 초급 수준의 강의인데 실수가 잦으셔서 이해가 혼란스러웠습니다. 그래도 모바일 유엑스 작업이 어떻게 이루어지는지 보고 배울 수 있는 점은 좋았습니다.
2021-02-20
mipizz thumbnail
5
감사합니다
2023-09-11
최정은 (탈퇴) thumbnail
3
도움이 됐습니다.
2020-03-18
박채윤 thumbnail
5
몰랐던 부분을 새로 알게 되었을뿐만 아니라 알고 있었던 부분을 좀더 쉽고 다시한번 정리할 수 있어서 좋았습니다.
2020-03-14
주선우 thumbnail
5
좋은 강의입니다~
2020-03-12