초보자도 만들 수 있는 애플 스크롤 인터렉션. 1편 자바스크립트
초보자도 만들 수 있는 애플 스크롤 인터렉션. 1편 자바스크립트
수강정보
(8개의 수강평)
145명의 수강생
19% 할인, D-7 / 5개월 할부시
월 19,580원
97,900원 121,000원
지식공유자 : 깡코딩
47회 수업 · 총 6시간 20분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 초급
깡코딩의 다른 강의 연관 로드맵

이 강의는

단순히 특정 사이트를 따라 만드는 강의가 아니라 지식공유자가 공유하는 스크롤 인터렉션 노하우, 핵심요소를 기초부터 탄탄히 배워 애플 등 국내 기업에서 많이 사용하는 UI 스크롤 인터렉션의 다양한 기법들과 모션 등을 배우고 만들어 봅니다.

이런 걸 배워요

  • 스크롤에 반응하는 인터렉션의 원리를 다양한 예제를 통해 알려드립니다
  • 애플에서 사용하는 인터렉션을 만드는 방법
  • 실무에서 자주 사용하고 실무에 적용 가능한 인터렉션 기법
  • 모션그래픽의 기본 (실무기준)
  • 패럴럭스 기법
  • 부담갖지 마세요. 강의가 끝나고 나면 여러분은 스크롤을 활용한 인터렉션 만들기의 달인이 되어 있을테니까요

깡코딩과 함께 배우는 재미있는 UI 스크롤 인터랙션! 

전체강의 미리보기 영상

바로보기 (클릭)

💡 강의 소개

Section 2-1

스크롤 백분율 구하기입니다.
화면 왼쪽 텍스트를 다 읽을 쯤이면 게이지가 모두 차오른 걸 알 수 있습니다.

섹션2

▲ 스크롤에 따라 차오르는 게이지 바

Section 2-2

섹션 2에서는 네이버나 구글 등에서 사용하는 무한스크롤 원리에 대해서 배워보도록 하겠습니다.

섹션2-무한스크롤

▲ 무한 스크롤

Section 3

섹션 3에서는 초보자 분들을 위한 기본적인 트랜지션, 트랜스폼, 벤더 프리픽스를 알아보고
CSS Animation과 트랜지션 가속도 처리에 대해서도 알아봅니다.

트랜지션 기본

▲ Transform, Transition & CSS Animation

Section 4

섹션 4에서는 앞서 배운 기본적인 스크롤 원리와 CSS Animation을 활용해 다음과 같이 간단한 패럴럭스 효과를 만들고 스크롤 특정 지점에서 변경되는 애니메이션 효과를 알아봅니다.

PARA

▲ Parallax Scrolling Animation

Section 5

섹션 5에서는 위아래로 스크롤할 때 화면 크기만큼 위아래로 따라 이동하는 인터렉션을 배워보고,
앞서 배운 CSS Animation과 패럴럭스 효과를 응용한 다중 패럴럭스 효과도 구현해봅니다.

▲ Multi Parallax Scrolling

Section 6

섹션 6에서는 다섯 가지 css모션 효과와 javascript와 css 애니메이션으로 만드는 날짜 카운트 효과를 만들어 보고 해당 섹션 위치에 도착하면 만들었던 모션을 플레이하는 방법을 배워봅니다.

▲ 다양한 모션 효과

Section 7

섹션 7에서는 섹션을 고정시키고 처리하는 인터렉션을 배워봅니다. 다음과 같이 인트로 텍스트가 사라지고, 검은색 배경문이 열리면서  뒷배경 이미지가 줌아웃 되며 등장하고 마지막으로 엔딩 텍스트가 나타나는 스토리가 있는 인터렉션을 배워봅니다.

▲ 스토리가 있는 인터랙션 만들기

Section 8

섹션 8에서는 상품 이미지를 오른쪽에 고정시키고 이미지와 텍스트 내용을 매치시켜 만드는 인터렉션을 배웁니다.

▲ 상품 이미지에 맞는 텍스트 인터랙션 만들기

Section 9

섹션 9에서 배우게 될 예제는 컨텐츠를 고정시키고 여러 장의 이미지를 캔버스에 드로우하며 만드는 비디오 인터렉션입니다. 다음과 같이 제품 설명을 처리하는 부분도 알아봅니다.

▲ 여러 장의 이미지를 캔버스에 드로우해 만드는 인터랙션

Section 10-1

