Creating an interactive portfolio with R3F (React + Three.js / Typescript)

당신은 웹 사이트를 만드는 일이 즐거우신가요?

웹 사이트 게시판을 만들고 팝업창을 개발하는 일 지겹지 않으신가요?

당신은 남들과 차별화 된 웹 프로젝트를 만들고 싶으신가요?

당신 회사에서 화려한 눈에 띄는, 남들과 다른 웹 사이트를 만들어보자고 하나요?

이 웹사이트는 어떻게 만들었지? WOW한 사이트를 만들어 보고 싶나요?

이번 강의는

코딩으로 기능적인 것을 만들기 보다는 표현적인 것에 집중하여 다양한 표현 방법들을 연구하고

그 과정에서 예상치 못한 결과의 발견, 변형을 목표로 하는 Creative Coding을 다루고 있습니다.

그 중에서도 Interactive Coding의 가장 핵심인 벡터(Vector)에 대해 배울 수 있고

그것을 활용하여 차별화된 포트폴리오를 만들 수 있습니다.

강의 주제 📖

• 사용기술 : frontend DOM ( React, gsap ) / webgl ( Three.js )

  
  

당신은 이 강의에서는 frontend에서 가장 많이 쓰이는 React 프레임워크와

Web Graphic(webgl)에서 가장 많이 쓰이는 라이브러리인 Three.js를

한꺼번에 다룰 수 있는 R3F(React Three Fiber)를 배우게 됩니다.

당신은 화려한 인터렉티브 웹 + Creative Coding의 가장 중요한 개념인 벡터(Vector)에 대해

집중적으로 배우게 될 것이고, 벡터(Vector)를 이해하고 잘 활용한다면

당신이 원하는 인터렉티브한 움직임을 모두 다 만드실 수 있을 것 입니다.

어디에서도 찾을 수 없는 R3F 스택 학습으로

더 쉽고 재미있게 인터렉티브 포트폴리오 웹사이트를 만들어 봅니다.

웹 3D 인터렉티브 전문, 현직 10년차 웹 그래픽 엔지니어(Web Graphic Engineer) / 프론트엔드 개발자(Frontend Developer)의 경험과 노하우를 모두 담았습니다.

강의 특징 ✨

React와 Three.js 를 한번에! React Three Fiber(R3F)!

Interactive Coding의 기초인 벡터(Vector)의 개념부터

현업에 사용할 수 있는 다양한 예제와 종합 프로젝트 그리고 최적화 팁 까지 !

-Javascript 기초에 대해서 알고 계시다면 수강이 가능합니다.

-React에 대한 기초 개념이 있으신 분이면 좋지만 없어도 괜찮습니다.

-벡터(Vector)의 기초 개념부터 활용, 그리고 심화과정을 통한 포트폴리오 제작까지!

-웹 3D를 다루지만 강의에서는 2D 카메라(orthographicCamera)를 사용하여 작업합니다.

-실무에서 바로 사용 할 수 있도록 Typescript로 강의를 진행하고 예제 코드를 공유합니다.

-각 섹션마다 이론위주의 중요한 기초 개념을 설명 (10~25%)

-각 섹션마다 한땀 한땀 같이 하는 실습위주의 강의 (75~90%)

당신은 이번강의를 통해서 React와 Three.js(WebGL)을 한번에 다룰 수 있는 R3F에 대해 배울 수 있습

니다. 그리고 당신은 Creative Coding의 기초인 벡터(Vector)가 무엇이고 어떻게 사용할 수 있는지에

대해서 배우고, Vector를 사용하여 움직이는 4개의 예제를 다루게 됩니다. Vector의 기초를 다지면 원하는

모든 움직임에 대해 만들 어 볼 수 있습니다.

또한 인터렉티브 웹의 필수인 GSAP에 대해서 배울 수 있고 스크롤을 하면 화려하게 움직이는 3D 웹을

만들 어 볼 수 있습니다. 단순히 예쁘기만 한 화면이 아니라, 실시간으로 반응하고 움직이는 3D 오브젝트의

