Stimulus를 이용한 Rails 앱용 인터랙티브 눈 내리는 효과 구현 가이드

핵심 요약

1 단일 Stimulus 컨트롤러를 사용하여 눈이 내리고 바닥에 쌓이며 마우스로 쓸어낼 수 있는 인터랙티브한 효과를 구현합니다.

2 requestAnimationFrame API를 활용하여 CPU 효율성을 높이고 브라우저 주사율에 최적화된 부드러운 60fps 애니메이션을 제공합니다.

3 마우스 드래그를 통한 빗자루 기능으로 특정 반경 내의 눈송이를 제거하고 쌓인 높이를 동적으로 조절하는 물리 로직을 포함합니다.

도입

이 가이드는 2025년 연말을 기념하여 Rails 앱이나 웹사이트에 적용할 수 있는 재미있고 인터랙티브한 시각 효과를 소개합니다. Hotwire의 핵심 구성 요소인 Stimulus를 활용하여 별도의 외부 라이브러리 없이 단 하나의 컨트롤러 파일만으로 눈이 내리고, 쌓이고, 사용자가 직접 치울 수 있는 동적인 환경을 구축하는 방법을 상세히 설명합니다.

1. 컨트롤러 구조 및 생명주기 관리

connect()와 disconnect() 메서드를 통해 애니메이션 루프의 시작과 종료를 제어하며, 컨트롤러 제거 시 DOM 요소를 깨끗이 정리하는 meltSnow 로직을 포함합니다.
requestAnimationFrame을 사용하여 탭이 비활성화될 때 애니메이션을 자동 중지함으로써 리소스를 최적화합니다.

2. 눈송이 생성 및 물리 시스템

각 눈송이는 ❄️ 이모지를 담은 div 요소로 생성되며, dataset을 통해 낙하 속도(velocityY), 횡이동(velocityX), 회전 속도 등의 물리 데이터를 개별적으로 관리합니다.
isolation: isolate 속성을 적용하여 페이지의 기존 텍스트 선택이나 클릭 이벤트와 간섭이 발생하지 않도록 설계되었습니다.

3. 적설량 및 인터랙션 구현

눈송이가 뷰포트 하단에 도달하면 settled 상태로 전환되어 바닥에 고정되며, 누적된 높이(accumulatedHeight)만큼 다음 눈송이가 쌓이는 위치가 높아집니다.
마우스 왼쪽 버튼 클릭 시 커서를 빗자루(🧹) 모양의 SVG로 변경하고, 피타고라스 정리를 이용한 거리 계산으로 특정 반경 내의 눈송이를 제거하는 기능을 제공합니다.

결론

본 튜토리얼은 Stimulus의 `values`와 `action`을 활용한 상태 관리 및 DOM 조작 기법을 실무적으로 보여줍니다. 단순한 시각 효과를 넘어 사용자에게 즐거운 경험을 제공하는 인터랙티브 요소 구현 방법을 제시하며, Rails 개발자가 연말 분위기를 연출하기에 적합한 기술적 통찰을 제공합니다.

Stimulus를 이용한 Rails 앱용 인터랙티브 눈 내리는 효과 구현 가이드

Add snow to your app with Stimulus | Rails Designer

핵심 요약

도입

1. 컨트롤러 구조 및 생명주기 관리

2. 눈송이 생성 및 물리 시스템

3. 적설량 및 인터랙션 구현

결론

관련 글들

Stimulus를 활용한 코나미 코드 구현

Stimulus와 Tailwind CSS를 활용한 macOS Dock 스타일 팬 UI 구현

뷰포트 이탈 시 비디오 자동 일시 정지 기능 구현

Rails의 Hotwire: 2부 - Stimulus를 활용한 클라이언트 측 상호작용

댓글 0

로그인이 필요합니다

아직 댓글이 없습니다