Three.js와 Blender로 시작하는 3D 웹 개발

3D 웹의 세계로 첫발을 내딛는 개발자들을 위한 가이드입니다. Blender로 모델을 만들고 Three.js로 웹에 구현하는 전체 과정을 실무 스토리와 함께 쉽게 풀어냅니다. 설치부터 첫 3D 씬 구현까지 단계별로 배워봅시다.

---

목차

1. Three.js와_Blender가_무엇인가
2. 3D_웹_개발의_활용_사례
3. Blender_설치_및_기본_인터페이스
4. Three.js_개발_환경_설정
5. VS_Code_세팅_및_필수_확장_프로그램
6. 첫_번째_3D_씬_만들어보기

---

1. Three.js와 Blender가 무엇인가

어느 날 김개발 씨는 회사에서 새로운 프로젝트 제안을 받았습니다. "우리 제품을 웹에서 3D로 보여주면 어떨까요?" 팀장님의 말에 김개발 씨는 당황했습니다.

지금까지 평면적인 웹사이트만 만들어왔는데, 3D라니요?

Three.js는 웹 브라우저에서 3D 그래픽을 쉽게 구현할 수 있게 해주는 자바스크립트 라이브러리입니다. Blender는 무료 오픈소스 3D 모델링 소프트웨어로, 게임이나 영화에서 사용하는 수준의 3D 모델을 만들 수 있습니다.

이 두 도구를 함께 사용하면 Blender에서 만든 3D 모델을 Three.js로 웹에 띄울 수 있습니다.

다음 코드를 살펴봅시다.

// Three.js로 간단한 3D 큐브를 화면에 띄우는 기본 코드
import * as THREE from 'three';

// 씬, 카메라, 렌더러 생성 - 3D 세계의 필수 요소
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 큐브 생성 - 가장 기본적인 3D 오브젝트
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

김개발 씨는 선배 개발자 박시니어 씨를 찾아갔습니다. "선배님, 웹에서 3D를 어떻게 구현하나요?" 박시니어 씨는 미소를 지으며 답했습니다.

"Three.js와 Blender를 배워보세요. 생각보다 어렵지 않아요." 그렇다면 이 두 도구는 정확히 무엇이고, 왜 함께 사용하는 걸까요?

먼저 Three.js를 이해해봅시다. 쉽게 비유하자면 Three.js는 마치 레고 블록과 같습니다.

복잡한 3D 그래픽 프로그래밍을 간단한 블록처럼 조립해서 만들 수 있게 해주는 것입니다. 원래 웹에서 3D를 구현하려면 WebGL이라는 저수준 API를 직접 다뤄야 하는데, 이는 매우 복잡하고 어렵습니다.

WebGL로 단순한 삼각형 하나를 그리는 데만도 수백 줄의 코드가 필요합니다. 하지만 Three.js를 사용하면 몇 줄의 코드로 같은 결과를 얻을 수 있습니다.

다음으로 Blender를 알아봅시다. Blender는 3D 모델을 만드는 전문 소프트웨어입니다.

픽사나 디즈니에서 사용하는 유료 소프트웨어인 Maya나 3ds Max와 비슷한 수준이지만, 완전히 무료입니다. 의자, 자동차, 캐릭터 등 상상할 수 있는 모든 3D 모델을 만들 수 있습니다.

그런데 왜 이 두 개를 함께 사용할까요? 이유는 간단합니다.

Three.js로도 기본적인 도형(큐브, 구, 원기둥 등)을 만들 수 있지만, 복잡한 모양은 코드로 만들기가 매우 어렵습니다. 마치 글로만 사람 얼굴을 묘사하는 것과 비슷합니다.

가능은 하지만 매우 비효율적이죠. 반면 Blender에서는 마우스로 클릭하고 드래그하며 직관적으로 모델을 만들 수 있습니다.

그림을 그리듯이 3D 모델을 조각할 수 있는 것입니다. 실무에서의 작업 흐름은 이렇습니다.

디자이너나 3D 아티스트가 Blender에서 멋진 제품 모델을 만듭니다. 그 모델을 GLB나 GLTF 같은 웹 친화적인 포맷으로 내보냅니다.

그러면 개발자인 여러분이 Three.js 코드에서 그 모델 파일을 불러와 웹페이지에 띄우는 것입니다. 이런 방식으로 나이키는 신발을 3D로 보여주고, 이케아는 가구를 웹에서 360도 돌려볼 수 있게 만들었습니다.

위의 코드를 살펴봅시다. 이 코드는 Three.js로 3D를 시작할 때 가장 먼저 만나게 되는 "헬로 월드" 같은 예제입니다.

첫 세 줄에서 씬, 카메라, 렌더러를 만듭니다. 이 세 가지는 Three.js의 필수 요소입니다.

씬은 3D 세계 자체이고, 카메라는 그 세계를 보는 시점이며, 렌더러는 그것을 화면에 그려주는 역할을 합니다. 영화 촬영에 비유하면 씬은 촬영 세트장, 카메라는 실제 카메라, 렌더러는 필름이라고 할 수 있습니다.

