✅ 왜 롤링 방식을 선택했을까?

CountUp 방식은 JavaScript가 현재 숫자를 계속 계산하면서 화면의 텍스트를 변경합니다.

하지만 이번 방식은 숫자를 계산하지 않습니다.

각 자리마다 0부터 9까지의 숫자를 세로 방향으로 미리 배치한 뒤, 목표 숫자가 있는 위치까지 transform: translateY()를 이용해 이동시키는 구조입니다.

즉, 목표값이 8이라면 0부터 8까지 계산하는 것이 아니라 8이 위치한 곳까지 한 번에 이동하는 것입니다.

덕분에 계산 로직은 단순해지고, GPU가 처리하기 좋은 transform 속성을 사용하기 때문에 더욱 부드러운 애니메이션을 만들 수 있습니다.

✏️ 구현 포인트

· 각 자리마다 하나의 digit-box를 만들고, 그 안에 필요한 숫자를 미리 배치합니다.

· 자리수 구분을 위한 클래스(ex: digit-1)도 적용시켜줍니다.

· 각 digit-box에는 자연스러운 롤링을 위해 시작값과 목표값 사이의 숫자를 여유 있게 배치합니다.

· 먼저 각 digit-box 안에 있는 span 요소(숫자)의 개수를 구한 뒤, 마지막 숫자가 위치한 만큼 yPercent 값을 계산합니다.

예를 들어 span이 10개(0~9) 라면 다음과 같이 계산됩니다.

items : 10

items - 1 : 9

targetPercent : -900

따라서 translateY(-900%)가 적용되어 마지막 숫자가 표시되는 위치까지 이동합니다.

참고: yPercent의 100%는 span 요소 한 개의 높이를 기준으로 계산됩니다. 

즉, -900%는 숫자 9칸만큼 위로 이동하는 것을 의미합니다.

✅ 자리수마다 다른 Ease를 적용한 이유

모든 숫자가 같은 속도로 회전하고 동시에 멈춘다면 애니메이션이 다소 기계적으로 보일 수 있습니다.

그래서 각 자리마다 애니메이션의 특성을 조금씩 다르게 설정했습니다.

상위 자릿수는 먼저 안정적으로 멈추고, 하위 자릿수는 조금 더 길게 회전하면서 강한 감속 효과를 주어, 

실제 슬롯머신처럼 숫자가 순차적으로 멈추는 느낌을 연출했습니다.

✅ GSAP를 활용한 롤링 애니메이션

각 digit-box마다 목표 위치를 계산한 뒤 yPercent를 변경하고,

자릿수마다 서로 다른 duration과 ease를 적용해 자연스러운 움직임을 만들었습니다.

또한 ScrollTrigger를 함께 사용하여 사용자가 해당 영역을 확인하는 시점에 애니메이션이 실행되도록 구성했습니다.

이러한 방식은 기업 홈페이지나 랜딩페이지처럼 사용자의 시선을 끌어야 하는 콘텐츠에서 특히 효과적입니다.

✅ 숫자 롤링 애니메이션 어떻게 활용할까?

숫자 롤링 애니메이션은 단순한 카운팅 효과보다 시각적인 완성도가 높기 때문에 다양한 프로젝트에서 활용할 수 있습니다.

· 기업 실적

· 프로젝트 수행 건수

· 누적 매출

· ESG 성과

· 병원 수술 건수

· 교육기관 합격자 수

특히 숫자가 브랜드의 신뢰도를 전달하는 콘텐츠라면 더욱 효과적으로 사용할 수 있습니다.

✨ 자주 묻는 질문 (FAQ)

Q : 숫자 롤링 애니메이션이란?

✔ 숫자를 실시간으로 계산하는 것이 아니라, 각 자리의 숫자를 세로 방향으로 미리 배치한 뒤 

transform으로 원하는 위치까지 이동시켜 목표 숫자를 표현하는 애니메이션입니다.

Q: CountUp과 어떤 차이가 있나요?

✔ CountUp은 숫자를 계속 계산하면서 값을 변경하는 방식입니다.

반면 롤링 방식은 미리 준비된 숫자 목록을 이동시키므로 더욱 자연스러운 인터랙션을 구현할 수 있습니다.

Q : transform을 사용하는 이유는 무엇인가요?

✔ transform은 GPU 가속을 활용할 수 있어 레이아웃 변경이 거의 발생하지 않습니다.

따라서 많은 숫자를 동시에 실행해도 비교적 부드러운 성능을 유지할 수 있습니다.

Q : GSAP 없이도 구현할 수 있나요?

✔ CSS Transition이나 순수 JavaScript만으로도 구현할 수 있습니다.

다만 GSAP을 사용하면 ease, duration, ScrollTrigger 등을 더욱 세밀하게 제어할 수 있어 자연스러운 인터랙션을 만들기에 적합합니다.

See the Pen 카운트 애니메이션보다 자연스러운 숫자 롤링 효과 구현하기 (Slot Machine Number Animation) by designkits (@designkits) on CodePen.

➰➰➰

숫자 애니메이션은 단순히 값이 변하는 것을 보여주는 기능을 넘어, 

사용자가 데이터를 받아들이는 방식에도 영향을 주는 중요한 UI 요소입니다.

복잡한 계산 없이도 완성도 높은 인터랙션을 만들 수 있으며, 

기업 홈페이지의 성과 지표부터 대시보드, 랜딩페이지, 통계 화면까지 숫자를 강조해야 하는 다양한 프로젝트에서 활용하기 좋은 방식입니다.

같은 기능이라도 업종과 브랜드의 분위기에 따라 인터랙션의 표현 방식은 달라질 수 있습니다. 

디자인키트에서는 다양한 업종에 맞춘 템플릿과 실무에서 활용하기 좋은 인터랙션 예제를 함께 제공하고 있으니, 

프로젝트에 어울리는 디자인을 직접 확인해 보세요.