Claude Code + Three.js로 웹에서 3D를 만드는 A to Z

— 3D VIEWPORT · ISSUE №20

🧊 3D A to Z

화면에 깊이를 더한다,
웹에서 만드는 첫 3D.

Claude Code + Three.js로 웹에서 3D를 만드는 A to Z — 회전하는 큐브부터 마우스로 돌리는 입체 씬까지, 초보자를 위한 단계별 완전 가이드

바이브 코딩 시리즈 · 20 · 봄내AI해적단 ◈ RENDERING

🧊 IN THIS GUIDE

"웹사이트에서 빙글빙글 돌아가는 3D, 저런 거 너무 어렵죠?" 의외로 아니에요. 이 글은 웹 3D의 표준 Three.js로, 첫 3D 물체를 화면에 띄우고 움직이게 만드는 전 과정을 안내합니다. 3D는 바이브 코딩과 환상의 짝꿍이에요 — 결과가 눈에 바로 보이니까.

안녕하세요, 봄내AI해적단 선장 이장환입니다. 시리즈 스무 번째 글이에요.

지금까지 우리가 만든 건 대부분 평면(2D)이었어요. 화면 위의 버튼, 목록, 텍스트. 이번엔 차원을 하나 더합니다. 깊이(depth)가 있는 3D 세계로요.

좋은 소식이 있어요. 3D는 바이브 코딩에 가장 잘 맞는 분야 중 하나입니다. 왜냐고요? 결과가 눈에 바로 보이거든요. AI가 만든 코드가 맞았는지 틀렸는지, 화면에 큐브가 돌아가는 걸 보면 즉시 알 수 있어요. 2026년, Three.js는 AI 시대 3D의 표준이 되었습니다.

막연히 어렵게 느껴지지만, 3D의 기본 원리는 영화 촬영장과 똑같아요. 무대 세우고, 카메라 놓고, 조명 켜고, 배우(물체) 세우고, 촬영(렌더). 이 비유 하나면 3D의 절반은 이해한 거예요. 같이 시작해봅시다.

⊙ 가이드 구성

9개 챕터. 1~3장은 원리와 셋업, 4~7장은 3D 만들기, 8~9장은 실전과 다음 단계입니다.

01   웹에서 3D? Three.js란↓ 02   3대 요소 — 씬·카메라·렌더러↓ 03   프로젝트 셋업↓ 04   첫 3D 물체 — 큐브 ★↓ 05   3D 좌표와 변형↓ 06   조명과 재질↓ 07   움직임 — 애니메이션 루프↓ 08   실전 — 마우스로 돌리기↓ 09   다음 단계 + 함정 6가지↓

01

CHAPTER ONE

웹에서 3D, Three.js란.

웹 브라우저는 원래 3D를 그릴 수 있어요. WebGL이라는 기술 덕분이죠. 그런데 WebGL을 직접 쓰는 건 너무 어려워요. 그래서 Three.js가 등장했습니다.

🧊 Three.js란?

웹에서 3D를 쉽게 만들게 해주는 자바스크립트 라이브러리. 복잡한 WebGL을 친절하게 감싸서, 몇 줄의 코드로 3D 물체를 만들고 움직일 수 있게 해줍니다. 2026년 현재 웹 3D의 사실상 표준이에요.

3D로 무엇을 만들 수 있나

🎨

인터랙티브 포트폴리오

3D로 돌아가는 인상적인 개인 웹사이트

🎮

웹 게임

브라우저에서 바로 하는 3D 게임

📦

제품 3D 뷰어

상품을 360도 돌려보는 쇼핑몰 기능

📊

3D 데이터 시각화

입체 차트, 지구본, 네트워크 그래프

💡 왜 바이브 코딩에 딱인가 · Three.js는 ① 셋업이 간단(서버·DB 불필요) ② 결과가 즉시 보임(브라우저에서 바로 렌더) ③ AI가 잘 앎(문서가 방대해 학습이 잘 됨). 그래서 "큐브 만들어줘" 한마디로 시작할 수 있어요. 틀려도 눈으로 바로 보이니 고치기도 쉽고요.

02

CHAPTER TWO

3대 요소 — 영화 촬영처럼.

모든 Three.js 3D는 3가지 핵심 요소로 시작합니다. 영화 촬영장에 비유하면 완벽하게 이해돼요.

🎬

Scene (씬)

촬영 세트장

3D 물체들이 놓이는 공간. 모든 게 여기 담김.

📷

Camera (카메라)

카메라

어디서, 어떤 각도로 볼지. 시점을 결정.

🎞️