그 다음 큐브를 만듭니다. 지오메트리는 형태(모양)를 정의하고, 머티리얼은 표면의 색깔이나 질감을 정의합니다.

이 둘을 합쳐서 메시를 만들고 씬에 추가하면 비로소 화면에 보이게 됩니다. 박시니어 씨는 김개발 씨에게 말했습니다.

"이 코드 한 번만 이해하면, 나머지는 응용입니다. 큐브 대신 다른 모양을 쓸 수도 있고, Blender에서 만든 모델을 불러올 수도 있어요." 김개발 씨는 코드를 실행해보았습니다.

브라우저에 초록색 큐브가 떴습니다. "와, 진짜 되네요!" 3D 웹 개발의 첫걸음을 뗀 순간이었습니다.

실전 팁

💡 - Three.js 공식 문서의 예제들을 하나씩 따라 해보세요. 백 번 읽는 것보다 한 번 직접 코딩하는 게 낫습니다.

• Blender는 단축키가 많습니다. 처음엔 어렵지만 익숙해지면 마우스보다 훨씬 빠릅니다.
• 씬, 카메라, 렌더러는 Three.js의 핵심입니다. 이 세 가지 개념을 확실히 이해하고 넘어가세요.

---

2. 3D 웹 개발의 활용 사례

"그래서 이걸 배우면 어디에 쓸 수 있나요?" 김개발 씨가 물었습니다. 박시니어 씨는 브라우저를 열어 몇 가지 사이트를 보여주기 시작했습니다.

화면 속 웹사이트들은 김개발 씨가 지금껏 봐왔던 것과는 차원이 달랐습니다.

3D 웹 개발은 이커머스에서 제품을 입체적으로 보여주거나, 부동산에서 건물 내부를 가상으로 둘러보게 하거나, 교육 콘텐츠에서 복잡한 개념을 시각화하는 데 사용됩니다. 게임, 포트폴리오, 인터랙티브 스토리텔링 등 창의적인 웹 경험을 만드는 모든 곳에서 활용할 수 있습니다.

다음 코드를 살펴봅시다.

// GLTF 모델을 로드하여 제품을 3D로 보여주는 예제
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// GLTF 로더로 3D 모델 불러오기 - 실제 제품 파일 로드
const loader = new GLTFLoader();
loader.load('models/product.gltf', function(gltf) {
    scene.add(gltf.scene); // 모델을 씬에 추가
    animate(); // 애니메이션 시작
});

camera.position.z = 5;

박시니어 씨가 첫 번째로 보여준 것은 나이키 웹사이트였습니다. 신발 하나가 화면 중앙에 떠 있었고, 마우스로 드래그하면 360도로 돌아가며 모든 각도를 볼 수 있었습니다.

확대하면 신발 밑창의 작은 홈까지 선명하게 보였습니다. "이게 다 Three.js로 만든 거예요." 박시니어 씨가 설명했습니다.

"예전에는 사진을 여러 장 찍어서 돌려가며 보여줬는데, 이제는 3D 모델 하나면 끝이에요." 이커머스는 3D 웹의 가장 큰 활용 분야입니다. 온라인 쇼핑의 가장 큰 단점이 무엇일까요?

바로 제품을 직접 만져볼 수 없다는 점입니다. 사진만으로는 질감이나 크기감을 제대로 파악하기 어렵습니다.

하지만 3D 모델을 사용하면 고객이 직접 제품을 돌려보고 확대해서 디테일을 확인할 수 있습니다. 가구 회사 이케아는 한 걸음 더 나아갔습니다.

AR(증강현실) 기능을 추가해서 스마트폰 카메라로 자기 집 거실을 비추면, 그 위에 가구를 가상으로 배치해볼 수 있게 만들었습니다. "이 소파가 우리 집에 어울릴까?" 하는 고민을 사러 가기 전에 미리 해결하는 것입니다.

두 번째는 부동산과 건축 분야입니다. 박시니어 씨는 한 아파트 분양 사이트를 보여줬습니다.

브라우저 안에서 아파트 내부를 걸어다니며 둘러볼 수 있었습니다. 거실에서 방으로, 방에서 발코니로 자연스럽게 이동하며 실제 살 집을 미리 체험하는 것입니다.

"코로나 때 이런 가상 투어가 엄청 주목받았어요. 직접 방문하지 않아도 집을 볼 수 있으니까요." 건축가들도 설계 도면을 3D 웹으로 만들어 고객에게 보여줍니다.

평면 도면으로는 이해하기 어려운 공간감을 직관적으로 전달할 수 있습니다. 세 번째는 교육 분야입니다.

의대생들이 인체 해부학을 배울 때를 생각해봅시다. 교과서의 2D 그림만으로는 복잡한 장기의 위치와 구조를 이해하기 어렵습니다.

