스와이프 탭으로 UX까지 배우는 캐러셀 유랑기

오랜만에 돌아온 블로그,, 요즘 근황은 또 다른 팀플을 하고있느라 정신이 없다

문제 해결을 해갈때마다 블로그에 꼭 회고해야지라고 마음속으로 다짐했지만 실제로 행동하기까진 쉽지 않은것같다

오늘이야말로 꼭 써야겠단 다짐으로..! 트러블슈팅을 해보자 레츠고

 

스와이프되는 카테고리 탭을 구현해야한다

디자인시안

이번 팀플에서 본격적으로 게시판 CRUD 개발을 맡게되었는데

이런 스와이프 되는 모양의 카테고리 탭을 만들어야 하는 상황이었다.

처음에는 이 스와이프 동작을 라이브러리 없이 직접 구현할지 고민했다.

 

문제가 되는 영역이 이 컴포넌트 하나뿐이었기 때문에, JS 이벤트로 가볍게 처리하는 방식도 충분히 가능해 보였다.

그래서 실제로 직접 구현을 1차 시도해봤다.

<div
  className="tab-wrap flex gap-2 overflow-x-auto mt-5 ml-6 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
  onWheel={(event) => {
    event.currentTarget.scrollLeft += event.deltaY;
  }}
>

스크롤 y는 숨기고 x축만 허용했고 pc에서는 가로스크롤이 보기싫어서 머리를 굴리다가
onWheel 이벤트로 마우스휠을 굴리면 옆으로 굴러가는 방식이었다.

 

 

UT결과는 불편함 🥲

 

하지만 유저들에게 테스트를 해보니 휠로 넘기는게 꽤 불편하다는 피드백을 받았다 ㅠ

꼭 스와이프되어야만 하는 상황이 된것이다. 어쩔수없이 라이브러리 도입을 알아보았다.

 

캐러셀 라이브러리를 검토하기 시작했다. 후보는 아래 3가지!

• shadcn 내장 캐러셀
• slick
• swiper.js

이미 프로젝트에서 shadcn을 사용하고 있었기 때문에 내장 캐러셀을 그대로 쓰는 것도 고려했다.

그러던 중 shadcn 캐러셀이 Embla 기반으로 동작한다는 걸 알게 됐다

 

 

Embla 을 선택한 이유

이번 작업에서 필요한기능은 단순했다. 드래그기반 스와이프와 접근성

그렇기에 최대한 가벼우면서도 기본적인 캐러셀 기능을 하는 라이브러리가 필요했다.

npm trends 조사결과

 

조사해보니 shadcn이 대중화되서인지 embla가 압도적었다.

그렇지만 shadcn 캐러셀 컴포넌트를 굳이 설치해서까지는 필요없었다고 판단.

어짜피 shadcn을 썼어도 Embla 의존성은 설치했어야했기때문에

shadcn은 쓰지않고 Embla 하나만으로 구현이 충분했다

 

 

사용법은 다른라이브러리와 비슷하게 useEmblaCarousel 전용훅을 이용했고, 각 속성값을 이용해 간단하게 구현가능!

디테일한건 공식문서에서 확인~

https://www.embla-carousel.com/

Home

 

그리고 내가 선택한 탭 index를 useMemo에 저장시켜 탭을 선택한후에 자연스럽게 애니메이션되면서 활성화될수있도록

useEffect와 scrollTo를 활용했다.

 

 

그런데 또 문제발견 -  touch action

코드래빗의 리뷰

PR올리고 코드리뷰 받았더니 touch action이란것을 추가하라고 한다.

그런게 있는지도 몰랐는데 알아보니 모바일에서 x 스크롤과 y스크롤 제스처가 혼용되는것을 방지하는 속성이라고 하더라

<div ref={emblaRef} className="overflow-hidden [touch-action:pan-y_pinch-zoom]">

바깥 래퍼에 테일윈드 유틸로 부랴부랴 넣어서 해결완..

 

완성결과

이렇게 세로로 스크롤될일도 걱정도 막고 스무스한 너낌으로 스와이프되는 탭을 만들수있었다..!

 

 

또하나 새롭게 알게된 사실...! 접근성에는 모양도 중요하다는 것!!

처음에는 “포커스가 잡히기만 하면 충분하다”고 생각했는데,

실제로는 포커스의 ‘모양’도 사용자 경험에 큰 영향을 준다는 것이었다.

 

버튼에 적용된 border-radius와

포커스 스타일이 어긋날 경우, 사용자가 인터랙션 대상의 범위를 직관적으로 인지하기 어려웠다.

 

그래서 포커스가 단순히 보이기만 하는 것이 아니라,

컴포넌트의 형태와 일관되게 인식되도록 border-radius를 함께 조정했다.

 

 

마무리

단순 라이브러리 캐러셀이라고 생각했지만 실제로는 사용성, 접근성, UX까지 챙기느라 생각보다 쉽지않았던 과정이었다

역시 직접 부딪혀보는것만 해도 배울게 정말 많다는것을 깨달은거같다. 팀플 쵝오👍