아래 글을 포함해 모든 개발은 aws-q-cli로 만들어졌습니다
https://galton-board-demo.s3.ap-northeast-2.amazonaws.com/index.html

갈튼 보드 시뮬레이션 프로젝트 개발기

프로젝트 소개

안녕하세요! 오늘은 웹 기술을 활용하여 갈튼 보드(Galton Board) 시뮬레이션을 개발한 과정을 공유하려고 합니다. 갈튼 보드는 통계학에서 이항 분포와 정규 분포를 시각적으로 보여주는 도구로, 공이 핀을 통과하면서 자연스럽게 종 모양의 분포를 형성하는 것을 관찰할 수 있습니다.

개발 과정

1. 기본 구조 설계

처음에는 HTML, CSS, JavaScript를 별도의 파일로 나누어 개발했습니다. 기본적인 구조는 다음과 같습니다:

• HTML: 갈튼 보드의 기본 레이아웃과 컨트롤 버튼 구성
• CSS: 보드, 핀, 공, 히스토그램 등의 시각적 스타일링
• JavaScript: 공의 움직임과 충돌 시뮬레이션 로직

2. 핀 배치 최적화

초기 버전에서는 핀의 배치가 완벽한 삼각형 형태가 아니었습니다. 사용자 피드백을 받아 핀의 배치를 개선했습니다:

// 완벽한 삼각형 패턴으로 핀 생성
for (let row = 0; row < rows; row++) {
    // 각 행에는 row+1개의 핀이 있음 (1, 2, 3, 4 등)
    for (let col = 0; col <= row; col++) {
        const peg = document.createElement('div');
        peg.className = 'peg';

        // 완벽한 삼각형을 형성하기 위한 위치 계산
        const triangleWidth = boardWidth * 0.7;
        const rowWidth = triangleWidth * (row + 1) / rows;
        const pegSpacing = rowWidth / (row || 1);
        const leftOffset = (boardWidth - rowWidth) / 2;

        peg.style.left = `${leftOffset + col * pegSpacing}px`;
        peg.style.top = `${pegAreaHeight * 0.2 + (pegAreaHeight * 0.7 / rows) * row}px`;

        pegContainer.appendChild(peg);
    }
}

3. 공 낙하 시뮬레이션 개선

공이 핀을 통과하는 과정을 더 자연스럽게 시뮬레이션하기 위해 경로 계산 알고리즘을 개선했습니다:

// 경로 미리 계산
let path = [];
let currentPosition = 0;

for (let row = 0; row < rows; row++) {
    // 각 핀에서 50% 확률로 오른쪽으로 이동
    if (Math.random() > 0.5) {
        currentPosition++;
    }
    path.push(currentPosition);
}

4. 다중 공 낙하 기능 구현

"50개 공 낙하" 버튼을 클릭하면 여러 개의 공이 순차적으로 떨어지도록 구현했습니다:

function dropMultipleBalls(count) {
    if (dropMultipleActive) return;

    let remaining = count;
    dropMultipleActive = true;

    function tryDropNext() {
        if (remaining > 0 && dropMultipleActive) {
            if (dropBall()) {
                remaining--;
            }

            if (remaining > 0) {
                setTimeout(tryDropNext, 50);
            } else {
                dropMultipleActive = false;
            }
        }
    }

    tryDropNext();
}

5. 단일 파일로 통합

배포를 간소화하기 위해 HTML, CSS, JavaScript를 하나의 파일로 통합했습니다. 이렇게 하면 S3와 같은 정적 호스팅 서비스에 쉽게 배포할 수 있습니다.

AWS S3 정적 웹사이트 호스팅 설정

프로젝트를 AWS S3에 배포하기 위한 CloudFormation 템플릿도 작성했습니다:

AWSTemplateFormatVersion: '2010-09-09'
Description: 'CloudFormation template to deploy Galton Board as a static website on S3'

Resources:
  S3Bucket:
    Type: AWS::S3::Bucket
    DeletionPolicy: Retain
    Properties:
      BucketName: !Ref BucketName
      AccessControl: PublicRead
      WebsiteConfiguration:
        IndexDocument: index.html
        ErrorDocument: index.html

결과물

최종 결과물은 다음과 같은 기능을 제공합니다:

1. 단일 공 낙하 시뮬레이션
2. 다중 공(50개) 낙하 시뮬레이션
3. 결과 분포를 보여주는 히스토그램
4. 시뮬레이션 초기화 기능

배운 점

이 프로젝트를 통해 다음과 같은 것들을 배웠습니다:

1. 웹 기술을 활용한 물리 시뮬레이션 구현 방법
2. 확률 분포의 시각적 표현 방법
3. AWS S3를 활용한 정적 웹사이트 호스팅
4. CloudFormation을 통한 인프라 자동화

향후 개선 방향

1. 핀과 공 사이의 충돌 물리학 개선
2. 다양한 분포 유형 시뮬레이션 추가
3. 사용자 정의 설정 (핀 개수, 행 수 등) 추가
4. 모바일 환경 최적화

이 프로젝트는 통계학의 기본 개념을 시각적으로 이해하는 데 도움이 되는 교육용 도구로 활용될 수 있습니다. 소스 코드는 GitHub에서 확인할 수 있으며, 누구나 자유롭게 사용하고 개선할 수 있습니다.

마무리

갈튼 보드 시뮬레이션 프로젝트를 통해 웹 기술과 통계학의 만남을 경험할 수 있었습니다. 이 프로젝트가 다른 개발자들에게도 영감이 되길 바랍니다!