Fix(bds): 캐러셀 컴포넌트 IOS, And 대응

[minjeoong]

📌 Summary

• close [Feature] 캐러셀 IOS 대응 #476

• 모바일 스크롤 문제 해결
• autoPlay true 일 때 요소 사라지는 버그 대응

📚 Tasks

슬라이드 안되는 문제

영상 보시면, 모바일 환경에서 슬라이드 할 때 아예 옆으로 안 움직이는 문제가 있었습니다.

[ IOS AS-IS ]

ScreenRecording_10-26-2025.02-10-51_1.MP4

해당 문제를 다음과 같이 해결했습니다.

WebkitOverflowScrolling: 'touch',
touchAction: 'pan-x',

• WebkitOverflowScrolling : 'touch' 는 은 스크롤 화면의 '터치' 반응에 대해 더 자연스럽고 매끄럽게 빠른 반응을 활성화 합니다.
  - touchAction: 'pan-x', 는 스크롤을 가로 방향만 터치 허용하도록 합니다.

이 두 속성을 캐러셀 컨테이너에 추가하고,
캐러셀 controller 중 handlePointerDown 과 handlePointerMove 에 해당 코드를 추가했습니다.

if (e.pointerType === 'touch') {
        e.preventDefault();
}

-> 터치 이벤트의 기본 동작(스크롤, 줌, 스와이프) 를 차단하고 터치 입력을 독점적으로 처리합니다.

이 코드가 왜 필요하냐면,

preventDefault() 없으면
터치 시작 시 브라우저: "스크롤인가?"
-> RAF는 계속 실행 중
-> offsetRef와 dragOffset 불일치
-> 가상화 오류

preventDefault() 있으면
터치 시작 시 즉시 드래그로 인식
-> isDragging=true → RAF 즉시 중단
-> dragOffset만 업데이트
-> 가상화 정상 작동

따라서 터치 이벤트가 발생하면(모바일) preventDefault 를 하도록 수정했습니다.
결과적으로 드래그 tobe 영상입니다

[ Android TO-BE ]

KakaoTalk_Video_2025-10-26-02-04-15.mp4

[ IOS TO-BE ]

ScreenRecording_10-25-2025.19-01-18_1.mov

autoPlay ture 일 때 지진나는 문제

이 코드 보시면, 원래는 autoPlay 일 때도 transition 이 있었습니다.

requestAnimationFrame 는 16ms 마다 계속 실행되는데, CSS transition 은 천천히 이동중이어서 (거의 안 움직이는)
두 이동 시간의 타이밍 차이가 문제였던 것 같아요.

정확히 설명하자면,

Frame 2 (16ms)

offsetRef.current = 10.5%
setCarouselState({ offset: 10.5% })

화면 렌더링

 <div style={{
   transform: 'translateX(-10.5%)',
   transition: 'transform 0.5s ...'
 }}>

브라우저는

1. transform 이 -10.0% 에서 -10.5% 로 바뀌었네!
2. transition 이 0.5s 이니까 500ms 동안 이동시켜야지
3. CSS transition 시작 ( -10.0% 에서 500ms초 동안 -> -10.5% )

Frame 3 (32ms)

offsetRef.current = 11.0%
setCarouselState({ offset: 11.0% })

문제는 32ms 밖에 안 됐기 때문에 CSS transition 은 -10.016% 이정도 밖에 못 간 상태에서
다음 Frame 이 실행되는 바람에
새롭게 RAF 명령은 11.0% 로 가라는 명령을 받게 되면서
화면에서는

• -10.016% 위치에 있다가
• 갑자기 -11.0% 을 향해 이동
• 0.987% 를 500ms 걸쳐 이동하려고 함 -> 너무 느리게 됨.

그래서 즉 RAF 는 빠르게 증가시키는데, CSS transtion 이 천천히 따라가려고 하는 문제 때문에 슬라이드가 덜덜덜 떨리는 현상이 생겼던 것 같습니다.

✅ 해결

autoPlay일 때 transition: 'none' 을 적용해서 RAF 와 transition 이 충돌하지 않도록 설정했어요.
그랬더니 안드 아이오 모두 잘 작동하는 것을 확인할 수 있었습니다.

[ IOS AS-IS ]

ScreenRecording_10-26-2025.02-06-57_1.MP4

[ IOS TO-BE ]

ScreenRecording_10-26-2025.01-58-02_1.mov

[github-actions]

✅ Storybook이 배포되었습니다.
🔗 바로가기

[gwagjiug]

👍👍