이 글은 유데미로 부터 강의 쿠폰을 받아 작성하였습니다.
작년 11월 글또 9기에 참여하여 많은 글들을 작성하고 그 과정에서 많은 배움과 인사이트들을 얻게 되었다. 그리고 Udemy에서 지원을 받아 강의들을 들을 수 있는 기회가 생겼으며, 그 중 하나인 인터렉티브 3D 웹 개발 강의를 선택하게 되었다.
이 강의를 선택하게 된 이유는 ‘그냥 재미있어 보여서’였다. 하지만 내용들을 살펴보니 기존 웹 프론트엔드 개발과 다른 3D 웹 개발의 기초적인 이론들을 알 수 있게 되어 처음 3D웹에 관심을 가진 사람들이라면 유익하겠다는 생각을 했다.
그리고 지금까지 배운 내용들을 토대로 토이 프로젝트로 진행할 예정이라 이번에는 프로젝트에 관한 구상을 해볼 예정이다.(과연 이번엔 실제로 프로젝트를 만들 수 있을까?)
R3F로 만드는 토이 프로젝트?
사용자와 상호작용을 통해 불편한 무언가를 개선할 아이디어는 아직 없다. 그렇지만 뭔가 재미있는 것이 생각나 이 주제를 가지고 프로젝트를 진행해 볼까 한다.
오늘의 운세 뽑기
보통 뽑기형 게임을 하면 특정 연출을 통해 특정 등급의 카드를 얻는다는 정보를 사용자가 알게 된다. 그렇다면 이를 활용해 사용자의 정보를 입력하면 오늘은 어떤 등급의 운세를 얻는 지 알 수 있게끔 사이트를 만들어 볼 생각이다.
그렇게 운세의 정보를 나누어 생각했을 때, 개인적으로 운세의 등급은 다음과 같이 정한다.
매우 좋음(A) - 좋음(B) - 보통(C) - 안좋음(D) - 매우 안좋음(F)
기본 화면은 춘식이 관찰일기처럼 맵에 유저가 특정 경로로 이동하는 것이다. 사용자가 특정 경로를 이동하며 특정 등급에 따라 연출되고 이를 토대로 사용자가 운세 등급을 추정하게끔한다.
운세를 정하는 것은 어디를 가도 항상 정확한 운세를 정해주는 것은 아니기 때문에 이 사이트는 단순히 ‘내가 이정도로 운이 좋은 날이구나!’ 라고 생각하게끔 방향을 정할 것이다. 그래서 자바스크립트의 랜덤 함수인 Crypto.getRandomValues() 를 사용할 예정이다.(참고로 확률은 고민 중이다.)
후기
아까 짤막하게 후기를 작성했지만, 한번 자세히 이야기하겠다.
- 프론트엔드 개발자를 중심으로 강의를 진행하지 않기 때문에 리액트를 모른다고 해도 강의를 원활하게 들을 수 있다.(그 예시로
useEffect를 써야하는 부분에서useEffect와 관련한 설명을 해준다.) - 그냥 사이트를 만들다 보면 놓칠 수 있는 3D 웹 상에서 이론적인 부분까지 설명해주기 때문에 실습하며 작성한 코드에 대해 쉽게 이해하고 넘어갈 수 있다.
- 필자의 노트북(2020년형 그램, 내장형 그래픽카드)으로 실습하니 종종 비명같은 소리를 내므로 노트북이나 데스크탑의 성능이 더 좋으면 실습에 문제는 없을 것 같다.
- 강의는
R3F로 진행하지만,바닐라 자바스크립트+three.js로 다루는 것도 포함되면 좋을 듯 하다.
마무리
이번엔 강의에 관한 이야기를 최대한 줄이려고 노력했다. 아무래도 이 강의를 수강하게 된다면 알 이야기들이고, 필자의 생각을 더 넣어서 글이 학습일지 같이 나오는 것을 지양하고자 했다.
그리고 후기에도 언급 했듯이 필자의 노트북이 토이 프로젝트 만들어지는 동안은 계속 살아있으면 좋겠다.
