Three.js란?
1. Three.js란?
브라우저가 3D를 그릴 수 있는 건 WebGL이라는 기술 덕분입니다. 컴퓨터의 그래픽 카드(GPU) 성능을 브라우저에서 쓸 수 있게 해주는 기술이죠. 그런데 WebGL을 직접 다루는 건 몹시 어렵습니다. 삼각형 하나 그리는 데도 수십 줄의 코드가 필요합니다.
Three.js는 이 WebGL을 사람이 다루기 쉽게 포장해 놓은 JavaScript 라이브러리입니다. "정육면체를 만들어서 회전시켜줘" 수준의 코드로 3D 화면을 만들 수 있게 해줍니다.
비유하자면 WebGL은 물감·붓·캔버스 같은 원재료이고, Three.js는 "여기에 정육면체 하나"라고 주문만 하면 되는 그리기 키트입니다. 그리고 우리는 그 주문마저 AI에게 맡깁니다.
1.1 어디에 쓰이고 있나요?
- 제품 소개 페이지: 스크롤하면 제품이 회전하며 분해되는 애플 스타일의 페이지
- 포트폴리오 사이트: 3D 오브젝트가 움직이는 인터랙티브 포트폴리오
- 웹 게임: 설치 없이 브라우저에서 바로 실행되는 3D 게임
- 브랜드·전시 사이트: 온라인 전시관, 쇼룸, 이벤트 페이지
- 데이터 시각화: 지구본 위에 표시되는 실시간 데이터
이 강의에서 우리는 이 중 세 가지(자기소개 페이지, 상품 소개 페이지, 게임)를 직접 만듭니다.
1.2 왜 바이브 코딩과 잘 맞을까?
두 가지 이유가 있습니다.
- 결과가 눈에 보입니다. 서버나 데이터베이스 코드는 잘 됐는지 판단하려면 코드를 읽어야 하지만, 3D 화면은 보는 순간 압니다. "확인하기" 단계가 쉬운 분야라서 코드를 몰라도 품질을 판단할 수 있습니다.
- AI가 Three.js를 아주 잘 압니다. Three.js는 십수 년간 쌓인 예제와 문서가 방대해서, AI가 학습한 자료가 많습니다. 웬만한 요청은 한 번에 그럴듯하게 만들어줍니다.
1.3 미리 만나두는 세 단어
다음 챕터에서 바로 만들기 시작할 텐데, 화면에 3D가 뜨려면 최소한 이 셋이 필요하다는 것만 기억해 두세요.
| 단어 | 비유 | 하는 일 |
|---|---|---|
| 장면 (Scene) | 무대 | 3D 물체들이 놓이는 공간 |
| 카메라 (Camera) | 관객의 눈 | 무대를 어디서 바라볼지 정함 |
| 렌더러 (Renderer) | 화가 | 카메라에 비친 장면을 실제 화면에 그림 |
지금 외울 필요는 없습니다. 챕터 3 "3D 화면 이해하기"에서 직접 만든 코드를 해부하며 자세히 다룹니다.
1.4 설치는 필요 없나요?
없습니다. Three.js는 CDN이라는 방식으로 인터넷 주소에서 바로 불러올 수 있습니다. 프로그램 설치 없이 HTML 파일 하나에 "Three.js는 이 주소에서 가져와"라는 한 줄이 들어가는 방식입니다. 우리가 챕터 2에서 만들 자기소개 페이지가 바로 이 방식입니다. 파일이 많아지는 상품 소개 페이지(챕터 4)에서는 프로젝트 방식으로 업그레이드합니다.
개념 사전: WebGL이란? · 라이브러리란? · CDN이란?
2. 정리
- Three.js = 브라우저에서 3D를 쉽게 그리게 해주는 JavaScript 라이브러리 (WebGL을 포장한 것)
- 결과가 눈에 보여서 바이브 코딩과 궁합이 좋은 분야입니다.
- 3D 화면의 최소 구성: 장면(무대) + 카메라(눈) + 렌더러(화가)
- 설치 없이 CDN으로 불러옵니다.
다음 챕터에서는 Part 1에서 만든 프로필 카드에 회전하는 3D 도형을 넣어 첫 Three.js 페이지를 완성합니다.