몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
수강정보
(9개의 수강평)
97명의 수강생
25% 할인, 23시간 남음
33,000원
44,000원
지식공유자 : 코딩일레븐
18회 수업 · 총 1시간 59분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 초급
코딩일레븐의 다른 강의 연관 로드맵
아직 다른 강의가 없어요
연관 로드맵이 없어요

이 강의는

짧은 시간에 실무에서 가장 많이 사용하는 인터랙티브 스킬을 알려드립니다.

이런 걸 배워요

  • 실무에서 자주 사용하는 인터랙티브 컨텐츠 제작 스킬
  • 모션에 감성을 더하는 easing (가속도)
  • 몇 줄로 끝내는 페럴랙스 스크롤 효과
  • 실무에서 바로 사용 가능한 코드

몇 줄의 코딩으로 인터랙티브 사이트를 개발해보자!

많은 인터랙티브 페이지를 제작했지만 핵심이 되는 스크립트는 반복해서 사용합니다. (조금씩 바꿔가며)

웹 인터랙티브 페이지 개발의 핵심 원리를 임팩트 있게 준비했습니다. 짧고 굵게!

강의 소개 📝

인터랙티브 컨텐츠를 제작하는 데 필요한 기본기
초보자 눈높이에서 차근차근 알려드립니다.
(트랜스폼, 트랜지션, 이징(가속도) 처리 방법 등)

▲ 단 몇 줄의 코드로 구현하는 해외 사이트 클론
(사이트 링크)

▲ 3D Text 모션 '완성본'을 추가했습니다.
(2020.09.10)

[보너스 강의] 센스있는 마우스 모션 효과 추가
(소스를 포함한 보너스 강의 계속 추가 예정)

▲ 페이지 스크롤을 이용한 초간단 페럴렉스 페이지

실무에서 바로 사용할 수 있는 예제
(강의에서 더 많은 예제를 확인해 보세요)

▲ 모바일에서 볼 수 있는 이런 효과를 배워봅니다.

▲ 다중 레이어 제어를 통한 리얼 페럴랙스 효과
(직접 제작한 이미지를 제공합니다)

▲ [보너스 강의] 인터랙티브 클론 추가 예정!
(앞부분 먼저 수강하고 계세요)

강의 특징 💡 

  • 실무에서 더 활용도 높은 순수 Javascript로 강의 준비를 했습니다. (수업 노트에 제이쿼리도 추가) 
  • 인터랙티브 웹 개발에 필요한 필수 코드를 학습하고, 예제 웹 페이지를 함께 만들어봅니다.

