인터랙티브 웹 개발 제대로 시작하기

인터랙티브 웹 개발 제대로 시작하기

(6개의 수강평)

97명의 수강생
30% 할인 4일 남음

38,500원55,000원

스튜디오밀
평생
초급, 중급, 활용
수료증
58개 수업, 총 9시간 35분
Wishlist

이런 분들 잘 오셨어요.

  • 해외 웹 어워드 사이트에서 자주 볼 수 있는 화려한 웹사이트들 처럼 창의적인 UI 인터랙션을 구현하는 과정을 직접 보며 배우고 싶다.
  • 몸값 높고 귀한 '진정한 개자이너'가 되고 싶다.
  • 라이브러리 활용하는 방법 말고 동작 원리를 이해하고 싶다.
  • 나는 진짜 창의력이 넘치는 디자이너인데 내 코딩 스킬이 내 머리를 따라가지를 못한다.
  • 그동안 CSS며 자바스크립트며 열심히 공부했지만, 항상 비슷한 내용에 비슷한 예제들로 지금도 비슷한 것만 만들 줄 안다.

다른 인터랙티브 웹 수업들과 뭐가 다른가요?

수업 처음부터 끝까지 라이브러리 없이 바닥부터 구현합니다. 실무에서는 생산성이 중요하므로 좋은 라이브러리를 찾아 잘 쓰는 것도 중요하지만, 잘 하는 개발자가 되기 위해서는 원천 기술과 구현 원리 대한 이해가 중요합니다. 첫 시작부터 하나하나 직접 구현하는 방법으로 공부하면, 남들과 차별화된 고급 인터랙티브 엔지니어로 성장할 수 있습니다. 눈에 보이는 동작은 같아도, 바닥부터 직접 만드는 방법을 훈련한 개발자는 숙련도부터 다릅니다.

고급 인터랙션 구현을 위해 캔버스나 웹지엘 등을 익힐 때도, 라이브러리에만 의존하던 분들은 그 단계에서 멘붕이 오고 포기하게 되는 경우를 아주 많이 봐왔습니다. 직접 구현할 줄 알면, 라이브러리를 스스로 활용하는 것은 누워서 떡 먹기입니다(실제로 누워서 떡을 드시면 큰일날 수 있습니다).

👌완전히 기초부터 진행하는 수업은 아닙니다. CSS와 자바스크립트 기초는 알고 계셔야 학습을 원활히 진행하실 수 있습니다.

👌혹시 기초 정리가 필요하다면 제 유튜브 채널의 기초 정리 영상으로 공부를 해보시고 이어서 본 강좌를 학습하시면 좋습니다.

자바스크립트 기초 / CSS 레이아웃 기초 정리 영상 보러가기

👌최종적으로 만드는 3D 스크롤 웹사이트의 소스코드를 제공합니다.

배우면 할 수 있는 것들

  • 눈에 띄는 포트폴리오 웹사이트 제작
  • 독특한 UI의 웹사이트 개발
  • CSS 3D를 자유자재로 다루기
  • 자바스크립트 기본기를 확실히 다지기

수강 대상

  • 크리에이티브 넘치는 인터랙티브 웹 구현에 관심있는 분들
  • 남들과 다른 독특한 포트폴리오 웹사이트를 만들고 싶은 분들
  • 개자이너, 디발자에 대한 로망을 갖고 계신 분들
  • 평소 1분코딩과 스튜디오밀의 강의가 좋았던 분들

선수 지식

  • CSS 기초
  • 자바스크립트 기초

지식공유자 소개

스튜디오밀

서울에서 웹 디자이너이자 웹 개발자로 일했고

지금은 제주에서 웹사이트 만드는 일, 강의, 영상 만드는 일, 캐릭터 만드는 일 등

해보고 싶은거 이것저것 해보며 살고 있습니다.

비주얼 임팩트가 있는 인터랙티브 웹 개발에 특히 관심이 많고

관련 기술들을 공유하는 페이스북 "1분코딩"과 유튜브 "스튜디오밀"을 운영하고 있어요.

교육과정

시작하기
준비 하기
08 : 57
CSS 변환과 애니메이션
Transform
15 : 52
Transition
10 : 01
Animation 1
09 : 42
Animation 2
05 : 44
Animation 3
14 : 58
CSS 3D
CSS 3D 1
14 : 01
CSS 3D 2
15 : 28
CSS 3D 3
17 : 49
CSS Flex
CSS Flex
28 : 26
인터랙티브 웹 개발을 위한 자바스크립트 시작하기
자바스크립트 워밍업
12 : 01
DOM 스크립트 1
10 : 41
DOM 스크립트 2
02 : 12
DOM 스크립트 3
10 : 55
자바스크립트 이벤트 다루기
이벤트의 기본 동작
22 : 59
this와 이벤트 객체
07 : 00
움직이는 캐릭터 예제로 클릭 이벤트 익혀보기
17 : 20
이벤트 위임
14 : 03
예제) 3개의 문
3개의 문 1
11 : 16
3개의 문 2
16 : 43
3개의 문 3
11 : 21
3개의 문 4
11 : 45
3개의 문 5
08 : 16
스크롤 다루기
스크롤 이벤트 다루기
08 : 44
스크롤 위치에 따라 오브젝트 조작하기
09 : 52
Transition/Animation 이벤트
Transition 이벤트
10 : 13
Animation 이벤트
08 : 53
타이밍 제어하기
setTimeout
05 : 18
setInterval
01 : 57
requestAnimationFrame
06 : 50
종합예제) 전진! 3D 스크롤
전진! 3D 스크롤 1
03 : 19
전진! 3D 스크롤 2
05 : 56
전진! 3D 스크롤 3
09 : 36
전진! 3D 스크롤 4
08 : 20
전진! 3D 스크롤 5
09 : 56
전진! 3D 스크롤 6
03 : 13
전진! 3D 스크롤 7
07 : 06
전진! 3D 스크롤 8
10 : 07
전진! 3D 스크롤 9
06 : 19
전진! 3D 스크롤 10
06 : 11
전진! 3D 스크롤 11
15 : 16
전진! 3D 스크롤 12
06 : 18
전진! 3D 스크롤 13
11 : 02
전진! 3D 스크롤 14
08 : 37
전진! 3D 스크롤 15
05 : 40
전진! 3D 스크롤 16
06 : 21
전진! 3D 스크롤 17
07 : 06
전진! 3D 스크롤 18
11 : 25
전진! 3D 스크롤 19
06 : 11
전진! 3D 스크롤 20
15 : 47
전진! 3D 스크롤 21
10 : 11
전진! 3D 스크롤 22
10 : 59
전진! 3D 스크롤 23
09 : 31
전진! 3D 스크롤 24
07 : 00
전진! 3D 스크롤 25
07 : 18
전진! 3D 스크롤 26
05 : 10
전진! 3D 스크롤 27
10 : 46
마치며
마무리 인사말
01 : 20

