웹에서 3D 그래픽을 만들 수 있는 라이브러리 three.js. 최근에 3D 관련 회사에도 이력서를 넣게 되면서 본격적으로 공부를 시작하게 되었습니다. 완전 처음 접해보는 라이브러리이기 때문에 아주 기초부터 하나씩 차근차근 정리해보려 합니다.
🌐 웹에서 3D를 만드는 방법
웹 브라우저에서 3D 그래픽을 만들 수 있는 기술은 이미 존재해왔습니다.
대표적으로 WebGL, Flash(Stage3D), Java Applet 등이 사용되었지만 대부분 복잡하거나 진입 장벽이 높아 일반 개발자가 사용하기 어려웠습니다.
이러한 문제를 해결하고 보다 쉽게 3D 그래픽을 구현할 수 있도록 도와주는 도구가 바로 three.js입니다.
🧊 three.js
웹 브라우저에서 3D를 쉽게 만들 수 있도록 도와주는 JavaScript 라이브러리입니다.
기존에는 WebGL이라는 기술을 사용하여 3D 그래픽을 직접 구현해야 했습니다.
하지만 WebGL은 코드가 매우 복잡하고 난이도가 높기 때문에 일반 개발자가 접근하기 어려운 기술이었습니다.
three.js는 이 WebGL을 감싸서 더 직관적이고 쉬운 코드로 3D를 구현할 수 있도록 도와주는 도구입니다.
즉, WebGL이 엔진이라면 three.js는 그 엔진을 더 쉽게 운전할 수 있게 만들어주는 자동차의 인터페이스와 같은 역할을 합니다.
2009년 Ricardo Cabello라는 개발자가 처음 개발하였고 이후 오픈소스로 발전해 현재는 많은 개발자와 기업들이 사용하고 있습니다.
💡 three.js 활용 분야
three.js는 단순한 3D 그래픽 렌더링에 그치지 않고 다양한 산업과 분야에서 실제 프로젝트에 널리 활용되고 있습니다.
웹 브라우저만 있으면 누구나 3D 콘텐츠에 접근할 수 있다는 장점 덕분에 제품 홍보, 교육, 게임, 시각화, 아트 등 여러 방면에서 적극적으로 사용되고 있습니다.
🛍️ 제품 3D 뷰어(Product Viewer)
웹 사이트에 3D 제품을 배치하고 360도로 회전하거나 확대/축소할 수 있게 만들어줍니다.
사용자는 제품을 실제로 만지는 것처럼 다양한 각도에서 자유롭게 관찰할 수 있습니다.
- 패션 브랜드에서 가방이나 신발을 입체적으로 보여주는 페이지
- 인테리어/가구 업체에서 소파나 테이블을 3D로 돌려보며 확인 가능
🕹️ 인터랙티브 웹사이트/포트폴리오
화려한 웹 인터랙션을 구현할 수 있어 포트폴리오, 회사 소개, 캠페인 페이지 등에 자주 사용됩니다.
스크롤을 내릴 때마다 카메라가 이동하거나 사용자의 마우스에 따라 오브젝트가 반응하는 몰입감 있는 UX를 제공할 수 있습니다.
- 개발자 포트폴리오에 3D 모델 추가
- 스크롤 내릴 때 씬이 전환되는 브랜드 사이트
🎮 웹 기반 게임/시뮬레이션
3D 장면뿐 아니라 웹에서 직접 실행 가능한 3D 게임을 만드는 데도 사용됩니다.
간단한 퍼즐, 액션 게임, 물리 시뮬레이션 등을 설치 없이 브라우저에서 실행할 수 있습니다.
- 미로 게임, 농구 게임, 점프 액션 등
- 교육용 게임(ex. 지구 온도 변화 시뮬레이션)
Unity처럼 무겁지 않으며 PC/모바일에서 모두 대응이 가능하고 다른 JavaScript 라이브러리와 함께 사용 가능하다는 장점이 있습니다.
📊 데이터 시각화(3D Visualization)
복잡한 데이터를 입체적으로 시각화하는 데도 사용됩니다. 특히 데이터가 공간적 구조를 가질 경우 3D 시각화는 2D보다 훨씬 직관적인 해석이 가능합니다.
- 코로나19 감염 확산 상황을 3D 그래프로 표현
- 도시 건물 위에 날씨/온도 데이터를 입체적으로 시각화
- 네트워크 구조, 관계도, 교통 흐름 등을 3D로 표현
🔬 교육/과학/의료 콘텐츠
복잡한 과학 개념이나 추상적인 구조를 시각화하는 데 매우 적합합니다.
학생이나 일반인이 이해하기 어려운 내용을 실시간으로 조작 가능한 3D 형태로 보여줄 수 있기 때문입니다.
- 태양계, 원자 구조, 전자기파 등 과학 시뮬레이션
- 인체 해부도, 뇌 구조, 혈관 흐름 등 의료 콘텐츠
- 건축 설계도, 지리 정보 등 입체적인 교육 자료
🖼️ 디지털 아트/전시
예술 분야에서도 활발히 사용됩니다. 특히 전시 공간, 웹 기반 예술 작품, 인터랙티브 뮤직비주얼 등에서 3D 시각 효과와 사용자 상호작용을 결합하여 몰입감 있는 작품을 만듭니다.
- 가상 전시관(Metaverse Gallery)
- 음악에 따라 반응하는 3D 시각화
- 크리에이티브 코딩 기반 작품