섹션10이 추가되었습니다 섹션10 UI는그동안 배웠던 기본기를 토대로 만들어졌고 지식 공유자와 함께 만드는 수업( 입니다 (3D효과는 IE브라우저 미지원. 모바일 기기와 크롬 파이어폭스 사파리 오페라에서 지원합니다)

▲ 스크롤을 할때 섹션 위치에 반응하는 네비게이션 활성화, 섹션의 제목과 매치되어 변경되는 타이틀 텍스트, 섹션마다 변경되는 텍스트 컬러 앞서 배운 강의를 응용해 다음 3가지 기능을 가지고 있는 UI를 구현해봅니다.

Section 10-2

css를 활용해 3D모델을 만들고 스크롤을 할때 변형 되도록 구현해봅니다마치 한편의 CF같지 않나요??

▲ css를 활용해 3D 모델 만들어보기

Section 10-3

간단하게 따라해보는 응용편 앞서 배운 3d모델에 이미지를 적용해 3d사물을 만들어 보고 스크롤을 할때 조금더 입체감 있게 움직이도록 구현해봅니다.

▲ 비디오나 대량의 이미지를 사용하지 않아도 기본적인 3d효과를 구현

Section 10-4

앞서 배운 3d모델에 각각의 섹션 이미지를 적용해 섹션에 맞는 이미지로 변경되도록 처리합니다

다음 효과를 응용하면 섹션별로 바뀌는 3d사물을 구현할 수 있겠죠??

▲ 섹션 이미지와 3D모델 이미지 매치

값 하나를 수정해 4차원공간 느낌의 효과와 이런 라인효과도 만들 수 있어요!

▲ 값 하나 수정해서 이런것도 가능하다니?? :D

PS. 섹션10 강의에 나오는 인터렉션은 클론이 아닌 지식공유자의 아이디어로 만들어진 인터렉션입니다.

Section 10-5 도전 과제

본 수업은 앞서만든 섹션10예제를 커스텀하는 도전 과제 수업입니다.

미션1. 섹션에 진입시 한번 실행 되어야 할 함수계속 실행되어야할 함수를 분리시켜 보세요

도움이 필요할때 수업 영상을 참고하세요 :D

Section 10-6 도전 과제

본 수업은 앞서만든 섹션10예제를 커스텀하는 도전 과제 수업입니다.

▲ 상품을 디테일하게 소개하는 UI를 구현해봅니다

미션1. 첫번째 섹션에 검은색 딤드를 추가하고 스크롤을 할때 배경색이 천천히 등장하도록 만들어보세요

미션2. 2~4번째 섹션에 도착할때 휴대폰이 회전 하도록 만들어보세요

스스로 도전해 만들어보고 도움이 필요 할 경우 수업 영상을 참고하세요!

Section 11

섹션11은 SVG 와 영상으로 만드는 인터렉션입니다 

앞서 배운 스크롤 수식을 활용해서 스크롤을 할 때  SVG 라인을 그리고 영상이 등장하는 인터렉션을 아주 쉽게 만들어봅니다

- 10월 말 추가예정 -

▲ SVG와 영상활용 인터렉션

깡코딩 오픈소스 BONUS UI

PS. 실무에서 활용 가능한 보너스UI는
강의가 없고 예제 코드만 있습니다!

▲ 캔버스 원 그리기 - 인터렉티브한 사이트 또는
간단한 도넛차트를 만들때 사용하면 좋습니다.

▲ 이미지 파노라마 - requestAnimationFrame으로 구현된 파노라마입니다.
재귀호출과 파노라마 무한루프 원리에 대해 공부해 보세요.

▲ 이미지 탭 - 기본중에 기본 페이드효과와
슬라이드 되는 버튼 효과에 대해 공부해 보세요.

▲ 모달 덜컹 싫어요:(
모달을 열며 스크롤바를 숨길때 생기는 덜컹거림 해결!
어떻게 구현할까요?? 아주 쉬운 코드로 공부해 보세요

대단한건 아니지만 예전에 취준생 분들, 신입 분들, 자바스크립트가 약한 분들을 위해 오픈 소스를 만들어 커뮤니티에 공유 했던 오픈 코드입니다 :D (신나는 마음으로 만들었었네요) 

위 코드 역시 인프런 수강생님들께 도움이 됐으면 하는 바램으로 강의 예제 파일에 보너스 UI로 첨부하였습니다 :D 예제 파일에 보시면 bonus_ui폴더에 있으니 잘 활용해 주시길 바라겠습니다 :)

보너스UI는 강의는 없지만 스스로 로그도 찍어보고 코드도 변경해보면서 공부해보고 사용해 보시길 바라겠습니다. 나중에 시간이 되면 유튜브를 통해 무료 강의로 올릴 예정이니 코드 분석이 어려운 분들은 나중에 유튜브를 참고해 주세요 :D

💡 강의 특징

1. 실무에서 사용하는 인터렉션을 만드는 노하우를 그대로 알려드립니다.
• 여러분의 연봉을 급상승시켜주는 인터렉션을 만드는 방법을 아주~ 디테일하게 설명해드립니다.

2. 자바스크립트를 잘 몰라도 배울 수 있도록 설명합니다. 
• 자바스크립트 부분은 최대한 자세하게 설명해드립니다. 먼저 변수 선언 부분과 함수에 대해 소개하고, 프로그램 실행 순서대로 읽어가며 하나하나 설명해드리기 때문에 강의에 나오는 패턴만 달달 외워도 스킬을 습득할 수 있도록 만들었습니다.

3. 응용되어 만들어진 예제 중심의 학습
• 반복되는 패턴을 응용해 다양한 예제와 함께 만들어, 한번 보고 끝나는 강의가 아닌 머릿속에 남는 강의를 만들려고 노력했습니다. 보다 쉽게 이해하고 활용할 수 있기를 기대합니다. :)