이 강의를 완강하시면 ✒️ 

    10년 이상 실무에서 반복 사용하고 있는 인터랙티브 스킬 몇 가지를 확실히 배우게 됩니다. 아마 평생 반복해서 사용하게 되실겁니다. (진심!) stageResize 이벤트 등 중요한 여러 기능도 자연스럽게 습득하게 됩니다.

    완강하시면 평소에 봤던 멋진 사이트들이 어떤 방식으로 만들어지는지 눈에 보이실 겁니다.

     

    알려드립니다 📖

    • 수업에 사용된 에디터는 VSCODE (비주얼 스튜디오 코드) 입니다.
    • 초반 수업은 온라인으로 진행하셔도 됩니다. -> https://jsbin.com/ 
    • 영상 하단 '수업노트'를 참고 해주세요. 영상에서 부족한 부분을 설명해 놓았습니다.

    도움 되는 분들

    • 멋진 포트폴리오 사이트를 만들고 싶은 분
    • 디발자가 되고 싶은 디자이너
    • 디자이너의 감성이 필요한 개발자
    • "이거 구현 가능해요?" 라는 질문에 스트레스 받아본 분
    • 시간이 없으신 분 (짤고 굵게 구성)

    선수 지식

    • jQuery, javascript 완전 기초
    • html, css 기초

    지식공유자 소개

    코딩일레븐이라는 부캐(부 캐릭터)로 활동을 시작했습니다.
    10년 이상 프론트개발 및 인터랙티브 사이트 제작을 했고
    현재도 재미있는 작업을 많이 하고 있습니다.

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

    교육과정

    모두 펼치기 18 강의 1시간 59분
    섹션 1. 마우스를 활용한 인터랙티브
    4 강의 26 : 53
    mouse move 값 활용
    10 : 01
    requestAnimationFrame (loop, 자연스러운 움직임)
    03 : 20
    transform, translate 값 변경
    06 : 44
    transition, easing (가속도)
    06 : 48
    섹션 2. (실습) 예제 사이트 같이 만들어보기 2종
    4 강의 22 : 05
    예제 사이트 1 분석 - 픽스낫띵(FIX NOTHING)
    02 : 09
    핵심 기능 구현
    09 : 57
    예제 사이트 2 분석 - 뉴욕타임스 allbirds
    03 : 15
    핵심 기능 구현
    06 : 44
    섹션 3. (추가) 센스있는 Mouse over UI 구현
    1 강의 12 : 10
    blend-mode, multiply, 스크립트 설명
    12 : 10
    섹션 4. 스크롤 값을 활용한 인터랙티브
    3 강의 18 : 52
    페럴랙스는 어떻게 구현되는가?
    04 : 31
    스크롤 높이 값 구하기 (scrollTop)
    05 : 58
    '가로 진행 바' 제작 (스크롤 백분율 구하기)
    08 : 23
    섹션 5. (실습) 초간단 패럴렉스 페이지 2종 제작
    4 강의 23 : 57
    '세로 진행 바' 로 변형
    02 : 07
    html 페럴렉스 제작 준비 (더미 컨텐츠 채우기)
    04 : 50
    scrollTop, translate 로 초간단 패럴렉스 구현
    05 : 37
    scale, opacity 값 이용하여 페럴렉스 페이지 구현
    11 : 23
    섹션 6. 실전 페럴랙스, 레이어 7개 제어하기
    1 강의 11 : 07
    입체감이 느껴지는 페럴랙스 페이지 구현
    11 : 07

    공개 일자

    2020년 8월 6일 (마지막 업데이트 일자 : 2020년 9월 4일)

    수강 후기

    4.3
    9개의 수강평
    default_profile.png
    이형주 13일 전
    재밌습니다!
    코딩일레븐

    코딩일레븐 13일 전
    수강평 감사합니다! (큰 힘이 됩니다 ㅜㅜ) 더 좋은 모습으로...

    default_profile.png
    황규연 1달 전
    그동안 궁금했던 인터렉션인데 반복되는 수업에 이해도를 높였습니다. - 소리가 일정하지 않은 부분은 보완이 필요해 보이네요 ^^
    코딩일레븐

    코딩일레븐 1달 전
    첫 수강평 감사드립니다. 촬영 중간에 마이크 셋팅 감을 잡아서 음질이 달라졌습니다. 다음부터는 주의를 더 하도록 하겠습니다~

    default_profile.png
    keshoho 18일 전
    자바스크립트 기초부터 강의만 듣다보니 지루했는데, 간단하고 쉬운 예제를 접하니 재미있네요. 강사님 질문에 대한 답도 빠르시고 쉽게 따라 할 수 이어 좋네요.
    코딩일레븐

    코딩일레븐 18일 전
    수강평 감사드립니다. 추가 강의 영상도 곧 업로드 예정입니다. 즐거운 주말 되세요

    수강 문의

    • 반가우면반갑다고해 프로필 반가우면반갑다고해
      2020-09-25 68522

      쌤 혹시 이 수업에 제이쿼리가 사용되나요? 혹시 JS가 필요한부분에서는 순수 바닐라JS로 하나요 제이쿼리를 사용하나요?.. 이 수업을 망설이고있는데요, 저는 제이쿼리 들어간건 별로라 ㅠㅠㅠ 답변 부탁드립니다!

      코딩일레븐
      코딩일레븐
      코딩일레븐
      2020-09-25 72348

      강의 전체가 순수 바닐라 JS로 되어있습니다. 문의 감사드립니다. ^^

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