카드 스와이프가 끊기던 이유: 터치 이벤트는 고르게 오지 않는다

hbc studio · 작업한 때 2026년 10월 5일 · 기록 2026년 10월 16일

honeybeecook.com 첫 화면의 서비스 카드는 스크롤하거나 옆으로 밀어서 넘겨요. 그런데 휴대폰에서 옆으로 밀 때 끊겨 보였어요. 이상한 건, 초당 프레임 수를 재면 60fps로 멀쩡했다는 거예요.

fps가 아니라 한 프레임에 움직인 거리

그래서 다른 걸 쟀어요. 일정한 속도로 손가락을 끌 때, 카드 묶음이 한 프레임마다 몇 픽셀 움직이는지요. 느린 휴대폰(CPU 4배 느리게)에서 결과는 이랬어요.

15  0  30  15  0  30  (px / frame)

매 프레임 15픽셀씩 움직여야 하는데, 어떤 프레임은 0, 다음 프레임은 30이었어요. 화면은 매번 새로 그려졌지만, 카드는 멈췄다가 두 칸을 뛰는 거예요. 우리 눈은 이걸 끊김으로 봐요.

원인: 터치 이벤트의 박자

카드는 터치 이벤트가 올 때마다 움직이고 있었어요. 그런데 터치 이벤트는 화면의 박자와 맞춰 오지 않아요. 늦게, 고르지 않게 와요. 한 프레임에 두 개가 오고, 다음 프레임엔 하나도 안 오기도 해요. 손을 떼는 순간에도 카드가 거의 멈췄다가, 다음 카드로 가는 부드러운 스크롤이 그제야 이어받았어요.

손가락이 12밀리초 전에 있던 곳

그래서 카드를 터치 이벤트가 아니라 화면의 박자(requestAnimationFrame)에 맞춰 움직이게 바꿨어요. 매 프레임, 손가락이 12밀리초 전에 있던 위치에 카드를 둬요. 그 위치는 터치 이벤트에 찍혀 있는 시간 정보로 앞뒤 이벤트 사이를 보간해서 구해요. 조금 늦게 따라가는 대신, 고르게 따라가요. 이벤트가 잠깐 끊기면 손가락의 속도로 짧게 앞서 추정해요.

손을 뗄 때는 손가락의 속도 그대로 시작하는 스프링을 써요. 그래서 카드가 멈칫하지 않고 미끄러지듯 다음 자리로 들어가요. 움직이면서 놓으면 그 방향의 다음 카드로 가고요. 처음이나 끝에서 더 밀면 0.35배로만 따라와서, 페이지가 손가락보다 두 배 빠르게 튀던 문제도 사라졌어요.

한 프레임에 하는 일 줄이기

프레임마다 하는 일도 줄였어요.

• 카드의 유리 효과(배경 흐림)는 이 구조에서는 사실 보이지 않으면서 매 프레임 다시 계산되고 있었어요. 빼도 픽셀 하나 다르지 않았어요.
• 카드 스타일은 바뀔 때만 쓰고, 화면 밖 카드는 건드리지 않아요.
• 서비스 로고를 최대 2000px PNG에서 1024px WebP로 바꿔 1.2MB → 220KB가 됐어요. 카드 크기에서는 똑같이 보여요.

결과

스와이프 12번 동안 13~21번 있던 중간 멈춤이 0번이 됐어요. 프레임마다 움직여야 할 거리와 실제로 움직인 거리의 오차는 27~43%에서 9~15%로, 약한 그래픽 성능을 흉내 낸 환경에서 프레임당 화면 합성 시간은 6.8밀리초에서 2.4밀리초로 줄었어요.

정리하면

• 60fps라도 끊길 수 있어요. 끊김을 재려면 “프레임마다 얼마나 움직였는지”를 봐야 해요.
• 터치 이벤트는 화면 박자에 맞춰 오지 않아요. 이벤트마다 움직이지 말고, 화면 박자마다 손가락의 위치를 계산해야 해요.
• 보이지 않는 효과도 비용은 그대로 들어요.