성장의 계절, 모든 강의 30% 할인!

Thumbnail
진짜 시작, 봄맞이 30% 할인 중(D-8)
BEST
개발 · 프로그래밍 프론트엔드

인터랙티브 개발 실무 끝장내기 [역량 강화편] 대시보드

(4.8)
50개의 수강평 ∙  1,120명의 수강생

30%

61,600원

88,000원
지식공유자: 코딩일레븐
총 47개 수업 (5시간 33분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드, 웹 퍼블리싱] 강의입니다.

실무에서 사용하는 인터랙티브 JS, CSS 노하우를 아낌없이 공개합니다.

✍️
이런 걸
배워요!
Vanilla JS 인터랙티브 개발 노하우
CSS 3D, 애니메이션, 트랜스폼, 트랜지션
생산성이 높아지는 TweenMax 사용법
StageResize , 반응형 인터랙티브
Mobile Touch 및 orientation(기울기) 활용

웹 인터랙션, 더 쉽고 + 더 창의적으로! 💎

내 손으로 만드는 트렌디한 UX.

단순 서비스 구현을 넘어 트렌디한 UX를 구현하려면 탄탄한 기본기가 가장 중요합니다. 특정 프레임워크나 플러그인에 의존하지 않고 순수 자바스크립트(Vanilla JS) 만으로 해외 유명사이트의 트렌디한 UX를 구현할 수 있습니다.

TweenMax를 이용한 화려한 모션부터 스크롤 이벤트, 반응형, 모바일 터치까지 15년간의 인터랙티브 개발 노하우를 아낌없이 담았습니다. (짧고 굵게!)

 

 


누구나 인터랙티브 개발을 할 수 있나요? 

인터랙티브 웹 모션,
혼자서도 잘 만들 수 있을까요?

“디자이너, 기획자가 어려운 효과를 원해요...”
“아이디어는 있는데 구현이 어려워요”
“자바스크립트 공부는 했는데 활용을 못해요”
“복붙해서 사용은 하는데 응용을 못하겠어요”
“퍼블리셔의 벽을 깨고 연봉을 올리고 싶어요”

저도 디자인과 출신의 개발 비전공자입니다. 기초가 부족한 게 아닌, 아예 기초가 없이 개발에 뛰어들었습니다. 고통스러울 정도로 힘들었던 경험이 있어서 어떤 게 어려운지, 어떤 부분에서 막히는지를 잘 알고 있습니다. 당시에 ‘이런 강의가 있었으면 정말 좋았겠다’는 심정으로 이번 강의를 만들었습니다. 

  • 현업에서 만날 수 있는 어려운 상황을 쉽게 풀어나가는 노하우를 알려드립니다.
  • 탄탄한 기본기를 바탕으로 창의적인 개발자가 되어 연봉을 올리세요!
샘플 포트폴리오 1 (보러가기)
샘플 포트폴리오 2 (보러가기)
외부 강연 영상

강의 특징

실제 현업에 가까운
실전형 예제

인터랙티브 기본원리
간결한 코드로 설명

지루한 이론 대신
실전으로 직행

소스 제공!
함께 보며 수업 진행


학습 내용 맛보기

Section.1

  • 변수, 랜덤, if 문, timer 등 자바스크립트 기초 활용 
  • 초간단하게 만들어보는 몇 가지 게임

Section.2

  • 인터랙티브 제작시 아주 중요한 페이징 개념 익히기
  • 같은 스크립트에 스타일을 바꾸면서 완전 다른 페이지 만들기
  • 모바일 터치 이벤트를 활용한 스와이프 기능 구현

Section.3

  • 별~이 쏟아지~는 코딩일레븐 페이지 제작
  • 별 이미지 두장으로 하는 간단한 페럴렉스 효과
  • TweenMax, scrollTo 플러그인을 이용한 쫀쫀한 화면 이동
  • 플러그인 없이 순수 자바스크립트로 구현한 버전과 비교

Section.4

  • 본격적인 TweenMax 사용 방법 설명
  • 반응형 페이지에서 필요한 stageResize 활용
  • 트윈맥스를 이용한 입체적인 랜덤 카드 모션 

Section.5

  • 위에서 배운 페이징 스크립트 응용
  • 다양하게 활용 가능한 TweenMax 랜덤 모션 제작 

Section.6

  • 3D 입체 카드
  • transform, translateZ 속성을 이용한 입체적인 표현
  • 모바일 기울기를 이용한 인터랙티브


웹에서 바로 보기 클릭


 

평균 별점 4.9 
코딩일레븐 신규 강의.

감사합니다!
수강평으로 남겨주신 다양한 의견들을
이번 강의에 반영했습니다.

지난 강의 보러가기

실무에서 바로 사용할 수 있는 인터랙티브 스킬!

자주 묻는 질문