4. 최대한 쉽게 설명해드립니다.
• 제가 프로그래밍을 처음 시작했을 때 이해가 되지 않아 너무 어려웠습니다. 그래서 초보자 분들의 고충을 알기에... 최대한 쉽게 이해할 수 있도록 코드를 작성했으며 쉬운 단어를 선택해 설명해드립니다.

5. 지루하지 않도록 제작하였습니다.
• 중간에 약간씩 틈이 생기면 지루하기 마련인데요. 타이트한 편집으로 쉴 틈 없이 설명합니다. 한번에 딱 5분~15분만 집중해보세요!

6. 코드의 양을 최대한 줄이려고 노력했습니다 :)
• 코드가 너무 길어지면 배우기도 힘들고 습득하는데도 시간이 오래 걸리죠? 최대한 짧고 간결하게 만들려고 노력했습니다. 여러분의 시간은 소중하니까요!

7. 코드를 작성하는 시간을 줄였습니다.
• 불필요하게 코드를 작성하는 시간을 줄이고 작성한 코드의 핵심적인 부분을 이해할 수 있도록 설명하고 필요에 따라 코드를 작성하는 방법으로 진행합니다. 코드를 작성하며 강의했다면 강의시간은 20시간이 넘었을 겁니다. 여러분은  요약해 놓은 핵심만 반복 학습하면 됩니다.

8. 핵심만 설명드립니다.
• 여러분의 시간은 소중하니까요! “디테일하게 알면 더 좋지만... 당장 몰라도 되는” 것들은 과감하게 제외하였습니다.

9. 잡담을 최소화합니다.
• 여러분의 시간은 소중하니까요! 잡담이라든지 불필요한 설명은 과감히 버렸습니다.

10. 예제코드 줌인 아웃 편집.
• 예제코드 줌인  편집으로 모바일 기기 화면에서도 코드를 알아보기 편리하도록 만들었습니다. 등교길, 출근길에도 잠깐의 시간을 투자해 보세요 :D

💡 알려드립니다

  • 초보자를 위한 스크롤 인터렉션 1편에서는 스크롤 인터렉션의 기본기를 확실히 배우도록 제작 되었습니다. 본인의 실력이 중급 이상이라면 2편을 기다려주세요 :D 
  • 본인의 실력이 중급인데 스크롤 인터렉션 스킬을 배우기 위해 이 강의를 들으실 분들에게 미리 알려드립니다. 해당 강의는 초보자 분들에게 도움이 되도록 설명되어 실력이 중급 이상이라면 강의 내용이 아주 쉬울 수 있습니다
  • 해당 강의는 초보자 기준으로 설명되어 제작되었습니다. 입문자 분들은 css와 html의 기본기가 확실히 있어야 원활하게 강의를 진행할 수 있습니다.
  • html, css, javascript 기본기가 없다면?? 제 생각에 무작정 따라해도 충분히 배울 수 있을 거라 생각합니다 ^^;; 하지만 아주 많이 반복 시청해보고 코드를 수정하고 로그를 찍어보며 본인의 코드로 만들어야겠죠??
  • 열심히 만든 소스코드를 제공해드립니다 :) (사용된 오픈소스 라이브러리 - jQuery)
  • 깡코딩 유튜브 채널(클릭하면 바로가기)을 개설했습니다. 앞으로 이 채널에는 초보자분들을 위한 기본적인 강의와 꿀팁 최신 IT 소식 등을 전할 예정입니다.

