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

💡 강의 소개

Section 2-1

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

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

Section 2-2

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

^{▲ 무한 스크롤}

Section 3

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

^{▲ Transform, Transition & CSS Animation}

Section 4

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

^{▲ 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까지 계속 응용되어 반복되고,   반복학습을 통해  자연스레 원리에 대해 이해하도록 제작하였습니다.

두번째!

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

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

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

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

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