인터랙티브 웹 개발 제대로 시작하기
인터랙티브 웹 개발 제대로 시작하기
수강정보
(77개의 수강평)
1080명의 수강생

이 강의는

크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다.

이런 걸 배워요

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

 

이런 분들 잘 오셨어요.

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

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

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

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

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

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

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

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

도움 되는 분들

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

선수 지식

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

지식공유자 소개

서울에서 웹 디자이너이자 웹 개발자로 일했고 지금은 제주에서 웹사이트 만드는 일, 강의, 영상 만드는 일, 컨텐츠 만드는 일 등 해보고 싶은거 이것저것 해보며 살고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹 개발에 특히 관심이 많고 페이스북과 유튜브 "1분코딩"에서 관련 기술들을 공유하고 있어요.
무료 강의는 유튜브에, 유료 강의는 인프런에 업로드하고 있습니다.

교육과정

모두 펼치기 64 강의 10시간 48분
섹션 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. 자바스크립트 이벤트 다루기
5 강의 84 : 18
이벤트의 기본 동작
22 : 59
this와 이벤트 객체
07 : 00
움직이는 캐릭터 예제로 클릭 이벤트 익혀보기
17 : 20
이벤트 위임
14 : 03
이벤트 위임 보강 영상
22 : 56
섹션 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 스크롤
28 강의 235 : 43
전진! 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 캐릭터 구현 컨셉
07 : 20
전진! 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
13 : 13
전진! 3D 스크롤 24
07 : 00
전진! 3D 스크롤 25
07 : 18
전진! 3D 스크롤 26
05 : 10
전진! 3D 스크롤 27
10 : 46
섹션 12. 마치며
1 강의 01 : 20
마무리 인사말
01 : 20

공개 일자

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

수강 후기

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

1분코딩 2019.05.19
좋은 말씀 감사합니다! 앞으로 공부하시는 데에 도움이 될 수 있도록 좋은 강의 많이 만들어 볼게요 :) 감사합니다.

default_profile.png
ssoogi0211 2019.05.23
아 너무 좋아요! 이해도 쏙쏙되고 자바스크립트 기초수업 듣고 이 수업을 들으니 유레카라는 소리가 절로 나옵니다!
1분코딩

1분코딩 2019.05.24
도움이 되었다니 저도 좋네요 :) 좋은 말씀 감사합니다.

default_profile.png
정영훈 2019.05.31
강의 너무 재미있고 알찼습니다 ^.^~ 자바스크립트로 여러 예제를 만들면서 실제로 이런 문법을(css에서 속성선택자, 객체 등)어떻게 사용해야 하는지 알 수 있어서 좋았습니다. 특히나 그냥 코드만 보고 설명해주는 게 아니라 직접 그림도 그려주시고(perspective 쪽) 캠으로 종이 등으로 3D쪽(카드뒤집기, 마지막예제) 설명해주셔서 확실히 이해하는데 훨씬 수월하고 좋았습니다~ 그리고 flex에 대해 배울때 오뎅꼬치와 오뎅... 기억에 각인돼서 절대 잊어버리지 않을 거같아요 ㅎㅎ 이제 막 자바스크립트를 끝내고 인터렉티브웹이나 혹은 자바스크립트로 뭘 할 수 있을까 생각하시는 분 들에게 강추 드립니다! 앞으로도 인터렉트웹이나 혹은 백엔드까지 연계해서 다양한 수업들이 나오면 정말 좋을 거 같습니다. 좋은 강의 정말 잘 봤습니다 감사합니다!!
1분코딩

1분코딩 2019.05.31
정말 강의를 자세하게 보고 제대로 공부하셨다는게 느껴지네요^^ 꼼꼼하고 좋은 수강평 정말 고맙습니다! 앞으로도 유익한 수업들 잘 만들어 볼게요 :)

수강 문의

  • 랴랼랴랴리랴 프로필 랴랼랴랴리랴
    2020-08-31 58205

    안녕하세요! 포트폴리오와 작업용으로 인터렉티브 웹을 구상하고 있는 디자인 전공생입니다. 'vitra schaudepot'의 내부 공간처럼(사진을 첨부할 수 없어서 부득이하게 글로 적어놓은 점 양해부탁드립니다. 구글링하면 많이 나와요!) 웹 상에 3D 아카이빙 공간을 만들고 싶어서요. 강의에서 알려주시는 내용에 3D 오브젝트를 넣는다는 식으로 해서 구현이 가능할지 궁금합니다. (3D 오브젝트는 cinema 4D나 에프터이펙트로 만들 예정이고, 3D 파일 자체로 넣는 것이 어렵다 한다면 루프 영상으로 뽑아 진행할 계획입니다.) 어느정도 가능성이 보이면 본 인강을 수강해서 제작하고 싶어 먼저 문의드립니다.

    1분코딩
    1분코딩
    1분코딩
    2020-08-31 68811

    CSS 3D는 HTML 요소들을 이용해 처리를 하는 것이라 표현에 어느정도 한계가 있습니다. 말씀하신 것처럼 3D로 모델링된 객체를 이용해 웹에서 3D를 구현하기 위해서는 보통 WebGL을 사용할 수 있는 라이브러리인 Three.js/babylon.js/p5.js 등을 많이 이용하는데요, 이런 라이브러리들을 잘 쓰기 위해서는 자바스크립트로 인터랙션 자체를 잘 다루는 기본기가 필요하답니다. 이 강의의 3D 파트는 CSS 3D만 이용하기 때문에 따로 모델링된 3D 오브젝트를 이용하는 것은 어렵고요, 추후에 WebGL을 사용하는 라이브러리를 잘 다루기 위해 필요한 자바스크립트 인터랙션 기본기를 익히는 데에 이 강의가 도움이 된다고 말씀드릴 수 있겠습니다.

다른 수강문의 보기
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스