🔥[새 기능 안내] 로드맵 기능 오픈
인터랙티브 웹 개발 제대로 시작하기

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

(16개의 수강평)

258명의 수강생

55,000원

스튜디오밀
평생
초급, 중급, 활용
수료증
62개 수업, 총 10시간 21분
위시리스트 추가

이런 분들 잘 오셨어요.

  • 해외 웹 어워드 사이트에서 자주 볼 수 있는 화려한 웹사이트들 처럼 창의적인 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
객체(Object)
객체 1
15 : 11
객체 2
08 : 02
객체 3
07 : 13
객체 4
15 : 43
스크롤 다루기
스크롤 이벤트 다루기
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
16개의 수강평
kyoungwon Lim 1달 전
역시는 역시입니다... 라이브 자바스크립트 강의를 듣고 알게되어 인프런까지 따라왔네요. 라이브강의 때 느꼈지만, 선생님께서는 입문자들도 알아듣기 쉽게끔 설명을 참 잘 해주시고, 무엇보다 수강생들 이해를 돕기위해 노력하시는 세세한 모습들이 보여서 너무 좋습니다ㅎㅎ 인터렉티브웹은 쌤만 믿고 따라가겠습니다 :) 인터렉티브웹 장인 한번 되어보겠습니다 후후
스튜디오밀 프로필

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

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

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