주사위 굴리기 시뮬레이션 만들기 (HTML 구조, JS 동작 로직, 시각화 확장)

주사위 굴리기 시뮬레이션은 웹 개발을 처음 접하는 분들이 HTML, CSS, JavaScript의 상호작용을 체계적으로 익힐 수 있는 실습 프로젝트입니다. 클릭 이벤트, 난수 생성, 이미지 출력, 인터페이스 동작 등 다양한 개념이 함께 어우러지며, 시각적 결과물을 바로 확인할 수 있다는 점에서 학습 효율이 매우 높습니다. 본 글에서는 HTML 구조 설정, JavaScript를 통한 로직 구현, 그리고 결과 시각화 및 기능 확장까지 단계적으로 설명드리겠습니다.

HTML 구조: 인터페이스 기본 설계

주사위 굴리기 시뮬레이션의 가장 기초가 되는 것은 사용자와의 상호작용이 가능한 HTML 인터페이스 구성입니다. 기본적으로는 버튼과 주사위 이미지를 표시할 수 있는 영역이 필요하며, 시뮬레이션 결과를 시각적으로 보여주는 공간도 마련되어야 합니다.

HTML에서는 시맨틱 구조를 잘 활용하는 것이 중요합니다. 게임 전체를 감싸는 main 태그나 section 태그를 활용하고, 버튼은 button 태그, 출력은 p 또는 span 태그로 표현하는 것이 가독성과 접근성 면에서 더 좋습니다. 사용자 경험을 고려한 구조 설계는 향후 유지보수와 기능 확장에도 도움이 됩니다.

예시 HTML 구조는 다음과 같습니다:

<div class="dice-container">
  <h1>주사위 굴리기 시뮬레이션</h1>
  <img id="dice-image" src="dice1.png" alt="주사위 이미지" />
  <p id="result-text">결과: 1</p>
  <button id="roll-button">주사위 굴리기</button>
  <p id="roll-count">총 굴린 횟수: 0</p>
  <div id="stats"></div>
</div>

이 구조는 단순하지만 확장성이 좋습니다. 이후 CSS로 디자인을 보완하고, JavaScript를 통해 동작을 부여하면 동적인 웹 인터페이스가 완성됩니다.

JS 동작 로직: 난수 생성과 인터페이스 반영

HTML이 준비되었다면 JavaScript를 통해 실제 동작을 구현해야 합니다. 사용자가 버튼을 클릭할 때마다 무작위로 1~6 사이의 숫자가 생성되어야 하며, 이 숫자에 따라 이미지와 텍스트가 변경됩니다.

기본적인 주사위 로직은 다음과 같은 흐름으로 구성됩니다:

버튼 클릭 이벤트 감지
1~6 사이 난수 생성
해당 숫자에 맞는 이미지 파일로 변경
결과 텍스트와 통계 수치 갱신

전체 구현 예시는 아래와 같습니다:

let rollCount = 0;
let stats = [0, 0, 0, 0, 0, 0];

document.getElementById("roll-button").addEventListener("click", function () {
  const diceNumber = Math.floor(Math.random() * 6) + 1;
  document.getElementById("dice-image").src = `dice${diceNumber}.png`;
  document.getElementById("result-text").innerText = `결과: ${diceNumber}`;

  stats[diceNumber - 1]++;
  rollCount++;
  document.getElementById("roll-count").innerText = `총 굴린 횟수: ${rollCount}`;
  
  let statsText = '';
  for (let i = 0; i < 6; i++) {
    statsText += `${i + 1} : ${stats[i]}회  `;
  }
  document.getElementById("stats").innerText = statsText;
});

위 코드를 통해 사용자 인터랙션에 따라 주사위가 즉시 반응하며, 통계까지 실시간으로 갱신됩니다. 초급 개발자에게는 조건문, 반복문, 배열 등의 개념을 실제로 적용하는 좋은 기회가 됩니다.

시각화 확장: 애니메이션, 다중 주사위, 확률 그래프

기본 동작이 구현되었다면, 시각적으로 풍부하고 기능적으로 유용한 요소들을 추가하는 것이 다음 단계입니다. 확장 기능은 개발자의 창의력을 바탕으로 구성되며, 사용자 경험을 크게 개선할 수 있습니다.

1. 애니메이션 효과 추가

주사위가 굴러가는 듯한 느낌을 주기 위해 CSS 애니메이션을 적용할 수 있습니다.

@keyframes roll {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

.dice-rolling {
  animation: roll 0.5s ease-in-out;
}

const diceImg = document.getElementById("dice-image");
diceImg.classList.add("dice-rolling");
setTimeout(() => diceImg.classList.remove("dice-rolling"), 500);

2. 다중 주사위 시스템

두 개 이상의 주사위를 동시에 굴릴 수 있도록 코드를 구성해보면 다음과 같은 로직이 됩니다:

let dice1 = Math.floor(Math.random() * 6) + 1;
let dice2 = Math.floor(Math.random() * 6) + 1;

document.getElementById("dice1").src = `dice${dice1}.png`;
document.getElementById("dice2").src = `dice${dice2}.png`;

document.getElementById("result-text").innerText = `합계: ${dice1 + dice2}`;

이 방식은 주사위 게임이나 보드게임과 같은 기능 확장에 유용하며, 난수 처리와 DOM 조작을 더 깊이 연습할 수 있습니다.

3. 확률 분석 및 시각화

Chart.js와 같은 외부 라이브러리를 이용하면 주사위 결과를 막대그래프로 시각화할 수 있습니다. 아래는 간단한 예시입니다:

new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: {
    labels: ['1', '2', '3', '4', '5', '6'],
    datasets: [{
      label: '주사위 횟수',
      data: stats,
      backgroundColor: '#4287f5'
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

이렇게 하면 학습자 또는 사용자 모두가 확률 개념을 시각적으로 이해할 수 있어 교육적 가치도 매우 높습니다.

주사위 굴리기 시뮬레이션은 난수 처리, 이미지 제어, 사용자 인터페이스 구성, 이벤트 처리 등 웹 개발의 핵심 기술들을 종합적으로 익힐 수 있는 매우 유용한 학습 프로젝트입니다. 기본 구조를 익힌 후 점차 확장해가면서 자신만의 창의적인 기능을 더해보시기 바랍니다. 실제로 이 프로젝트를 완성하면서 HTML과 JavaScript에 대한 이해도가 빠르게 향상되는 것을 경험하실 수 있습니다. 지금 바로 시도해보시고, 자신만의 주사위 도구를 만들어보시기 바랍니다.

유라's 힐링 타임 즐기기