대문의 점 2천 개를 폰에서 가볍게 만든 방법

홈페이지 대문의 글자는 점으로 찍혀 있어요. 점 하나하나가 튀어나오고, 찢어지고, 모래처럼 쏟아져 로고가 됩니다. 데스크톱에서는 매끄러웠는데 폰에서는 느렸어요. 점이 2천 개 넘고, 매 프레임마다 점마다 그리기 명령을 보내고 있었거든요.

고친 방법은 세 가지예요. 첫째, 같은 색과 같은 투명도의 점을 한 덩어리로 묶어서 한 번에 그립니다. 명령이 2천 번에서 스무 번쯤으로 줄어요. 둘째, 폰에서는 화면 배율을 낮추고 두 프레임에 한 번만 다시 그립니다. 눈으로는 차이가 없어요. 셋째, 폰에서는 글자를 조금 성글게 찍어 점 수 자체를 줄였습니다.

같은 3초 동안 스크립트가 쓰는 시간이 절반으로 줄었어요. 영상으로 바꾸자는 이야기도 있었지만, 점이 진짜로 계산되어 움직인다는 게 이 대문의 핵심이라 남겨두고 싶었습니다. 수학이 왜 필요한지 보여주는 학원의 첫 화면이 계산이 아니면 이상하니까요.