하지만 3D 웹 애플리케이션으로 심장 모델을 돌려보고, 안쪽으로 들어가 혈관의 흐름을 따라가며 배울 수 있다면 어떨까요? 천문학 수업에서는 태양계를 3D로 구현해 행성들의 공전 궤도를 실시간으로 시뮬레이션할 수 있습니다.

화학 시간에는 분자 구조를 3D로 보며 원자 간 결합을 이해할 수 있습니다. 네 번째는 게임과 인터랙티브 콘텐츠입니다.

Three.js로 만든 브라우저 게임들이 점점 늘어나고 있습니다. 별도의 설치 없이 링크만 클릭하면 바로 플레이할 수 있다는 것이 큰 장점입니다.

간단한 퍼즐 게임부터 복잡한 시뮬레이션까지 다양합니다. 인터랙티브 스토리텔링도 흥미로운 분야입니다.

뉴욕타임스 같은 언론사는 기사를 3D 웹으로 만들어 독자가 직접 데이터를 조작하며 탐험할 수 있게 합니다. 마지막으로 포트폴리오와 개인 브랜딩입니다.

개발자나 디자이너들이 자신의 포트폴리오 사이트를 3D로 만드는 경우가 늘고 있습니다. 평범한 웹사이트 사이에서 3D로 만들어진 포트폴리오는 단번에 눈에 띕니다.

마우스를 따라 움직이는 3D 오브젝트, 스크롤에 반응하는 애니메이션 등으로 강렬한 인상을 남길 수 있습니다. 위의 코드는 실제 업무에서 가장 많이 사용하는 패턴입니다.

GLTFLoader는 Blender에서 내보낸 3D 모델 파일을 불러오는 로더입니다. GLTF는 웹에 최적화된 3D 파일 포맷으로, 용량이 작고 로딩이 빠릅니다.

load 메서드에 파일 경로를 넘기면 비동기로 모델을 불러와 씬에 추가합니다. 김개발 씨는 감탄했습니다.

"와, 이렇게 다양한 곳에 쓰이는군요!" 박시니어 씨가 고개를 끄덕였습니다. "앞으로 더 많아질 거예요.

메타버스, Web3 같은 트렌드도 결국 3D 웹 기술이 기반이니까요."

실전 팁

💡 - 처음에는 간단한 제품 뷰어부터 만들어보세요. 복잡한 게임보다 실용적이고 배우기도 쉽습니다.

• Three.js 공식 사이트의 예제 갤러리를 둘러보세요. 어떤 것이 가능한지 아이디어를 얻을 수 있습니다.
• 성능 최적화가 중요합니다. 모바일에서도 부드럽게 돌아가야 실제 서비스에 쓸 수 있습니다.

---

3. Blender 설치 및 기본 인터페이스

김개발 씨는 당장 Blender를 설치하기로 했습니다. 하지만 막상 프로그램을 열어보니 버튼과 메뉴가 너무 많아서 어디서부터 시작해야 할지 막막했습니다.

"이거 너무 복잡한데요?" 박시니어 씨가 웃으며 답했습니다. "처음엔 다 그래요.

하지만 기본만 알면 충분합니다."

Blender는 공식 사이트에서 무료로 다운로드할 수 있으며 Windows, Mac, Linux 모두 지원합니다. 설치 후 처음 보는 인터페이스는 복잡해 보이지만, 3D 뷰포트, 아웃라이너, 프로퍼티 패널 등 핵심 영역만 이해하면 기본 작업이 가능합니다.

마우스 조작법과 기본 단축키만 익혀도 간단한 모델링을 시작할 수 있습니다.

다음 코드를 살펴봅시다.

// Blender에서 만든 모델을 Three.js로 불러오기
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const loader = new GLTFLoader();

// Blender에서 Export > glTF 2.0으로 내보낸 파일 로드
loader.load(
    'models/my_first_model.glb',
    function(gltf) {
        // 로드 성공 시 씬에 추가
        const model = gltf.scene;
        model.position.set(0, 0, 0); // 위치 조정
        scene.add(model);
        console.log('모델 로드 완료!');
    },
    function(xhr) {
        // 로딩 진행률 표시
        console.log((xhr.loaded / xhr.total * 100) + '% 로드됨');
    }
);

김개발 씨는 blender.org에 접속했습니다. 메인 페이지에 크게 "Download" 버튼이 보였습니다.

클릭하니 자동으로 운영체제를 감지해 맞는 버전을 추천해줬습니다. 다운로드는 몇 분이면 끝났습니다.

파일 크기가 200MB 정도로 생각보다 작았습니다. 설치는 더욱 간단했습니다.

일반적인 프로그램 설치와 똑같이 Next만 몇 번 누르면 끝입니다. 특별한 설정이 필요 없습니다.

Mac 사용자라면 dmg 파일을 열어 Applications 폴더로 드래그하면 됩니다. 설치 후 Blender를 처음 실행하면 스플래시 스크린이 나타납니다.

