문제 상황
- 디자이너가 제공한 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)과 실제 바운딩 박스 중심 불일치로, 동일 좌표에서도 사용자 눈에는 어긋나 보이는 현상이 발생.
해결 방법
- Figma 기준 정밀 치수 확정
- 트랙 높이, 사용 가능 폭, Thumb 실측 지름 및 기준선, 트랙 포인트(마커) 좌표를 px 단위로 명확히 계측.
- 필요한 에셋(Thumb/트랙/마커)을 해상도별(1x/2x/3x)로 재수출하며 여백을 통일.
- 값-픽셀 매핑 공식 고정
- 유효 트랙 길이(
usableWidth)에서 좌우 오프셋(패딩)을 제외하고, ( position = ((value - min) / (max - min)) * usableWidth + offset )으로 Thumb 좌표를 결정.
- step이 있는 경우, 드래그 값을 step 단위로 스냅(snap) 처리 후 좌표 변환.
- 제스처 처리 직접 구현
- Pan 제스처로 드래그 이동 → 값 환산 → 좌표 갱신을 구현하고, 범위 밖 이동은 클램프(clamp).
- 시각 중심 보정(visual centering)
- Thumb/마커 이미지의 시각 중심이 수학적 중심과 다를 경우, 보정 오프셋을 별도로 두어 1:1로 맞춤.
- 접근성/사용성 반영
- 터치 영역 확장(hitSlop), 포커스 가능, 접근성 레이블/값 읽기 등 UX 요소를 커버.
검증
- Figma 스크린샷을 반투명 오버레이하여 픽셀 단위로 오차를 확인하고, 주요 구간(최소/중간/최대 값, 마커 지점)에서 재검증.
- 다양한 해상도/밀도에서 스냅 및 트랙/Thumb 정렬이 동일하게 유지되는지 점검.
배운 점
- 특정 UI에서 "정확한 픽셀 매칭"이 핵심 요구일 경우, 범용 라이브러리 튜닝보다 커스텀 구현이 더 빠르고 확실할 수 있음.
- 값-픽셀 변환을 명확히 정의하고, 에셋의 시각 중심을 보정하면 미세한 정렬 이슈를 구조적으로 제거할 수 있음.
- 라이브러리 의존성을 줄이면 장기적으로 유지보수성과 커스터마이징 자유도가 높아짐.