[RN/Short] React Native 디바이스 별 폰트 사이즈 고정 설정 방법 : Text, TextInput

해당 글에서는 디바이스 별로 사용자 시스템에서 지정한 폰트 사이즈에 따라서 앱의 사이즈가 달라지기에 이에 따라서 앱 내에서 이를 고정하는 방법에 대해 알아봅니다.

 

1) 디바이스 별 사이즈 고정하기 : Text, TextInput

---

💡디바이스 별 사이즈 고정하기 : Text, TextInput

- 사용자 별로 디바이스에 대한 글자 크기를 지정할 수 있습니다. 그렇기에 각각 화면상에 보이는 글자 크기가 달라집니다.
- 앱에서 변화된 크기에 따라 디자인이 적용되면 좋겠지만, 이에 대해 고정하여서 동일한 글자 크기에 대해서 디자인을 적용하기 위해서 ‘앱 내에서 이를 고정하는 방법’에 대해 알아봅니다.

1. Android 글자 크기 확인 방법

---

💡Android 글자 크기 확인 방법

- 설정 > 디스플레이 > 글자 크기와 스타일 > 글자 크기

 
 
 

2. iOS 글자 크기 확인 방법

---

💡iOS 디바이스 글자 크기 적용 방법

- 설정 > 디스플레이 및 밝기 > 텍스트 크기

 
 
 

2) 디바이스 별 사이즈 고정하기 적용

---

 

1. App.tsx

---

💡App.tsx

- Text와 TextInput 컴포넌트의 글자 크기를 고정하는 예시입니다. 이는 앱이 최초 시작할 때, 아래의 코드가 실행되게 추가해 줍니다.

1. Text 적용 : 시스템 텍스트 크기를 무시하고 앱에서 지정한 크기를 사용함.

- Text.defaultProps가 없으면 빈 객체로 초기화합니다.
- allowFontScaling 속성을 false로 설정합니다. 이렇게 하면 시스템 폰트 크기 설정에 관계없이 Text 컴포넌트의 글자 크기가 고정됩니다.

2. TextInput 적용 : 시스템 텍스트 크기를 무시하고 앱에서 지정한 크기를 사용함.

- TextInput.defaultProps가 없으면 빈 객체로 초기화합니다.
- allowFontScaling 속성을 false로 설정하여 TextInput의 글자 크기도 고정시킵니다.


- 이를 통해서, Android에서는 14sp (스케일 독립 픽셀)로 지정되며, iOS에서는 14pt (포인트)의 기본 설정 값으로 지정됩니다.
- 기본적인 설정 크기이며, 특정 컴포넌트에 대해 다른 크기를 원한다면 style props의 fontSize를 통해서 지정할 수 있습니다.

import { Text, TextInput } from 'react-native';

// Text 적용 : 시스템 텍스트 크기를 무시하고 앱에서 지정한 크기를 사용함.
Text.defaultProps = Text.defaultProps || {};
Text.defaultProps.allowFontScaling = false;

// TextInput 적용 : 시스템 텍스트 크기를 무시하고 앱에서 지정한 크기를 사용함.
TextInput.defaultProps = TextInput.defaultProps || {};
TextInput.defaultProps.allowFontScaling = false;

 
 

2. App.tsx (+Typescript 적용)

---

💡App.tsx (+Typescript 적용)

- Text와 TextInput 컴포넌트의 글자 크기를 고정하는 예시입니다. 이는 앱이 최초 시작할 때, 아래의 코드가 실행되게 추가해 줍니다.
- 또한 Typescript에 맞게 Type을 지정하는 부분이 추가되었습니다.

1. Text 적용 : 시스템 텍스트 크기를 무시하고 앱에서 지정한 크기를 사용함.

- Text as TextWithDefaultProps 인터페이스로 변환합니다. 이를 통해 Text 컴포넌트에 defaultProps 속성을 추가합니다.
- Text.defaultProps가 없으면 빈 객체로 초기화합니다.
- allowFontScaling 속성을 false로 설정합니다. 이렇게 하면 시스템 폰트 크기 설정에 관계없이 Text 컴포넌트의 글자 크기가 고정됩니다.

2. TextInput 적용 : 시스템 텍스트 크기를 무시하고 앱에서 지정한 크기를 사용함.
- Text as TextInputWithDefaultProps 인터페이스로 변환합니다. 이를 통해 Text 컴포넌트에 defaultProps 속성을 추가합니다.
- TextInput.defaultProps가 없으면 빈 객체로 초기화합니다.
- allowFontScaling 속성을 false로 설정하여 TextInput의 글자 크기도 고정시킵니다.

- 이를 통해서, Android에서는 14sp (스케일 독립 픽셀)로 지정되며, iOS에서는 14pt (포인트)의 기본 설정 값으로 지정됩니다.
- 기본적인 설정 크기이며, 특정 컴포넌트에 대해 다른 크기를 원한다면 style props의 fontSize를 통해서 지정할 수 있습니다.

import { Text, TextInput } from 'react-native';

interface TextWithDefaultProps extends Text {
	defaultProps?: { allowFontScaling?: boolean };
}
interface TextInputWithDefaultProps extends TextInput {
	defaultProps?: { allowFontScaling?: boolean };
}

// Text 적용 : 시스템 폰트 크기를 무시하고 앱에서 지정한 크기를 사용함.
(Text as unknown as TextWithDefaultProps).defaultProps = (Text as unknown as TextWithDefaultProps).defaultProps || {};
(Text as unknown as TextWithDefaultProps).defaultProps!.allowFontScaling = false;

// TextInput 적용 : 시스템 폰트 크기를 앱에서 지정
(TextInput as unknown as TextInputWithDefaultProps).defaultProps = (TextInput as unknown as TextInputWithDefaultProps).defaultProps || {};
(TextInput as unknown as TextInputWithDefaultProps).defaultProps!.allowFontScaling = false;

 
 

3) 적용결과 화면

---

 

1. 시스템 내에서 글자 크기를 최대로 지정하였습니다

---

 
 

2. 앱을 실행하였을 때의 크기를 확인합니다(적용 이전)

---

💡 앱을 실행하였을 때의 크기를 확인합니다(적용 이전)

- UI 화면이 깨지는 부분이 발생합니다.

 
 
 

3. 앱을 실행하였을 때의 크기를 확인합니다(적용 이후)

---

💡앱을 실행하였을 때의 크기를 확인합니다(적용 이후)

- 아래와 같이 기본적으로 Text 값에 대해서 fontsize를 지정하지 않았기에 기본값으로 출력됨을 확인하였습니다.
- 이와 같이 고정된 상태에서 디자인 적용이 가능해집니다.

 
 
 
 
오늘도 감사합니다. 😀