이번에는 3D다! Claude Design으로 만든 방탈출 게임
서론
Birdragon RPG에 이어 이번에는 3D 웹게임에 도전해봤다.
이번 프로젝트는 별도의 엔진 없이 Claude Design을 활용해 3D 웹 환경을 구성했다.
초기에는 지수씨의 요청으로 "간단한 3D 방탈출"이라는 목표만 정의하고, 공간 구조와 퍼즐 요소를 단계적으로 확장하는 방식으로 진행했다.
특히 3D 공간에서의 카메라 이동, 오브젝트 클릭 판정, 상호작용 흐름까지 자동으로 생성된 점이 핵심이다. 이후에는 퍼즐 연결성과 UX를 중심으로 반복 수정했다.
게임 플레이
조작법
게임 화면의 "들어가기" 버튼을 클릭하면 시작한다.
WASD 이동 · 마우스 클릭+드래그 카메라 · E 상호작용 · ESC 취소
2D vs 3D (Web)
| 항목 | 2D RPG (이전) | 3D 방탈출 (이번) |
|---|---|---|
| 렌더링 | Canvas / DOM | three.js (WebGL) |
| 난이도 | 비교적 단순 | 카메라·공간 고려 필요 |
| 퍼즐 요소 | 전투 + 탐험 | 시점 + 공간 기반 퍼즐 |
| 구현 복잡도 | 낮음 | 중간 이상 |
| Claude 활용 | UI/로직 중심 | 공간 + 인터랙션까지 확장 |
| 체감 변화 | 빠른 프로토타입 | 공간을 만드는 경험 |
기술 구성
- three.js 기반 3D 렌더링
- HTML / CSS / JavaScript로 구성한 웹 인터페이스
- scene, camera, light, mesh로 구성한 기본 3D 공간
- 오브젝트 상호작용 및 퍼즐 진행을 위한 상태 관리 로직
- 키보드 이동, 마우스 시점 조작, 상호작용 입력 처리
복잡한 게임 엔진 대신, three.js를 중심으로 필요한 시스템만 직접 구성했다.
덕분에 비교적 가벼운 구조로 3D 방탈출 게임의 핵심 플레이를 빠르게 구현할 수 있었다.
플레이 경험
2D 방탈출과 달리, 시점 이동 자체가 퍼즐 요소로 작동한다.
특정 각도에서만 보이는 단서나, 카메라를 움직여야 발견되는 오브젝트가 자연스럽게 탐색 요소로 이어진다.
퍼즐 난이도는 직관적인 수준으로 유지하되, 공간 활용을 통해 몰입감을 강화했다.
느낀 점
3D 게임에서도 초기 프로토타입 제작 속도는 상당히 빠르다.
특히 공간 설계와 인터랙션 흐름을 동시에 다룰 수 있다는 점이 인상적이다.
반면, 충돌 처리나 카메라 디테일 같은 영역은 여전히 수작업 보정이 필요하다. 근데 시계 위치가 깨진건 수정이 안되더라.
설계 시
3D에서는 그래픽 품질보다 상호작용 명확성이 훨씬 중요하다. 클릭 가능한 영역과 피드백을 명확히 설계해야 한다.
결론
이건 딸깍 20분컷! AI 진짜 미쳤냐고.
근데 세용 할머니는 뭐냐?