react-native

IOS px에 소숫값을 주는 경우 발생할 수 있는 문제

RNDK 2025. 4. 4. 08:46

iOS에서는 UI 요소의 위치와 크기를 29.674825처럼 소수점 단위로 정밀하게 지정할 수 있지만, 실제 화면은 아이폰 SE 1세대(640×1136)나 아이폰 11(828×1792)처럼 고정된 픽셀 수로 구성됩니다. 이로 인해 발생하는 핵심 문제와 해결 방식을 세 가지 단계로 설명드립니다.

 

1. 서브픽셀 렌더링의 한계
iOS는 원본 픽셀을 여러 개로 분할해 소수점 위치를 표현하려 시도하지만(안티앨리어싱), 이는 요소를 흐릿하게 만드는 부작용이 있습니다. 예를 들어 0.5픽셀 위치에 선을 그리면 두 픽셀에 걸쳐 반투명하게 표시되어 선명도가 떨어집니다.

 

2. 개발자의 수동 해결 시도
개발자들은 흐릿함을 방지하기 위해 수동으로 좌표값을 반올림하곤 합니다. 하지만 여러 요소를 조합할 때 다음과 같은 문제가 발생합니다:

  • 부모 요소에서 반올림 → 자식 요소에서 추가 반올림 → 누적 오차 발생
  • 1픽셀 테두리가 2픽셀로 늘어나거나 아예 사라지는 현상

3. React Native의 자동화 솔루션
리액트 네이티브는 이 문제를 체계적으로 해결하기 위해 세 가지 전략을 사용합니다:

  1. 자바스크립트 레이어: 모든 계산(레이아웃 엔진 포함)에서 정밀한 소수점 연산 유지
  2. 네이티브 전환 시점: UI 요소를 실제 화면에 배치하는 순간에만 반올림 실행
  3. 기준점 통일: 부모가 아닌 루트(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