애니메이션에 대해 배워보세요! 각 단계별 알맞는 실습까지 직접 같이 한땀 한땀 코딩하면서 익히고 실력을

쌓을 수 있는 강의입니다.

이 강의를 통해 단순한 정적 웹에서 벗어나, 실시간 렌더링을 활용한 동적이고 창의적인 프로젝트를 만들어

보세요! 단계별로 따라 하다 보면, 어느새 여러분의 프로젝트가 마치 게임처럼 살아 움직이는 걸 느낄 수

있을 거예요 ! 

어디에서도 찾을 수 없는 R3F 스택 학습으로 더 쉽고 재미있게 3D 포트폴리오 웹사이트를 만들어 보아요!

학습 내용 📚

1. Creative Coding의 기초 중에 기초! 3D 웹사이트의 기초 중에 기초!

벡터(Vector)!에 대해서 차근차근 배워봅니다.

가장 기초적이지만 가장 중요한 개념인 벡터(Vector)에 대해 누구나 이해하기 쉽게 설명합니다!

2. 직접 코딩하고 함께 실습하며 벡터를 사용하는 방법에 대해 배웁니다.

이론을 기초로하여 한땀한땀 같이 코딩하며 학습하기 !

귀여운 '곰돌이와 꿀' 예제와 박스에 튕기는 볼(Ball) 예제를 통해 배워봅니다.

3. 벡터(Vector)를 배웠으니 이번에는 커브(Curve)에 대해서 배워볼까요?

Creative Coding에서 많이 사용하는 개념인 Sin / Cos / Tan 등 Curve에 대해서 배워보고

R3F(Three.js)의 Curve를 활용한 인터렉티브한 코딩 실습까지 진행해봅니다.

4. 인터렉티브 웹 사이트의 필수인적인 GSAP 라이브러리에 대해 배우고

마우스 스크롤 이벤트로 인터렉티브 3D 세상을 컨트롤합니다.

여태까지 배운 벡터(Vector)의 기본을 활용하여 심화과정까지 학습하는 종합 예제!

볼(Balls) 끼리 부딪히고, 중력에 의해서 떨어지고 마우스에 반응하는 종합 프로젝트!

어떻게 프로젝트 구조를 구성하고, 디버깅 할 수 있을까요? 실무에서는 어떻게 코딩을 할까요?

차근차근 하나씩 하나씩 함께 배우면서 함께 완성하는 인터렉티브 웹 포트폴리오 만들기!!

DEMO: https://cclab.taejaehan.com/

수강 전 참고 사항 📢

실습 환경

• 강의에서는 macOS - Apple 칩을 사용하지만 mac intel칩 혹은 window환경도 가능합니다.

• 사용 프로그램 : 크롬, vscode, npm(node), r3f 등

• PC 사양: CPU 2.0GHz 이상, RAM 8GB 이상, WebGL 지원 그래픽을 권장합니다

학습 자료

• 각 섹션별 소스코드 압축 파일 제공 ( zip ) 

  • 섹션 1, 2, 3 이론 및 개발환경 세팅

  • 섹션 4, 5, 6, 7 실습 프로젝트 (소스파일 제공)

  • 섹션 8, 9, 10 종합 실무 프로젝트 (소스파일 제공)

    
    

  
  

선수 지식 및 유의사항

• 자바스크립트 기초를 아시는 분이라면 가능합니다.

• React에 대한 기초 개념이 있으신 분이면 좋지만 없어도 괜찮습니다.

• 3D의 기초와 Three.js의 입문정도의 경험이 있으신 분이 들으시는 것이 좋습니다.

  
  

• 이번강의에서는 Scene, Camera, Renderer, Mesh, Geometry, Material, LIght 등 3D 기초에 대해서 설명하지 않습니다. 혹시

  3D의 기초에 대해 배우고 싶으시면 인프런의 제 강의인 'React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발' https://inf.run/XAE71을 먼저 들으시고 이번 강의를 들으시는 것을 추천드립니다 :)

  
  

• 질문 해 주시는 내용은 빠르면 당일 늦어도 3일 이내에 답변 드리겠습니다.