Renderer (렌더러)

필름·녹화

씬을 카메라로 찍어 화면에 그려줌.

씬에 물체를 놓고 → 카메라로 보고 → 렌더러가 화면에 그린다

🎬 한 문장으로

"세트장(씬)에 소품(물체)을 놓고, 카메라로 비추면, 녹화기(렌더러)가 화면에 그린다." 여기에 조명(Light)을 더하고, 매 순간 다시 찍으면(애니메이션 루프) 움직이는 3D가 됩니다. 이게 전부예요.

03

CHAPTER THREE

프로젝트 셋업.

3D를 시작하는 가장 쉬운 방법은 HTML 파일 하나예요. 복잡한 셋업 없이 바로 시작할 수 있어요.

가장 간단한 시작 — 클로드에게 요청

[프롬프트] Three.js로 가장 기본적인 3D 시작 파일을 만들어줘. [조건] - HTML 파일 하나로 (index.html) - Three.js는 CDN으로 불러오기 - 화면에 씬·카메라·렌더러 기본 셋업 - 일단 빈 검은 화면이 나오게 (다음에 물체 추가) - 초보자가 이해하게 주석 자세히 브라우저에서 바로 열어볼 수 있게.

기본 뼈대 (클로드가 생성)

📄 index.html (핵심 구조)

// Three.js 불러오기 (CDN)
import * as THREE from 'three';

// ① 씬 — 세트장 만들기
const scene = new THREE.Scene();

// ② 카메라 — 시점 (시야각, 비율, 가까운/먼 거리)
const camera = new THREE.PerspectiveCamera(
  75, window.innerWidth/window.innerHeight, 0.1, 1000
);
camera.position.z = 5;  // 카메라를 뒤로

// ③ 렌더러 — 화면에 그리기
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 그리기
renderer.render(scene, camera);

💡 지금은 검은 화면 · 이 단계에선 세트장만 차렸고 아직 아무것도 안 놨어요. 그래서 검은 화면이 정상입니다. 코드를 다 이해 못 해도 괜찮아요. "씬·카메라·렌더러 3개가 있구나"만 알면 됩니다. 다음 장에서 물체를 놓아요.

04

CHAPTER FOUR · 핵심

첫 3D 물체 — 큐브 만들기.

드디어 물체를 만듭니다. 3D 물체를 메시(Mesh)라고 불러요. 메시는 2가지 재료로 만들어집니다.

🧊

Geometry

모양 (뼈대)

큐브, 구, 원기둥...

+

🎨

Material

재질 (표면)

색, 광택, 질감...

=

📦

Mesh

완성된 3D 물체

씬에 놓을 수 있음

비유하면, 도형(geometry)은 찰흙의 모양이고, 재질(material)은 그 표면에 칠하는 페인트예요. 둘을 합치면 하나의 3D 물체가 됩니다.

큐브 만들어 씬에 놓기

📄 큐브 추가

// 도형: 1×1×1 큐브
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 재질: 보라색
const material = new THREE.MeshStandardMaterial(
  { color: 0x7c3aed }
);

// 메시: 도형 + 재질 = 물체
const cube = new THREE.Mesh(geometry, material);

// 씬에 추가 (세트장에 놓기)
scene.add(cube);

💡 클로드에게 한 번에 시키기 · 위 코드를 외울 필요 없어요. "보라색 큐브를 화면 가운데에 만들어줘"라고 하면 클로드가 다 짜줍니다. 단, "메시 = 도형 + 재질" 개념만 알면 "구로 바꿔줘", "빨간색으로 해줘" 같은 수정 요청을 정확히 할 수 있어요.

기본 도형들

BoxGeometry

정육면체

SphereGeometry

구

CylinderGeometry

원기둥

ConeGeometry

원뿔

TorusGeometry

도넛

PlaneGeometry

평면(바닥)

05

CHAPTER FIVE

3D 좌표와 변형.

3D 공간에는 3개의 축이 있어요. 2D(가로·세로)에 깊이(z)가 추가된 거죠.

X = 좌우 · Y = 위아래 · Z = 앞뒤(깊이)

물체를 변형하는 3가지

📍 position — 이동

cube.position.x = 2 → 오른쪽으로 2칸. x/y/z로 어디든 이동.

🔄 rotation — 회전

cube.rotation.y = 1 → y축 기준 회전. 빙글빙글 도는 효과의 핵심.

📐 scale — 크기

cube.scale.set(2,2,2) → 2배 크게. 늘이고 줄이기.

