[리액트] RIW 프로젝트 - scroll animated number widget

RIW 프로젝트란?

React Interactive Widget 이란 오픈소스 프로젝트이며, 그냥 제가 개발하면서 동적인 컴포넌트들 구현해서 오픈스소화 시킬 목적으로 합니다. 

 

Scroll animated number widget 란?

금융관련된 프로젝트를 하면서 좋은 래퍼런스를 찾곤 했는데, 그 중에 로빈후드의 홈페이지를 보고 이쁘다고 한 화면이 있습니다.

바로 위아래로 스크롤하든 변하는 숫자들입니다. 동적으로 변하는게 멋져서 저도 이걸 구현해봐야겠다고 생각했습니다.

---

첫번째 아이디어는 "진짜 스크롤을 이용해보기" 입니다.

[리액트] 부드럽게 이동하는 숫자 컴포넌트를 구현하는 방법(feat.타입스크립트)

그리고 결과는 보시다시피 실패로 돌아갔습니다. 

---

정신을 차리고 두번째 아이디어 "CSS 이미지 스프라이트를 활용" 하여 다시 만들어보겠습니다.

CSS 이미지 스프라이트란?
본래 CSS 이미지 스프라이트는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 최적화 기법에 해당합니다.
각각의 이미지를 매번 서버에 요청하지 말고 통합된 이미지로 요청한다음 필요한 부분만 가져다 쓰는 방법입니다.

간단히 대동여지도를 보면서 설명하겠습니다. 우리가 실제로 필요한건 각각의 지도 타일입니다. 근데 그걸 하나씩 보내면 매번 요청을 보내야하니 그게 더 시간을 잡아먹는 상황이 일어납니다. 그래서 타일을 전부다 합쳐서 큰 파일로 하나 보내고 실제 사용하는 프론트에서는 이걸 잘라서 사용하는 것이 스프라이트입니다.
실제로 잘라서 사용하는게 아닌 이미지의 position를 통해 조절하기는 하지만 일단 스프라이트라고 합니다.

저는 그래서 0부터 9까지 위아래로 쌓여있는 이미지를 최근에 쓰기 시작한 피그마로 빠르게 만들어보겠습니다.

그리고 각각의 숫자에 맞춰서 스크롤 transition를 주면서 이동하면 완료입니다.

---

결과와 소스코드

 

해당 소스코드는 아래에서 확인할수 있으며 동작모습은 데모사이트에서 확인가능합니다.

GitHub - gyeongseokKang/react-interactive-widget: UI component library for dynamic and interactive widgets.

 

React-interactive-widget