Q. 비전공자도 들을 수 있나요?

저도 비전공자입니다 ^^ 인터랙티브 개발에 관심만 있으면 충분합니다.

Q. 강의를 듣기 전 준비해야 할 것이 있나요?

HTML, CSS 기초는 알고 들으시는면 편합니다. (CSS 전체 코드 포함되어 있습니다 ^^)

Q. 자바스크립트(JavaScript)를 잘 모르는데 괜찮을까요?

변수, 배열, 함수 등 기초적인 개념부터 시작합니다.
진행하다 모르시는 것은 질문 게시판을 통해 질문해 주세요!

수강 전 참고해주세요!

  • 영상 하단의 ‘수업노트’를 참고해 주세요. 영상에서 부족한 부분을 설명해 놓았습니다.
  • ECMA 2015(ES6) 스크립트를 사용합니다.
  • 완성된 코드를 제공합니다. 섹션 0 - 수업 3에서 파일을 다운로드해주세요.

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
취준생, 디자이너, 퍼블리셔, 프론트 개발자
해외 사이트처럼 창의적인 개발을 하고 싶은 분
JS를 복붙해서 사용은 하는데 응용이 힘든 분
단순 기능 구현에 감성을 가미하고 싶은 분
📚
선수 지식,
필요할까요?
HTML, CSS 기본지식

안녕하세요
코딩일레븐 입니다.
코딩일레븐의 썸네일

15년 이상 여러 기업과 언론사에서 front-end 개발 및

데이터 시각화, 인터랙티브 사이트 제작을 했습니다.

http://yahao2512.com

 

https://brunch.co.kr/@yahao2512

저와 함께 깃털처럼 가벼운 코딩 함께 해보시죠!