💡 이 3가지가 3D 조작의 전부 · 위치(이동) · 회전 · 크기. 게임 캐릭터를 움직이는 것도, 물체를 돌리는 것도 결국 이 셋의 조합이에요. "큐브를 오른쪽으로 옮기고 45도 기울여줘"처럼 자연어로 요청하면 됩니다.

06

CHAPTER SIX

조명과 재질 — 빛이 있어야 보인다.

초보자가 가장 많이 당황하는 순간. "큐브를 만들었는데 까맣게만 보여요!" 이유는 간단해요. 조명이 없기 때문입니다.

🔦 현실과 똑같아요 · 깜깜한 방에 물체를 둬도 안 보이죠. 빛이 있어야 보입니다. 3D도 마찬가지예요. MeshStandardMaterial 같은 사실적 재질은 조명이 있어야 보입니다.

기본 조명 2종

💡 AmbientLight (전체광)

공간 전체를 은은하게 밝힘. 그림자 없이 골고루. 기본 밝기용.

🔦 DirectionalLight (방향광)

태양처럼 한 방향에서. 입체감과 그림자를 만듦. 사실감용.

📄 조명 추가

// 전체를 은은하게
const ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);

// 한 방향에서 (태양처럼)
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

💡 까맣게 보이면 조명부터 · 3D에서 물체가 안 보이거나 까맣게 보이면, 십중팔구 조명 문제예요. 클로드에게 "화면이 까매. 조명을 추가해서 큐브가 잘 보이게 해줘"라고 하면 해결됩니다. 이거 하나만 기억해도 큰 좌절을 피해요.

07

CHAPTER SEVEN

움직임 — 애니메이션 루프.

이제 큐브를 빙글빙글 돌려봅시다. 비밀은 "매 순간 다시 그리는 것"이에요. 애니메이션의 원리와 똑같아요 — 조금씩 바꿔서 빠르게 다시 그리면 움직이는 것처럼 보이죠.

매 프레임 (초당 60번) 반복

큐브 살짝 회전
rotation += 0.01

→

다시 그리기
render()

↻

반복!
움직임 완성

📄 애니메이션 루프

function animate() {
  // 매 프레임 다시 호출 (초당 약 60번)
  requestAnimationFrame(animate);

  // 큐브를 조금씩 회전
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 다시 그리기
  renderer.render(scene, camera);
}
animate();  // 시작!

💡 드디어 움직인다! · 이 코드를 넣으면 큐브가 빙글빙글 돌아갑니다. += 0.01 숫자를 키우면 빨라지고, 줄이면 느려져요. 시리즈 №13(에이전트)의 "스스로 반복" 개념이 여기선 "매 프레임 반복"으로 나타나죠. 3D가 살아 움직이는 첫 순간이에요!

08

BUILD · 실전

실전 — 마우스로 돌리는 3D 씬.

마지막으로, 모든 걸 합쳐 마우스로 빙글빙글 돌려볼 수 있는 3D 씬을 만들어봅시다. 이것만 만들면 "3D 입문 완료"예요.

🧊 마우스 컨트롤 3D 씬 — 6단계

STEP 1

씬·카메라·렌더러 셋업

3장의 기본 뼈대. "Three.js 기본 셋업 만들어줘"

STEP 2

물체 여러 개 배치

"보라색 큐브, 시안색 구, 핑크색 도넛을 나란히 배치해줘"

STEP 3

조명 추가

"전체광 + 방향광 추가해서 입체감 있게"

STEP 4

마우스 컨트롤 (OrbitControls)

"OrbitControls를 추가해서 마우스로 드래그하면 시점이 돌아가게. 휠로 줌도."

STEP 5

애니메이션 + 반응형

"물체들이 천천히 돌게 + 창 크기 바뀌면 화면도 맞춰지게"

STEP 6

완성 — 마우스로 돌려보기 ✓

브라우저에서 열고 마우스로 드래그! 3D 물체들이 시점에 따라 돌아갑니다. 본인의 첫 인터랙티브 3D 완성이에요.

[한 번에 만드는 프롬프트] Three.js로 마우스로 돌려볼 수 있는 3D 씬을 만들어줘. - HTML 파일 하나, CDN으로 Three.js 로드 - 보라/시안/핑크 색의 큐브·구·도넛 3개 배치 - 전체광 + 방향광으로 입체감 - OrbitControls로 마우스 드래그 회전 + 휠 줌 - 물체들이 천천히 자동 회전 - 창 크기 변하면 화면도 맞춰지게 - 배경은 어두운 남색 초보자가 바로 브라우저에서 열 수 있게.

09

CHAPTER NINE

다음 단계 + 함정 6가지.

