React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발 | 유데미 수강후기

기술블로그로 알아보는 테크니컬 라이팅에 이어 'React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발' 강의를 수강하였다. 회사에서 차트를 개발하는 일을 하며 Canvas를 다룰 일이 많았고, 자연스럽게 Webgl등에 관심을 가지게 되었다. 그러면서 Webgl을 활용해서 웹에서 3D를 구현하는 Three.js라는 기술에도 관심을 가지게 되었는데, 라이브러리만을 학습하기에는 뭔가 체계나 개념이 잡혀있지 않아 막막함이 있었다. 그러던 중, 글또를 통해 해당 강의를 수강할 수 있는 기회를 얻게 되었다.

강의 소개

해당 강의는 약 10시간 정도로 구성되어 있다. 설치/환경 설정부터 시작해서 웹 3D 렌더링에 필요한 여러 개념들을 체계적으로 설명한다. React와 Three.js, R3F 등의 여러 라이브러리에 대한 설명도 함께 하고 있다. 그리고 강의 후반부에는 3D 신발을 커스터마이징 하는 웹페이지를 만드는 미니 프로젝트를 진행하고 있다. React라는 웹 기술을 사용하고 있지만 해당 기술을 모르더라도, 환경설정부터 강의에 필요한 내용은 모두 알려주시므로 크게 걱정하지 않아도 된다.

인상 깊은 부분 및 느낀 점

1. 웹 3D 개발에 필요한 지식들을 굉장히 체계적으로 알려주신다.

해당 강의를 듣기 전에도 나는 Three.js에 대한 라이브러리에 관심이 있었다. 해당 라이브러리를 문서를 통해서 살펴보았는데, 개념이 잡혀있지 않아서 답답함이 있었다. 해당 강의에서는 3D 렌더링에 필요한 지식들을 체계적으로 설명하고 있고, 그 기반 위에서 라이브러리를 활용한다. 예를 들어 3D 렌더링에 필요한 요소들 (Scene, Camera, Renderer)등이나 3D 오브젝트의 구성요소 등의 개념을 설명하고 이에 대해서 코드를 작성하는 법을 알려주신다. 또한, 직접 설정값들을 바꾸면서 해당 설정값이 어떻게 렌더링에 영향을 미치는지를 상세히 설명해 주신다.

강의 내용 중 일부

덕분에 앞으로 더 심화된 내용을 공부하더라도 탄탄한 기초 위에서 시작할 수 있을 거라는 자신감이 생겼다.

2. R3F 라이브러리의 매력, 또한 이를 통한 React 커뮤니티의 성숙도를 느꼈다.

해당 강의에서는 단순한 Three.js가 아니라 R3F라는 라이브러리를 통해서 Three.js를 사용하는 법을 알려주신다. 이를 통해 단순히 Three.js를 사용할 때 보다 훨씬 쉽고 직관적으로 3D작업을 수행할 수 있음을 경험했다. 나는 주로 Vue.js를 사용하고 있는데 Vue에는 이런 라이브러리가 크게 발달되어 있지 않다. TresJs라는 라이브러리가 있긴 하지만 R3F에 비해 성숙도가 많이 낮다. 웹 3D 렌더링을 위해서는 React를 활용해서 R3F를 사용하는 것이 압도적이 생산성을 보일 수 있다고 느꼈다. (또는, Vue에서 라이브러리의 성숙도를 위해 기여하는 것도 재밌겠다는 생각이 들었다.)

아쉬운 점

강의 내용에 있어서는 크게 아쉬운 점이 없었다. 강사 분의 열정도 보였고 이해하기 쉽게 설명하기 위해 노력하는 모습이 보였다. 다만, 프론트엔드에 어느 정도 익숙해서 프로젝트 구성이나 React 등에 지식이 있는 사람이라면 지루하게 느껴질 만한 부분이 있다. 이런 부분은 건너뛰면서 들으면 되니 크게 문제가 되지 않을 듯하다.

추천대상

해당 강의는 아래와 같은 분들에게 도움이 될 것이라고 생각한다.

1. 인터렉티브 웹 개발, 특히 3D 기술에 관심이 있으신 분들

2. 프론트엔드의 다양한 영역을 경험해보고 싶으신 분들

반면, 3D 웹기술에 대해서 어느 정도 지식이 있고, 어느 정도 숙련도가 있으신 분 들에게는 쉽게 느껴질 수 있다고 생각한다.

총평

그동안 관심 있던 3D 웹개발에 대해서 체계적으로 공부할 수 있어서 개인적으로 매우 만족했던 강의이다. 3D 개발에 관한 식견을 넓힐 수 있었고, 어느 정도 기초를 쌓았다는 자신감을 얻었다. 아직 이를 이용해서 어떤 프로젝트는 시작하지 않았지만, 해당 기술을 활용해서 조만간 간단한 사이드 프로젝트를 해보려고 한다. (3D 차트나, 간단한 게임)

---

해당 포스트는 글또 9기를 통해 Udemy 강의 쿠폰을 제공받아 작성하였습니다.