이번 포스트는 React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발을 수강한 뒤 정리하는 포스트입니다.
R3F를 선택한 이유
Three.js를 선택한 이유와 동일하다.
이전부터 3D 그래픽을 웹에 구현하는 것에 관심이 있었고,
이번 글또 활동에서 감사하게도 유데미 제공 강의 리스트 중에 인터렙티브 3D 웹 개발과 관련있는 강의가 있길래 주저없이 선택했다.
그치만 유데미 찬스로 선택한 강의는 아니다, 이 강의는 내돈내산이다!
유데미 찬스로 선택한 강의에 대한 후기는 추후 포스팅할 예정이다.
그리고 처음에는 커리어에 도움이 될까 관심을 가진 정도였지만,
1주차에 강의를 들으면서 인터렉티브 웹 사이트 예시들을 많이 들어가봤다.
그런데 마치 게임을 하는 듯한, 사용자 경험과
눈을 사로잡는 그래픽과 인터렉션에 있어 부드러운 전환이 너무 놀라웠다.
이렇듯 사람들에게 감동을 선사하는 웹 기술을 배우고,
언젠간 나도 그런 개발자가 된다면 기쁠 것 같아, 강의를 들으면서 더욱 의지가 샘솟았다.
공부한 것
HTML DOM과 SVG 그리고 Canvas
| DOM | SVG | Canvas | |
|---|---|---|---|
| 사용 문법 | - HTML, XML - CSS, 이벤트 사용 가능(click, hover) | - HTML, XML - CSS, 이벤트 사용 가능(click, hover) | - javascript |
| 검색 가능 여부 | - 검색 가능 - 웹표준, 웹 접근성, SEO 고려 가능 | - 검색 가능 - 웹표준, 웹 접근성, SEO 고려 가능 | - canvas 내의 텍스트 검색 불가능 |
| 무결성 유지 여부 | - 픽셀 기반이기에 크기 변경되면 무결성 유지 불가 | - 벡터 기반이기에 크기 변경 되어도 무결성 유지 | - 픽셀 기반이기에 크기 변경되면 무결성 유지 불가 |
| 장점 | - 정확한 오브젝트 영역의 이벤트 탐지 가능 | - 성능이 좋다 → 수많은 요소(10,000개 이상)를 렌더링할 때 좋다 - 2D canvas보다 3D canvas가 더 성능이 좋다 |
웹 그래픽 관련 라이브러리 소개
이 중에서 PixiJS, ThreeJS를 써보았는데,
PixiJS는 어떤 asset을 그릴 때 좌표값을 일일이 찍었어야 했어서 많이 번거로웠다. 더 나은 방법을 찾아보기도 했는데, 파이가 크지 않은 탓인지 레퍼런스를 찾기가 어려웠다.
그래도 써 본 라이브러리가 강의가 등장하니 괜시리 반가웠다.
개발 환경 세팅
-
node 설치
-
nvm 설치
node version을 관리할 수 있는 툴brew install nvm echo $SHELL // /bin/zsh sudo vim ~/.zshrc # Setting for R3F 2023.12.12 export PATH=/opt/homebrew/bin:$PATH export NVM_DIR=~/.nvm source $(brew --prefix nvm)/nvm.sh nvm install 16 // 만약 다른 버전 사용 시 nvm use 18 -
r3f, drei 설치
npm install three @types/three @react-three/fiber
관련 자료
- Jongmin Kim Blog
- Form Follows Function
- wrk - French Creative Web Studio
- SDU - Fremtidens Uddannelser
- Garden Eight
- Lusion - Realise Your Creative Ideas
- Totem.earth
- 컬러버스 - 오픈 메타버스 플랫폼.
개인적으로 입사를 꿈꾸고 싶을 정도로 Lusion이 가장 감명깊게 다가왔다.
느낀 점
아직은 시작 단계라서 많은 부분에 대해서 공부하진 못했는데,
3D 인터렉티브 기술로 어떤 걸 만들 수 있는지 레퍼런스를 보니
이것저것 만들고 싶은 마음과 아이디어가 생겨났다.
단순히 클릭 및 스크롤 뿐만 아니라 마이크, 웹캠을 이용한 인터렉티브도 구현해보고 싶다.
앞으로가 더욱 기대되는 강의였다.
