[three.js] 3D 스터디를 시작하며

3D 스터디 가보자구 🚀

평소에도 매력적인 인터렉티브 웹을 구현해보고 싶단 생각이 컸다.

그러던 중 three.js 공식 문서에 소개되어있는 여러 3D 웹에 매료되었고, 3D를 활용한 인터렉션을 직접 구현해보고 싶어 스터디를 시작하기로 하였다.

그리고 정말 좋은 기회로 디자이너 한 분을 모시고 3D 스터디를 하게 되었다. (디자이너 1명, 프론트엔드 3명)

three.js vs babylon.js

웹에서 3d를 구현할 수 있는 유명한 라이브러리는 three.js와 babylon.js가 있다. 이 둘의 차이점은 다음과 같다. (레퍼런스)

	three.js	babylon
주용도	간단한 애플리케이션	게임 개발
커뮤니티	크다	작다
특징	가볍고 단순하여 사용하기 쉬움	복잡하지만 기능이 풍부함 (물리 엔진, 애니매이션 등)

 

우리의 스터디 목적은, 웹상에서 돌아가는 게임 개발보다는 프로덕트 안에 인터렉티브한 3D UI를 만들어보는 것이므로 three.js를 공부하는 것이 더 적합하다고 생각했다.

또한 three.js는 WebGL 기반이기 때문에 WebGL의 풍부한 문서와 포럼을 활용하여 안정적으로 공부 할 수 있겠다고 판단하였다.

스터디에 활용할 강의 선택

우리는 모두 three.js 경험이 없었다.

그래서 스터디에 사용할 강의를 찾아보다가 GLS DEVELOPER라는 유투브 채널에서 three.js에 대한 강의가 체계적으로 올라와 있는 것을 발견하였고, 이 강의를 들으며 함께 스터디하기로 결정했다.

GLS DEVELOPER - Three.js 강좌

• 기본부터 따라할 수 있도록 구성되어있음
• 클래스를 활용하여 객체지향적인 코드로 알려준다.

스터디 방식

목표

1. 5주차까지 GLS DEVELOPER 강의 끝내기
2. 7주차까지 기술 고도화하기. ex) 선형대수를 활용한 쉐이더 연산 렌더링 연습
3. 디자이너님이 만들어주신 모델을 이용해 간단한 인터렉티브 웹 구현해보기

일단 5주차까지는 유튜브 강의를 보며 예시 코드를 따라해보고 배운 내용을 정리하기로 하였다.

---

마무리

서비스 간의 경쟁에서 중요한 요소 중 하나는, 얼마나 매력적인 UI로 유저를 끌어당기느냐 인 것 같다.

좋은 유저 경험과 기분 좋은 UI로 사람들의 마음을 움직이는 일이 프론트엔드 개발자로서 얼마나 행복한 일인지.

이번 스터디를 통해 만들어낸 산출물로 그런 행복을 느낄 수 있다는 생각에 벌써 즐거워진다.

3D는 경험이 전무하여 조금 걱정은 되지만 기분 좋은 긴장감이다!