초보자도 만들 수 있는 애플 스크롤 인터렉션. 1편 자바스크립트
초보자도 만들 수 있는 애플 스크롤 인터렉션. 1편 자바스크립트
수강정보
(1개의 수강평)
36명의 수강생
30% 할인, 16일 남음 / 3개월 할부시
월 28,233원
84,700원 121,000원
지식공유자 : 깡코딩
39회 수업 · 총 4시간 24분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 초급
깡코딩의 다른 강의 연관 로드맵
아직 다른 강의가 없어요
연관 로드맵이 없어요

이 강의는

이 강의를 통해 애플 등 국내 기업에서 많이 사용하는 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에서는 다양한 모션 효과를 만들고 해당 섹션 위치에 도착하면 만들었던 모션을 플레이하는 방법을 배워봅니다.

▲ 다양한 모션 효과

Section 7

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

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

Section 8

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

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

Section 9

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

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

💡 강의 특징

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

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

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

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

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

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

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

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

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

💡 알려드립니다

  • CSS와 자바스크립트 기본기가 있어야 학습을 원활하게 진행하실 수 있습니다.
  • CSS와 자바스크립트 기본기가 없다면?? 제 생각에 무작정 따라해도 충분히 배울 수 있을 거라 생각합니다 ^^;;
  • 열심히 만든 소스코드를 제공해드립니다 :) (사용된 오픈소스 라이브러리 - jQuery)
  • 깡코딩 유튜브 채널(클릭하면 바로가기)을 개설했습니다. 앞으로 이 채널에는 초보자분들을 위한 기본적인 강좌와 꿀팁 최신 IT 소식 등을 전할 예정입니다.

💡 예상 질문 Q&A

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

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

첫번째!

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

두번째!

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

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

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

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

저도 처음 시작할때 무작정 따라서 타이핑 하는 코딩방법으로 배웠었지만 이해도 안가고 배우기도 힘들어서 무의미한 시간을 보내는 듯 하여 너무 지루했던 기억이 있습니다. 무작정  코드를 따라치며 배우는 프로그래밍 방법은 학습 능률이 떨어진다고 생각되어 과감히 배제하였습니다. 

도움 되는 분들

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

선수 지식

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

지식공유자 소개

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

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

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

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

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

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

교육과정

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

공개 일자

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

수강 후기

아직 평가를 충분히 받지 못한 강의 입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!😄️️

default_profile.png
B. 리즈 9일 전
열심히 잘 듣고 활용해 볼께요~ 감사합니다~
깡코딩

깡코딩 9일 전
안녕하세요 수강생님:) 소중한 수강평 감사합니다! 더 유익하고 도움이 되는 강좌를 만들기 위해 노력하겠습니다:)

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