Thumbnail
BEST 개발 · 프로그래밍 웹 개발
몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
(4.7)
58개의 수강평 ∙ 634명의 수강생

44,000원

지식공유자 : 코딩일레븐
총 22개 수업˙총 2시간 13분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
내 목록 추가 981 공유
초급자를 위해 준비한
[웹 개발, 웹앱 디자인] 강의입니다.

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

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

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

많은 인터랙티브 페이지를 제작했지만 핵심이 되는 스크립트는 반복해서 사용합니다. 
웹 인터랙티브 페이지 개발의 핵심 원리를 임팩트 있게 준비했습니다. 짧고 굵게!


강의 특징 💡 

  • 실무에서 활용도 높은 순수 Javascript 사용 (Vanilla JS)
  • 인터랙티브 개발시 필요한 필수 코드를 학습하고, 예제를 함께 만듭니다.
  • 어려워 보이는 기능들을 기초부터 알려드립니다.

강의 소개 📝

▲ [보너스 강의] 3D 페럴렉스 페이지
완성된 소스와 영상을 추가했습니다.

▲ [보너스 강의] 인터랙티브 페이징
완성된 소스(설명 주석 포함) 업로드

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

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

▲ 3D Text 모션 '완성본'을 추가했습니다.
완성된 소스를 다운로드 받으세요.

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

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

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

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

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