여기서 "General"을 선택하면 기본 템플릿으로 시작됩니다. 처음엔 이것을 선택하세요.

나중에 익숙해지면 2D Animation, Sculpting 같은 다른 템플릿도 시도해볼 수 있습니다. 스플래시를 닫으면 드디어 Blender의 메인 화면이 나타납니다.

화면 중앙에 큐브, 라이트, 카메라가 기본으로 배치되어 있습니다. 처음 보는 사람은 당황할 수밖에 없습니다.

화면이 여러 영역으로 나뉘어 있고, 버튼이 수백 개는 되어 보입니다. 하지만 걱정하지 마세요.

실제로 자주 쓰는 것은 몇 개 되지 않습니다. 인터페이스의 핵심 영역을 알아봅시다.

가장 중요한 것은 화면 중앙의 3D 뷰포트입니다. 여기서 실제로 모델을 만들고 보고 조작합니다.

마치 캔버스와 같은 곳입니다. 오른쪽 위에는 아웃라이너가 있습니다.

씬 안의 모든 오브젝트를 트리 구조로 보여줍니다. 포토샵의 레이어 패널과 비슷하다고 생각하면 됩니다.

큐브, 라이트, 카메라 등이 목록으로 나열되어 있습니다. 오른쪽 아래는 프로퍼티 패널입니다.

선택한 오브젝트의 세부 속성을 조정하는 곳입니다. 위치, 크기, 회전 등을 숫자로 정확하게 입력할 수 있습니다.

왼쪽에는 도구 모음이 있습니다. 선택, 이동, 회전, 크기 조절 등 자주 쓰는 도구들이 아이콘으로 나열되어 있습니다.

이제 마우스 조작법을 배워봅시다. 이것이 Blender의 첫 번째 관문입니다.

마우스 가운데 버튼(휠)을 누른 채 드래그하면 시점이 회전합니다. 이것이 가장 기본적이고 자주 쓰는 동작입니다.

큐브 주위를 빙글빙글 돌며 여러 각도에서 볼 수 있습니다. 휠을 굴리면 줌 인/아웃됩니다.

가까이 다가가거나 멀리서 전체를 보고 싶을 때 사용합니다. Shift를 누른 채 가운데 버튼으로 드래그하면 화면이 평행 이동합니다.

이것을 패닝이라고 합니다. 초보자들이 자주 하는 실수가 있습니다.

왼쪽 버튼으로 뷰를 회전하려고 시도하는 것입니다. 하지만 Blender에서 왼쪽 클릭은 오브젝트를 선택하는 용도입니다.

반드시 가운데 버튼을 사용해야 합니다. 기본 단축키 몇 가지만 외워봅시다.

G키는 Grab(잡기)의 약자로, 오브젝트를 이동합니다. 큐브를 선택하고 G를 누른 후 마우스를 움직여보세요.

큐브가 마우스를 따라다닙니다. S키는 Scale(크기)입니다.

오브젝트의 크기를 조절합니다. R키는 Rotate(회전)입니다.

오브젝트를 회전시킵니다. 이 세 가지만 알아도 기본적인 조작이 가능합니다.

나머지는 천천히 배워도 됩니다. 박시니어 씨는 김개발 씨에게 실습을 시켜봤습니다.

"큐브를 선택하고 G를 눌러보세요. 그리고 마우스를 움직인 다음 클릭하세요." 김개발 씨가 따라 하자 큐브가 새 위치로 이동했습니다.

"오, 신기한데요!" "이제 S를 눌러 크기를 키워보세요." 큐브가 커졌습니다. "R을 눌러 돌려보세요." 큐브가 회전했습니다.

몇 번 연습하자 김개발 씨는 자신감이 생겼습니다. "생각보다 어렵지 않네요!" 박시니어 씨가 고개를 끄덕였습니다.

"처음엔 다들 겁먹는데, 막상 해보면 논리적이에요." 위의 코드는 Blender에서 만든 모델을 Three.js로 불러오는 전체 과정을 보여줍니다. GLTFLoader의 load 메서드는 세 개의 콜백 함수를 받습니다.

첫 번째는 로드 성공 시, 두 번째는 로딩 진행 중, 세 번째는 에러 발생 시입니다. 실제로는 로딩 진행률을 화면에 표시해 사용자 경험을 개선할 수 있습니다.

실전 팁

💡 - Blender는 업데이트가 자주 됩니다. 최신 버전을 유지하세요. 버그 수정과 새 기능이 계속 추가됩니다.

• 마우스에 가운데 버튼이 없다면 Preferences에서 "Emulate 3 Button Mouse"를 켜세요. Alt+왼쪽 버튼으로 대체할 수 있습니다.
• 단축키는 한꺼번에 외우려 하지 말고 작업하면서 하나씩 익히세요. 자주 쓰는 것만 자연스럽게 손에 익습니다.

---

4. Three.js 개발 환경 설정