💡 예상 질문 Q&A

Q. 비전공자도 들을 수 있나요?
A. 비전공자라도 HTML의 기본, 기본적인 CSS width, color, position 등의 속성만 알고 있다면 충분히 활용할수 있도록 강의를 만들었습니다.

💡 스크롤 인터렉션 1편을 효율적으로 학습하는 방법!

첫번째!

수업 예제코드를 미리 준비해두고 강의 영상과 비교하며 학습해보세요   강의에서 설명하는 변수,수식을 이해하기 어렵다면 퍼즈 버튼을 누르고 CONSOLE.LOG로 확인하고 넘어가세요!

두번째!

섹션 2부터 차분히 시청하며 스크롤 인터렉션 원리에 대해 꼭 이해하기! 강의를 중간부터 보시는 분들이 계신 듯한데 스크롤 인터렉션 강의1편의 수업 내용은 섹션 2부터 9까지 계속 응용되어 반복되고, 반복 학습을 통해 자연스레 원리에 대해 이해하도록 제작하였습니다.

세번째!

코드를 테스트하는 부분은 완성되어 있는 예제 코드를 직접 수정해 보고 수식과 관련된 변수들은 로그를 찍어보며 개인적인 시간 투자를 통해 꼭 복습해 보는 것을 추천드립니다! (만약 로그를 찍는 방법을 모른다면?? 과감하게 문의주세요!)

네번째! 알아두면 좋은 점!

강의에서 코드 작성 시간을 줄이고 작성해 둔 코드를 상세하게 설명하는 데 초점을 맞추는 이유는 프로그램을 제작할 때 프로그램 실행 순서와 프로그램 전체 구조를 파악하는 게 가장 중요하기 때문입니다.

전체 구조를 파악하고 실행 순서를 이해하게 되면 프로그램을 커스텀하거나 오류가 생길때 어느 부분을 먼저 수정하고 개선해야 할지 정확하게 머릿속에 그려지게 됩니다! 프로그램의 전체 구조를 머릿속에 그리는 습관을 기르신다면 나도 모르는 사이에 프로그램 구조를 만드는데 있어서 노하우가 생기기 시작할 겁니다:)

도움 되는 분들

  • UI/UX에 관심이 많은분들
  • 모션그래픽에 관심이 많은분들
  • 애플웹사이트나 외국에서 만든 감탄사 소리가 절로나는 웹사이트를 만들고 싶은 분들
  • 창의적이고 개성이 강한 홈페이지에 관심이 많은 분들
  • 특별한 포트폴리오를 만들고 싶은 취준생 분들
  • 퍼블리싱은 잘하지만 자바스크립트에 약한 분들
  • 디자이너지만 인터렉션에 관심이 많은 분들
  • 쥐꼬리 내연봉..ㅠㅠ 연봉 올리고 싶은 분들

선수 지식

  • HTML, CSS, 자바스크립트 기본 지식 (선수 지식이 없더라도 강의에 나오는것만 달달 외워 도전해 보는것도 나쁘지 않습니다)

공개 일자

2020년 7월 29일 (마지막 업데이트 일자 : 2020년 9월 17일)

지식공유자 소개

안녕하세요. 백엔드 개발자로 시작해 프런트엔드 개발자로 전향해서 UI 개발에 푹 빠져있는 깡코딩입니다. :)

10여 년 동안 다수의 기업 홈페이지와 쇼핑몰 SI 소상공인 홈페이지를 제작하며 알게 된 UI/UX 제작 기법 노하우 등을 공유하기 위해 이 강의를 시작하게 되었습니다. 국내 여러 대기업 프로젝트를 경험했고 소상공인에게 초점을 맞춘 홈페이지 제작 사업도 하였습니다.

저는 가끔 국내 하 x사라는 커뮤니티에서 취미로 만든 애플 인터렉션과 창작 인터렉션을 공유하며 재밌는 기술을 소개했었는데요

많은 분들의 관심을 주셔서 이렇게 강의까지 만들게 되었습니다.