이 강의를 완강하시면 ✒️ 

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

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

    알려드립니다 📖

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

    다른 강의 보러가기

    현업에서 실제 사용하는 인터랙티브 스크립트
    지식공유자가 알려주는
    강의 수강 꿀팁!
    🎓
    이런 분들께
    추천드려요!
    멋진 포트폴리오 사이트를 만들고 싶은 분
    디발자가 되고 싶은 디자이너
    디자이너의 감성이 필요한 개발자
    "이거 구현 가능해요?" 라는 질문에 스트레스 받아본 분
    시간이 없으신 분 (짤고 굵게 구성)
    📚
    선수 지식,
    필요한가요?
    html, css 기초
    javascript 기초

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

    약 15년간 기업과 언론사에서 프론트개발 및

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

    http://yahao2512.com

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

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

    커리큘럼 총 22 개 ˙ 2시간 13분의 수업
    이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
    섹션 1. 마우스를 활용한 인터랙티브
    mouse move 값 활용 10:01
    requestAnimationFrame (loop, 자연스러운 움직임) 03:20
    transform, translate 값 변경 06:44
    transition, easing (가속도) 06:48
    섹션 2. (실습) 예제 사이트 같이 만들어보기 2종
    예제 사이트 1 분석 - 픽스낫띵(FIX NOTHING) 미리보기 02:09
    핵심 기능 구현 09:57
    예제 사이트 2 분석 - 뉴욕타임스 allbirds 03:15
    핵심 기능 구현 06:44
    섹션 3. (추가) 센스있는 Mouse over UI 구현
    blend-mode, multiply, 스크립트 설명 12:10
    섹션 4. 스크롤 값을 활용한 인터랙티브
    페럴랙스는 어떻게 구현되는가? 미리보기 04:31
    스크롤 높이 값 구하기 (scrollTop) 05:58
    '가로 진행 바' 제작 (스크롤 백분율 구하기) 08:23
    섹션 5. (실습) 초간단 패럴렉스 페이지 2종 제작
    '세로 진행 바' 로 변형 02:07
    html 페럴렉스 제작 준비 (더미 컨텐츠 채우기) 04:50
    scrollTop, translate 로 초간단 패럴렉스 구현 05:37
    브런치 스타일. scale, opacity 페럴렉스 페이지 구현 11:23
    섹션 6. 실전 페럴랙스, 레이어 7개 제어하기
    입체감이 느껴지는 페럴랙스 페이지 구현 11:07
    섹션 7. 보너스 강의
    인터랙티브 교차 페이징
    섹션 8. (추가) translateZ 활용한 입체적인 페이지
    추가 강의 소개 미리보기 01:42
    구조 및 JS 설명 (소스 다운) 06:16
    for문을 활용한 3D 레이어 제어 06:20
    강의 게시일 : 2020년 08월 06일 (마지막 업데이트일 : 2020년 09월 04일)
    수강평 총 58개
    수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
    4.7
    58개의 수강평
    5점
    4점
    3점
    2점
    1점
    VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
    황규연 thumbnail
    그동안 궁금했던 인터렉션인데 반복되는 수업에 이해도를 높였습니다. - 소리가 일정하지 않은 부분은 보완이 필요해 보이네요 ^^
    2020-08-15
    지식공유자코딩일레븐
    첫 수강평 감사드립니다. 촬영 중간에 마이크 셋팅 감을 잡아서 음질이 달라졌습니다. 다음부터는 주의를 더 하도록 하겠습니다~
    2020-08-24
    Songsong thumbnail
    선생님 많이 궁금했던건데 강의해주셔서 감사합니다 반응형이나 모바일웹에서 적용하는법도 자세히 알고싶습니다 ㅠㅠ 지루하지않고 너무 재밌어서 금방봐버렸어용!! 계속 반복적으로 보면서 마스터하겠습니당
    2020-08-21
    지식공유자코딩일레븐
    수강평 감사합니다! 반응형, 모바일 웹에서 적용하는 방법이라...대략 비슷하기는 하지만, stageResize를 이용하는 샘플을 더 만들걸 그랬나봐요. AS 방법을 생각해보도록 하겠습니다. 감사합니다.
    2020-08-22
    연봉올리기 thumbnail
    현업 퍼블리셔고, 현실적으로 js 필요성이 느껴져 이제 막 닥치는대로 배우고 있는 js 초보입니다 :) 이 강의를 구매하게 된 가장 큰 이유는.. 인트로 영상에 빨대 나오는 사이트 보고 바로 결제하게 됐어요. 실제로 현업에서 프로젝트 작업할 때 저 사이트를 레퍼런스로 받은 적이 있었거든요^^;; 이러한 이유로 저는 바로 결제했습니다만.ㅎㅎ 강의 구매를 고민하고 계신 분들께 제가 개인적으로 느낀점을 공유드립니다. (현재 50%정도 들었고, js는 저도 초보라.. 비기너입장에서 공유드립니다.) 1. 정말 왕초보 유형 - 바닐라js는 들어만 봤다 - addEventListener 라는 단어는 들어보기만 했다 - js로 특정 요소를 어떻게 가져오는지 모른다 등.. 본인이 스스로 기초 지식이 부족하다고 판단이 되신다면 다른 강사님들의 js 이론 강의를 먼저 들은 후에 이 강의를 들으시는 것을 추천드립니다. 2. 그래도 산출물이 나오긴 하는 유형 - 혼자서 고퀄리티의 코드를 짤 수 없을 뿐이지 if문을 100개를 써서라도 어쨌든 결과물은 낼 수 있다 - 적어도 남이 짠 코드 흐름은 파악할 수 있다 여기에 해당한다면 들어도 됩니다. 개인적으로 굉장히 효율성있는 강의라 생각합니다. 현업에서는 특정 기술만 빠르게 캐치해서 적용해야할 때도 있는데, 이 강의가 딱 그렇게 느껴지거든요. 짧은 시간안에 핵심은 다 들어있어요. 문제는 핵심만 있다보니 이론이 부족하다고 느껴질 수 있는데요, 이론은.. 구글신이 있으니 걱정하지 않으셔도 됩니다. 저도 헷갈리거나 더 알고싶은 부분은 구글링하면서 듣고 있어요~ 마지막으로 강사님께 한가지 작은 요청사항이 있습니다! 화면에 나오는 VSCode 폰트 사이즈가 작은 것 같아요 ㅠㅠ 추후 신규 강좌가 등록된다면 폰트사이즈 조금만 키워주실 수 있으실까요? :) 그리고 이 강의의 보강편으로 수강평에 언급된 리사이즈나 모바일 버전 강의가 나와도 좋을 것 같아요. 어찌됐든 신규 강의가 나오기전까지 계속 반복해서 듣고있을게요. 감사합니다 👍👍
    2021-01-12
    지식공유자코딩일레븐
    와 이렇게 긴 수강평은 처음입니다. 정말 감사드립니다 ^^ 실제로 지인에게 메신져 등으로 질문 받았던 것 중에서 골라서 강의로 제작해봤습니다. 현업에서 많이 쓰이는 것들이기도 하고요. 수업에 나오는 코드가 짧지만 응용하면 정말 다양한 업무를 처리할 수 있어요~ 실무에 도움이 되셨으면 좋겠습니다. 헛헛. 물론 다음 강의도 실무에서 바로 사용할 수 있는 내용으로 준비중입니다. 그럼 즐거운 한 해 되세요~ (빨대 사이트 같은 three.js 강의도 하고 싶네요 언젠가는!)
    2021-01-12
    이형주 thumbnail
    재밌습니다!
    2020-09-16
    지식공유자코딩일레븐
    수강평 감사합니다! (큰 힘이 됩니다 ㅜㅜ) 더 좋은 모습으로...
    2020-09-16
    LIZ.B thumbnail
    인터랙티브 웹 수업을 몇가지 들었는데 기본적인 원리를 배울수 있어서 매우 좋았습니다. 감사합니다.
    2020-09-03
    지식공유자코딩일레븐
    Joonsol님 수강평 감사드립니다! 추가로 더 드릴수 있는 방법을 생각해보도록 할게요~ ^^
    2020-09-03

    44,000원

    내 목록 추가 981 공유
    지식공유자 : 코딩일레븐
    총 22개 수업˙총 2시간 13분
    평생 무제한 수강
    수료증 발급 강의
    입문 초급 대상 중급이상
    수강 전 궁금한 점이 있나요?
    문의하기
    문의
    지식공유자 되기
    많은 사람들에게 배움의 기회를 주고,
    경제적 보상을 받아보세요.
    지식공유참여
    기업 교육을 위한 인프런
    “인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
    자유롭게 학습하는 환경을 제공하세요.
    인프런 비즈니스