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

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

(29개의 수강평)

395명의 수강생
55,000원
지식공유자 · 스튜디오밀
62회 수업 · 총 10시간 14분 수업
평생 무제한 시청
수료증 발급 강좌
수강 난이도 '초급, 중급, 활용'

이런 걸 배울 수 있어요

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

 

이런 분들 잘 오셨어요.

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

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

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

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

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

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

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

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

수강 대상

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

선수 지식

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

지식공유자 소개

스튜디오밀

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

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

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

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

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

교육과정

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

공개 일자

2019년 5월 10일 (마지막 업데이트 일자 : 2019년 5월 11일)

수강 후기

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

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

ssoogi0211 5달 전
아 너무 좋아요! 이해도 쏙쏙되고 자바스크립트 기초수업 듣고 이 수업을 들으니 유레카라는 소리가 절로 나옵니다!
스튜디오밀 프로필

스튜디오밀 5달 전
도움이 되었다니 저도 좋네요 :) 좋은 말씀 감사합니다.