Three.js를 사용한 웹사이트 만들기
웹 개발에 종사하는 개발자라면, 언젠가 3D를 활용한 멋들어진 홈페이지 제작에 관심을 갖게 됩니다. 이러한 생각은 비단 저뿐만 아니라 많은 개발자들 사이에서도 흔히 볼 수 있습니다. 다른 개발자한테 3D로 화려한 개인 사이트 제작에 대한 꺼내보면 다들 관심이 없진 않더군요.
이런 생각을 거의 10년째 가지고만 있다가, 작년에 사이트 리뉴얼을 고민하면서 3D를 사용한 웹사이트를 만들게 되었습니다.
이전 개인 웹페이지는 5년 전 캐나다 오기 직전에 피치트리에서 공부하면서 VueJS가 이제 막 각광받기 시작했을 때 공부 겸 만들었었습니다. 허나 지금은 사이트 내용도, 사이트 자체도 너무 오래되어서 슬슬 바꾸려던 차에, 그냥 소개만 있는 페이지는 재미없을 것 같아서 WebGL과 ThreeJS를 공부시작했습니다.
Showcase
결과물을 먼저 공유합니다.
우주에 떠 있는 랩탑이 있으며, 클릭하면 랩탑이 열리고 가상 OS가 모니터에 나타납니다. 랩탑 위치 조절을 위한 줌인과 줌아웃 기능도 있습니다.
OS에서는 웹캠을 이용한 포토부스 기능과 다양한 사이트와 링크를 보여주는 브라우저 앱을 사용할 수 있습니다.
첫 단추 - Three.js 강의 듣기
3D 구현을 위해 Three.js를 배우기로 결정했습니다. 많은 조사 끝에 해당 강의가 가장 깔끔하고 학습 로드맵도 우수하다고 판단했습니다. 각 강의가 1~4시간이 넘어가는 부담이 있었지만, 많은 유용한 팁 덕분에 시간 가는 줄 모르고 배웠습니다.
학교 다닐 때 심심해서 동아리방에 있던 3D 모델 만들기 기초 책 해본 이후로는 관심도 가진 적이 없어서, 즉 3D 쪽 경험이 거의 전무했기 때문에 많은 걸 배울 수 있었습니다.
디스코드도 있어서 궁금한 게 있으면 직접 컨택이 가능합니다.
해당 코스의 강사인 Bruno simon의 물리엔진까지 적용한 놀라운 웹사이트도 한번 보고 오세요
모델 구하기
3d 모델 작업은 또 다른 도전과제입니다. 생각보다 쉽지 않습니다. 저는 운 좋게도 구현하고 싶은 기능을 위한 모델을 위 사이트에서 무료로 제공해 이를 사용했습니다.
물론 그대로 쓸 수는 없었고 랩탑을 닫고 여는 애니메이션을 위해서 모델을 분리하는 작업이 추가로 들어가긴 했지만, 0부터 만드는 건 아니기에 시간을 많이 절약할 수 있었습니다. 
OS 만들기
랩탑이 열리면 나타날 가상 OS를 만들었습니다.
OS 구현을 위한 별도의 웹사이트를 만들고, iframe으로 랩탑 디스플레이에 렌더링 합니다.
Photobooth 구현
MacOS의 Photobooth와 비슷하게 구현했습니다.
브라우저에 navigator.mediaDevices를 사용하였고, iframe으로 렌더링 하기 때문에 iframe에 별도로 권한 요청을 가능하게 해 주도록 아래와 같이 allow attribute를 추가해 줍니다.
<iframe
src={ORIGIN_WEBSITE}
allow="camera *;microphone *"
style={{
width: '100dvw',
height: '100dvh',
border: 'none',
}}
/>
브라우저 구현
크롬 브라우저의 UI를 참고하여 브라우저를 만들었습니다. 또한, framer-motion 라이브러리를 사용하여 탭의 D&D 기능을 구현했습니다. 이 라이브러리는 랩탑의 3D 줌인/아웃 애니메이션에도 사용되었습니다.
브라우저 내부에서는 iframe을 사용하여 사이트를 열지만, 유튜브, 링크드인, 깃헙과 같은 사이트들은 iframe 사용을 제한하고 있어, 새 창으로 열리는 북마크 UI를 추가했습니다.
북마크로 옮긴 덕분에 탭이 너무 많아지는 문제가 자연스럽게 해결되었습니다. 
React Three Fiber와 Drei
React Three Fiber는 Three.js를 React에서 쉽게 사용할 수 있도록 구현한 라이브러리 입니다. 또한 Drei라는 라이브러리를 사용하여 이미 추상화되어 있는 기능을 쉽게 사용할 수 있습니다.
Poimandres 혹은 pmndrs라는 이름으로도 알려진, 오픈소스 프론트엔드 생태계에 기여하는 프로젝트 그륩이 만든 라이브러리 입니다. React Three Fiber나 Drei 뿐만 아니라 react-spring, justand, valtio같은 매우 유명한 도구들이 여기에 속해있습니다.
마치며
개인화 가능한 OS를 통해 앞으로의 작업물들을 모아둘 허브로 사용할 계획입니다. Interactive Developer 김종민 님의 fff프로젝트를 보고 영감을 얻어서 이런 작업물을 모아놓을 수 있는 사이트를 구축하고 싶었는데, 이런 식으로 구현을 해놓으니 좋은 것 같네요.
현재는 실리콘밸리 회사인 Sunnyside에서 일하고 있는 Yehia 친구와 정기적으로 만나 같이 공부했습니다. 혼자 했다면 중간에 포기했을 것 같은데 이 친구 덕분에 서로 진행사항 공유하며 결국 둘 다 만족스러운 결과물을 만들었습니다. 저는 랩탑과 가상 OS를 이용한 개인 웹사이트 그리고 이 친구는 모델까지 직접 만들어 3D 모노폴리를 제작했습니다. 3D monopoly - yehia
개인적인 호기심으로 작년 중순에 ChatGPT를 사용하여 ThreeJS 코드를 만들어 보았습니다. 간단하게 100개의 아티클을 추가하고, 반짝이며 마우스 위치로 화면을 회전시키는 게 요구사항이었습니다만, 자꾸 하나씩 부족한 결과나 나와서 꽤 시행착오가 많았던 기억이 나네요. 마침내 LLM 및 copy & paste로만 만든 결과물이 아래 링크입니다, 생각보다 결과가 좋아서 놀랐습니다.
당시에는 text davinci 3 모델을 사용했기에 지금 GPT4 모델을 사용한 결과물은 훨씬 더 좋을 것 같습니다.