1. 프로젝트 개요

• 프로젝트명: 픽셀즈 슬롯머신
• 목표: 사용자가 슬롯머신 게임에서 당첨 시 다채로운 애니메이션과 물리 기반의 효과를 체험하도록 구현

2. 담당 역할 및 주요 작업

• 기획

  

• 디자인

  • 루비 인벤토리, 잭팟, 버튼 등의 UI 요소 디자인

• 웹 퍼블리싱

  • UI/UX 디자인 반영 및 스타일링

• 개발

  • 프로젝트 세팅
  • 애니메이션
    • 루비 인벤토리 애니메이션
    • 당첨 및 잭팟 시 루비 떨어지는 애니메이션
    • 심볼 스프라이트 이미지 애니메이션 (CSS keyframes 활용)
  • 상태 관리
    • React의 useResultStore를 통해 게임 결과에 따라 동적으로 애니메이션 처리
  • 물리 효과
    • Matter.js 활용: 루비들이 튕기고 떨어지는 현실감 있는 애니메이션 구현
  • 모달
    • Zustand 기반 전역 상태 관리로 다양한 팝업 구현

3. 주요 기술 및 구현 포인트

1. GSAP 타임라인 기반 순차 당첨 연출

• 구현: gsap.timeline()을 활용해 심볼 이동, Scale/Opacity 변위 효과를 체인 형태로 연결하여 자연스러운 잭팟 시퀀스 구축
• 성과: 복잡한 당첨 애니메이션 순서를 동적 제어하여 시각적 몰입감 제공

2. Matter.js 활용 2D 물리 렌더링

• 구현: Engine, Render, Runner 모듈을 React 라이프사이클(useEffect)과 연결하고, Bodies.circle에 랜덤 속성을 주어 현실감 있는 루비 낙하/반응 효과 구현
• 성과: 단순히 정적인 2D 이미지가 아닌, 물리 법칙이 적용된 다이나믹한 웹 게임 연출 완성

3. CSS steps() 기반 프레임 애니메이션 최적화

• 구현: JS 연산 대신 CSS keyframes와 steps() 타이밍 함수를 활용하여 심볼 프레임 애니메이션 처리
• 성과: 메인 스레드 부담을 줄이고 GPU 가속을 활용한 부드러운 60fps 인터랙션 확보

4. Zustand 기반 모달 제어 및 팝업 팩토리 패턴