커리큘럼 총 47 개 ˙ 5시간 33분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의준비
강의 소개 미리보기 03:00
비주얼 스튜디오 코드 (vs code) 설치 08:45
전체 강의 소스 다운로드
3D 입체카드 소스 다운로드 - 추가
섹션 1. 가벼운 게임으로 배우는 자바스크립트 기본기
가위,바위,보 게임 제작 - 변수, 랜덤 11:04
이벤트 돌림판 - 랜덤, rotate 속성, transition 13:53
숫자 업.다운 게임 제작 1 - 랜덤, if문 09:56
숫자 업.다운 게임 제작 2 - 초기화, setTimeout 07:22
타이머 및 연봉 계산기 - setInterval, clearInterval 06:05
연봉 계산기 완성 10:05
섹션 2. 페이징 개념 익히기
버튼으로 페이지 교체 - 페이징 개념 미리보기 08:03
배열을 이용한 BG 컬러 변경 - 함수, transition 05:22
배너 형식 페이징 - 스크롤 애니메이션 05:51
스크롤 위치에 따른 페이지 변화 - scroll 이벤트 12:50
실습 예제 소개 미리보기 02:49
[실습] 스크롤에 맞춰 fixed된 이미지 교체 1 08:07
[실습] 스크롤에 맞춰 fixed된 이미지 교체 2 02:00
[실습] 스크롤에 맞춰 fixed된 이미지 교체 3 08:33
[실습] 나이키 운동화 사이트 구현 07:42
섹션 3. CD 플레이어 페이지 제작
실습 예제 소개 미리보기 02:01
큰 구조 및 SCSS 설명 12:08
크롬 개발자 도구 활용한 개발 방법 07:43
스크립트 제작 11:34
네비게이션 JS 구현 05:09
모바일 터치 이벤트 설명 09:02
모바일 스와이프 구현 (vanilla JS) 12:51
섹션 4. 별이 쏟아지는 코딩일레븐 페이지
실습 예제 소개 미리보기 01:58
제작 아이디어 및 레이아웃 설명 05:29
구글 폰트 추가 방법 04:33
scroll 이벤트와 페럴렉스 구현 07:48
텍스트 모션 구현 (with 트윈맥스) 08:57
TweenMax 와 scrollTo plugin 05:08
섹션 5. TweenMax 활용한 랜덤 카드 모션
실습 예제 소개 미리보기 02:38
트윈맥스를 왜 사용할까? 08:39
카드 애니메이션 제작 (easing, random) 09:25
forEach 문 활용 (delay, rotationZ) 09:36
StageResize, 모든 스크린 크기 대응 07:09
3가지 파티클 효과 제작 06:28
오브젝트 랜덤으로 뿌리기 (appendChild) 06:23
다수의 파티클 자유롭게 다루기 04:49
섹션 6. 모바일 3D 입체 카드 제작
실습 예제 소개 미리보기 02:44
3D카드 레이아웃 잡기 - css perspective, preserve-3d 13:32
css3 속성 추가 설명 - transform-origin 활용 06:57
마우스 위치에 따른 카드 회전 - mouseMove, requestAnimationFrame 10:06
모바일 디바이스 기울기 값 사용법 - device orientation 10:25
IOS (아이폰, 아이패드) 분기 처리 07:17
섹션 7. 마치며
정리 01:42
강의 게시일 : 2021년 02월 25일 (마지막 업데이트일 : 2021년 03월 12일)
수강평 총 50개
수강생분들이 직접 작성하신 수강평입니다.
4.8
50개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
공부하자 thumbnail
4
덕분에 좋은 공부 하고 갑니다. 별 5개 다 드리지 못해서 송구합니다. 사람마다 만족하는 부분이 있고, 아닌 부분이 있으니 저는 거의 다 만족했지만, 설명이 매끄럽지 못하고, 스르륵 넘어가는 부분이 좀 있어서 갠적으로 학습함에 있어서 불편한 점이 없지 않아 있었습니다. 그 외에는 바닐라 자바스크립트와 처음 접해보는 라이브러리 등을 알 수 있어서, 향후 공부하는 데 있어서 방향을 잡을 수 있어서 좋았습니다. 3d 입체 이런 것도 css, 자바스크립트 자체만으로도 다양한 효과를 주는 것이 가능하다는 사실을 알게된 이후로 뭔가 코드 뿐만 아니라 디자인적 사고에 있어서도 열린 느낌입니다. 여러모로 많은 도움을 받았고, 다음에도 유사한 강의가 나온다면 찾아 볼 것 같습니다. 감사하고 고마웠습니다
2023-02-03
티라미수 thumbnail
5
드디어 2탄이 나왔네요! 목차만 봐도 너무너무 재밌을 것 같아서 설레네요. 완강이 아쉬울 것 같은 느낌ㅠㅠ.. 아끼면서 보고싶네요ㅎㅎㅎ 제가 중요하게 생각하는 것이 기본기인데, 강사님의 수업방침과 일치해서 더 재밌게 느껴지는 것 같아요 : ) 인프런을 통해 갖고 계신 지식을 공유해주셔서 너무 감사드립니다. 항상 패럴렉스나 모션쪽은 어렵게만 느껴졌는데, 초급편과 중급편 강의를 들으면서 조금 친해졌네요 ㅎㅎ 강의 도중에 흘러간 말이지만 다음 강의는 canvas 랑 TweenMax 로 구성되어도 재밌을 것 같아요! 다음 강의도 기대하겠습니다! 꼭 올려주세요! 😆😆
2021-02-26
지식공유자 코딩일레븐
오홋. 첫 수강평입니다. 정말 감사드립니다. 편한마음으로 즐기시면서 들으실 수 있는 강의라고 생각합니다. 닉네임처럼 올해 연봉올리기 성공하시기를 기원합니다!
2021-02-26
Carrie Choi thumbnail
5
쉽게 설명해주셔서 좋았고 다음 강의도 기다려집니다ㅎㅎ
2021-03-26
지식공유자 코딩일레븐
수강평 감사드립니다~ 실무에 도움이 되셨으면 좋겠네요. 재미있는 게 생각나면 보너스 강의를 추가 하도록 하겠습니다. 즐거운 주말 보내세요~ ^^
2021-03-26
hagora thumbnail
5
예전부터 이런 인터렉션이 너무 궁금했어요! 스크립트에 대한 기본 개념은 있지만, 막상 인터렉션을 작업해야 할 때면 어떻게 풀어나가야 할지 막막하고 답답했거든요 ㅠㅜ 근데 이 강의를 통해 답답했던 마음이 풀린 기분입니다!! (상쾌 ^^) 실무로도 사용 가능한 예제들로 꾸며져서 더 좋았고, 다른 작업에도 응용해보고 싶어요~! :) 다음 강의도 기다려집니다! 좋은 강의 감사합니다!
2021-04-19
지식공유자 코딩일레븐
수강평 감사드립니다 :) 실무에도 바로 사용하실 수 있는 예제들로 준비했습니다. 제가 실제로 사용하는 코드들이기도 하고요. 도움이 되셨다니 다행입니다. 아직 초기라 수강평이 별로 없는데, 큰 힘이 됩니다 헛헛. 즐거운 하루 보내세요~
2021-04-19
우디 thumbnail
5
저는 안드로이드 개발자인데, 웹개발에 관심 있어서 수강하게되었습니다. 난이도도 적절하고 설명이 아주 기가막히네요ㅎㅎ 다른강의도 궁금해집니다. 강의가 속도감이 있어 따분하지 않아 좋네요.
2021-03-18
지식공유자 코딩일레븐
수강평 감사드립니다. 안드로이드 개발자시군요! 크으 조금이라도 도움이 되셨으면 좋겠습니다 ^^ 즐거운 하루 보내세요~
2021-03-18