Figma 시안 정밀 대응을 위한 커스텀 슬라이더 구현

문제 상황

• 디자이너가 제공한 Figma 시안 기준으로 슬라이더 컴포넌트를 구현하려고 react-native-community/slider를 사용했으나, Thumb(조절 핸들)과 트랙 위 포인트의 위치가 Figma와 정확히 일치하지 않는 문제가 발생.
• 라이브러리 옵션을 조정해도 미세한 정렬 오차를 해소하기 어려워, 픽셀 단위 정밀 매칭이 필요한 요구사항을 충족하지 못함.

환경

• 프로젝트: 모바일 UI 컴포넌트 구현
• 스택: React Native, TypeScript
• 라이브러리 시도: react-native-community/slider

증상/로그

시각적 정렬 문제: Thumb 중심과 트랙 상의 기준 점(마커) 위치가 Figma와 1~수 px 단위로 불일치.
개발/빌드 에러 로그는 없고, 렌더링 결과의 시각적 오차가 핵심 이슈.

원인 분석

• 범용 슬라이더 라이브러리는 내부 레이아웃, 최소 터치 영역(hitSlop), 트랙 높이/패딩 처리 등으로 인해 Thumb 중심 좌표 계산이 디자인 명세와 1:1 매칭되기 어려움.
• 에셋의 시각적 중심(visual center)과 실제 바운딩 박스 중심 불일치로, 동일 좌표에서도 사용자 눈에는 어긋나 보이는 현상이 발생.

해결 방법

1. Figma 기준 정밀 치수 확정
   • 트랙 높이, 사용 가능 폭, Thumb 실측 지름 및 기준선, 트랙 포인트(마커) 좌표를 px 단위로 명확히 계측.
   • 필요한 에셋(Thumb/트랙/마커)을 해상도별(1x/2x/3x)로 재수출하며 여백을 통일.
2. 값-픽셀 매핑 공식 고정
   • 유효 트랙 길이(usableWidth)에서 좌우 오프셋(패딩)을 제외하고, ( position = ((value - min) / (max - min)) * usableWidth + offset )으로 Thumb 좌표를 결정.
   • step이 있는 경우, 드래그 값을 step 단위로 스냅(snap) 처리 후 좌표 변환.
3. 제스처 처리 직접 구현
   • Pan 제스처로 드래그 이동 → 값 환산 → 좌표 갱신을 구현하고, 범위 밖 이동은 클램프(clamp).
4. 시각 중심 보정(visual centering)
   • Thumb/마커 이미지의 시각 중심이 수학적 중심과 다를 경우, 보정 오프셋을 별도로 두어 1:1로 맞춤.
5. 접근성/사용성 반영
   • 터치 영역 확장(hitSlop), 포커스 가능, 접근성 레이블/값 읽기 등 UX 요소를 커버.

검증

• Figma 스크린샷을 반투명 오버레이하여 픽셀 단위로 오차를 확인하고, 주요 구간(최소/중간/최대 값, 마커 지점)에서 재검증.
• 다양한 해상도/밀도에서 스냅 및 트랙/Thumb 정렬이 동일하게 유지되는지 점검.

배운 점

• 특정 UI에서 "정확한 픽셀 매칭"이 핵심 요구일 경우, 범용 라이브러리 튜닝보다 커스텀 구현이 더 빠르고 확실할 수 있음.
• 값-픽셀 변환을 명확히 정의하고, 에셋의 시각 중심을 보정하면 미세한 정렬 이슈를 구조적으로 제거할 수 있음.
• 라이브러리 의존성을 줄이면 장기적으로 유지보수성과 커스터마이징 자유도가 높아짐.