3D 모델을 만드는 법을 조금 배운 김개발 씨는 이제 웹에서 보여주고 싶어졌습니다. "Three.js 개발 환경은 어떻게 설정하나요?" 박시니어 씨는 터미널을 열며 답했습니다.

"요즘은 Vite를 많이 써요. 몇 줄이면 끝나요."

Three.js 개발 환경은 Vite 같은 모던 번들러를 사용하면 간단하게 설정할 수 있습니다. npm으로 Three.js를 설치하고 간단한 HTML과 JavaScript 파일을 작성하면 바로 시작할 수 있습니다.

로컬 서버를 띄워 실시간으로 변경사항을 확인하며 개발할 수 있습니다.

다음 코드를 살펴봅시다.

// Vite + Three.js 프로젝트 시작하기
// 터미널에서 실행할 명령어들 (주석으로 설명)

// 1. 프로젝트 폴더 생성 및 이동
// npm create vite@latest my-threejs-app -- --template vanilla
// cd my-threejs-app

// 2. Three.js 설치
// npm install three

// 3. main.js 파일 작성
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 개발 서버 실행: npm run dev

박시니어 씨가 새 터미널 창을 열었습니다. "첫 번째 할 일은 프로젝트 폴더를 만드는 거예요." 옛날에는 Webpack 설정 파일을 작성하느라 한 시간씩 걸렸습니다.

복잡한 설정 옵션들을 이해하고, 로더와 플러그인을 일일이 추가해야 했습니다. 초보자에게는 진입 장벽이 너무 높았습니다.

하지만 요즘은 Vite 같은 도구 덕분에 몇 초면 끝납니다. Vite는 프랑스어로 "빠르다"는 뜻입니다.

이름답게 정말 빠릅니다. 파일을 수정하면 거의 즉시 브라우저에 반영됩니다.

기존 번들러들이 전체 파일을 다시 묶는 동안, Vite는 바뀐 부분만 빠르게 업데이트합니다. 터미널에서 첫 번째 명령어를 입력합니다.

npm create vite@latest my-threejs-app -- --template vanilla 이 한 줄이 프로젝트의 기본 구조를 만들어줍니다. vanilla 템플릿은 React나 Vue 같은 프레임워크 없이 순수 JavaScript로 시작한다는 뜻입니다.

Three.js는 프레임워크 없이도 충분히 잘 작동합니다. 몇 초 후 "Done.

Now run:" 이라는 메시지와 함께 명령어 안내가 나옵니다. cd my-threejs-app로 폴더에 들어갑니다.

그리고 npm install을 실행해 기본 의존성들을 설치합니다. 이제 Three.js를 추가할 차례입니다.

npm install three 이 명령어 하나로 Three.js 라이브러리 전체가 프로젝트에 추가됩니다. 예전에는 CDN 링크를 HTML에 붙여넣거나, 파일을 직접 다운받아 넣었는데, 이제는 npm이 다 해줍니다.

설치가 끝나면 package.json 파일을 열어봅시다. dependencies 항목에 "three"가 추가된 것을 볼 수 있습니다.

버전 번호도 함께 기록됩니다. 나중에 다른 개발자가 이 프로젝트를 받아서 npm install만 실행하면 똑같은 환경이 구성됩니다.

이제 코드를 작성할 차례입니다. 프로젝트 폴더를 보면 main.js 파일이 있습니다.

이 파일을 열어 기본 내용을 지우고 위의 코드를 붙여넣습니다. 코드 첫 줄 import * as THREE from 'three'를 주목하세요.

이것이 ES6 모듈 문법입니다. npm으로 설치한 three 패키지를 불러오는 것입니다.

예전 방식처럼 전역 변수에 의존하지 않고, 명시적으로 필요한 것만 임포트합니다. 나머지 코드는 앞에서 본 것과 비슷합니다.

씬, 카메라, 렌더러를 만들고 화면에 그립니다. 개발 서버를 실행해봅시다.

npm run dev 터미널에 "Local: http://localhost:5173/" 같은 메시지가 뜹니다. 이 주소를 브라우저에서 열어봅니다.

화면이 나타났습니다! 아직 아무것도 안 그렸으니 검은 화면뿐이지만, 콘솔에 에러가 없다면 성공한 것입니다.

한 가지 더 추가해봅시다. 뭔가 보이는 오브젝트를 넣어야 확인이 쉽습니다.

javascript const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; renderer.render(scene, camera); 파일을 저장하는 순간, 브라우저가 자동으로 새로고침되며 초록 큐브가 나타납니다. 이것이 Vite의 HMR(Hot Module Replacement) 기능입니다.

매번 수동으로 새로고침할 필요가 없습니다. 김개발 씨가 감탄했습니다.

"와, 진짜 바로 반영되네요!" 박시니어 씨가 미소 지었습니다. "이제 개발 속도가 엄청 빨라질 거예요." 만약 React나 Vue를 쓰고 싶다면 템플릿만 바꾸면 됩니다.

--template react나 --template vue로 프로젝트를 만들면 됩니다. Three.js는 어떤 프레임워크와도 잘 어울립니다.

