three.js 스터디를 시작하며

글또에서 6개월간 three.js 스터디를 하게 되었다.
사실 프론트 작업자들 중 많은 사람들이 다들 three.js를 한 번쯤은 들어보고 간지 난다고 생각했을 거 같다. 
나도 그 중 하나였는데, 개인적으로 기술 스택을 늘릴 수 있는 좋은 기회라고 생각해 참여하게 되었다.
마침 큰 작업이 끝났고, 본격적으로 외주 작업을 시작하기 전에 이력을 추가하고 싶다고 생각했기 때문에 시기적으로도 잘 맞은 셈이다.
스터디를 시작하기 전에 어떤 식으로 내가 스터디를 참여할 것인지 등을 정리하면 좋을 것 같아 이 글을 작성한다.

three.js 란?

웹페이지에 3D 객체를 쉽게 렌더링 하도록 도와주는 자바스크립트 3D 라이브러리이다. 3D 객체를 렌더링하는 데 WebGL을 사용하는 데, 직접 구현한다면 작성해야 하는 수많은 코드들을 개인이 작성해야 할 필요한 데, three.js를 사용한다면 매우 간단하게 3D 객체를 렌더링 할 수 있다.

three.js의 활용

이 라이브러리를 활용한 서비스가 궁금했다. 상업적인 예시들을 보면, 목표도 구체화할 수 있고 공부할 때도 선택과 집중할 수 있을 것 같았다. 챗지피티의 답변과 답변에서 참조한 사이트들을 둘러보고 난 결과, 보통 1) 메타버스, VR, AR  2) 학습, 건축 등의 시뮬레이션 3) 게임 4) 온라인 쇼핑몰 제품 진열 5) 상호작용 또는 화려한 효과를 위한 마케팅으로 활용되고 있었다.

유니티로 작업해본 경험자로서 3D 게임 엔진의 하위 호환버전..? 같은 인상을 받았는데, 웹페이지에서 가볍게 구동할 수 있다는 점에서 접근성이나 활용도 면에선 훨씬 좋은 것 같다. 

Top 8 Three.js based Websites and Apps Across the Niches

10 Exceptional Websites Showcasing Creative Usage Of ThreeJS - Orpetron

Innovative Examples Of Three.js In Action - Orpetron

 

10 Creatively Charged Three.js Websites To Get Inspired - Orpetron

 

three.js 스터디 목표와 학습 방식

화려한 서비스들이 많았지만 외주 포트폴리오용 1인 작업이기 때문에, 온라인 쇼핑몰 또는 이벤트 페이지에서 제품을 진열하고 간단한 상호작용이 가능하도록 목업 서비스를 만드는 걸 목표로 하기로 했다. 다만 실제 온라인 쇼핑몰을 운영하는 클라이언트들이 제품의 3D 모델링을 가지고 있을 가능성은 매우 낮기 때문에, 2D 사진을 입력하면 3D 모델링을 생성하는 AI 서비스들을 추가적으로 탐색해 본 이후에 목업서비스를 기획해 볼 수 있을 것 같다.

스터디 전반부(1~6주차)는 개념과 이론 학습, 후반부(6~12주차)는 프로젝트 형식인데, 전반부 동안은 제품 전시와 관련된 기능 중심으로 공부할 것 같다. 모두가 같은 내용을 배운 뒤 몇 명을 뽑아 발표로 본인이 공부한 내용을 공유하는 형식이라 모든 내용을 정리한다기보다는 공부하면서 궁금했던 부분과 나는 어떻게 적용했는지 등을 중심으로 준비하지 않을까 싶다.