수강 후기

5.0
6개의 수강평
튼튼영어김포중앙본부 14시간 전
이정도로 수준있는 강의를 이정도 가격에 배울수 있다고 생각못했습니다 잘 구성되고 디자인된 예제가 난해하고 햇갈리기 쉬은 개념들을 쏙쏙 이해하게 해주네요 정말 잘 봤습니다 혹시 수강 고민하시는 분들 걱정마시고 시작하세요 ㅋ 최고의 강의입니다 엄지 척 척 척 !!
스튜디오밀 프로필

스튜디오밀 13시간 전
개념 이해에 도움을 많이 받으셨다니 좋네요 ^^ 앞으로도 도움 될 만한 수업들 잘 만들어 볼게요. 감사합니다!!

소윤호 1일 전
실무에 자주 사용하는 요소들이 하나 하나 나와서 정말 좋았습니다. 그리고 평소에 인터렉션한 속성에 관심이 많아서 찾아봤지만 큰 도움이 되진 않았었는데... 이 강좌를 듣고 나서 많은 부분이 정리된것 같습니다. 그리고 강사님이 자바스크립트 설명할때 제이쿼리랑 같이 비교 설명을 해주셔서 그점도 정말 좋았습니다.
스튜디오밀 프로필

스튜디오밀 17시간 전
도움이 된 부분을 세세하게 짚어주셔서 감사합니다. 좋은 말씀도 감사드립니다 ^^

노경환 1일 전
강의 잘들었습니다 3D 스크롤 웹사이트의 소스코드를 제공한다고 하는데 어디서 받을수있을까요?
스튜디오밀 프로필

스튜디오밀 1일 전
3D 스크롤 예제 챕터 첫번째 강의 열어보시면 영상 아래에 다운로드 버튼이 있습니다 :) 잘 들어주셔서 고맙습니다 :)

최우석 3일 전
프론트/백엔드가 아닌 인터렉션을 위한 최고의 강의입니다!! 학원에서는 js는 건너뛰고 오직 jquery 사용법만 알려주는 경우가 많은데 이 강의는 순수한 js의 구동방식을 자세히 알려주셔서 원천기술에 대한 지식이 차곡차곡 쌓이는 느낌입니다!! 강사님 목소리도 너무 좋으시고 예제도 재밌어서 시간가는줄 모르고 들었네요!! 강의 듣고 실무에서도 라이브러리 없이 작업하는중입니다!!
스튜디오밀 프로필

스튜디오밀 3일 전
도움 받으셨다니 보람차고 좋네요! 좋은 말씀 감사합니다 :) 원천 기술을 잘 이해하고 있으면 라이브러리를 선택하거나 활용하실 때에도 도움이 많이 될거에요^^

kyoungwon Lim 5일 전
역시는 역시입니다... 라이브 자바스크립트 강의를 듣고 알게되어 인프런까지 따라왔네요. 라이브강의 때 느꼈지만, 선생님께서는 입문자들도 알아듣기 쉽게끔 설명을 참 잘 해주시고, 무엇보다 수강생들 이해를 돕기위해 노력하시는 세세한 모습들이 보여서 너무 좋습니다ㅎㅎ 인터렉티브웹은 쌤만 믿고 따라가겠습니다 :) 인터렉티브웹 장인 한번 되어보겠습니다 후후
스튜디오밀 프로필

스튜디오밀 3일 전
좋은 말씀 감사합니다! 앞으로 공부하시는 데에 도움이 될 수 있도록 좋은 강의 많이 만들어 볼게요 :) 감사합니다.

김디자이너 6일 전
평소에 유튜브 스튜디오밀 강의 잘 보고 있는데요~ 인프런 강의도 역시 따봉!! 지금 중간정도까지 봤는데 같이 올려주신 자바스크립트 기초 영상이랑 같이 보니까 넘 좋습니다. 알려주신 css3d로 포폴사이트 하나 만들어 보려구요 ㅎㅎ 강추합니다.
스튜디오밀 프로필

스튜디오밀 5일 전
구독자님이시군요! 감사합니다. 유튜브 라이브도 계속 꾸준히 해나갈 예정이니 공부 하시다가 어려운 점 있으면 오셔서 말씀해주세요😁