웹게임 Torpedo를 만들면서, 웹 페이지를 깔끔하게 만드는 데 꽤 많은 시간을 쏟았습니다.
이쁜 바다 애니메이션을 붙히거나, 점수 오브젝트를 시작화면과 게임화면에서 공유한다거나 하는 코드를 짰는데, 이제 게임을 시작하는 버튼을 넣고 나니 한 가지 문제점을 발견했습니다.
브라우저에는 원하는 만큼 부드럽게 스크롤해주는 기능이 없다
뭔 뚱단지같은 소리냐 하실 수 있습니다. 왜냐면 CSS엔 이게 있거든요
scroll-behavior: smooth;하지만 이걸론 충분하지 않았습니다. 우선 저 CSS의 scroll-behavior로 지정하는 부드러운 스크롤의 경우
제가 원하는건 '원하는 시간 만큼' '원하는 거리를' 스크롤 시켜주는 기능이었습니다. 왜냐하면 웹 게임을 시작시킬 때 화면이 부드럽게 내려가면서 시작한다면 멋질 것 같았거든요.
물론 없진 않습니다. 이미 만들어진 JS 소스도 많죠. 하지만 문제는 그게 죄다 JQuery라는거... React랑 JQuery를 같이 쓰는건 제가 생각하기에 좀 적절한 방식이 아닌 것 같았습니다.
그래서, 직접 만들기로 했습니다.