주의할 점이 하나 있습니다. Three.js의 용량이 꽤 큽니다.

전체 라이브러리를 임포트하면 번들 크기가 커져서 로딩이 느려질 수 있습니다. 실제 프로덕션에서는 필요한 것만 선택적으로 임포트하세요.

javascript import { Scene, PerspectiveCamera, WebGLRenderer } from 'three'; 이렇게 하면 사용하는 것만 포함되어 번들 크기가 줄어듭니다.

실전 팁

💡 - Vite 대신 Next.js나 Create React App을 써도 됩니다. 하지만 순수 Three.js만 배울 거라면 Vite가 가장 가볍고 빠릅니다.

• 개발 중에는 전체 임포트(import * as THREE)가 편하지만, 배포 전에는 필요한 것만 임포트하세요.
• package.json에 three 버전을 고정하세요. 메이저 업데이트 시 API가 바뀔 수 있습니다.

---

5. VS Code 세팅 및 필수 확장 프로그램

개발 환경이 갖춰지자 김개발 씨는 본격적으로 코딩을 시작했습니다. 하지만 코드를 작성하는데 자동완성이 잘 안 되고, 타입 힌트도 없어서 불편했습니다.

"VS Code 설정을 좀 더 해야겠어요." 박시니어 씨가 몇 가지 확장 프로그램을 추천해줬습니다.

VS Code에서 Three.js 개발을 효율적으로 하려면 몇 가지 확장 프로그램이 도움이 됩니다. TypeScript를 사용하면 자동완성과 타입 체크를 받을 수 있고, GLTF 확장으로 3D 모델을 미리보기 할 수 있으며, Live Server로 실시간 개발이 가능합니다.

ESLint와 Prettier로 코드 품질도 유지할 수 있습니다.

다음 코드를 살펴봅시다.

// TypeScript로 Three.js 사용하기 - 타입 안정성 확보
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

// TypeScript가 자동으로 타입을 체크합니다
const scene: THREE.Scene = new THREE.Scene();
const camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

// GLTFLoader 타입도 자동으로 추론됩니다
const loader: GLTFLoader = new GLTFLoader();
loader.load('model.glb', (gltf: any) => {
    scene.add(gltf.scene);
});

김개발 씨는 VS Code를 열고 확장 프로그램 탭으로 갔습니다. 검색창에 뭘 쳐야 할지 막막했습니다.

박시니어 씨가 차근차근 설명했습니다. "Three.js 개발에 유용한 확장 프로그램 몇 가지를 알려드릴게요." 첫 번째는 JavaScript와 TypeScript 지원입니다.

사실 VS Code는 기본적으로 JavaScript를 훌륭하게 지원합니다. 별도 확장 없이도 코드 하이라이팅, 자동완성, 문법 체크가 작동합니다.

하지만 여기에 TypeScript를 추가하면 한 단계 더 나아갑니다. TypeScript를 쓰면 변수의 타입이 명확해집니다.

Three.js 객체의 메서드를 입력하다 보면 자동완성 목록이 뜹니다. scene.까지만 쳐도 add, remove, getObjectByName 같은 메서드들이 쭉 나옵니다.

잘못된 타입을 넣으면 빨간 밑줄로 경고해줍니다. 런타임 에러가 나기 전에 미리 잡을 수 있는 것입니다.

프로젝트에 TypeScript를 추가하는 것은 간단합니다. npm install --save-dev typescript @types/three 이제 main.js를 main.ts로 바꾸기만 하면 됩니다.

VS Code가 자동으로 TypeScript 파일로 인식합니다. 두 번째는 glTF Tools 확장입니다.

이것은 정말 유용합니다. GLTF나 GLB 파일을 VS Code에서 바로 열어 3D 미리보기를 볼 수 있습니다.

Blender를 열지 않아도 모델이 제대로 만들어졌는지 확인할 수 있습니다. 확장 마켓플레이스에서 "glTF Tools"를 검색해 설치합니다.

설치 후 GLB 파일을 오른쪽 클릭하면 "glTF: Import from GLB" 같은 옵션이 나타납니다. 파일을 열면 에디터 안에서 3D 뷰어가 뜹니다.

마우스로 모델을 돌려보고, 애니메이션이 있다면 재생도 할 수 있습니다. 세 번째는 ESLint와 Prettier입니다.

이 두 확장은 코드 품질을 유지하는 데 필수입니다. ESLint는 코드에서 잠재적인 버그나 나쁜 패턴을 찾아줍니다.

Prettier는 코드 포맷을 자동으로 정리해줍니다. 들여쓰기가 엉망인 코드를 저장하는 순간 Prettier가 깔끔하게 정렬해줍니다.

세미콜론을 빼먹어도 자동으로 추가해줍니다. 팀 프로젝트에서 코드 스타일을 통일할 때 특히 유용합니다.

