핵심 요약
웹 브라우저에서 버튼 클릭 하나로 3D 입체 주사위가 굴러가는 애니메이션을 구현하는 방법을 살펴봅니다. CSS의 3D 공간 변환 속성과 자바스크립트 난수 생성을 결합하면 별도의 무거운 라이브러리 없이도 가볍고 직관적인 인터랙션을 완성할 수 있습니다.
구현에 필요한 기술 요소
브라우저 화면에 주사위를 띄우려면 평면 사각형 6개를 모아 정육면체 형태로 배치해야 합니다. 이때 CSS의 perspective와 transform-style: preserve-3d 속성이 핵심적인 역할을 담당합니다. 주사위가 회전할 때는 X축과 Y축의 각도를 무작위로 계산하여 CSS 변환 속성에 적용합니다.
- 핵심 기술 스택입니다.
HTML 마크업 구조 작성
정육면체를 만들기 위해 부모 컨테이너 안에 6개의 면을 담당하는 div 요소를 배치합니다. 각 면은 절대 위치(absolute positioning)를 사용하여 정육면체의 올바른 위치에 고정합니다.
HTML
index.html 파일의 구조입니다. scene 컨테이너 안에 6개의 면을 가진 cube 요소와 버튼을 배치합니다.CSS 3D 공간 변환 스타일링
원근감을 부여하기 위해 부모 요소에 perspective를 설정하고, 자식 요소들이 3D 공간에 위치할 수 있도록 transform-style을 지정합니다.
CSS
style.css 파일의 내용입니다. 각 면을 회전시키고 밀어내어 정육면체 형태를 완성합니다.JavaScript 무작위 회전 로직
관련 글: 바닐라 자바스크립트 데이터테이블
사용자가 버튼을 클릭했을 때 X축과 Y축의 회전 각도를 무작위로 계산하여 주사위의 transform 속성에 대입합니다.
JAVASCRIPT
app.js 파일의 내용입니다. 90도의 배수로 무작위 각도를 생성하여 회전 애니메이션을 실행합니다.TIP
모바일 기기 브라우저에서는 터치 이벤트(touchstart)를 활용해 주사위를 밀어 던지는 인터랙션을 추가하면 완성도를 더욱 높일 수 있습니다.
자주 묻는 질문 (FAQ)
CSS 3D 변환이 정상적으로 작동하지 않습니다. 어떤 점을 확인해야 하나요?
부모 요소에 perspective 속성이 지정되어 있는지, 그리고 주사위 컨테이너에 transform-style: preserve-3d가 적용되었는지 반드시 확인해야 합니다. 이 속성들이 누락되면 3D 공간감이 사라지고 평면처럼 보입니다.
Three.js와 같은 외부 라이브러리를 꼭 배워야 하나요?
간단한 보드게임 웹 앱이나 UI 요소로서의 주사위라면 순수 CSS와 JavaScript만으로 충분합니다. 하지만 충돌 감지나 중력 시뮬레이션이 필수적인 본격적인 3D 게임이라면 Three.js 학습을 권장합니다.
완성 코드 예제
관련 글: 미니골프 게임
순수 HTML과 CSS, JavaScript 조합만으로도 3D 공간감을 지닌 인터랙티브 주사위를 충분히 구현할 수 있습니다. 외부 라이브러리 로딩 부담이 없어 가볍고 빠른 웹 페이지를 제작할 때 유용한 방식입니다.
실제 프로젝트에 적용할 때는 주사위의 눈금에 따라 게임 로직이 연동되도록 자바스크립트의 난수 결과값을 상태 관리 코드로 연결해 보세요. CSS 변환 지속 시간(transition)을 조절하는 것만으로도 주사위가 묵직하게 굴러가는 손맛을 살릴 수 있습니다.