Tetris3D: 공간의 한계를 넘는 코드 여행
평면의 테트리스는 이미 충분히 어렵다. 그런데 거기에 축을 하나 더 추가하면 어떻게 될까?
시작하며
2D 테트리스는 수십 년간 사랑받아온 고전이지만, 항상 한 가지 의문이 있었습니다.
"Z축이 생기면 얼마나 더 어려워질까?"
그 답을 코드로 직접 구현한 것이 Tetris3D입니다. 블록이 X, Y뿐 아니라 Z축으로도 회전하고, 3D 공간에서의 거리감과 입체감을 실시간으로 파악하며 쌓아야 합니다. 이 devlog는 그 개발 과정에서 마주친 기술적 선택들과 앞으로의 방향을 기록한 것입니다.
⚙️ 기술 스택: 왜 Three.js인가?
웹 브라우저에서 3D 게임을 만들 때 가장 먼저 마주치는 선택지는 WebGL입니다. 강력하지만, 직접 다루려면 셰이더(Shader) 작성과 복잡한 행렬 연산이 필수라 진입 장벽이 높습니다.
Three.js 는 이 복잡함을 직관적인 객체 지향 API로 감싸줍니다. 덕분에 "어떤 블록을 어디에 놓을지"라는 게임 로직에 집중할 수 있었습니다.
Three.js의 세계관 이해하기
Scene → 모든 물체가 배치되는 '우주 공간'
Camera → 우리가 보는 시점 (PerspectiveCamera: 원근감 구현)
Renderer → Scene + Camera 정보를 실제 픽셀로 그려주는 엔진
HTML의 <canvas> 위에서 정점(Vertex)들을 정의하고, 이를 수학적으로 투영(Projection)하는 과정 전체를 Three.js가 대신 처리해 줍니다.
핵심 최적화: InstancedMesh
이 프로젝트에서 가장 중요한 성능 결정은 InstancedMesh 사용이었습니다.
| 방식 | 특징 | |------|------| | 개별 Mesh | 블록마다 별도 드로우 콜 → 블록 수 증가 시 프레임 드롭 | | InstancedMesh | 단 한 번의 드로우 콜로 수백 개 블록 렌더링 |
결과적으로 모바일에서도 안정적인 60fps를 유지할 수 있었습니다.
🎮 게임플레이: 3차원이 주는 두뇌 자극
단순히 "테트리스를 3D로"가 아니라, 공간 지각 능력을 게임의 핵심 재미로 삼았습니다.
다차원 로테이션
X, Y, Z 세 축으로 블록을 회전시키며 맞춰야 합니다. 기존 테트리스보다 훨씬 높은 전략적 사고가 요구되며, 처음 3D 회전을 "이해하는 순간"의 쾌감이 이 게임의 가장 큰 보상입니다.
Ghost Piece 시스템
3D 공간에서 거리감을 파악하는 것은 생각보다 어렵습니다. 유령 블록(Ghost Piece) 은 블록이 떨어질 위치를 미리 보여주어 이 불편함을 자연스럽게 해소합니다.
절차적 사운드 (Procedural Audio)
고정된 .mp3 파일 대신 Web Audio API (AudioContext) 를 이용해 효과음을 실시간 생성합니다.
- ✅ 파일 용량 절감
- ✅ 상황에 따른 즉각적인 반응성
- ✅ 네트워크 없이도 완전한 사운드 경험
🔧 개선이 필요한 것들
솔직하게 현재 버전의 한계를 짚어봅니다.
1. 데스크탑 키 가이드 부재
현재 코드(Line ~1200)의 키 매핑은 다음과 같습니다:
Q → X축 회전
W → Y축 회전
E → Z축 회전
A / D → 카메라 궤도 회전
모바일은 버튼이 UI에 표시되어 있어 직관적이지만, 데스크탑 사용자는 이 키 매핑을 알 방법이 없습니다. 처음 접하는 유저는 대부분 방향키만 눌러보다가 이탈할 것입니다.
→ 개선 방향: 화면 하단에 키 가이드 오버레이 추가, 또는 더 직관적인 키(숫자패드, R/T/Y 등)로 리매핑
2. 코드 모듈화 (가장 시급한 기술 부채)
현재 상태: 약 1,400줄의 코드가 index.html 한 파일에 집중
초기 프로토타이핑엔 유리하지만, 이대로 기능을 추가하면 유지보수 불가능한 스파게티 코드가 됩니다.
현재: index.html (1,400+ lines)
목표 구조:
├── styles.css → 스타일 분리
├── Renderer.js → Three.js 설정 및 렌더링 로직
├── Logic.js → 테트리스 알고리즘 (충돌 체크, 줄 삭제)
└── Audio.js → 사운드 및 BGM 시스템
🗺️ 로드맵
- [ ] 데스크탑 키 가이드 UI 추가
- [ ] 코드 모듈화 (파일 분리 리팩토링)
- [ ] 실시간 멀티플레이어 모드 검토
마치며
3D 게임 개발이라고 하면 막연히 어렵게 느껴지지만, Three.js와 같은 훌륭한 라이브러리 덕분에 생각보다 빠르게 프로토타입을 만들 수 있었습니다. 이 글이 웹 기반 3D 게임 개발에 관심 있는 분들께 작은 출발점이 되길 바랍니다.
코드는 언제나 개선 중입니다. 피드백과 PR은 언제든 환영합니다! 🙌
made with Three.js · Web Audio API · vanilla JavaScript