npm install --save-dev eslint prettier로 설치하고, VS Code 확장도 함께 깔아줍니다. 네 번째는 Live Server 또는 Preview on Web Server입니다.

Vite를 쓴다면 굳이 필요 없지만, 간단한 HTML 파일을 열고 싶을 때 유용합니다. 파일을 우클릭하고 "Open with Live Server"를 선택하면 로컬 서버가 뜨고 브라우저가 열립니다.

파일을 수정하면 자동으로 새로고침됩니다. 간단한 프로토타입을 만들 때 빠르게 테스트할 수 있습니다.

다섯 번째는 Shader languages support입니다. Three.js를 깊이 파고들면 커스텀 셰이더를 작성하게 됩니다.

셰이더는 GLSL이라는 언어로 작성하는데, 기본 VS Code는 이 언어를 모릅니다. 이 확장을 설치하면 .glsl, .vert, .frag 파일을 문법 하이라이팅과 함께 편집할 수 있습니다.

김개발 씨가 확장들을 하나씩 설치했습니다. "확실히 편해지네요.

자동완성이 너무 좋아요!" 박시니어 씨가 추가 팁을 줬습니다. "VS Code 설정에서 'format on save'를 켜두세요.

저장할 때마다 Prettier가 자동으로 코드를 정리해줍니다." Settings에서 "format on save"를 검색해 체크박스를 켭니다. 이제 Ctrl+S만 눌러도 코드가 깔끔해집니다.

또 하나 유용한 설정은 자동 임포트입니다. Three.js의 클래스를 쓸 때 일일이 import 문을 작성하기 귀찮습니다.

TypeScript를 쓴다면 VS Code가 자동으로 임포트 문을 추가해줍니다. BoxGeometry를 타이핑하면 자동완성 목록에서 선택할 때 상단에 import 문이 자동으로 추가됩니다.

위의 코드는 TypeScript로 작성한 예제입니다. 타입 어노테이션이 붙어 있어서 VS Code가 정확한 타입 체크를 해줍니다.

camera 변수에 Scene을 할당하려 하면 바로 에러가 납니다. 실무에서는 이런 타입 안정성이 큰 프로젝트일수록 중요해집니다.

리팩토링할 때도 타입 체크 덕분에 놓치는 부분 없이 안전하게 수정할 수 있습니다.

실전 팁

💡 - TypeScript는 처음엔 번거롭게 느껴지지만, 프로젝트가 커질수록 그 가치를 실감하게 됩니다.

• Prettier 설정 파일을 만들어 팀원들과 공유하세요. 모두가 같은 포맷을 쓰면 Git conflict가 줄어듭니다.
• VS Code의 단축키를 배우세요. F12로 정의로 이동, Ctrl+Space로 자동완성 열기 등이 효율을 크게 높여줍니다.

---

6. 첫 번째 3D 씬 만들어보기

모든 준비가 끝났습니다. 김개발 씨는 드디어 자신만의 첫 3D 씬을 만들 준비가 되었습니다.

"뭐부터 만들어볼까요?" 박시니어 씨가 답했습니다. "회전하는 큐브부터 시작해봅시다.

Three.js의 헬로 월드죠."

첫 3D 씬은 씬, 카메라, 렌더러를 설정하고 간단한 큐브를 추가한 후 애니메이션 루프로 회전시키는 것으로 시작합니다. 조명을 추가하면 입체감이 살아나고, OrbitControls를 붙이면 마우스로 시점을 조작할 수 있습니다.

이 기본 패턴은 모든 Three.js 프로젝트의 토대가 됩니다.

다음 코드를 살펴봅시다.

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// 씬, 카메라, 렌더러 초기화
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 큐브 생성
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 조명 추가 - 입체감 표현을 위해 필수
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

// 마우스 컨트롤 추가
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 5;

// 애니메이션 루프 - 매 프레임마다 실행
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01; // X축 회전
    cube.rotation.y += 0.01; // Y축 회전
    controls.update(); // 컨트롤 업데이트
    renderer.render(scene, camera); // 화면에 렌더링
}

animate(); // 애니메이션 시작

김개발 씨는 새 파일을 열고 코드를 작성하기 시작했습니다. 손가락이 떨렸습니다.

첫 3D 프로젝트라니 설레기도 하고 긴장도 되었습니다. 박시니어 씨가 옆에서 안내했습니다.

"차근차근 해봅시다. 먼저 Three.js를 임포트하세요." Three.js 프로젝트는 항상 같은 패턴으로 시작됩니다.

씬, 카메라, 렌더러라는 세 가지 필수 요소를 만드는 것입니다. 씬은 3D 공간 자체입니다.

무대라고 생각하면 됩니다. 이 무대 위에 배우(오브젝트)들을 올려놓는 것입니다.

카메라는 관객의 시점입니다. 무대를 어느 각도에서 볼 것인지 결정합니다.

PerspectiveCamera는 인간의 눈처럼 원근감이 있는 카메라입니다. 멀리 있는 것은 작게, 가까이 있는 것은 크게 보입니다.

