[React Native] NotoSans 사용 시 예상치 못한 패딩 문제 해결하기 (feat. Android)

안녕하세요. 모리스입니다. 😄

오늘은 React Native로 앱 UI를 개발하다 보면 예기치 못한 부분에서 레이아웃이 어긋나게 되는데..

저는 styled component로 AOS에서 font를 적용했을 때 원치 않는 padding이 발생하는 문제 였어요.

결론부터 말하자만 문제의 원인은..

Text 컴포넌트에 적용된 font 자체의 padding입니다.

자, 이제 조금 더 자세하게 들여다볼까요?

문제 상황

텍스트 버튼에 일반적으로 많이 쓰는 폰트인 NotoSans 폰트를 다음과 같이 적용했어요.

vehicleText: {
  fontFamily: FontFamily.notoSansRegular,
  fontSize: 32.0,
  fontWeight: 'normal',
  fontStyle: 'normal',
  letterSpacing: -0.5,
  color: COLOR_PALETTE.BLACK,
}

버튼은 텍스트를 감싸는 container 뷰에 padding을 주고, 그 안에 Text를 배치하는 구조였죠.

vehicleInfoContainer: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  paddingHorizontal: 20,
}

하지만 이상하게도 버튼의 텍스트가 제가 설정한 padding보다 더 여유 있게 보였고, 상하 간격이 미묘하게 어긋났습니다.

원인 분석: NotoSans의 내장 Padding

폭풍 구글링을 통해 알아본 결과,
NotoSans 폰트는 자체적으로 기본적인 위아래 padding을 포함하고 있었어요.

즉, 개발자가 아무런 padding을 주지 않았다고 해도
폰트 자체의 디자인으로 인해 불필요한 여백이 생기는 것..!

 

그럼 왜 AOS에서만 추가적인 font padding이 발생되냐..🥲

그 이유는 마지막에 포스트 마지막에 설명할게요!

---

해결 방법: includeFontPadding 옵션 사용하기

React Native의 <Text> 컴포넌트에는 includeFontPadding이라는 속성이 있어요.
이 속성을 false로 설정하면,
폰트의 기본 padding을 무시하고 순수한 텍스트 높이만으로 렌더링 돼요.😁

vehicleText: {
  fontFamily: FontFamily.notoSansRegular,
  fontSize: 32.0,
  fontWeight: 'normal',
  fontStyle: 'normal',
  letterSpacing: -0.5,
  color: COLOR_PALETTE.BLACK,
  includeFontPadding: false,
}

이렇게 설정해 주면,
버튼 텍스트가 container의 padding 안에 정확히 내가 의도한 간격으로 배치되는 걸 볼 수 있어요.

---

 

그럼 왜 iOS는 fit 하게 나오는데 AOS에서만 font padding이 적용되는 걸까요?

이건 OS별 렌더링 하는 방식의 차이에 있어요.

iOS는 기본적으로 font padding을 포함하지 않고, 글자 높이에 맞게 렌더링 해요.

그래서 iOS에서는 includeFontPadding 옵션을 기본적으로 무시해요.

 

반대로 AOS에서는 기본적으로 font 상단, 하단의 padding을 포함해서 렌더링 해요.

그래서 Text 컴포넌트를 감싸는 View와의 정렬이 어긋나는 경우가 생기는 거예요.

이때 includeFontPadding 옵션을 false로 설정하면,

iOS의 렌더링처럼 font의 상단, 하단 영역의 padding 무시하고 렌더링 해요.

 

💡 React Native 공식 문서에도 includeFontPadding은 다음과 같이 설명되어 있어요:

includeFontPadding: (Android only) Set to false to remove extra space around text. Default: true

 

블로그 이사하면서 오랜만에 RN 내용을 다시 보니 감회가 새롭네요.🤣

신입 시절 작성했던 첫 기술 노트라 부족한 점이 많아서 조~~금 첨삭했어요.

 

부족하거나 잘 못된 부분이 있다면 댓글로 혼내주세요!!

오늘도 긴 글 읽어주셔서 감사합니다.