react native flex:1 의 오류

사이드 프로젝트의 기능 중 달력을 만드는 부분이 있었다. 달력 레이아웃은 많이 구현했기 때문에 문제가 없을 것이라고 생각했는데, 정말 예상치 못한 오류가 있었다. 

 

달력을 배치하는 부분에서 아주 미세하게 7등분으로 나눠지지 않는 문제가 있었다. 

react native에서 화면을 가득 채우는 간단한 방법은 flex 속성을 사용하는 것이다. 여기서도 복잡한 기능이 있는게 아니다. 

<Parent style={{ flex: 1 }}>
  <Children style={{ flex: 1}} />
  <Children style={{ flex: 1}} />
  <Children style={{ flex: 1}} />
  <Children style={{ flex: 1}} />
  <Children style={{ flex: 1}} />
  <Children style={{ flex: 1}} />
  <Children style={{ flex: 1}} />
</Parent>

부모 요소에게 flex: 1을 주고 자식 요소에게도 flex: 1을 주면 간단하게 해결된다. 지금까진 전혀 문제가 없었다. 

그래서 동일하게 작업을 한 결과는 다음과 같다. 

붉은 배경은 Children에 해당하는 요소에게 배경색을 줬다. 

보는 것처럼 얇은 하얀색 여백을 확인할 수 있다. 이론대로라면 꽉차서 전부 붉은 색이 되어야 하는데 어째서 이런 오류가 발생한 것일까? 

 

그 이유는 디바이스마다 픽셀의 밀도가 미세하게 다르기 때문에 이런 문제가 발생하는 것이다. 

생각해보면 100을 7로 나누면 14.2857142857라는 값이 나온다. 

하지만 이것조차 검산하면 100이 되지 않는다. 즉, 딱 떨어지는 값이 아니기 때문에 여백이 생길 수 밖에 없다고 생각한다.  그렇다면 어떤 방법으로 해결할 수 있을까 생각해봤는데, 미세하게 차이가 난다면 좌우 여백을 더 줘서 문제가 발생하지 않게 하면 되지 않을까? 생각이 들었다. 

 

그래서 부모 요소에게 padding을 좌우 0.5값을 주었다. 

그렇게 했을 때 여백이 없고 제대로 화면에 나타나는 것을 확인할 수 있다. 

이게 완벽한 방법이 아니라는 것은 나도 알고 있다. 디바이스마다 픽셀 밀도나 화면 비율이 다르기 때문에, 특정한 환경에서는 여전히 미세한 여백이 발생할 가능성이 있다. 이번 문제를 통해 단순한 Flexbox 배치라도 디바이스 특성을 고려한 세심한 처리가 필요하다는 점을 다시 한번 느끼게 되었다.

 

앞으로는 다양한 디바이스에서의 테스트를 강화하고, 반응형 레이아웃에서도 일관된 결과를 얻을 수 있는 방법을 연구해 보고자 한다. 이번 경험이 더욱 완성도 높은 UI를 만드는 데 밑거름이 될 것이라 생각한다.