카메라의 첫 번째 파라미터 75는 시야각(FOV)입니다. 숫자가 클수록 넓은 영역을 봅니다.

두 번째는 화면 비율, 세 번째와 네 번째는 렌더링할 거리의 최소/최대값입니다. 렌더러는 무대를 실제로 그림으로 그려내는 화가입니다.

WebGLRenderer는 GPU를 사용해 빠르게 3D를 렌더링합니다. antialias: true 옵션은 계단 현상을 부드럽게 해줍니다.

renderer.setSize로 캔버스 크기를 지정하고, document.body.appendChild로 HTML에 추가합니다. 이제 브라우저에 캔버스가 생겼습니다.

다음은 오브젝트 추가입니다. BoxGeometry는 큐브의 형태를 정의합니다.

세 개의 파라미터는 가로, 세로, 높이입니다. 모두 1이면 정육면체가 됩니다.

MeshStandardMaterial은 현대적인 조명 시스템과 잘 작동하는 재질입니다. 예전에 쓰던 MeshBasicMaterial은 조명의 영향을 받지 않아서 평면적으로 보입니다.

Mesh는 형태(geometry)와 재질(material)을 합친 것입니다. 이것을 scene.add로 무대에 올립니다.

하지만 이대로 실행하면 아무것도 안 보입니다. 왜일까요?

조명이 없기 때문입니다. 현실 세계도 빛이 없으면 아무것도 안 보이는 것처럼, 3D 세계도 마찬가지입니다.

MeshStandardMaterial은 조명을 받아야 색이 보입니다. DirectionalLight는 태양처럼 한 방향에서 비추는 조명입니다.

position.set으로 위치를 정합니다. (5, 5, 5)는 오른쪽 위 앞쪽에서 비춘다는 뜻입니다.

조명도 scene.add로 씬에 추가해야 작동합니다. 이제 카메라 위치를 조정합니다.

camera.position.z = 5로 카메라를 뒤로 물립니다. 기본값은 (0, 0, 0)인데, 큐브도 (0, 0, 0)에 있어서 카메라가 큐브 안에 들어가 있는 상태입니다.

뒤로 물러나야 큐브를 볼 수 있습니다. OrbitControls를 추가하면 사용자가 마우스로 시점을 조작할 수 있습니다.

마우스 왼쪽 버튼으로 드래그하면 카메라가 오브젝트 주위를 공전합니다. 휠로 줌 인/아웃하고, 오른쪽 버튼으로 패닝합니다.

3D 뷰어에서 기대하는 모든 조작이 가능해집니다. OrbitControls는 별도로 임포트해야 합니다.

three/examples/jsm 폴더에 있는 확장 모듈이기 때문입니다. 마지막으로 애니메이션 루프를 만듭니다.

animate 함수는 매 프레임마다 실행됩니다. requestAnimationFrame은 브라우저에게 "다음 프레임에 이 함수를 다시 실행해줘"라고 요청하는 것입니다.

보통 초당 60번 실행됩니다. cube.rotation.x와 cube.rotation.y에 조금씩 더하면 큐브가 회전합니다.

0.01이라는 작은 값을 더하는 것이 매 프레임 반복되면서 부드러운 회전이 만들어집니다. controls.update()는 OrbitControls가 마우스 입력을 처리하도록 합니다.

renderer.render(scene, camera)가 실제로 화면에 그림을 그립니다. 이것을 호출해야 비로소 무언가가 보입니다.

김개발 씨가 파일을 저장하고 브라우저를 열었습니다. 초록색 큐브가 빙글빙글 돌고 있었습니다.

마우스로 드래그하니 시점이 바뀌었습니다. "와, 제가 만든 거예요!" 김개발 씨의 얼굴에 환한 미소가 번졌습니다.

박시니어 씨가 격려했습니다. "축하합니다!

이제 3D 웹 개발자 반열에 올랐어요. 이 코드가 기본 템플릿입니다.

큐브 대신 다른 모델을 넣고, 조명을 추가하고, 재질을 바꾸면서 실험해보세요." 김개발 씨는 코드를 이리저리 바꿔보기 시작했습니다. 큐브 색을 빨간색으로 바꿨습니다.

회전 속도를 높였습니다. 구와 원기둥도 추가해봤습니다.

실험하면서 배우는 것, 그것이 3D 웹 개발의 가장 큰 즐거움입니다.

실전 팁

💡 - animate 함수 안에서 무거운 작업을 하지 마세요. 초당 60번 실행되므로 성능에 큰 영향을 줍니다.

• 창 크기가 바뀔 때 렌더러와 카메라도 업데이트하세요. window.addEventListener('resize', ...) 이벤트를 활용합니다.
• 처음엔 간단한 도형들로 실험하세요. 복잡한 모델은 나중에 다뤄도 늦지 않습니다.

---

이상으로 학습을 마칩니다. 위 내용을 직접 코드로 작성해보면서 익혀보세요!