Thumbnail
BEST 개발 · 프로그래밍 웹 개발
초보자도 만들 수 있는 애플 스크롤 인터렉션. 1편 자바스크립트
(4.5)
19개의 수강평 ∙ 320명의 수강생
121,000원

월 24,200원

5개월 할부 시
지식공유자 : 깡코딩
총 49개 수업˙총 6시간 43분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
내 목록 추가 448 공유
  • bigkid young 프로필 bigkid young
    2021-04-16 194973

    안녕하세요 궁금한것이 있어서 문의드립니다. 저는 현재 html, css, javascript 독학을 하고 있습니다. html, css로는 네이버, 유튜브, 관공서, 병원 사이트 등등 (동적인 기능 제외)레이아웃을 할 줄 알고 javascript는 데이터종류, 변수, 예약어, 함수 , 조건문 dom api, 메소드 체이닝, 데이터 타입 확인, (산술, 할당, 비교, 논리,삼항)연산자, 조건문 if else, 조건문 switch, 반복문for, 형변화,화살표 함수 ,llff, 호이스팅, 타이머 함수, 콜백, 생성자함수,클래스,상속,문자 ,숫자,수학,배열,객체,구조분해할당,전개연산자,복사 Q1.위 작성대로 html과 css 그리고 자바스크립트는 문법만 공부했습니다 이정도 공부 했는데 강의 듣고 충분히 소화 가능할까요? 자바스크립트 책보면 쪽수만 600백쪽 정도 되던데요.. 안되지 않을까요..? Q2.반응형 포트폴리오를 제작할 수 있을까요? +추가 질문있습니다..! q.1 그러면 저정도 문법정도는 알고 또 따로 공부를 어느정도 해야 강의를 듣는게 수월할까요 아니면 저정도면 충분할까여? q2. 그러면 반응형부터 만들줄 알아야 강의듣는게 수월할까요??

    깡코딩
    깡코딩
    깡코딩
    2021-04-16 105535

    q01. css기본과 javascript의 기본이 확실하다면 이 수업은 너무나도 쉬울겁니다. (이 수업은 스크롤 인터렉션의 원리를 이해하는게 포인트입니다) q02. 수업에서 중간 중간 반응형 모바일을 처리하는 부분을 설명하는데 딱 필요한 기초적인 부분만 설명하고 필요없는건 설명하지 않습니다. 이 문제는 반응형웹 개발 개념에 따라 받아 들이는 사람에 따라 다를수 있습니다.(입문자라면 어려울 수 있습니다)

  • junguk1403 프로필 junguk1403
    2021-03-23 177756

    혹시 선생님께서 만든것들을 반응형으로도 설명해주시나요?

    깡코딩
    깡코딩
    깡코딩
    2021-03-23 100644

    안녕하세요 :) 반응형에 대해 설명하는 섹션이 있고 아닌 섹션이 있습니다. 섹션4,7,8에서 반응형에 대한 resize시 변경되는 변수와 미디어 쿼리를 간략히 설명하는데 이 부분에 대해 이해하시면 다른 섹션 반응형 작업도 크게 어렵지 않을거라 생각됩니다 :)

  • trust7603 프로필 trust7603
    2021-03-18 175002

    정말 감사합니다!! 열심히 학습해서 UI개발자가 되도록 노력하겠습니다.

    깡코딩
    깡코딩
    깡코딩
    2021-03-18 99779

    조급해하지 말고 천천히 한발 한발 내딛다 보면 좋은 결과 있으실 거예요 :) 화이팅 하세요! :D

  • trust7603 프로필 trust7603
    2021-03-18 174999

    안녕하세요 (라이센스는 다른 강의에 사용하거나 무단 배포가 금지에요)라는 말씀은 다른 사람들에게 공유하지 않고 저만 알고 있으면 괜찮은건가요?

    깡코딩
    깡코딩
    깡코딩
    2021-03-18 99777

    네 :) 웹사이트 제작에 자유롭게 사용해도 되지만 해당 강의 자료를 활용해 유튜브나 무료,유료 강의에 사용하는것을 금지하는거에요! 무단배포는 블로그나 코드펜 등에 올리면 안된다는 말입니다(오픈소스로 배포하면 해당 수업을 수강한 수강생님들에게 큰 손실이거든요) :D

  • trust7603 프로필 trust7603
    2021-03-18 174957

    안녕하세요^^ UI개발자가 꿈인 4학년 학부생입니다. 질문이 있는데요 1. 스크롤 인터렉션 강의를 수강하면 혹시 기존에 자바스크립트로 제작한 웹 사이트에 적용시킬 수 있을까요? 포트폴리오를 준비하는데 해당 강의에 있는 것들을 추가하면 좋을 거 같아서 문의드립니다. 2. 1편 기능들을 배우고 나중에 나올 2편도 수강한다면 UI개발자를 지원할 때 도움이 많이 될까요?

    깡코딩
    깡코딩
    깡코딩
    2021-03-18 99776

    안녕하세요:D 1. 기존에 자바스크립트로 제작한 웹사이트에 적용이 가능합니다.(라이센스는 다른 강의에 사용하거나 무단 배포가 금지에요) 2. 1,2편을 떠나서 UI개발자가 꿈이라면 스크롤에 반응하는 인터렉션의 원리를 알고 계시면 좋을거라 생각됩니다^__^

  • 이정현 프로필 이정현
    2021-01-28 141293

    제공되는 첨부파일이 완성코드인가요? 완성코드가 제공 안된다는 후기가 있어서 문의드립니다.

    깡코딩
    깡코딩
    깡코딩
    2021-01-28 90826

    안녕하세요 :) 모든 섹션의 완성 코드가 첨부되어 있습니다. 감사합니다 :D

  • jeus0630 프로필 jeus0630
    2021-01-20 134731

    트윈맥스등 라이브러리를 사용해서 구현하나요 아니면 라이브러리 없이 scroll 이벤트와 mousemove이벤트등을 활용해서 구현하나요?

    깡코딩
    깡코딩
    깡코딩
    2021-01-20 89355

    안녕하세요 :) 사용하는 라이브러리는 j-query 입니다. 다른 라이브러리는 사용하지 않습니다

  • 무민 프로필 무민
    2021-01-17 131428

    애플컴퓨터가 아니라 윈도우도 적용되나요?

    깡코딩
    깡코딩
    깡코딩
    2021-01-17 88581

    안녕하세요 :) 네 윈도우에서도 작동합니다

  • ᄋᄋ 프로필 ᄋᄋ
    2020-11-25 95187

    제이쿼리는 써본 적이 없고 자바스크립트만 써봤는데 제이쿼리 기본 문법을 몰라도 수업을 들을 수 있을 지 궁금합니다. 그리고 대부분의 인터랙션을 위한 코드가 제이쿼리로 구성되어있는 지도 궁금합니다. 그리고 2편은 대략 언제쯤에 올라올 예정인 지도 궁금합니다!

    깡코딩
    깡코딩
    깡코딩
    2020-11-25 79758

    자바스크립트 언어를 이해하고 있다면 제이쿼리 기본문법은 아주 쉽게 이해할 수 있는데요 이유는 $('.선택자'), addClass, removeClass 등 이런 기초적인 제이쿼리 문법들은 순수 자바스크립트 문법과 대부분 흡사하기 때문입니다. 그리고 엄밀히 말하자면 스크롤 인터렉션 수업은 초보자 분들이 쉽게 배울수 있도록 코드를 상당히 간결하게 작성해 두었기 때문에 문법에 대한 이해보다는 스크롤 인터렉션 원리에 대해 이해하는게 중요합니다.(수식,로직, css애니메이션, 다양한 인터렉션 패턴(수업에서 다양한 패턴의 인터렉션을 다루고 있음)) 마지막으로 제이쿼리 기초 문법이 걱정된다면 제이쿼리 기초 문법을 구글등에 검색해보시고 수업을 수강할지 판단하시면 될 것 같습니다. 검색해 보시면 아시겠지만 제이쿼리 기초 문법은 상당히 쉽습니다^^(다시한번 말씀드리지만 수업에 작성된 예제 코드는 생각보다 간결하게 작성되어 있기 때문에 크게 어려움 없이 배울수 있을거라 생각되네요) 2편은 올해가 가기 전에 나올수도 있고 내년에 나올수도 있습니다. 정확한 날짜는 알려드릴수 없습니다. 감사합니다. 감기조심하세요 :D

  • Wizone 프로필 Wizone
    2020-11-21 93919

    강의 소개 영상에서 나오는 2편은 꼭 1편의 기본기가 있어야지만 쉽게 할 수 있는지 궁금하고, 또 2편은 언제쯤 올려주실 예정이신지 궁금해요!!

    깡코딩
    깡코딩
    깡코딩
    2020-11-21 79338

    안녕하세요 Wizone님 :) 스크롤 인터렉션 1편의 기본기가(기본 수식 개념 등) 없다면 2편의 내용은 어려울 수 있습니다 :) 내용이 이어지거든요! 그리고 2편이 업로드 되는 날짜는 알려드릴 수 없습니다! 감사합니다 :D

  • 이은혜 프로필 이은혜
    2020-11-16 91844

    포트폴리오를 만들려고 계획하고 있습니다. 최대한 플러그인을 사용하지 않고 다양한 기능을 구현하고 싶은데.. 본 강의는 플러그인 사용없이 자바스크립트로 구현할 수 있는 건가요???

    깡코딩
    깡코딩
    깡코딩
    2020-11-16 78778

    안녕하세요 이은혜님 :) 스크롤Ui 관련 플러그인은 사용하지 않습니다. 사용하는 라이브러리는 j-query하나입니다 감사합니다 :D

  • 블루윤 프로필 블루윤
    2020-11-06 87710

    1. HTML, CSS 와 JS 비중이 몇 대 몇일까요? 2. 해당 강의에서 습득 가능한 지식은 "웹퍼블리셔" 기준에서 몇 년차정도 수준이라고 생각하시나요? 3. 1편에서 얻는 지식만 해도 대단한 것 같은데, 2편은 어떤 식으로 준비하고 계시나요?

    깡코딩
    깡코딩
    깡코딩
    2020-11-06 77583

    1.html,css는 기본 구조와 핵심에 대해서만 설명하고 그 외 시간은 Javascript를 순서대로 읽어나가며 설명합니다.(기본적인 css속성은 설명하지 않습니다.) 2.몇년차의 수준이라고 단정 짓기는 힘듭니다. 개개인의 능력에 따라 다르기 때문인데요 제 경험상으로 말씀드리면 인터렉션이 많은 페이지는 자바스크립트를 잘하거나 경력이 많은 분들 또는 pl급이 작업합니다. 왜냐하면 평균적으로 신입분들은 인터렉션이 들어가는 페이지를 어려워하기 때문에 인터렉션 페이지 보다는 난이도가 낮은 페이지를 작업하기 때문인데요 능력에 따라 1년차라도 자바스크립트에 자신있다면 충분히 작업 가능하다고 어필할 수 있을 것입니다. 그리고 조금 더 난이도 있는 작업을 하다 보면 자연스레 본인만의 스킬과 포트폴리오가 쌓일 것이고 남들보다 빠르게 연봉도 높일 수 있을거라 생각되네요.(인터렉션 페이지를 작업한다면 PL분들이 단순 작업 페이지들은 빼줄거에요^^;) 3.2편의 커리큘럼은 말씀드릴 수 없습니다. 말씀드릴 수 있는건 2편에서는 1편의 기본기를 바탕으로 더 난이도 있는 내용을 다룹니다. 감사합니다. :)

  • nayaa 프로필 nayaa
    2020-10-17 78865

    혹시 쿠폰 적용은 오늘까지 된다고 되어있던데 적용이 안되나요? 유효하지 않다고 나와서요

    깡코딩
    깡코딩
    깡코딩
    2020-10-17 75125

    안녕하세요 불편을 드려 죄송합니다. 쿠폰 번호를 변경해 두었으니 다시 확인해보시길 바라겠습니다 :D 감사합니다.

  • 이희수 프로필 이희수
    2020-09-29 70308

    수강예정인 학생인데 개인적으로 궁금한걸 여기다가 메세지드려 죄송합니다 보통 백엔드를 수강하고있는데 화면단도 이강의를 포함해서 배우고 어느정도 터득한다면 왠만한 화면들을 구현할수 있는 정도까진 될까요? .. 예외적인 질문 죄송하지만 프론트로 전향하신 이유도 알고싶습니다

    깡코딩
    깡코딩
    깡코딩
    2020-09-29 72782

    안녕하세요 질문하신 내용은 개개인마다 차이가 있겠지만 제 생각으로는 왠만한 화면들을 모두 구현하긴 힘들거라 생각됩니다. 스크롤 인터렉션 1편에서는 해당 강의에 필요한 모션들을 만들기 위한 핵심적인 html,css를 간략하게 설명해드리긴 하는데 이 부분만 알고 모든 화면의 레이아웃을 구현하기는 힘들거라 생각 되네요^^.. 모든 화면을 구현하기 위해서는 html,css로 만들수 있는 다양한 패턴의 레이아웃을 알아야 되고 많은 디자인 시안을 퍼블리싱 해봐야 될 것 같습니다 :D 프론트로 전향한 추가 질문을 주셨군요. 간단하게 설명 드리자면 저는 전공이 컴퓨터 공학이었기 때문에 자연스럽게 프론트가 아닌 백엔드부터 시작하게 되었습니다. 처음 입사해서 일했던 곳은 행안부의 데이터 연계를 구축 보수하는 회사였구요. 데이터 연계를 하며 다양한 비즈니스 로직과 연계 통신 패턴들 다양한 서버환경 셋팅 데이터베이스 고도화 등을 접했었습니다. 마지막으로 했던 작업이 세종시가 생길때 세종시 연계 구축이었네요 여튼 데이터 연계는 웹프로그래밍전에 구축되어야하는 가장 밑바닥 작업이기 때문에 제가 좋아하는 그래픽 적인 작업과는 거리가 많이 멀었습니다. 저는 어릴적 부터 취미로 나모웹에디터를 사용해 홈페이지를 만들어 봤었고 디자인적인 요소와 플래시에 상당히 관심이 많았습니다. 그시절엔 책도 없어 혼자서 끙끙거리며 모션 그래픽을 만들기 위해 애썼던 기억이 있네요(지금처럼 인강이 많다면 주저없이 수강했을겁니다^^;)여튼 저는 백단이 아닌 앞단에서 처리하는 일들을 더 좋아하고 적성에도 잘 맞았던 거죠 그러던 중 스마트폰이 등장하게 되고 몇년 후부터 모바일 웹사이트 제작 시장이 붐비가 시작했습니다. 당시 저는 백단 지식도 있고 앞단 지식도 어느정도 있었기에 모바일 웹사이트 제작업을 해보고 싶어 어린 나이에 개인사업자를 내고 모바일웹 사이트 제작업을 시작했었습니다(제가 모바일 웹사이트 제작업을 시작할때는 모바일웹사이트가 대부분 없었답니다). 그러다보니 백단보단 디자인과 퍼블리싱 업무에 집중하게 됐고 남들과 다른 특별함을 만들기 위해 JS를 활용해 인터랙티브한 요소들을 구현함에 더 많은 시간을 투자했었고 시간이 흐르다보니 자연스럽게 프론트작업을 선호하게 된겁니다! 사실 그래서 react vuejs 같은 프론트 기술들에 대한 접근도 쉬웠었죠. 프론트 전향 이유에 대해 설명하다보니 얘기가 너무 길어졌네요^^; 자세히 얘기하자면 너무 길어지기 때문에 여기서 마무리 하겠습니다 :) 그럼 화이팅 하시고 즐거운 추석 보내시길 바라겠습니다 :D

  • 김수연 프로필 김수연
    2020-09-24 67908

    안녕하세요 전체 강의 미리보기 영상에 있는 모든 걸 배우는 게 맞나요? 미리보기 영상 뒷부분에 대한 내용도 강의에 포함되나요?

    깡코딩
    깡코딩
    깡코딩
    2020-09-24 72220

    안녕하세요 :) 강의는 섹션2부터 섹션10-4 3D 모델까지 진행됩니다. 2편에 나온다고 말한 부분은 강의 내용에 포함되어 있지 않습니다. 강의소개 아래 나와있는 커리큘럼을 참고해보세요:D

  • 도라 프로필 도라
    2020-09-24 67696

    혹시 제이쿼리 사용한다고 하셨는데, 모든 내용이 제이쿼리로 이루어져 있나요? 일부는 사용하고 일부는 사용하지 않으셨다면 직접 바꿔가면서 공부하려고 하는데..

    깡코딩
    깡코딩
    깡코딩
    2020-09-24 72147

    문의주신 내용은 개개인마다 다르게 받아 들일수 있는 문제라고 생각되네요^^; 그래도 굳이 답변드리자면 제이쿼리 문법은 많이 사용되었습니다. 강의에서 제이쿼리를 사용하는 이유는 현재 웹사이트 제작업에 종사중인 분들도 쉽게 코드를 이해하고 사용하기 편리하도록 소스코드를 제공하기 위함도 있고 비전공자분들은 국비학원 과정에서 디테일한 자바스크립트 교육보다 제이쿼리 기본정도 때는 경우가 많기 때문에 모든 분들이 쉽게 코드를 이해하고 쉽게 사용하도록 하기 위함입니다. 그리고 또 한가지 제이쿼리를 사용하면 올드 브라우저 크로스 브라우징에 유리하고 간결한 코드로 작성 가능하기 때문에 실무 웹사이트 제작에서는 99.99% 사용하는 라이브러이기 때문입니다. 디테일하게 설명하자면 한없이 길어지기 때문에 간략하게 정리하겠습니다. 지식공유자역시 java,jsp,php,javascript 등 많은 언어를 사용해봤지만 시간이 흐르면 문법은 크게 중요하지 않습니다. 프로그램을 많이 만들어보고 본인만의 스킬을 습득하는게 가장 중요하다고 생각되네요 :D 어느정도 경력이 쌓이다보면 언어가 다르고 문법이 달라도 api만 봐도 쉽게 고칠수 있을겁니다. 이렇게 쓰느냐 document.querySelector(selectors); $("selectors") 이렇게 쓰느냐의 차이정도 겠네요^.^; 그리고 직접 코드를 바꿔가면서 공부를 한다면 문법 공부는 많이될거라 생각됩니다(디테일하게 들어가서 올드 브라우저를 고려해 정규식을 만드는 공부까지 하신다면 더 좋겠네요) 도움이 되었을지 모르겠습니다. 화이팅하세요 ^.^

  • Truestar 프로필 Truestar
    2020-09-14 64199

    단순히 비교하려는 것이 아니라 배우는 입장에서는 뭘배우는지가 중요한데 같은 제목의 강의 2개가 있으면 당연 뭘들어야될지 결정은 해야되기때문에.. 이런 질문을 남기게 되었습니다.. 민감하게 생각하셨다면 죄송하구요 저는 1분코딩님 강의도 구매한사람인데요 더 배울건 없는지 물러보는 차원의 질문입니다..

    깡코딩
    깡코딩
    깡코딩
    2020-09-14 70833

    무슨 말씀인지는 이해는 하고 있습니다! 하지만 질문주신 내용은 자칫하면 다른 강사님의 강의와 비교 되도록 표현 될 수 있어 답변드리기 예민한 부분입니다. 강의 소개를 보시면 아시겠지만 초보자도 만들 수 있는 스크롤 인터렉션1 편은 스크롤 인터렉션의 핵심과 구현원리를 알고 이를 응용해 다양한 예제를 구현해 나갑니다. 그리고 앞으로 추가될 섹션10에서는 그동안 배운 것들이 어떻게 응용되어 어떤 결과물을 만들수 있는지 배울수 있는 강의가 추가될 예정이구요! 수강 고민이 많이 되신다면 섹션10 업데이트 후에 판단하시는 것도 좋을 것 같습니다!

  • Truestar 프로필 Truestar
    2020-09-14 64198

    다름이 아니라.. 강의 내용은 중복이 아니겠지만 1분코딩 님의 애플사이트 클론 과정과의 차이점을 알 수 있을까요?

    깡코딩
    깡코딩
    깡코딩
    2020-09-14 70831

    안녕하세요 :D 질문 주신 내용은 답변드리기가 애매하네요 이유는 질문자님이 문의 주신 강의를 저는 보지 못했습니다. 사실 저는 2020년 2월부터 하x사 라는 커뮤니티에 애플 인터렉션과 창작 인터렉션 스크롤 인터렉션을 만들어 소개하고 실무에서 사용하는 코드들을 공유했었습니다. 그 와중 실무에서 일하고 계신 많은 분들이 해당 인터렉션을 알고싶어 댓글을 달아주셨고 그래서 해당 강의를 만들게 됐습니다. 마지막으로 말씀드리면 굳이 비교하려고 하지 마시고 수강생님에게 도움이 될거라 생각하는 강의를 수강하시는걸 추천드립니다 :D .

  • 임권일 프로필 임권일
    2020-09-10 62530

    안녕하세요 구입할려고하는데요 이거배우면 뭐가좋나요 네이버같은데 네이버 카페 활용할수있나요?? 너무비싼거같타보여요 처음에 4만원인줄알고했는데 아니네요

    깡코딩
    깡코딩
    깡코딩
    2020-09-10 70301

    안녕하세요 :D 이 강의는 상호작용하는 인터렉션을 만드는데 초점을 맞추고 있습니다. 해당 강의에서 인터렉션이란 쉽게 말하면 사용자가 웹서핑을 하며 웹 컨텐츠와 대화하듯 상호작용하는 걸 뜻합니다. 만약 질문자님이 상품을 판매한다고 가정합시다 그렇다면 판매자 입장에서 상품을 판매하기 위해 홍보 컨텐츠를 만들겠죠? 그리고 그 컨텐츠에서 강조하고 싶은 요소들이 생길 겁니다. 핵심 내용을 소비자에게 잘 전달해야 상품의 판매율도 올라가겠지요? 위 설명과 같이 핵심 요소들을 인터렉션을 통해 강조하게 되면 소비자에게 더 빠른 이해와 핵심 요소들을 쉽게 전달할 수 있게 되는 겁니다. 그리고 스크롤 인터렉션 같은 경우에는 사용자가 자연스럽게 웹페이지를 스크롤 하면서 인터렉션이 발생하기 때문에 더욱 자연스럽고 추가 제스처 없이 소비자에 전달할 내용들을 강조할 수 있게 되는 겁니다. 그래서 애플이나 국내 대기업 삼성 같은 곳에서는 이런 인터렉션들을 자주 사용한답니다 :D 그리고 강의 비용이 비싸다고 문의주셨는데요 해당 강의에 사용된 모든 코드들은 지식 공유자가 10년넘게 이 업종에서 종사하며 고민하고 연구해서 만든 로직과 수식들이고 해당 강의를 위해서 더 쉽게 배울 수 있도록 코드들을 간략하게 풀어두었습니다 경험과 노력으로 만들어진 노하우를 여러 사람을 위해 공유하는데 어떻게 값을 매길수 있을까요?? 지식공유자는 스크롤 인터렉션 강의를 만들기 위해 긴 시간 투자했고 노력했답니다. 그리고 이 강의를 만든 이유는 인터렉션에 관심이 많고 인터렉션을 즐겨 구현하고 싶은 사람들을 위해서구요! 마지막으로 한가지 알려드리면 이 강의는 입문자,중급자가 아닌 초보자를 초점으로 만들었습니다. 중급자라면 강의가 쉬울것이고 입문자라면 html,css,js의 기초가 없을 경우 강의가 어려울수 있음을 알려드립니다:D

  • 박병찬 프로필 박병찬
    2020-09-01 58768

    인터랙션 구현들은 순수 바닐라 자바스크립트만으로 이루어지는 건가요?

    깡코딩
    깡코딩
    깡코딩
    2020-09-01 68946

    안녕하세요 :D 제이쿼리를 사용합니다 :) 제이쿼리는 코드를 단축해 주고 크로스 브라우징에 유리합니다! 수강생님이 순수 자바스크립트로만 구현하고 싶다면 부분 부분 있는 제이쿼리 코드를 수정해 순수 자바스크립트 코드로 완성해 보는것도 공부에 큰 도움이 될 것 같습니다 :D

121,000원

월 24,200원

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