R3F(React + Three.js & Typescript)로 인터렉티브 포트폴리오 만들기

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

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

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

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

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

이번 강의는

코딩으로 기능적인 것을 만들기 보다는 표현적인 것에 집중하여

다양한 표현 방법들을 연구하고 그 과정에서 예상치 못한 결과의 발견, 변형을 목표로 하는

Creative Coding의 관한 내용을 주로 다루고 있으며, 그 기초인 벡터(Vector)를 활용하여 차별화된 포트폴리오를 만들 수 있습니다.

메타버스, XR(VR, AR), 웹(HTML5) 게임, 블록체인 등의 산업에 의해

화려한 인터렉션이 있는 2D/3D 웹 컨텐츠에 대한 수요가 급증하고 있습니다.

또한 취업시장에서도 프론트엔드 개발 + 웹 그래픽 엔지니어에 대한 수요가 급증하고 있습니다.

단순한 웹 사이트가 아닌 화려한 인터렉션이 있는 2D/3D 사이트에 대한 니즈는 지속될 것 입니다.

하지만 게임 개발자와 유니티 개발자에 대한 3D 강의는 많지만 웹 3D에 대한 강의는 너무 부족합니다.

이 강의에서는 React와 Three.js를 한번에 배우고 익힐 수 있는 R3F(React Three fiber)에 대해 배우게 됩니다.

어디에서도 찾을 수 없는 R3F 스택 학습으로 더 쉽고 재미있게 Interactive 3D 웹사이트를 만들어 봅니다.

3D 인터렉티브 전문, 현직 10년차 웹 그래픽 엔지니어(Web Graphic Engineer)의 경험과 노하우를 담았습니다.

당신은 Creative Coding의 기초인 Vector가 무엇이고 어떻게 사용할 수 있는지에 대해서 배우고,

Vector를 사용하여 움직이는 4개의 예제를 다루게 됩니다. Vector의 기초를 다지면 원하는 모든 움직임에 대해 만들 어 볼 수 있습니다.

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

단순히 예쁘기만 한 화면이 아니라, 실시간으로 반응하고 움직이는 3D 오브젝트의 애니메이션에 대해 배워보세요!

각 단계별 알맞는 실습까지 직접 같이 한땀 한땀 코딩하면서 익히고 실력을 쌓을 수 있는 강의입니다.

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

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

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

*Scene, Camera, Renderer, Mesh, Geometry, Material, LIght 등 3D 기초에 대해서 설명하지 않습니다.

위의 3D의 기초에 대해 배우고 싶으시면 Udemy의 제 강의인 'React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발'을

먼저 들으시는것을 추천드립니다.