제가 만들어갈 강의는 표준 브라우저를 고려하고 실무에서 사용 가능한 감탄사가 절로 나오는 다양하고 멋진 인터렉션과 모션그래픽을 만드는 방법들을 알려드릴 예정이고 프론트 개발자나, 웹퍼블리셔가 솔루션을 이용해 홈페이지, 쇼핑몰 등을 바닥부터 만들 수 있는 강의도 만들 예정입니다.

그럼 강의에서 뵙겠습니다 :)

5.0
8개의 수강평
default_profile.png
프론트점령 8일 전
이 수업 장점 : 1. 친절한 코드 // 직관적이고 이해할 수 있는 코드 작성으로 어떻게 코드가 이루어있는 지 알 수 있다. 2. 친절한 강의 // 혼자 열심히 봐도 모르는 부분은 강의를 통해 자신이 어느 부분을 놓쳤는 지 알 수 있다. 전체적인 흐름을 설명해주셔서 이해하기 쉽게 설명해주신다. 3. 많은 양의 인터렉션 정보들 // 이 점이 마음에 가장 든다. 이 강의만 봐도 수많은 인터렉션을 구현할 수 있다. 코드는 제이쿼리로 구성되어 있는데 이 부분이 조금 아쉽지만, 제이쿼리를 자바스크립트로 바꾸는 연습이 되는 거 같아 단점보다는 장점으로 보인다. 마지막으로 이런 좋은 수업 준비해 주셔서 감사합니다ㅎㅎ
깡코딩

깡코딩 8일 전
안녕하세요 프론트점령님! 소중한 수강평 감사드립니다 :D 더 유익하고 도움이 되는 수업을 만들기 위해 노력하겠습니다^.^

default_profile.png
마이달링 1달 전
시간 가는 줄도 모르고 봤어용 정말로 예제들이 응용 반복되서 이해하는데 수월했습니당! 솔직히 코드만 다운로드해도 현업에서 요구하는 스킬 습득이라 돈 아깝지 않은 강의라고 생각하고 수강신청 했지만 설명까지 잘해주시니 너무 감사해여! 스킬 300% 올렸어여! ㅎㅎ 취업전에 강의를 봤다면 희망연봉을 더 높게 기재할 수 있었을 것 같아요 아쉽다는..ㅜㅜ 글구 저희 회사 대표님이 2편 빨리 올려달라고 하셔요..ㅋㅋ 추가강의 감둉!! 3d만들기 생각보다 재밌어용!ㅎ
깡코딩

깡코딩 1달 전
안녕하세요 마이달링님! 말씀만으로 감사합니다 :) 스크롤 인터렉션을 활용해 더 멋진 웹,앱 을 만드시길 바라겠습니다!! 다시 한번 힘이 되는 수강평 남겨주셔서 감사합니다!!! :D 방금 예제 파일에 보너스 UI추가 됐습니다! 다시 다운로드 해주세요^.^ 더 유익하고 도움이 되는 강좌를 만들기 위해 최선을 다하겠습니다:)

교육과정

