🎲 주사위 & 동전 던지기 사용 가이드
1. 개요 및 기능 요약
점심 메뉴 결정, 보드게임 주사위 분실 시 대체 등 일상 속 사소한 선택이 고민될 때 브라우저에서 즉시 돌릴 수 있는 3D 인터랙티브 주사위 및 메탈릭 동전 플립 도구입니다.
2. 조작 및 물리 애니메이션
- 주사위 모드: 화면을 탭하거나
주사위 굴리기버튼을 누르면 1부터 6까지의 눈금이 3D 회전 애니메이션과 함께 무작위로 결정됩니다. - 동전 던지기 모드: 앞면과 뒷면 중 하나가 3D 공중 회전 효과와 함께 떨어지며 결과를 알려줍니다.
- 난수 생성에는 편향 없는 공정한 결과를 위해 브라우저의 안전 난수 생성 로직이 적용됩니다.
3. 개발 노트 (실제로 겪은 문제)
CSS 3D Transform 회전 각도 계산: 주사위를 연속으로 굴릴 때 이전 회전 각도에서 자연스럽게 추가 회전이 이어지지 않고 0도로 순간 이동하는 튀는 현상이 있었습니다. 굴릴 때마다 현재 누적 회전각에 360 * N + targetAngle을 더해 부드러운 감속 가속도(cubic-bezier)가 유지되도록 처리했습니다.
4. 자주 묻는 질문 (FAQ)
Q1. 주사위 결과는 완전한 무작위인가요?
A. 네, 자바스크립트의 난수 생성기를 통해 1부터 6까지 각각 1/6의 균일한 수학적 확률로 추첨됩니다.
Q2. 사운드나 진동을 끌 수 있나요?
A. 브라우저 및 OS의 무음 모드 설정을 따르며, 모바일 환경에서는 시스템 햅틱 피드백 설정에 연동됩니다.
Q3. 모바일 화면에서 주사위가 잘려 보이지 않나요?
A. 뷰포트 크기에 맞춰 반응형 캔버스와 3D 원근 래퍼의 크기가 동적으로 조절되므로 360px 너비의 작은 화면에서도 잘림 없이 표시됩니다.