R3F로 배우는 인터렉티브 3D 웹 개발 수강 후기 (with Udemy)
23년 12월, 글또 9기에 참여하며 벌써 마지막, 10번째 글을 쓰게 되었다. 올해는 유난히 시간이 빠르게 흘러갔다. 😊
글또 with udemy
동아리에서는 신청자에 한해 유데미 강의를 최대 2개까지 제공해 주었다. 강의를 2개 다 수강할 자신은 없어서 하나만 신청하기로 했다.
선택한 강의
내가 신청한 강의는 React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발이다.
www.udemy.com
작년부터 웹 3D에 대한 궁금증이 많았고, 몇 개의 강의를 장바구니에 담아두었었다. 24년에 웹 3D 공부를 시작하기로 마음먹었는데, 글또에서 유데미와 연계하여 강의를 무료로 제공한다고 해서 장바구니에 담아두었던 강의를 선택하게 되었다.
강의 대상 및 구성
- 자바스크립트, 타입스크립트 사용 경험이 있는 사람
- React에 관심이 있는 사람
자바스크립트와 간단한 타입스크립트를 사용할 줄 아는 분을 대상으로 강의해서 해당 언어를 사용해 본 사람이 듣는 것을 추천한다. React는 몰라도 될 만큼 강사님이 자세히 알려주시긴 하지만 useRef, useEffect 등을 조금 사용해서 React를 조금이라도 이해하고 있는 사람이 듣는 것을 추천한다!
강의 시간은 대략 10시간 정도 된다. 목차는 소개 및 환경 세팅, Three.js, R3F 에 대한 개념 설명 및 예제 그리고 마지막으로 미니 프로젝트로 이루어져 있다.
핵심 포인트
웹을 표현하는 방법
- DOM
- SVG
- Canvas
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발에서는 Canvas에 대한 이야기를 주로 다룬다.
Three.js의 기본 구조
- Scene (무대)
- Camera
- Renderder (찍힌 장면)
Three.js의 구성 요소
Geometry: Mesh의 형상
- 점 3개로 면을 만들 수 있다.
- Geometry에서 하나의 Segment는 점 3개로 이루어진 삼각형이다.
- Geometry에서 Segment가 적을 수록(삼각형을 적게 사용할수록) 메모리 효율은 증가하나, Segment가 너무 적으면 형상이 깨진다.
Material: 색상 및 투명도 등을 지정
예제
위 사진은 강의 예제 중 하나를 스크린샷 찍은 것이다. (프레첼 같이 생겨서 빵 먹고 싶었다..)
웹 3D에 대한 배경지식이 없어도 강사님이 자세하게 설명해 주셔서 수강하는 데 어려움이 없었다. 개념 설명 후 위 예제처럼 직접 타이핑하며 학습할 수 있어 좋았다.
후기
3D에 대한 막연한 두려움이 있어서 Three.js 에 대한 공부를 미뤄왔던 것 같다. 막상 해보니 인터렉티브하고 화려해 보이는 것들(줌 인 아웃, 그림자 효과 등) 대부분은 이미 구현이 되어있고 Three.js 에서 가져와 활용하면 해보고 싶은 건 다 해볼 수 있다는 느낌을 받았다.
강의에서 Three.js 공식 사이트를 참고하며 개념 설명과 예제를 보여주는 방식이 매우 유익했다. 공식 문서만 보고 공부했다면 재미도 없고 시행착오가 많았을 텐데, 강의를 통해 미니 프로젝트도 진행하며 실무에서의 프로젝트 진행 방법에 대해 배울 수 있었다. 나처럼 3D에 막연한 두려움이 있거나 웹 3D에 입문하려는 분들에게 아주 좋은 강의라고 생각한다! 🌟