모두 펼치기 47 강의 6시간 20분
섹션 0. SECTION1 - Are you ready? 학습 준비하기
2 강의 07 : 08
섹션 1. SECTION2 - 스크롤 인터렉션의 기본원리 이해하기
3 강의 24 : 44
2-1 기초다지기! 이동할 거리 백분율 구하는 방법
09 : 58
2-2-1 구글, 네이버에서 사용하는 무한스크롤 원리와 구현
09 : 23
2-2-2 구글, 네이버에서 사용하는 무한스크롤 원리와 구현 - 문서하단 도착원리 (보충수업) 10월10일 추가
05 : 23
섹션 2. SECTION3 - 초보자를 위한 css 애니메이션 기초 학습하기
3 강의 25 : 13
3-1 트랜지션과 트랜스폼에 대한 이해 그리고 벤더프리픽스란?
10 : 12
3-2 CSS 애니메이션과 키프레임에 대한 이해
08 : 17
3-3 애니메이션 가속도를 처리하는 방법
06 : 44
섹션 3. SECTION4 - 모션그래픽에 적용해 보는 패럴럭스 스크롤 인터렉션
5 강의 29 : 34
수업 미리 보기
01 : 13
4-1 간단한 깡코딩 캐릭터 모션그래픽 만들기
05 : 05
4-2 캐릭터 배경과 로프 만들기
06 : 14
4-3 스크롤 인터렉션 스크립트 작성하기(패럴럭스, 배경전환)
11 : 17
4-4 모바일 처리및 최종 결과물 확인하기
05 : 45
섹션 4. SECTION5 - 스크롤에 반응하는 다중 패럴럭스와 섹션이동 인터렉션
5 강의 44 : 46
수업 미리 보기
00 : 59
5-1 인터렉션에 적용할 마크업과 css구현하기(핵심알아보기)
07 : 36
5-2 섹션이동 스크롤 인터렉션 스크립트 작성하기
12 : 14
5-3-1 다중 패럴럭스 스크립트 작성하기
10 : 23
5-3-2 다중 패럴럭스 스크립트 작성하기(수식 설명 보충수업) 10월9일 추가
13 : 34
섹션 5. SECTION6 - 모션그래픽과 스크롤에 반응하는 인터렉션
9 강의 64 : 39
수업 미리 보기
00 : 55
6-1 텍스트 마스크 효과 만들기
08 : 33
6-2 오늘 날짜 카운트 스크립트 만들기
14 : 09
6-3 이미지 마스크 효과 만들기
06 : 09
6-4 텍스트 오버랩 효과 만들기
06 : 36
6-5 배경 오버랩 효과 만들기
04 : 00
6-6 스크롤이 요소의 위치에 도착했을때 실행될 스크립트 만들기
12 : 01
6-7 URL HASH를 활용해 네비게이션 리모콘 만들기
05 : 50
6-8 최종 브라우저 테스트 (버그 수정)
06 : 26
섹션 6. SECTION7 - 컨텐츠를 고정시키고 처리하는 인터렉션 (마스크 줌아웃 인터렉션)
5 강의 29 : 14
수업 미리 보기
00 : 43
7-1 컨텐츠 고정하는 css와 html 작성
06 : 35
7-2 고정한 컨텐츠에 적용될 스크립트 작성하기
08 : 21
7-3 반응형 모바일버전 작성하기
03 : 01
7-4 최종 브라우저 테스트, 그리고 모더나이저 사용법 학습 (인터넷 익스플로러 대응)
10 : 34
섹션 7. SECTION8 - 컨텐츠를 고정시키고 처리하는 인터렉션 (텍스트, 이미지슬라이드 인터렉션)
5 강의 24 : 33
수업 미리 보기
00 : 54
8-1 컨텐츠 고정하는 css와 html 작성
06 : 36
8-2 스크롤에 반응하는 이미지 슬라이드와 텍스트 처리 스크립트 작성하기
07 : 04
8-3 반응형 모바일버전 작성하기
06 : 24
8-4 최종 브라우저 테스트 (인터넷 익스플로러 대응)
03 : 35
섹션 8. SECTION9 - 컨텐츠를 고정시키고 처리하는 인터렉션 (이미지 시퀀스를 활용한 캔버스 인터렉션)
4 강의 30 : 40
수업 미리 보기
00 : 57
9-1 html,css 작성하기 (모바일 포함)
05 : 09
9-2 이미지 시퀀스를 활용한 캔버스 스크립트 작성하기
20 : 17
9-3 최종 브라우저 테스트 (인터넷 익스플로러 대응)
04 : 17
섹션 9. SECTION10 - 스크롤UI & 3D MODEL EFFECT (함께 구현)
6 강의 99 : 53
10-1 스크롤UI만들기
27 : 25
10-2 CSS 3D 모델 만들기
19 : 45
10-3 3D 모델에 사물입히기
17 : 42
10-4 UI섹션과 3D모델 이미지 매치 시키기
14 : 16
10-5 도전 과제(단한번 실행되어야할 함수와 계속 실행되어야할 함수 분리)
05 : 53
10-6 도전과제(천천히 등장하는 배경색 구현, 섹션에 도착시 3d모델이 회전 하도록 구현)
14 : 52

수강 문의

  • 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

  • iampkiron 프로필 iampkiron
    2020-08-25 56118

    자바스크립트는 아예 모르는데요 괜찮나요? css로 클론코딩 강좌 보며 따라하고 구동 원리 정도를 이해하는 단계입니다.

    깡코딩
    깡코딩
    깡코딩
    2020-08-25 67969

    안녕하세요 :D 이 강좌는 html과 css는 기초적인 부분에 대해 알고있다고 가정하고 html,css는 핵심적인 부분만 요약설명하고 JAVASCRIPT 같은 경우에는 프로그램의 전체구조를 파악하고 프로그램 실행 순서대로 한줄 한줄 읽어나가며 최대한 쉽게 이해할 수 있도록 강의하고 있습니다. 만약 프로그램의 기초가 조금이라도 없다면 이해하는데 조금 어려울수도 있습니다 :D

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