해당 글에서는 디바이스 별로 사용자 시스템에서 지정한 폰트 사이즈에 따라서 앱의 사이즈가 달라지기에 이에 따라서 앱 내에서 이를 고정하는 방법에 대해 알아봅니다.
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를 지정하지 않았기에 기본값으로 출력됨을 확인하였습니다. - 이와 같이 고정된 상태에서 디자인 적용이 가능해집니다.