다음 단계 — 어디로 갈까

📦 3D 모델 불러오기

Blender 등에서 만든 모델(.glb/.gltf)을 불러와 멋진 캐릭터·제품 표시. "GLTFLoader로 모델 불러와줘"

⚛️ React Three Fiber (R3F)

React로 3D를 더 깔끔하게. 시리즈 №9·15의 React 지식과 결합. 본격 3D 웹앱의 길.

🎮 3D 게임

물리 엔진·충돌·조작을 더해 웹 게임으로. 2025년 바이브 코딩 게임잼이 이걸로 열렸어요.

초보자가 만나는 함정 6가지

🚨 TRAP 1 · 까만 화면 (조명 없음)

가장 흔한 좌절. 물체가 안 보이면 조명부터 확인(6장). 90%는 이 문제.

🚨 TRAP 2 · 카메라가 물체 안에 있음

카메라 위치를 안 옮기면 물체 속에 파묻혀 안 보임. camera.position.z = 5로 뒤로.

🚨 TRAP 3 · 애니메이션 루프 빠뜨림

animate() 호출을 안 하면 안 움직이고 멈춤. 루프가 "심장 박동"이에요.

🚨 TRAP 4 · 성능 폭주 (물체 과다)

물체 수천 개를 막 만들면 느려짐. 많은 동일 물체는 특수 기법 필요. 처음엔 적게.

🚨 TRAP 5 · 버전 차이로 코드 안 됨

Three.js는 버전마다 문법이 조금씩 달라요. AI가 옛 버전 코드를 줄 수 있으니, "최신 버전 기준으로"를 명시.

🚨 TRAP 6 · 한 번에 완성하려 함

화려한 씬을 한 방에? 좌절의 지름길. 큐브 하나 → 회전 → 조명 → 컨트롤 순서로 쌓으세요.

FINAL THOUGHTS

"평면을 넘어, 공간을 만든다."

3D는 어려워 보이지만, 원리는 영화 촬영장만큼 직관적이에요. 세트장(씬)·카메라·녹화(렌더러)에 조명을 켜고, 매 순간 다시 찍으면(루프) 움직이는 3D가 됩니다. 이 골격만 알면, 나머지는 다 응용이에요.

그리고 3D는 바이브 코딩과 가장 잘 맞아요. 눈에 바로 보이니까. 오늘 만든 회전하는 큐브 하나가, 내일은 인터랙티브 포트폴리오가 되고, 모레는 본인의 웹 게임이 됩니다. 평면의 세계에 깊이를 더하는 첫걸음, 오늘 떼셨어요.

🏴‍☠️ 봄내AI해적단 멘티들에게

이번 주 미션 — 본인의 첫 3D 씬을 만드세요. 8장의 6단계를 그대로 따라 마우스로 돌려볼 수 있는 3D를 완성해보세요:

• 기본: 회전하는 큐브 하나 (4·7장)
• 도전: 큐브·구·도넛 + 조명 + 마우스 컨트롤 (8장)
• 응용: 본인이 좋아하는 색·모양으로 나만의 씬

한 번에 다 하지 말고, 큐브 하나부터. "까만 화면"이 나오면 당황 말고 조명부터 확인하세요(함정 1). 단계를 쌓을수록 점점 멋져집니다.

완성한 3D 씬을 화면 녹화해서 단톡방에 공유해주세요. 빙글빙글 돌아가는 그 첫 큐브, 분명 뿌듯하실 거예요. 다음 모임은 "각자의 첫 3D 자랑하기"로 진행합니다. 평면을 넘어 공간으로! 🧊✨

— 바이브 코딩 시리즈 전체 인덱스 (20편)

№1 Skills 만드는 법

№2 Claude Design

№3 Claude Code 입문

№4 Agent Teams

№5 6단계 워크플로우

№6 SQL 기초

№7 디버깅 기초

№8 GitHub 기초

№9 랜딩 페이지 실전

№10 PLAN 세우기

№11 MCP + n8n 자동화

№12 Cowork + 카카오톡 비서

№13 AI 에이전트 A to Z

№14 하네스 시스템 A to Z

№15 챗봇 만들기 A to Z

№16 유틸리티 로직 추가

№17 수익 모델 15종

№18 제안서 초안 작성

№19 업무 반복 작업 AI 정리

№20 3D 작업 입문 (Three.js) ← 현재 글

---

Issue №20 · 3D Viewport · Web 3D with Three.js

이장환 · 봄내AI해적단 선장 · 춘천 · 2026

참고: Three.js 공식 · 문서 · Three.js Journey