IOS px에 소숫값을 주는 경우 발생할 수 있는 문제
iOS에서는 UI 요소의 위치와 크기를 29.674825처럼 소수점 단위로 정밀하게 지정할 수 있지만, 실제 화면은 아이폰 SE 1세대(640×1136)나 아이폰 11(828×1792)처럼 고정된 픽셀 수로 구성됩니다. 이로 인해 발생하는 핵심 문제와 해결 방식을 세 가지 단계로 설명드립니다.
1. 서브픽셀 렌더링의 한계
iOS는 원본 픽셀을 여러 개로 분할해 소수점 위치를 표현하려 시도하지만(안티앨리어싱), 이는 요소를 흐릿하게 만드는 부작용이 있습니다. 예를 들어 0.5픽셀 위치에 선을 그리면 두 픽셀에 걸쳐 반투명하게 표시되어 선명도가 떨어집니다.
2. 개발자의 수동 해결 시도
개발자들은 흐릿함을 방지하기 위해 수동으로 좌표값을 반올림하곤 합니다. 하지만 여러 요소를 조합할 때 다음과 같은 문제가 발생합니다:
- 부모 요소에서 반올림 → 자식 요소에서 추가 반올림 → 누적 오차 발생
- 1픽셀 테두리가 2픽셀로 늘어나거나 아예 사라지는 현상
3. React Native의 자동화 솔루션
리액트 네이티브는 이 문제를 체계적으로 해결하기 위해 세 가지 전략을 사용합니다:
- 자바스크립트 레이어: 모든 계산(레이아웃 엔진 포함)에서 정밀한 소수점 연산 유지
- 네이티브 전환 시점: UI 요소를 실제 화면에 배치하는 순간에만 반올림 실행
- 기준점 통일: 부모가 아닌 루트(root) 요소를 기준으로 반올림하여 오차 누적 방지
이 방식은 마치 건축에서 모든 측량을 원점 기준으로 처리하는 것과 유사합니다. 각 단계에서 지역적으로 반올림하면 마치 줄자를 여러 번 접었다 펼치듯 오차가 쌓이지만, 원점에서 한 번에 처리하면 정확도를 유지할 수 있습니다. 개발자는 복잡한 수학적 조정 없이도 선명한 UI를 구현할 수 있게 되는 것이죠.
참고: https://reactnative.dev/docs/pixelratio
PixelRatio · React Native
PixelRatio gives you access to the device's pixel density and font scale.
reactnative.dev