우리 같이 입어요! 인프런 후드티 💛
Thumbnail
추석 앵콜 할인 20% 중(D-4)
BEST 개발 · 프로그래밍 웹 개발
인터랙티브 웹 개발 제대로 시작하기
(4.9)
200개의 수강평 ∙ 2059명의 수강생

20%

44,000원

55,000원
지식공유자 : 1분코딩
총 64개 수업˙총 10시간 48분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
폴더에 추가 2150 공유
초급자를 위해 준비한
[웹 개발, UX/UI] 강의입니다.

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

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

 

이런 분들 잘 오셨어요.

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

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

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

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

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

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

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

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

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
크리에이티브 넘치는 인터랙티브 웹 구현에 관심있는 분들
남들과 다른 독특한 포트폴리오 웹사이트를 만들고 싶은 분들
개자이너, 디발자에 대한 로망을 갖고 계신 분들
평소 1분코딩과 스튜디오밀의 강의가 좋았던 분들
📚
선수 지식,
필요한가요?
CSS 기초
자바스크립트 기초

안녕하세요
1분코딩 입니다.
1분코딩의 썸네일

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

커리큘럼 총 64 개 ˙ 10시간 48분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 시작하기
준비 하기 08:57
섹션 1. CSS 변환과 애니메이션
Transform 15:52
Transition 10:01
Animation 1 09:42
Animation 2 05:44
Animation 3 미리보기 14:58
섹션 2. CSS 3D
CSS 3D 1 14:01
CSS 3D 2 15:28
CSS 3D 3 17:49
섹션 3. CSS Flex
CSS Flex 28:26
섹션 4. 인터랙티브 웹 개발을 위한 자바스크립트 시작하기
자바스크립트 워밍업 12:01
DOM 스크립트 1 10:41
DOM 스크립트 2 02:12
DOM 스크립트 3 10:55
섹션 5. 자바스크립트 이벤트 다루기
이벤트의 기본 동작 22:59
this와 이벤트 객체 미리보기 07:00
움직이는 캐릭터 예제로 클릭 이벤트 익혀보기 17:26
이벤트 위임 14:03
이벤트 위임 보강 영상 22:56
섹션 6. 예제) 3개의 문
3개의 문 1 11:16
3개의 문 2 16:43
3개의 문 3 11:21
3개의 문 4 11:45
3개의 문 5 08:16
섹션 7. 객체(Object)
객체 1 08:14
객체 2 08:02
객체 3 07:13
객체 4 15:43
섹션 8. 스크롤 다루기
스크롤 이벤트 다루기 08:44
스크롤 위치에 따라 오브젝트 조작하기 09:52
섹션 9. Transition/Animation 이벤트
섹션 10. 타이밍 제어하기
setTimeout 05:18
setInterval 01:57
requestAnimationFrame 06:50
섹션 11. 종합예제) 전진! 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 캐릭터 구현 컨셉 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. 마치며
마무리 인사말 01:20
강의 게시일 : 2019년 05월 11일 (마지막 업데이트일 : 2020년 07월 19일)
수강평 총 200개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.9
200개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
카인드패밀리 thumbnail
이정도로 수준있는 강의를 이정도 가격에 배울수 있다고 생각못했습니다 잘 구성되고 디자인된 예제가 난해하고 햇갈리기 쉬은 개념들을 쏙쏙 이해하게 해주네요 정말 잘 봤습니다 혹시 수강 고민하시는 분들 걱정마시고 시작하세요 ㅋ 최고의 강의입니다 엄지 척 척 척 !!
2019-05-22
지식공유자1분코딩
개념 이해에 도움을 많이 받으셨다니 좋네요 ^^ 앞으로도 도움 될 만한 수업들 잘 만들어 볼게요. 감사합니다!!
2019-05-22
펜잡이 개발자 thumbnail
역시는 역시입니다... 라이브 자바스크립트 강의를 듣고 알게되어 인프런까지 따라왔네요. 라이브강의 때 느꼈지만, 선생님께서는 입문자들도 알아듣기 쉽게끔 설명을 참 잘 해주시고, 무엇보다 수강생들 이해를 돕기위해 노력하시는 세세한 모습들이 보여서 너무 좋습니다ㅎㅎ 인터렉티브웹은 쌤만 믿고 따라가겠습니다 :) 인터렉티브웹 장인 한번 되어보겠습니다 후후
2019-05-17
지식공유자1분코딩
좋은 말씀 감사합니다! 앞으로 공부하시는 데에 도움이 될 수 있도록 좋은 강의 많이 만들어 볼게요 :) 감사합니다.
2019-05-19
정영훈 thumbnail
강의 너무 재미있고 알찼습니다 ^.^~ 자바스크립트로 여러 예제를 만들면서 실제로 이런 문법을(css에서 속성선택자, 객체 등)어떻게 사용해야 하는지 알 수 있어서 좋았습니다. 특히나 그냥 코드만 보고 설명해주는 게 아니라 직접 그림도 그려주시고(perspective 쪽) 캠으로 종이 등으로 3D쪽(카드뒤집기, 마지막예제) 설명해주셔서 확실히 이해하는데 훨씬 수월하고 좋았습니다~ 그리고 flex에 대해 배울때 오뎅꼬치와 오뎅... 기억에 각인돼서 절대 잊어버리지 않을 거같아요 ㅎㅎ 이제 막 자바스크립트를 끝내고 인터렉티브웹이나 혹은 자바스크립트로 뭘 할 수 있을까 생각하시는 분 들에게 강추 드립니다! 앞으로도 인터렉트웹이나 혹은 백엔드까지 연계해서 다양한 수업들이 나오면 정말 좋을 거 같습니다. 좋은 강의 정말 잘 봤습니다 감사합니다!!
2019-05-31
지식공유자1분코딩
정말 강의를 자세하게 보고 제대로 공부하셨다는게 느껴지네요^^ 꼼꼼하고 좋은 수강평 정말 고맙습니다! 앞으로도 유익한 수업들 잘 만들어 볼게요 :)
2019-05-31
최우석 thumbnail
프론트/백엔드가 아닌 인터렉션을 위한 최고의 강의입니다!! 학원에서는 js는 건너뛰고 오직 jquery 사용법만 알려주는 경우가 많은데 이 강의는 순수한 js의 구동방식을 자세히 알려주셔서 원천기술에 대한 지식이 차곡차곡 쌓이는 느낌입니다!! 강사님 목소리도 너무 좋으시고 예제도 재밌어서 시간가는줄 모르고 들었네요!! 강의 듣고 실무에서도 라이브러리 없이 작업하는중입니다!!
2019-05-19
지식공유자1분코딩
도움 받으셨다니 보람차고 좋네요! 좋은 말씀 감사합니다 :) 원천 기술을 잘 이해하고 있으면 라이브러리를 선택하거나 활용하실 때에도 도움이 많이 될거에요^^
2019-05-19
ssoogi0211 thumbnail
아 너무 좋아요! 이해도 쏙쏙되고 자바스크립트 기초수업 듣고 이 수업을 들으니 유레카라는 소리가 절로 나옵니다!
2019-05-23
지식공유자1분코딩
도움이 되었다니 저도 좋네요 :) 좋은 말씀 감사합니다.
2019-05-24
추석 앵콜 할인 20% 중(D-4)

20%

44,000원

55,000원
폴더에 추가 2150 공유
지식공유자 : 1분코딩
총 64개 수업˙총 10시간 48분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스