인터랙티브 개발 실무 끝장내기 [역량 강화편]

웹 인터랙션, 더 쉽고 + 더 창의적으로! 💎

내 손으로 만드는 트렌디한 UX.

단순 서비스 구현을 넘어 트렌디한 UX를 구현하려면 탄탄한 기본기가 가장 중요합니다. 특정 프레임워크나 플러그인에 의존하지 않고 순수 자바스크립트(Vanilla JS) 만으로 해외 유명사이트의 트렌디한 UX를 구현할 수 있습니다.

TweenMax를 이용한 화려한 모션부터 스크롤 이벤트, 반응형, 모바일 터치까지 15년간의 인터랙티브 개발 노하우를 아낌없이 담았습니다. (짧고 굵게!)

 

 

---

누구나 인터랙티브 개발을 할 수 있나요? 

저도 디자인과 출신의 개발 비전공자입니다. 기초가 부족한 게 아닌, 아예 기초가 없이 개발에 뛰어들었습니다. 고통스러울 정도로 힘들었던 경험이 있어서 어떤 게 어려운지, 어떤 부분에서 막히는지를 잘 알고 있습니다. 당시에 ‘이런 강의가 있었으면 정말 좋았겠다’는 심정으로 이번 강의를 만들었습니다. 

• 현업에서 만날 수 있는 어려운 상황을 쉽게 풀어나가는 노하우를 알려드립니다.
• 탄탄한 기본기를 바탕으로 창의적인 개발자가 되어 연봉을 올리세요!

---

강의 특징

---

학습 내용 맛보기

Section.1

• 변수, 랜덤, if 문, timer 등 자바스크립트 기초 활용 
• 초간단하게 만들어보는 몇 가지 게임

---

Section.2

• 인터랙티브 제작시 아주 중요한 페이징 개념 익히기
• 같은 스크립트에 스타일을 바꾸면서 완전 다른 페이지 만들기
• 모바일 터치 이벤트를 활용한 스와이프 기능 구현

---

Section.3

• 별~이 쏟아지~는 코딩일레븐 페이지 제작
• 별 이미지 두장으로 하는 간단한 페럴렉스 효과
• TweenMax, scrollTo 플러그인을 이용한 쫀쫀한 화면 이동
• 플러그인 없이 순수 자바스크립트로 구현한 버전과 비교

---

Section.4

• 본격적인 TweenMax 사용 방법 설명
• 반응형 페이지에서 필요한 stageResize 활용
• 트윈맥스를 이용한 입체적인 랜덤 카드 모션 

---

Section.5

• 위에서 배운 페이징 스크립트 응용
• 다양하게 활용 가능한 TweenMax 랜덤 모션 제작 

---

Section.6

• 3D 입체 카드
• transform, translateZ 속성을 이용한 입체적인 표현
• 모바일 기울기를 이용한 인터랙티브

웹에서 바로 보기 클릭

---

 

평균 별점 4.9★ 
코딩일레븐 신규 강의.